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

系列文章目录

第一篇基于SRS 的 WebRTC 环境搭建
第二篇基于SRS 实现RTSP接入与WebRTC播放
第三篇 centos下基于ZLMediaKit 的WebRTC 环境搭建
第四篇 WebRTC 学习一：获取音频和视频设备
第五篇 WebRTC学习二：WebRTC音视频数据采集

文章目录

系列文章目录
前言
一、获取音视频流
- 1.设置请求的媒体流参数
- 2.调用getUserMedia
- 3.处理获取到的媒体流
- 4.处理错误
二、完整实例
- 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);
}