webRTC学习系列之——WebRTC录制媒体流并下载

最新推荐文章于 2024-07-08 18:21:10 发布

码代码的跳跳虎

最新推荐文章于 2024-07-08 18:21:10 发布

阅读量1.4k

点赞数 3

分类专栏： WebRTC 文章标签： WebRTC javascript

本文链接：https://blog.csdn.net/qq_42842692/article/details/102846678

版权

WebRTC 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

WebRTC使用MediaRecoder录制媒体流并下载

MediaRecoder

	var mediaRecorder = new MideaRecoder(stream,options);

参数说明

stream	媒体流，可以从getUserMedia、、或者获取
options	限制选项

限制选项说明

mimeType	( video/webm);(audio/webm);(video/webm);(codecs=vp8);(video/webm;codecs=h264);(audio/webm;codecs=opus)
audioBitsPerSecond	音频码率
videoBitsPerSecond	视频码率（越多清晰度越高）
bitsPerSecond	整体码率

对于mimeType,每个括号是的一种约束，也可以将webm改为mp4，codesc的种类必须要得到webm的支持

API

//开始录制媒体，timeslice是可选的，如果设置了灰暗时间切片存储数据
MediaRecoder.start(timeslice)

//停止录制，此时或出发包括最终Blob数据(数据存储区域)的dataavailable事件
MediaRecoder.stop()

MediaRecoder.pause		//暂停录制
MediaRecoder.resume() 		//恢复录制
MediaRecoder.isTypeSupported() 		//检查是否支持格式

事件

//每次记录一定时间的数据（如果没有指定时间片，则记录整个数据）时会定期触发
MediaRecoder.ondataavailable

//有错误发生时触发
MediaRecoder.onerror

js存储数据的方式

1、字符串

2、Blob（使用这种）

3、ArrayBuffer

4、ArrayBufferView

在学习录制媒体流之前，我们先来认识一个新的API——getDisplayMedia( )，通过这个API，我们可以捕捉桌面并获取视频流（此功能需要较新版本的Chrome）

//contraints与getUserMedia中的contraints一致
var promise = navigator.mediaDevices.getDisplayMedia(contraints);

下面看看这个API的实战效果
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC get video devices</title>
</head>
<body>
    <video autoplay playsinline id="player"></video>
	<script>
        var videoplay = document.getElementById("player");
        //调用浏览器的设备，获取摄像头的使用
        navigator.mediaDevices.getUserMedia({video:true})
            .then(stream => {
                videoplay.srcObject = stream;
            }).catch(error => {
            console.log(error);
        })
    </script>
</body>
</html>

效果图
视频参数学习以上知识后，进入录制音视频的实战：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>录制音视频</title>
</head>
<body>
    <table>
        <tr>
            <td><video autoplay playsinline id="player"></video></td>
            <td><video playsinline id="recplayer"></video></td>
        </tr>
        <tr>
            <td><button id="record">Start Record</button></td>
            <td><button id="recplay" disabled>Play</button></td>
            <td><button id="download" disabled>Download</button></td>
        </tr>
    </table>

    <script>
        var videoplay = document.getElementById("player");
        var recvideo = document.getElementById("recplayer");
        var btnRecord = document.getElementById("record");
        var btnPlay = document.getElementById("recplay");
        var btnDownload = document.getElementById("download");

        //二进制数组，存储视频
        var buffer;
        //全局
        var meidaRecoder;

        navigator.mediaDevices.getUserMedia({video: true})
            .then(stream => {
                window.stream = stream;
                videoplay.srcObject = stream;
            }).catch(error => {
                console.log(error);
        });

        function handleDataAvailable(e) {
        	//判断是否有数据
            if(e&& e.data && e.data.size > 0){
                buffer.push(e.data);
            }
        }

        function startRecord(){
            //开始录制,初始化数组
            buffer = [];

            var options = {
                //录制视频，格式为webm
                mimeType: 'video/webm;codecs=vp8'
            };
            //检验是否支持mimeType
            if(!MediaRecorder.isTypeSupported(options.mimeType)){
                console.log(`${options.mimeType} is not supported`);
                return;
            }
            try{
                meidaRecoder = new MediaRecorder(window.stream, options)
            }catch (e) {
                console.log('Filed tp create MideaRecoder',e);
                return;
            }
            //存储数据时触发事件,数据有效时执行handleDataAvailable
            meidaRecoder.ondataavailable = handleDataAvailable;
            //设置时间片,每过一个时间片就会存储数据
            meidaRecoder.start(10);
        }

        function stopRecord(){
            //停止录制
            meidaRecoder.stop();
        }

        //录制视频
        btnRecord.onclick = () => {
            if(btnRecord.textContent === "Start Record"){
                startRecord();
                btnRecord.textContent = 'Stop Record';
                btnPlay.disabled = true;
                btnDownload.disabled = true;
            }else {
                stopRecord();
                btnRecord.textContent = "Start Record";
                btnPlay.disabled = false;
                btnDownload.disabled = false;
            }
        };

        //播放视频
        btnPlay.onclick = () => {
            var blob = new Blob(buffer,{type: 'video/webm'});
            recvideo.src = window.URL.createObjectURL(blob);
            recvideo.srcObject = null;
            recvideo.control = true;
            recvideo.play();
        };

        //下载视频
        btnDownload.onclick = () => {
            var blob = new Blob(buffer,{type: 'video/webm'});
            var url = window.URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.style.display = 'none';
            a.download = 'aaa.webm';
            a.click();
        }
    </script>
</body>
</html>