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

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>

webRTC学习系列之——WebRTC录制媒体流并下载_第1张图片
视频参数学习以上知识后,进入录制音视频的实战:

<!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>

你可能感兴趣的:(WebRTC)