系列文章目录
第一篇 基于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的其它内容，敬请期待！
如果你对本篇文章有任何问题或建议，欢迎在评论区留言讨论！
你好，我是阿灿，慢慢理解世界，慢慢更新自己，成长，成为更好的自己。