浏览器调用相机进行拍照


HTML5时代到来后,浏览器的各种能力变得越来越强大。其中一个令笔者一直想尝试一试的能力就是浏览器调用摄像头在前端实现拍照了。那怎样使用浏览器来调用相机进行拍照呢?本文就简要进行一下介绍。

代码

dom/camera_shot.html

mediaDevices.getUserMedia()

这一API是浏览器提供的、能够直接访问用户的媒体设备(摄像头、麦克风)的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)
    }
}

“浏览器调用相机进行拍照” 共有 1 条回应。

  1. 干得漂亮~

评论