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

最新推荐文章于 2024-05-09 00:15:00 发布

xyphf_和派孔明

最新推荐文章于 2024-05-09 00:15:00 发布

阅读量2.4k

点赞数

分类专栏： WEBRTC相关

本文链接：https://blog.csdn.net/xyphf/article/details/107054239

版权

WEBRTC相关专栏收录该内容

61 篇文章 53 订阅

订阅专栏

今天我来看一下音视频采集的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  表示在浏览器页面中播放而不是调用第三方工具
     -->
    <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可以对音频和视频进行各种限制。

xyphf_和派孔明

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebRTC音视频数据采集六、第一节 WebRTC音视频数据采集

今天我来看一下音视频采集的API,这个和我们上次所说的enumerateDevices是很类似的// 基本格式var promise = navigator.mediaDevices.getUserMedia(constraints);它也是返回一个Promise，调用的方式也很类似，这个方法里面有个重要的参数；这个constraints是怎么定义的，我们下面看一下MediaStreamConstraintsdictionary MediaStreamConstraints {
复制链接

扫一扫