h5調(diào)用攝像頭

發(fā)布時間：2020-05-24 00:47:52 來源：網(wǎng)絡(luò) 閱讀：2636 作者：Lee_吉欄目：web開發(fā)
<!DOCTYPE html>
<html>
<head>
    <title>攝像頭測試</title>
</head>
<body>
    <!--video用于顯示媒體設(shè)備的視頻流，自動播放-->
    <video id="video" autoplay ></video>
    <!--拍照按鈕-->
    <div>
    <button id="capture">拍照</button>
    </div>
    <!--描繪video截圖-->
    <canvas id="canvas" width="480" height="320"></canvas>
    <script type="text/javascript">
        //訪問用戶媒體設(shè)備的兼容方法
        function getUserMedia(constrains,success,error){
            if(navigator.mediaDevices.getUserMedia){
                //最新標(biāo)準(zhǔn)API
                navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
            } else if (navigator.webkitGetUserMedia){
                //webkit內(nèi)核瀏覽器
                navigator.webkitGetUserMedia(constrains).then(success).catch(error);
            } else if (navigator.mozGetUserMedia){
                //Firefox瀏覽器
                navagator.mozGetUserMedia(constrains).then(success).catch(error);
            } else if (navigator.getUserMedia){
                //舊版API
                navigator.getUserMedia(constrains).then(success).catch(error);
            }
        }

        var video = document.getElementById("video");
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        //成功的回調(diào)函數(shù)
        function success(stream){
            //兼容webkit內(nèi)核瀏覽器
            var CompatibleURL = window.URL || window.webkitURL;
            //將視頻流設(shè)置為video元素的源
            video.src = CompatibleURL.createObjectURL(stream);
            //播放視頻
            video.play();
        }

        //異常的回調(diào)函數(shù)
        function error(error){
            console.log("訪問用戶媒體設(shè)備失?。?,error.name,error.message);
        }
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
            //調(diào)用用戶媒體設(shè)備，訪問攝像頭
            getUserMedia({
                video:{width:480,height:320}
            },success,error);
        } else {
            alert("你的瀏覽器不支持訪問用戶媒體設(shè)備");
        }

        //注冊拍照按鈕的單擊事件
        document.getElementById("capture").addEventListener("click",function(){
            //繪制畫面
            context.drawImage(video,0,0,480,320);
        });
    </script>
</body>
</html>
向AI問一下細(xì)節(jié)
h5調(diào)用攝像頭

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽
