HTML调用摄像头和/或麦克风

API：getUserMedia函数调用摄像头和麦克风

API简介

HTML5的getUserMedia API为用户提供访问硬件设备媒体（摄像头、视频、音频、地理位置等）的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。 
getUserMedia API最初是navigator.getUserMedia，目前已被最新Web标准废除，变更为navigator.mediaDevices.getUserMedia（），但浏览器支持情况不如旧版API普及。 
MediaDevices.getUserMedia（）方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。如果用户给予许可，就返回一个Promise对象，MediaStream对象作为此Promise对象的Resolved［成功］状态的回调函数参数，相应的，如果用户拒绝了许可，或者没有媒体可用的情况下PermissionDeniedError或者NotFoundError作为此Promise的Rejected［失败］状态的回调函数参数。注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve也不会触发 reject。

语法

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) { ... })
.catch(function(error) { ... }

调用参数

containers：指定请求的媒体类型，主要包含video和audio，必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，那么返回的Promise对象就会处于rejected［失败］状态，NotFoundError作为rejected［失败］回调的参数。

[例] 同时请求不带任何参数的音频和视频

 {audio: true, video: true}

[例] 要求获取最低为1280x720的分辨率

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

[例] 优先使用前置摄像头（如果有的话）

{ audio: true, video: { facingMode: "user" } }

[例] 强制使用后置摄像头

{ audio: true, video: { facingMode: { exact: "environment" } } }

成功回调函数seccessCallback的参数stream：stream是MediaStream的对象，表示媒体内容的数据流，可以通过URL.createObjectURL转换后设置为Video或Audio元素的src属性来使用，部分较新的浏览器也可以直接设置为srcObject属性来使用。

失败回调函数errorCallback的参数error，可能的异常有：

• AbortError：硬件问题。
• NotAllowedError：用户拒绝了当前的浏览器实例的访问请求；或者用户拒绝了当前会话的访问；或者用户在全局范围内拒绝了所有媒体访问请求。
• NotFoundError：找不到满足请求参数的媒体类型。
• NotReadableError：操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。
• OverConstrainedError：指定的要求无法被设备满足。
• SecurityError：安全错误，在getUserMedia() 被调用的 Document上面，使用设备媒体被禁止。这个机制是否开启或者关闭取决于单个用户的偏好设置。
• TypeError：类型错误，constraints对象未设置［空］，或者都被设置为false。

关闭摄像头或者麦克风：

需要注意的是，MediaStream.getTracks() 返回的Tracks数组是按第一个参数倒序排列的

比如现在定义了

{
    video: true,
    audio: true
}

想关闭摄像头，就需要调用MediaStream.getTracks()[1].stop();

同理，0对应于audio的track

学习记录博客，原文来源

https://www.cnblogs.com/cangqinglang/p/10210826.html