H5調(diào)用攝像頭

怎么用H5調(diào)用本地攝像頭，相冊并且多選，求各位大神賜教

回答

編輯回答

咕嚕嚕

如果是在純web中調(diào)用攝像頭，推薦使用input標(biāo)簽的方式，兼容性比較好，可以參照如下鏈接：
http://www.qdfuns.com/notes/2...

網(wǎng)上有很多文章使用video和canvas實現(xiàn)，但是進(jìn)過測試，兼容性非常不理想。如果不是兼容特定的機(jī)型，不推薦使用。具體你可以用下面的代碼測試一下：

<html>
    <head>
        <title>html5調(diào)用攝像頭拍照</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">
        // 添加事件監(jiān)聽器
        window.addEventListener("DOMContentLoaded", function () {
            // 獲取元素，創(chuàng)建設(shè)置等等
            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 監(jiān)聽器
            if (navigator.getUserMedia) { // 標(biāo)準(zhǔn)
                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>

2018年7月13日 14:32

編輯回答