web HTML5 调用摄像头的代码

Posted 2020-07-18 ￡冷☆月№

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web HTML5 调用摄像头的代码相关的知识，希望对你有一定的参考价值。

最近公司要求做一个在线拍照的功能，具体代码如下：

<html>
    <head>
        <title>html5调用摄像头拍照</title>
        <style type="text/css">
        #camera {
            width: 640px;
            height: 525px;
            position: fixed;
            border: 1px solid #f0f0f0;
            -moz-border-radius: 4px 4px 0 0;
            -webkit-border-radius: 4px 4px 0 0;
            border-radius: 4px 4px 0 0;
            -moz-box-shadow: 0 0 4px rgba(0,0,0,0.6);
            -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.6);
            box-shadow: 0 0 4px rgba(0,0,0,0.6);
        }

        #buttons {
            text-align: center;
        }

        .btn {
            width: 99px;
            height: 38px;
            line-height: 32px;
            margin: 0px 4px 0px 0px;
            border: 1px solid #fff;
            -moz-border-radius: 5px; /* Gecko browsers */
            -webkit-border-radius: 5px; /* Webkit browsers */
            border-radius: 5px; /* W3C syntax */
            cursor: default;
            text-align: center;
            font-size: 14px;
            color: #fff;
        }
        .btn_blue {
            background-color: #5CACEE;
        }
        .btn_green {
            background-color: #00EE00;
        }
        .hidden{ display:none }
    </style>
    </head>
    <body>
        <div id="camera">
            <div id="contentHolder">
                <video id="video" width="640" height="480" autoplay></video>
                <canvas style="display:none;" id="canvas" width="640" height="480"></canvas>
            </div>
            <div id="buttons">
                <button id="btn_snap" class="btn btn_blue">拍照</button>
                <button id="btn_cancel" class="btn btn_blue" style="display:none;">取消</button>
                <button id="btn_upload" class="btn btn_green" style="display:none;">上传</button>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
        // 添加事件监听器
        window.addEventListener("DOMContentLoaded", function () {
            // 获取元素，创建设置等等
            var canvas = document.getElementById("canvas"),
                    context = canvas.getContext("2d"),
                    video = document.getElementById("video"),
                    videoObj = { "video": true },
                    errBack = function (error) {
                        console.log("Video capture error: ", error.code);
                    };

            // 添加video 监听器
            if (navigator.getUserMedia) { // 标准
                navigator.getUserMedia(videoObj, function (stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if (navigator.webkitGetUserMedia) { // WebKit 前缀
                navigator.webkitGetUserMedia(videoObj, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }
            else if (navigator.mozGetUserMedia) { // Firefox 前缀
                navigator.mozGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }
            else {
                alert("浏览器不支持HTML5！");
                //console.log(‘your browser not support getUserMedia‘);
            }

            document.getElementById("btn_snap").addEventListener("click", function () {
                context.drawImage(video, 0, 0, 640, 480);
            });
        }, false);
</script>

但是有一些缺点就是，无法调整摄像头的分辨率，导致拍摄的照片不清晰。

以上是关于web HTML5 调用摄像头的代码的主要内容，如果未能解决你的问题，请参考以下文章

html5移动端页面上调用手机摄像头扫描二维码并获取二维码信息代码？

html5怎样调用手机摄像头或者相册

怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片

手机web页面怎么调用摄像头执行扫描，获取数据？