web技术支持| Web 客户端实现录音、录像

Web 实现客户端录音或录像的流程大致分为：

采集音频/视频
开始录制并监听回调
下载 Or 转码

采集音频/视频

浏览器兼容

注意事项

除 127.0.0.1、localhost URL 以外，网站必须配置 SSL 证书，也就是网站需要 https 环境
需要音频/视频输入媒体设备，例如：麦克风、摄像头，包含内置。

开始采集

利用 navigator.mediaDevices 对象的 getUserMedia 方法采集音频和视频媒体流。

// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};
}// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function(constraints) {// 首先，如果有getUserMedia的话，就获得它var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口if (!getUserMedia) {return Promise.reject(new Error('getUserMedia is not implemented in this browser'));}// 否则，为老的navigator.getUserMedia方法包裹一个Promisereturn new Promise(function(resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});}
}// 开始采集输入媒体
navigator.mediaDevices.getUserMedia({// 采集音频audio: true,// 采集视频video: true
})
.then(function(stream) {// TODO
})
.catch(function(err) {console.log(err.name + ": " + err.message);
});

录制

创建录制实例

利用 new 指令创建一个 MediaRecorder 对象。

// 定义录制的编码格式
const options = {mimeType: "video/webm;codecs=opus"
};
// 录制实例
const mediaRecorder = new MediaRecorder(audioStream, options);

监听录制回调事件

// 创建一个集合存储录制的数据
const recordedBlobs = [];// 监听录制错误
mediaRecorder.onerror = async (event) => {// TODO
}// 监听录制开始
mediaRecorder.onstart = async (event) => {// TODO
}// 监听录制结束或者中断的回调
mediaRecorder.onstop = async (event) => {// 这里我们可以将录制的数据，进行处理之后，存储至服务端，例如：上传 OSS
}// 监听录制暂停
mediaRecorder.onpause = async (event) => {// TODO
}// 监听录制恢复
mediaRecorder.onstart = async (event) => {// TODO
}// 监听录制过程中返回数据
mediaRecorder.ondataavailable = (event) => {console.log('handleDataAvailable', event);if (event.data && event.data.size > 0) {recordedBlobs.push(event.data);}
}

检测编码类型是否支持

利用 isTypeSupported 方法，我们可以检测出是否支持我们想要录制的音频编码或者视频编码。

var types = ["video/webm","audio/webm","video/webm\;codecs=vp8","video/webm\;codecs=daala","video/webm\;codecs=h264","audio/webm\;codecs=opus","video/mpeg"];for (var i in types) {console.log( "Is " + types[i] + " supported? " + (MediaRecorder.isTypeSupported(types[i]) ? "Maybe!" : "Nope :("));
}

开始录制

// 一直录
mediaRecorder.start();
// 录制置顶时间，单位为浩渺
mediaRecorder.start(60000); // 录制 60秒

暂停录制

mediaRecorder.pause();

恢复录制

mediaRecorder.resume();

结束录制

mediaRecorder.stop();

定时获取录制数据

上面我们监听录制数据回调 ondataavailable，只会在 stop、pause 时才会触发，如果录制的时间很长，那么对应处理的数据量也越大，因此，录制实例还提供了一个方法 requestData 方便我们获取数据。

需要注意的是：当前录制状态必须为正在录制中，否则会报错。

captureMedia.onclick = function() {mediaRecorder.requestData();// makes snapshot available of data so far// ondataavailable fires, then capturing continues// in new Blob
}

下载 Or 转码

下载

// 模拟下载按钮点击实现下载
function download () {const blob = new Blob(recordedBlobs, {type: 'video/webm'});const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.style.display = 'none';a.href = url;a.download = 'test.webm';document.body.appendChild(a);a.click();setTimeout(() => {document.body.removeChild(a);window.URL.revokeObjectURL(url);}, 100);
});

转码

我们可以将数据发送至服务端（或 OSS），由服务端转码，感兴趣的同学也可以去试试 ffmpeg。

Ending

我们可以对采集或者录制之后音频、视频数据进行很多处理，例如对视频数据的处理，感兴趣的小伙伴们可以查看以下文章：

一篇前端图像处理秘籍

前端秘籍之“易容”术

web技术支持| Web 客户端实现录音、录像相关推荐

Web技术-1 Web前端总结
Web开发的学习是建立在掌握了Java基础上的,通过学习Web前端.jQuery+AJAX .MySql数据库.Oracle数据库.Java Web技术,实现网页的制作和功能的开发.本部分总结的是We ...
基于最新WEB技术的Web SCADA平台构建数字化车间
近年来,随着工业4.0在我国的逐渐普及和深化发展,企业的信息化建设不断的深入,制造业也在向物联网的方向发展.在现在的工厂管理中,由于使用了大量的设备,因此对设备运行状态以及能源耗用,包括环境参数监控成 ...
基于最新WEB技术的Web SCADA构建“智慧煤矿”平台
近几年国家多多部委多次出台相关政策及文件,对矿山自动化.信息化.数字化.智能化提出了指导要求,为矿山数字化转型指明了发展思路.国家着力推动产业升级,各省助力项目落地.因煤矿属于传统行业,煤炭行业面临的 ...
web技术分享| web的白板工具栏封装
最近做白板项目,最重要的工具栏模块在网上搜了搜都没找到想要的,狠下心自己原生封装一个. 最终效果展示: 使用白板 SDK 使用 anyRTC 的白板SDK 项目地址:https://demos.any ...
1.web技术的前世今生
目录 1web Web服务器 Web页面 Web的作用所谓Web 2web技术分类主流 Web技术工作原理 Web服务器 •1990年,第一个Web服务器开始运行 •网站服务器 •站点服务器 ...
计算机二级Web（1）：Web技术基础
考核目标: 了解Internet与Web技术的基本概念理解Web技术的主要组成部分(URL HTTP HTMl) 理解和掌握Web浏览器与服务器的基本概念和工作原理了解Web应用开发构架和开发工具 ...
ETH：Windows搭建ETH(区块链技术)利用Web端和小程序端两种方式调用ETH上的SC智能合约
ETH:Windows搭建ETH(区块链技术)利用Web端和小程序端两种方式调用ETH上的SC智能合约目录 1.Geth安装.配置文件.与ETH节点交互 1.1.下载并安装好geth客户端 1.2. ...
ActiveX技术在WEB页上的应用[转载]
ActiveX技术在WEB页上的应用汪涛 Internet 的发展可以说是日新月异,这种快速的发展给人们带来了大量的机会.全世界的电信服务商都在寻找增强Internet在线服务的方法.在Int ...
借助Web技术，桌面用户界面将保持活跃
要了解Java桌面应用程序有什么问题,让我们看一下JavaFX(桌面应用程序的领先UI框架)的新功能. 很明显,它正在向Web方法发展,从Web世界中借用了越来越多的功能. JavaFX支持一部分CS ...