前端：打开你的摄像头

前端调用摄像头

本篇文章将会通过一个demo来介绍前端如何通过浏览器打开用户摄像头并实现抓拍获取图片

getUserMedia API

getUserMedia API早期版本是navigator.getUserMedia，不过目前已被废弃，如果想要兼容ie或者低版本浏览器，可以使用。
目前最新标准getUserMedia API为navigator.MediaDevices.getUserMedia。

基本用法

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
   
  /* 成功获取媒体流 stream */
})
.catch(function(err) {
   
  /* 处理error */
});

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

MediaStream 接口是一个媒体内容的流.。

参数constraints

参数constraints:指定请求的媒体类型，主要包含video和audio。

• 请求不带任何参数的视频和音频

  {
       vidio: true