如何通過(guò)html5調(diào)用攝像頭

本篇內(nèi)容介紹了“如何通過(guò)html5調(diào)用攝像頭”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

HTML代碼部分：

<!--video用于顯示媒體設(shè)備的視頻流，自動(dòng)播放-->   
<video  id="video" autoplay ></video>
<!--拍照按鈕-->
<div>
    <button id="capture">拍照</button>
</div>
<!--描繪video截圖-->
<canvas id="canvas" width="480" height="320"></canvas>

接下來(lái)是js代碼部分：

<script>  
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var capture = document.getElementById('capture');
    var context = canvas.getContext('2d');
    function getUserMediaToPhoto(constraints,success,error) {
        if(navigator.mediaDevices.getUserMedia){
            //最新標(biāo)準(zhǔn)API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        }else if (navigator.webkitGetUserMedia) {
            //webkit核心瀏覽器
            navigator.webkitGetUserMedia(constraints,success,error);
        }else if(navigator.mozGetUserMedia){
            //firefox瀏覽器
            navigator.mozGetUserMedia(constraints,success,error);
        }else if(navigator.getUserMedia){
            //舊版API
            navigator.getUserMedia(constraints,success,error);
        }
    }
    //成功回調(diào)函數(shù)
    function success(stream){
        //兼容webkit核心瀏覽器
        var CompatibleURL = window.URL || window.webkitURL;
        //將視頻流轉(zhuǎn)化為video的源
        video.src = CompatibleURL.createObjectURL(stream);
        video.play();//播放視頻
    }
    function error(error) {
        console.log('訪問(wèn)用戶媒體失敗：',error.name,error.message);
    }
    if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
        getUserMediaToPhoto({video:{width:480,height:320}},success,error);
    }else{
        alert('你的瀏覽器不支持訪問(wèn)用戶媒體設(shè)備');
    }
    capture.addEventListener('click',function() {
        // 將video畫(huà)面描繪在canvas畫(huà)布上
        context.drawImage(video,0,0,480,320);
    })
 </script>

值得注意的是：

使用的時(shí)候打開(kāi)攝像頭一定要上server上打開(kāi)，否則沒(méi)辦法使用！因?yàn)榇蜷_(kāi)的是屬于網(wǎng)絡(luò)的webcam，需要在server上打開(kāi)。

目前好像chrome和opera還有大多數(shù)移動(dòng)設(shè)備支持HTLM5打開(kāi)攝像頭，我這個(gè)是在chrome上測(cè)試成功的。

還有一點(diǎn)，如果沒(méi)成功，很可能是你不小心關(guān)閉了chrome打開(kāi)攝像頭的權(quán)限，你重新啟用權(quán)限就可以啦！

“如何通過(guò)html5調(diào)用攝像頭”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！