欧美亚洲激情在线,久久艹精品视频,青娱乐精品在线

最近在學習在做HTML5的項目，看了博客上html5調用攝像頭拍照的文章，但各有瑕疵。于是自己查閱書籍寫了一個demo，主要分三步，廢話不多說上代碼。

HTML代碼部分：

<!--video用于顯示媒體設備的視頻流，自動播放-->   
<video  id="video" autoplay style="width: 480px;height: 320px"></video>
<!--拍照按鈕-->
<div>
    <button id="capture">拍照</button>
</div>
<!--描繪video截圖-->
<canvas id="canvas" width="480" height="320"></canvas>

接下來是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){
            //最新標準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);
        }
    }
    //成功回調函數
    function success(stream){
        //兼容webkit核心瀏覽器
        var CompatibleURL = window.URL || window.webkitURL;
        //將視頻流轉化為video的源
        video.src = CompatibleURL.createObjectURL(stream);
        video.play();//播放視頻
    }
    function error(error) {
        console.log('訪問用戶媒體失敗：',error.name,error.message);
    }
    if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
        getUserMediaToPhoto({video:{width:480,height:320}},success,error);
    }else{
        alert('你的瀏覽器不支持訪問用戶媒體設備');
    }
    capture.addEventListener('click',function() {
        // 將video畫面描繪在canvas畫布上
        context.drawImage(video,0,0,480,320);
    })
 </script>

值得注意的是：

使用的時候打開攝像頭一定要上server上打開，否則沒辦法使用！因為打開的是屬于網絡的webcam，需要在server上打開。

目前好像chrome和opera還有大多數移動設備支持HTLM5打開攝像頭，我這個是在chrome上測試成功的。

還有一點，如果沒成功，很可能是你不小心關閉了chrome打開攝像頭的權限，你重新啟用權限就可以啦！

到此這篇關于html5調用攝像頭實例的文章就介紹到這了,更多相關html5調用攝像頭內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

標簽：北海青海晉中營口阜陽眉山崇左河池

巨人網絡通訊聲明：本文標題《html5調用攝像頭實例代碼》，本文關鍵詞 html5,調用,攝像頭,實例,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。