H5利用JS调用电脑摄像头实现拍照效果

001.png H5利用JS调用电脑摄像头实现拍照效果 经验总结

今天学习了调用电脑摄像头,利用canvas画布将视频当前帧转换成图片的实例,其中用到了 mediaDevices.getUserMedia 方法。该方法提示用户允许使用媒体输入,产生包含所请求类型的媒体轨道。包括视频轨道(由诸如照相机,视频记录设备,屏幕共享服务等的硬件或虚拟视频源产生),音频轨道(类似地,由物理或虚拟音频源,如麦克风,A / D转换器等),以及其他可能的轨道类型。

它返回一个 Promise 解析为一个 MediaStream 对象。用户如果拒绝许可,或者匹配媒体不可用,则请求会被拒绝,抛出 PermissionDeniedErrorNotFoundError 错误。详情请戳 链接 。

注意:该方法只适用于本地和 https 请求,http 会提示没有权限,报 PermissionDeniedError 错误。

HTML代码:

<div id="camera">
    <div id="contentHolder">
        <video id="video" width="300" height="300" autoplay></video>
        <canvas style="display:none;" id="canvas" width="300" height="300"></canvas>
    </div>
    <div id="btn_snap">拍照</div>
</div>

JS部分:先调用摄像头,把流媒体文件复制到 video 标签,实现实时“直播”的效果,点击拍照按钮,将当前帧转换成图片。

<script>
    var canvas = document.getElementById("canvas"),
        pzBtn = document.getElementById("btn_snap"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video");
    alert('该页面会调用您的摄像头')
    // 旧版本浏览器可能根本不支持mediaDevices,我们首先设置一个空对象
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
    }
    // 一些浏览器实现了部分mediaDevices,我们不能只分配一个对象
    // 使用getUserMedia,因为它会覆盖现有的属性。
    // 这里,如果缺少getUserMedia属性,就添加它。
    if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
            // 首先获取现存的getUserMedia(如果存在)
            var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            // 有些浏览器不支持,会返回错误信息
            // 保持接口一致
            if (!getUserMedia) {
                return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
            //否则,使用Promise将调用包装到旧的navigator.getUserMedia
            return new Promise(function (resolve, reject) {
                getUserMedia.call(navigator, constraints, resolve, reject);
            });
        }
    }
    var constraints = { audio: false, video: {width: 720,height:720} }
    navigator.mediaDevices.getUserMedia(constraints)
        .then(function (stream) {
            var video = document.querySelector('video');
            // 旧的浏览器可能没有srcObject
            if ("srcObject" in video) {
                video.srcObject = stream;
            } else {
                //避免在新的浏览器中使用它,因为它正在被弃用。
                video.src = window.URL.createObjectURL(stream);
            }
            video.onloadedmetadata = function (e) {
                video.play();
            };
        })
        .catch(function (err) {
            console.log(err.name + ": " + err.message);
        });



    pzBtn.addEventListener("click", function () {
        // 点击,canvas画图
        context.drawImage(video, 0, 0, 300, 300);
        // 获取图片base64链接
        var image = canvas.toDataURL('image/png');
        // 定义一个img
        var img = new Image();
        //设置属性和src
        img.id = "imgBoxxx";
        img.src = image;
        //将图片添加到页面中
        document.body.appendChild(img);

        // base64转文件
        function dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type: mime});
        }
        console.log(dataURLtoFile(image, 'aa.png'));
    });
</script>

CSS部分:

<style>
    #camera{
        float: left;
        margin: 20px;
    }
    #contentHolder{
        width: 300px;
        height: 300px;
        margin-bottom: 10px;
    }
    #btn_snap{
        margin: 0 auto;
        border: 1px solid #f0f0f0;
        background: #5CACEE;
        color: #FFF;
        width: 100px;
        height: 36px;
        line-height: 36px;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        cursor: pointer;
        /*禁止选择*/
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently not supported by any browser */
    }
    #imgBoxxx{
        width: 200px;
        margin: 60px 20px 20px;
    }
</style>

语法

var promise = navigator.mediaDevices.getUserMedia(constraints);

参数

constraints :一个 MediaStreamConstraints 对象,指定要请求的媒体类型,以及每种类型的参数/属性。

具有两个参数:video (视频) audio (音频)。必须指定其中的一个或两个。如果浏览器找不到符合给定约束的指定类型的媒体轨道,则会返回 NotFoundError 错误。

以下是请求音频和视频,没有任何特定要求:

{ audio: true, video: true }

如果媒体类型指定 为 true ,则生成的流必须具有该类型的轨道。如果没有,则会导致调用 getUserMedia() 错误。

出于隐私原因无法访问有关用户摄像头和麦克风的信息,不过应用程序可以使用其他约束来请求所需的摄像头和麦克风功能。

以下是设置偏好 1280x720 分辨率的相机:

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

浏览器将尝试遵守此规则,但如果完全匹配不可用,则可能会返回其他分辨率。

还可以使用关键字 min , max 或 exact (又名min == max)。

以下要求最低分辨率为1280x720:

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

如果没有具有此分辨率或更高分辨率的摄像机,则返回的请求将被拒绝,抛出 OverconstrainedError 错误,并且不会提示用户。

行为差异的原因是关键字min,max并且exact本质上是强制性的,而普通值和被调用的关键字ideal则不是。这是一个更全面的例子:

{
  audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 }
  }
}

一个ideal值,使用时的重心,这意味着浏览器将尝试找到设置(与相机,如果你有一个以上的),用最小的适应度距离从给定的理想值。

简单值本质上是理想的,这意味着我们上面的第一个分辨率示例可能是这样编写的:

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

并非所有约束都是数字。例如,在移动设备上,以下设备优先于后置摄像头(如果有的话):

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

为了要求的后置摄像头,使用方法:

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

返回值

Promise ,其履行处理接收到 MediaStream 的时候已经被成功地获得请求的媒体对象。

例外

通过将 DOMException 错误对象传递给 promise 的失败处理程序来拒绝返回的 promise 。可能的错误是:

AbortError

虽然用户和操作系统都授予了对硬件设备的访问权限,并且没有发生可能导致问题的硬件问题 NotReadableError ,但是发生了一些阻止设备被使用的问题。

NotAllowedError

用户已指定不允许当前浏览实例访问设备; 或者用户拒绝访问当前会话; 或者用户拒绝全局访问用户媒体设备。

SecurityError 用于此目的的旧版本规范;  SecurityError 已经有了新的含义。

NotFoundError

没有找到满足给定约束条件的指定类型的媒体轨道。

NotReadableError

虽然用户已授予使用匹配设备的权限,但操作系统,浏览器或网页级别发生硬件错误,导致无法访问设备。

OverconstrainedError

指定的约束导致没有符合所请求标准的候选设备。错误是类型的对象OverconstrainedError,并且具有一个constraint属性,其字符串值是不可能满足的约束的名称,以及message包含解释问题的人类可读字符串的属性。

因为即使用户尚未授予使用底层设备的权限,也可能发生此错误,因此可能会将其用作指纹表面。

SecurityError

Document在getUserMedia()被调用的对象上禁用用户媒体支持。启用和禁用用户媒体支持的机制由单个用户代理决定。

TypeError

指定的约束列表为空,或者所有约束都设置为false。


赞 (11)
分享到: +

评论 板凳

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)
  1. #1
    访客
    请问这个案例下,怎么关闭摄像头呢
    访客 5年前 (2020-01-16)回复 取消评论