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

mac2024-10-27 12

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>

最新回复(0)