浏览器获取摄像头和麦克风

1,742 阅读2分钟

浏览器是可以通过api获取用户的摄像头、麦克风和屏幕共享的使用权限的。为了方便使用,将其封装成设备管理库,方便使用。 其中提供了几个接口

  1. getCameraList // 获取摄像头列表
  2. getMicList // 获取麦克风列表
  3. getAudioTrack // 获取音频轨道
  4. getVideoTrack // 获取视频轨道
  5. getScreenTrack // 获取屏幕共享内容 点击demo,可以直接体验

浏览器使用设备的限制

需要使用https协议才能访问设备,并且浏览器会弹窗询问用户是否允许使用设备,大多数浏览器在同一个域名下只要询问一次就会记住,也有个别浏览器每次访问都需要询问(说的就是Safari)。 如果是http,只有在127.0.0.1和localhost下可以访问设备。

音频输入设备

暂时支持使用默认设备或者通过deviceId来选择音频输入设备

视频输入设备

  • 设备id 可以直接获取默认设备或者通过deviceId来选择视频输入设备
  • 分辨率 可以通过width和height参数来控制获取到的视频流的宽高。分辨率需要浏览器和设备的支持(相同的设备在不同的浏览器下也可能支持的分辨率也是不同的。比较常见的640480的分辨率和1280720的分辨率大多数的浏览器和设备都能支持)
  • 帧率 可以通过frameRate参数来控制获取到的视频流的帧率,帧率的大小需要浏览器和设备的支持(相同的设备在不同浏览器下能获取到的帧 率也可能不同,一般的帧率的最大值不超过60帧)

屏幕共享

屏幕共享是一个相对新一些的api,目前主流的浏览器还是都能支持到的,比如chrome、firefox、safari等都是没有问题的。浏览器的屏幕共享每次都需要用户手动选择想要分享的内容。如果选择屏幕就是整个屏幕的内容,也可以选择分享某个网页或者某个应用程序的窗口(其中不同浏览器能够分享的内容也可能不同,但是大多数都是能支持这三种的)。

待完善的内容

  • 错误码的完善 获取失败的情况很多,比如用户拒绝、浏览器没有权限使用设备等等,需要细分失败的原因才能更准确的提示和引导用户。
  • 移动端的支持