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

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

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

采集音频/视频

浏览器兼容

在这里插入图片描述

注意事项

  • 127.0.0.1localhost 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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值