2 HTML躬行记——WebRTC基础实践( 二 ) _生活百科

1）MediaRecorder
WebRTC 提供了 MediaRecorder 类，它能接收两个参数，第一个是远程的 MediaStream 媒体流，第二个是配置项。
其配置项包括编解码器、音视频码率、容器的 MIME 类型（例如 video/webm、video/mp4 ）等相关信息。
先看个示例， HTML结构如下所示，一个 video 元素和两个 button 元素：回放和下载。
<video id="video"></video><button id="playback">回放</button><button id="download">下载</button>然后看下录像的整体逻辑，和之前自拍一节类似，也需要调用 getUserMedia() 获取媒体流。
在 then() 的回调中实例化 MediaRecorder 类，并配置多媒体格式。
其中WebM是一个由Google资助，免版权费用的视频文件格式；VP8是一个开放的影像压缩格式。
const video = document.getElementById('video');const playback = document.getElementById('playback');const download = document.getElementById('download');const size = 300;const chunks = [];// 一个由 Blob 对象组成的数组navigator.mediaDevices.getUserMedia({video: {width: size,height: size,},audio: true}).then((stream) => {// 配置多媒体格式const options = { mimeType: 'video/webm;codecs=vp8' };// 实例化录制对象const recorder = new MediaRecorder(stream, options);// 当收到数据时触发该事件recorder.ondataavailable = function(e) {chunks.push(e.data);// data 是一个可用的 Blob 对象}// 开始录制recorder.start(10);});recorder 的 dataavailable 事件会在收到数据时触发，e 参数的 data 属性是一个可用的 Blob 对象。
最后在开始录制调用 start() 方法时，可以配置一个毫秒级的时间片，那么在录制时会按照配置的值分割成一个个单独的区块，而不是录制一个非常大的整块内容。
分块可以提高效率和可靠性，如果是一整块，那么会变得越来越大，读写效率也会变差。
2）回放
首先根据 chunks 生成 Blob 对象，再根据 Blob 对象生成 URL 对象。
playback.addEventListener('click', () => {// 根据 chunks 生成 Blob 对象const blob = new Blob(chunks, {type: 'video/webm'});// 根据 Blob 对象生成 URL 对象video.src = https://www.huyubaike.com/biancheng/window.URL.createObjectURL(blob);video.play();}, false);URL.createObjectURL 是一个静态方法，返回值是一个指定的 File 对象或 Blob 对象。
3）下载
首先与回放一样，也是生成一个 URL 对象，然后创建 a 元素，将对象赋给 href 属性。
并且要指定 download 属性，告诉浏览器下载 URL 而不是导航。
download.addEventListener('click', (e) => {const blob = new Blob(chunks, {type: 'video/webm'});const url = window.URL.createObjectURL(blob);// 创建 a 元素const a = document.createElement('a');a.href = https://www.huyubaike.com/biancheng/url;// 指示浏览器下载 URL 而不是导航a.download ='test.webm';a.click();}, false);参考资料：
WebRTC官方
WebRTC MDN
Build the backend services needed for a WebRTC app
【2 HTML躬行记——WebRTC基础实践】

2 HTML躬行记——WebRTC基础实践( 二 )

推荐阅读

带梓的女孩名字及寓意

学生会活动策划方案范文经典学生会活动策划范文

12星座女谁是小野猫谁是小奶猫

月光石手链有什么寓意月光石有什么寓意

粉色的粘土小玫瑰diy

倚的组词倚的组词组

2023武汉中考志愿填报规则详解 2021年武汉中考志愿填报时间

关于深圳市万科教育发展基金会简述深圳市万科教育发展基金会

没有足够的可用内存来运行此程序没有足够的可用内存来运行程序

缓刑是什么意思还要坐牢吗缓刑是什么意思

有一个“撩妹高手”的儿子，是种什么样的体验？

南阳多少人「南阳多少人口2020总人数」

什么是事故车,如何鉴定车子撞到什么程度算事故车

秋季喝什么汤最好秋季喝什么汤最养生

绝地求生刺激战场军团名字怎么改？军团名字修改攻略[多图]

梦见大鱼吃小鱼

文房四宝指什么文房四宝指什么数字

OPPO Reno6简单评测 oppo reno6有nfc吗

怎么判断二手车的真实行驶里程? 要看哪些细节

双子座成功人士知多少？