WebRTC音视频数据采集六、第一节 WebRTC音视频数据采集

技术2022-07-10 137

今天我来看一下音视频采集的API,这个和我们上次所说的enumerateDevices是很类似的

// 基本格式 var promise = navigator.mediaDevices.getUserMedia(constraints);

它也是返回一个Promise，调用的方式也很类似，这个方法里面有个重要的参数；这个constraints是怎么定义的，我们下面看一下

MediaStreamConstraints

dictionary MediaStreamConstraints { (boolean or MediaTrackConstraints) video = false; (boolean or MediaTrackConstraints) audio = false; }

它就是一个MediaStreamConstraints类型，这个类型比较特别，在这个类型里面有两个元素，一个是video一个是audio,也就是说分别对video和audio做一些限制，也就是说它既可以是布尔类型也可以是MediaTrackConstraints复杂媒体类型，

如果他是布尔型的话，video和audio都是true的话，说明既有视频数据又有音频数据，如果我只要其中的一项，只要音频，那就是audio等于true,video等于false，非常的简单。

另一方面你把他当作MediaStreamConstraints这种复杂类型的话，也就是说你可以设置一些具体的控制了，比如说对于视频你可以设置它的分辨率，比如给他设置成640*480，然后是 720P或者1080P等这些都可以设置。你还可以设置它的帧率，比如15帧或者25帧、30帧。同样的对于音频来说，你也可以设置音频相关的，比如音频的延迟性是多少，音量的大小，是单声道还是双声道等等都可以进行控制，具体的设置我们后续会详细的介绍。

今天我们来看看如何通过这个API采集到音频和视频数据。

创建一个mediastream文件夹，获取第一个流，这个流和轨的概念在之前已经介绍过了，在一个流中是可以包含许多条轨的，每一条轨也就是一种媒体数据，比如音频、视频，可以是多路音频多路视频组成一个stream, 首先我们建立一个index.html

<html> <head> <title>捕获音视频数据 WebRTC capture video and audio</title> </head> <body>  <video autoplay playsinlin id="player"></video> <script src="./js/client.js"></script> </body> </html>

我们引入client.js来调用API，通过这个API来通过webrtc核心层去捕获音视频数据，最终输送给video播放处理，这样就实现了我们的一个实例。

client.js

'use strict' // 获取video标签 var videoplay = document.querySelector('video#player'); // 获取到流做什么，在gotMediaStream方面里面我们要传人一个参数，也就是流， // 这个流里面实际上包含了音频轨和视频轨，因为我们通过constraints设置了要采集视频和音频 // 我们直接吧这个流赋值给HTML中赋值的video标签 function gotMediaStream(stream){ videoplay.srcObject = stream; // 指定数据源来自stream,这样视频标签采集到这个数据之后就可以将视频和音频播放出来 } function handleError(err){ console.log('getUserMedia error:', err); } // 判断浏览器是否支持 if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){ console.log('getUserMedia is not supported!'); }else{ var constraints = { // 表示同时采集视频金和音频 video : true, audio : false } navigator.mediaDevices.getUserMedia(constraints) .then(gotMediaStream) .catch(handleError); }

server.js

'use strict' var http = require('http'); var https = require('https'); var fs = require('fs'); var serveIndex = require('serve-index'); var express = require('express'); var app = express(); //顺序不能换 app.use(serveIndex('./public')); app.use(express.static('./public')); var options = { key : fs.readFileSync('./cert/1557605_www.learningrtc.cn.key'), cert : fs.readFileSync('./cert/1557605_www.learningrtc.cn.pem') } var https_server = https.createServer(options, app); https_server.listen(443, '0.0.0.0'); var http_server = http.createServer(app); http_server.listen(80, '0.0.0.0');

1557605_www.learningrtc.cn.key

1557605_www.learningrtc.cn.pem

运行 node server.js

打开https://0.0.0.0/mediastream/index.html

总结：

今天我们知道了通过var promise = navigator.mediaDevices.getUserMedia(constraints);可以获取到音频和视频的数据，其中var constraints可以对音频和视频进行各种限制。

Processed: 0.011, SQL: 9

WebRTC音视频数据采集 六、第一节 WebRTC音视频数据采集

WebRTC音视频数据采集六、第一节 WebRTC音视频数据采集