H5录制视频、音频(WebRTC)

2024年5月2日 185次阅读 来源: 黒之染

使用Navigator.getUserMedia可以做到在主流浏览器中获取用户摄像头数据，麦克风数据，我研究了一下，发现在ios、安卓微信浏览器中都不行。而在安卓6.0.1自带浏览器中可以，iOS Safari不支持，mac Safari不支持，兼容性还是太差，所以还是弃用了。但是我研究的结果还是保存一下，万一以后微信浏览器支持了呢？

以下是我研究的结果：

关于这个api的参数说明：
MDN:https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia
W3C:http://w3c.github.io/mediacapture-main/#widl-NavigatorUserMedia-getUserMedia-void-MediaStreamConstraints-constraints-NavigatorUserMediaSuccessCallback-successCallback-NavigatorUserMediaErrorCallback-errorCallback

方法需要3个参数：

  1. constraints,指明需要获取什么类型的数据

  2. successCallback, 数据获取成功后回调的方法(只会被调用一次，但是如果把回调时的视频流放到video标签中，视频会实时更新)

  3. errorCallback，接口调用失败后回调的方法

我主要想知道第一个参数里的情况，因为很多国内的教程里都只是这样：{video : true}，我还想知道如果要录音频、使用后置摄像头该怎么办。这个问题在https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Parameters 能找到答案，我复制一下。

constraints

  1. 如果单纯指定需要什么类型的媒体，只要这样就行{ audio: true, video: true }，这个表示需要视频和音频。应该也只支持这两种了，我看了MDN和W3c，都没发现第三种

  2. 以下把video参数写成object格式的，在chrome中都会报错Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': Malformed constraints object.，然而这些用法真的是MDN和W3C标准，不知道chrome为什么不支持。然而在chrome中有特殊的使用后置摄像头的方法，参考：http://blog.csdn.net/journey191/article/details/40744015，这个参考里的方法我测过，安卓6.0.1的确可以用后置摄像头。

  3. 如果要指定视频的宽高可以这样

    {
  audio: true,
  video: { width: 1280, height: 720 }
}

  4. 还可以用min，max，或者 ideal (即如果支持，就用这个)

    {
  audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 }
  }
}

  5. 如果要指定前后摄像头

    { audio: true, video: { facingMode: "user" } }//如果有前置摄像头的话使用前置摄像头（我身边的机器都有前置，所以没测试没有的情况）
{ audio: true, video: { facingMode: { exact: "environment" } } }//如果有后置摄像头的话使用后置
    原文作者：黒之染
    原文地址: https://segmentfault.com/a/1190000005344092
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞