html5調(diào)用攝像頭實(shí)例代碼
發(fā)布時(shí)間：2021-06-28 16:20:10 作者：binquan_liang 
我要評論
我要評論本文給大家分享html5調(diào)用攝像頭實(shí)例代碼，代碼簡單易懂，對前端html5的學(xué)習(xí)有很大幫助，如果對html5調(diào)用攝像頭相關(guān)知識感興趣的朋友一起看看吧
最近在學(xué)習(xí)在做HTML5的項(xiàng)目，看了博客上html5調(diào)用攝像頭拍照的文章，但各有瑕疵。于是自己查閱書籍寫了一個(gè)demo，主要分三步，廢話不多說上代碼。
HTML代碼部分：
<!--video用于顯示媒體設(shè)備的視頻流，自動播放-->
<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){
//最新標(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('訪問用戶媒體失敗：',error.name,error.message);
}
if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
getUserMediaToPhoto({video:{width:480,height:320}},success,error);
}else{
alert('你的瀏覽器不支持訪問用戶媒體設(shè)備');
}
capture.addEventListener('click',function() {
// 將video畫面描繪在canvas畫布上
context.drawImage(video,0,0,480,320);
})
</script>
值得注意的是：
使用的時(shí)候打開攝像頭一定要上server上打開，否則沒辦法使用！因?yàn)榇蜷_的是屬于網(wǎng)絡(luò)的webcam，需要在server上打開。
目前好像chrome和opera還有大多數(shù)移動設(shè)備支持HTLM5打開攝像頭，我這個(gè)是在chrome上測試成功的。
還有一點(diǎn)，如果沒成功，很可能是你不小心關(guān)閉了chrome打開攝像頭的權(quán)限，你重新啟用權(quán)限就可以啦！
到此這篇關(guān)于html5調(diào)用攝像頭實(shí)例的文章就介紹到這了,更多相關(guān)html5調(diào)用攝像頭內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
HTML5通過navigator.mediaDevices.getUserMedia調(diào)用手機(jī)攝像頭問題
這篇文章主要介紹了HTML5通過navigator.mediaDevices.getUserMedia調(diào)用手機(jī)攝像頭問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值2020-04-27Html5調(diào)用手機(jī)攝像頭并實(shí)現(xiàn)人臉識別的實(shí)現(xiàn)
這篇文章主要介紹了Html5調(diào)用手機(jī)攝像頭并實(shí)現(xiàn)人臉識別的實(shí)現(xiàn)，混合App開發(fā)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-21html5調(diào)用攝像頭功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了html5調(diào)用攝像頭功能的實(shí)現(xiàn)代碼的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-07- 根據(jù)需求我們可以把圖片數(shù)據(jù)轉(zhuǎn)換為流或二進(jìn)制，我這里轉(zhuǎn)換為base64，拿到了數(shù)據(jù)就可以發(fā)揮想象了，tensorflow，機(jī)器學(xué)習(xí)，模式識別，大把的應(yīng)用場景。下面給大家介紹下html2021-12-28