需求

浏览器调用相机进行拍照

代码

mediaDevices.getUserMedia()

目前，浏览器已经提供了一种API能够直接访问用户的媒体设备(摄像头、麦克风)，这就使得浏览器能够直接捕获到来自于这些设备的相关信息，可以实现的功能包括前端拍照、录音、录像等功能。

要获取用户媒体，使用的函数是：

navigator.mediaDevices.getUserMedia(constraints)

constraints - 为音频与视频指定参数，例如

{ audio: true, video: true } // 在获得的媒体中同时包含音频与视频

{

audio: true,

video: { width: 1280, height: 720 } // 获得指定了大小的视频

}

该函数返回的是一个Promise对象，用于处理用户是否成功成功授权了对这些媒体的访问。

.then(success) - 用于处理成功获得用户媒体时的相关操作，success回调参数中包含了媒体流，可对媒体流进行相关操作，例如：

// 将媒体流播放到一个video元素上

function success(stream) {

let video = document.querySelector('#video');

//let compatibleURL=window.URL || window.webkitURL;

console.log(stream);

video.srcObject = stream;

//video.src=window.URL.createObjectURL(stream);

video.onloadedmetadata = function (e) {

video.play();

}

}

.catch(error) - 用于处理调用失败的情况，error回调参数中包含有错误信息。

兼容性问题

由于不同浏览器对该接口进行了不同实现，因此需要进行一些兼容性处理。

新标准中该接口返回的是Promise对象，但较旧的浏览器使用较老的方式来进行处理。

function getUserMedia(constraints, success, error) {

if (navigator.mediaDevices.getUserMedia) {

navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);

} else if (navigator.webkitGetUserMeida) {

navigator.webkitGetUserMedia(constraints, success, error)

} else if (navigator.mozGetUserMedia) {

navigator.mozGetUserMedia(constraints, success, error)

} else if (navigator.getUserMedia) {

navigator.getUserMedia(constraints, success, error)

}

}

怎样实现拍照？

canvas是HTML5标准中的一个用于绘图的接口，可用于在前端进行图像处理/图形绘制。

前面的代码，我们将从浏览器获得的媒体信息展现在了一个video元素上；这样，我们就能够从该元素上得到当前帧的内容，从而把这个内容绘制到canvas元素上，实现静态图像捕获(拍照)。

let canvas = document.querySelector('#canvas');

let context = canvas.getContext('2d');

let captureBtn = document.querySelector('#captureBtn');

captureBtn.onclick = function () {

//将video当前帧绘制到Canvas上，完成拍照过程

context.drawImage(video, 0, 0, 480, 320);

}

···