WebRTC音视频采集和播放示例及MediaStream媒体流解析

WebRTC音视频实时互动指南：媒体流解析与实战示例

最新推荐文章于 2025-10-08 04:47:20 发布

原创

最新推荐文章于 2025-10-08 04:47:20 发布 · 4.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#音视频 #webrtc #媒体

本文详细介绍了如何使用WebRTC进行音视频采集，包括同时打开摄像头和麦克风的示例代码，以及MediaStream对象的创建、管理与关键方法。涵盖了getUserMedia API的深入解析和常见应用场景，适合开发者快速入门和实践。

WebRTC音视频采集和播放示例及MediaStream媒体流解析

1. 示例代码——同时打开摄像头和麦克风，并在页面显示画面和播放捕获的声音

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC Demo</title>
</head>
<body>
<video id="local-video" autoplay playsinline></video>
<button id="showVideo">打开音视频</button>
</body>

<script>
    const constraints = {
   
   
        audio: true,
        video: {
   
   width: 640, height: 480}
    }

    // 处理打开摄像头成功
    function handleSuccess(mediaStream) {
   
   
        const video = document.querySelector("#local-video");
        video.srcObject = mediaStream;
    }

    // 异常处理
    function handleError(error) {
   
   
        console.error("getUserMedia error: " + error)
    }

    function onOpenAV(e) {
   
   
        navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
    }

    document.querySelector("#showVideo").addEventListener("click", onOpenAV)

</script>
</html>

效果

2. API解析

1. mediaDevices

mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。
语法：

var mediaDevices = navigator.mediaDevices;

MediaDevices 是一个单例对象，可以直接使用此对象的成员，例如通过调用navigator.mediaDevices.getUserMedia()。

2. MediaStream媒体流

navigator.mediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream（媒体流），媒体流是信息的载体，代表了一个媒体设备的内容流。
媒体流可以被采集、传输和播放，通常一个媒体流包含多个媒体轨道，如音频轨道、视频轨道。
媒体流使用MediaStream接口来管理，通常获取媒体流的方式有如下几种。
a. 从摄像头或者话筒获取流对象。
b. 从屏幕共享获取流对象。
c. 从canvas（HTMLCanvasElement）内容中获取流对象。
d. 从媒体元素（HTMLMediaElement）获取流对象。
上述方法获取的媒体流都可以通过WebRTC进行传输，并在多个对等端之间共享。
返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。
若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。
常见用法：

navigator.mediaDevices.getUserMedia(constraints)
.then(fu

最低0.47元/天解锁文章

WebRTC音视频采集和播放示例及MediaStream媒体流解析

WebRTC音视频采集和播放示例及MediaStream媒体流解析

目录

1. 示例代码——同时打开摄像头和麦克风，并在页面显示画面和播放捕获的声音

2. API解析

1. mediaDevices

2. MediaStream媒体流