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方法包裹一个Promise
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints