H5调用用户摄像头并实现拍照功能

简述

HTML 5的getUserMedia API提供访问用户媒体设备的能力，基于该特性，开发者可以在不依赖任何浏览器插件的条件下访问视频或者音频设备。

语法

1.旧版getUserMedia

getUserMedia(constraints,successCallback,errorCallback)

2.新版getUserMedia

getUserMedia(contraints).then(successCallback).catch(errorCallback)

getUserMedia API起初的版本是navigator.getUserMedia，目前已从最新Web标准中废除，一部分浏览器仍然支持，但将来可能被废弃。最新的标准为navigator.mediaDevices.getUserMedia,但浏览器支持情况不如旧版API普及。因此需要做兼容处理

参数分析

1.constraints:

constraints是一个配置对象，指定请求的媒体类型，主要包含video和audio,例如请求不带任何参数的视频和音频，代码如下:

{video: true,audio: true}

可以指定视频的分辨率，代码如下

{video: {width: 640,height: 360}}

移动设备上，可以指定使用前置摄像头，代码如下

{video: {facingMode: 'user'}}

或者使用后置摄像头，代码如下

{video: {facingMode:{exact: 'enviroment'}}}

2.success和error

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

HTML部分

<video id="video" autoplay style="width: 480px;height: 320px;"></video>
<div><button id="capture">拍照</button></div>
<canvas id="canvas" width="480" height="320"></canvas>

JS部分

window.onload = function(){
var video = document.getElementById('video')     //video元素
var canvas = document.getElementById('canvas')   //canvas元素
var context = canvas.getContext('2d')

//constraints参数
const constraints ={video: true,audio: true}//成功的回调函数
function success(stream){
//兼容的webkit核心浏览器
var CompatibleUrl = window.URL || window.webkitURL
//将视频流内容设置为video元素的源(注意：此处因为使用的是比较新的浏览器，必须直接设置，否则报错)
//如果使用的不是较新的浏览器，可以这样设置：video.src = CompatibleUrl.createObjectURL(stream)
video.srcObject = stream
video.play()
}
//异常的回调函数
function error(error){
console.log('访问媒体设备失败',error.name,error.message);
}
//访问用户媒体设备的兼容方法
function getUserMedia(constrains,success,error){
if(navigator.mediaDevices.getUserMedia){
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error)
}else if(navigator.webkitGetUserMedia){
navigator.webkitGetUserMedia(constrains,success,error)
}else if(navigator.mozGetUserMedia){
navigator.mozGetUserMedia(constrains,success,error)
}else if(navigator.getUserMedia){
navigator.getUserMedia(constrains,success,error)
}
}
if(navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
//调用用户媒体设备，访问摄像头
getUserMedia(constraints,success,error)
}else{
alert('你的浏览器不支持访问用户媒体设备')
}
//绑定拍照按钮的单击事件
document.getElementById('capture').addEventListener('click',function(){
context.drawImage(video,0,0,480,320)
})
}

此时，点击拍照按钮，摄像头中的照片则会保存到canvas中