WebRTC 如何推送本地视频流

一、需求

使用 webrtc 协议做直播，常见的音视频源是摄像头和麦克风，高级一点的就是桌面分享。虽然使用桌面分享可以实现推送本地流（原理就是对屏幕录制），但依赖本地播放器，并且观众可以看到主播的任何操作。

有一种伪直播需求，需要将本地视频无感知推送给用户，让用户感觉就像直播一样。

使用webrtc协议，大多数情况是在浏览器中做主播端。众所周知，出于安全和隐私的原因，Web 应用程序不能直接访问用户设备上的文件。那么如何将本地视频源进行加载到浏览器并推送出去呢？

二、核心API

HTMLCanvasElement.captureStream()

该方法返回一个CanvasCaptureMediaStream实时视频捕获的画布。

使用例子：

//获取所需要截取媒体流的canvas element
var canvasElt = document.querySelector('canvas'); // 或者 video 标签

//截取到媒体流
var stream = canvasElt.captureStream(25); // 25 FPS

//使用媒体流
// E.g.使用RTCPeerConnection来传输给其它的电脑
// 下面的pc是其他地方创建的一个RTCPeerConnection
pc.addStream(stream);

通过以上例子，是不是恍然大雾。

此时我们的方案可以是：

上传一段视频到服务器或者云存储
使用 video 标签加载视频
使用 captureStream 捕获视频流
使用 addStream 将视频流发布

此时解决了推送视频流，但是要推送本地视频怎么做呢？

三、最终解决方案

出于安全和隐私的原因，Web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件，可以通过使用 input file 和 FileReader 来实现。虽然 FileReader 可以读文件，但是需要经过base-64编码，如果读大文件肯定会影响效率。所以我们只能考虑 input file，可以使用 URL.createObjectURL 对视频进行预览。

那么我的最终方案就是使用 captureStream + input file预览 模式来解决这个问题。

简要代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
    <video width="500" controls>
        <source src="my_video.mp4" id="video_here">
    </video>
    <input type="file" name="file[]" class="file_video" accept="video/*">
    <script>
        $(document).on("change", ".file_video", function (evt) {
            var $source = $('#video_here');
            $source[0].src = URL.createObjectURL(this.files[0]);
            $source.parent()[0].load();
        })
    </script>
</body>

</html>

四、总结

通过以上步骤，我们可以总结如下步骤：

使用 input 标签进行文件选择
使用 video标签配合 input标签进行视频预览
使用 captureStream 捕获视频流
使用 addStream 将视频流发布

原文 WebRTC 如何推送本地视频流 - 知乎

★文末名片可以免费领取音视频开发学习资料，内容包括（FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，srs）以及音视频学习路线图等等。

见下方!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓