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

超、凢脫俗 2023-02-21 13:00 13阅读 0赞

今天我来看一下音视频采集的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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

运行 node server.js

打开[https://0.0.0.0/mediastream/index.html][https_0.0.0.0_mediastream_index.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1][]

总结 ：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200701012108712.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70
[https_0.0.0.0_mediastream_index.html]: https://0.0.0.0/mediastream/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200701011830388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm,size_16,color_FFFFFF,t_70