js调用摄像头拍照 js调用摄像头拍照

js调用摄像头拍照

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>

<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>
<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>


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" } } }

分享本文至:

评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论