WebRTC学习二：WebRTC音视频数据采集

系列文章目录

第一篇基于SRS 的 WebRTC 环境搭建

第二篇基于SRS 实现RTSP接入与WebRTC播放

第三篇 centos下基于ZLMediaKit 的WebRTC 环境搭建

第四篇 WebRTC 学习一：获取音频和视频设备

第五篇 WebRTC学习二：WebRTC音视频数据采集

文章目录

系列文章目录
前言
一、获取音视频流
二、完整实例
- 1.页面结构
- 2.JavaScript代码
三、测试与调试
总结

前言

在前面的博文《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的其它内容，敬请期待！

如果你对本篇文章有任何问题或建议，欢迎在评论区留言讨论！

你好，我是阿灿，慢慢理解世界，慢慢更新自己，成长，成为更好的自己。