系列文章目录
第一篇 基于SRS 的 WebRTC 环境搭建
第二篇 基于SRS 实现RTSP接入与WebRTC播放
第三篇 centos下基于ZLMediaKit 的WebRTC 环境搭建
第四篇 WebRTC 学习一：获取音频和视频设备
第五篇 WebRTC学习二：WebRTC音视频数据采集
文章目录
前言
在前面的博文《WebRTC获取音视频设备》中，我们介绍了如何利用WebRTC技术来获取本地的音视频设备。本文将在此基础上，进一步探讨如何使用WebRTC进行音视频数据的采集，并实时展示在网页中。我们将通过一个简单的HTML页面和对应的JavaScript代码实现这一功能。
一、获取音视频流
在WebRTC中，获取音视频流的核心方法是getUserMedia。这个方法允许我们请求访问用户的音视频设备，并获取相应的媒体流。
1.设置请求的媒体流参数
在调用getUserMedia时，我们需要传入一个constraints对象，该对象定义了所需的媒体类型及其相关参数。例如，以下的constraints设置请求获取视频流和音频流：
const constraints ={
video: true,
audio: true
};
2.调用getUserMedia
调用navigator.mediaDevices.getUserMedia来请求访问设备并获取媒体流。这个调用是异步的，成功时返回一个包含音视频数据的MediaStream对象。
dnavigator.mediaDevices.getUserMedia(constraints).then(gotMediaStream).catch(handleError);
3.处理获取到的媒体流
当getUserMedia成功获取到媒体流时，我们可以将其设置为标签的srcObject属性，以在页面上实时播放：
function gotMediaStream(stream){const video = document.querySelector('video#player');
video.srcObject = stream;}
4.处理错误
在获取媒体流的过程中，可能会遇到各种错误，如用户拒绝授权、设备不可用等。我们需要合理处理这些错误：
function handleError(err){
console.error('获取媒体流失败:', err.name +': '+ err.message);}
二、完整实例
1.页面结构
首先，我们需要一个HTML页面来展示视频流。页面结构非常简单，只有一个标签用于播放实时视频流。index.html代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebRTC capture video and audio</title></head><body><video autoplay playsinline id="player"></video><script src="./js/client.js"></script></body></html>
在这个页面中，我们定义了一个标签，并设置了autoplay和playsinline属性，以确保视频能够自动播放且在移动设备上也能正常显示。
2.JavaScript代码
接下来，我们编写JavaScript代码来实现音视频流的采集和播放。代码放在js/client.js文件中：
'use strict';
var videoplay = document.querySelector('video#player');
function gotMediaStream(stream){
videoplay.srcObject = 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: true
};
navigator.mediaDevices.getUserMedia(constraints).then(gotMediaStream).catch(handleError);}
三、测试与调试
在浏览器中打开上述HTML文件，如果一切正常，你应该能够在页面上看到实时视频流，并且能够通过麦克风听到音频输入。你可以通过调整constraints对象中的参数，如分辨率、帧率等，来进一步定制获取的音视频流。我这边运行结果如下:
总结
通过本文，我们学习了如何使用WebRTC的getUserMedia方法获取音视频设备的数据流，并将其显示在网页上。这是构建实时音视频通信应用的关键步骤之一。在接下来的文章中，我们将继续探讨WebRTC的其它内容，敬请期待！
如果你对本篇文章有任何问题或建议，欢迎在评论区留言讨论！
你好，我是阿灿，慢慢理解世界，慢慢更新自己，成长，成为更好的自己。
版权归原作者 程序员阿灿 所有， 如有侵权，请联系我们删除。