前端小程序-js+html調(diào)用電腦攝像頭實(shí)現(xiàn)網(wǎng)頁(yè)拍照

自網(wǎng)絡(luò)

這是大家在做信息類(lèi)網(wǎng)站的時(shí)候經(jīng)常要用到的一個(gè)功能：

理想情況下我們應(yīng)該先判斷你的設(shè)備上是否有攝像頭或相機(jī)，但簡(jiǎn)單起見(jiàn)，我們?cè)谶@里直接寫(xiě)出了HTML標(biāo)記，而不是用JavaScript先判斷然后動(dòng)態(tài)生成這些標(biāo)記

</body>

</html>

$( function() {

try { document.createElement("canvas").getContext("2d"); } catch (e) { alert("not support canvas!") }

var video=document.getElementById("video"),

canvas=document.getElementById("canvas"),

context=canvas.getContext("2d");

navigator.getUserMedia=navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

if (navigator.getUserMedia)

navigator.getUserMedia(

{ "video": true },

function (stream) {

if (video.mozSrcObject !==undefined)video.mozSrcObject=stream;

else video.src=((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;

video.play();

function (error) {

alert("Video capture error: " + error.code);

}

);

else alert("Native device media streaming (getUserMedia) not supported in this browser");

document.getElementById("snap").addEventListener("click", function() {

/*context.drawImage(video, 0, 0, 640, 480);//照片大小*/

context.drawImage(video, 0, 0, canvas.width=video.videoWidth, canvas.height=video.videoHeight)

}, false);

司項(xiàng)目需要調(diào)用攝像頭，看了一下html5文檔，主要是使用html5的getUserMedia()API，寫(xiě)一個(gè)例子來(lái)記錄具體的使用方法。

<html>
<body>
<!-- 用于展示攝像頭視頻流 -->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<div>
 <button id="capture" onclick="handleClickCapture()">拍照</button>
</div>

<!-- 展示拍攝的照片 -->
<canvas id="canvas" width="480" height="320"></canvas>

<script>
 var video=document.getElementById('video');
 var capture=document.getElementById('capture');
 var ctx=document.getElementById('canvas').getContext('2d');

 /**
 * 調(diào)用用戶媒體設(shè)備
 * @param constraints 配置信息
 * @param success 成功回調(diào)函數(shù)
 * @param error 失敗回調(diào)函數(shù)
 */
 function getUserMediaToPhoto(constraints,success,error) {
 if(navigator.mediaDevices.getUserMedia){
 navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
 }else if (navigator.webkitGetUserMedia) {
 navigator.webkitGetUserMedia(constraints,success,error);
 }else if(navigator.mozGetUserMedia){
 navigator.mozGetUserMedia(constraints,success,error);
 }else if(navigator.getUserMedia){
 navigator.getUserMedia(constraints,success,error);
 }
 }

 /**
 * 成功回調(diào)函數(shù)
 * @param stream 視頻流
 */
 function success(stream){
 var CompatibleURL=window.URL || window.webkitURL;
 try {
 video.src=CompatibleURL.createObjectURL(stream);
 } catch (e) {
 video.srcObject=stream;
 }
 video.play();
 }

 /**
 * 失敗回調(diào)
 * @param error 錯(cuò)誤對(duì)象
 */
 function error(error) {
 console.log('無(wú)法訪問(wèn)媒體設(shè)備', error);
 }

 if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
 getUserMediaToPhoto({video:{width:480,height:320}},success,error);
 }else{
 alert('不支持訪問(wèn)用戶媒體設(shè)備');
 }

 /**
 * 拍照按鈕點(diǎn)擊事件
 */
 function handleClickCapture() {
 ctx.drawImage(video,0,0,480,320);
 }
</script>
</body>
</html>

實(shí)現(xiàn)了基本的攝像頭調(diào)用和拍照，實(shí)現(xiàn)思路非常簡(jiǎn)單，基本上只是在調(diào)用api，唯一惡心的地方在于api版本比較多，不得不多做一些判斷。具體的api介紹、使用和參數(shù)可以查看MediaDevices.getUserMedia()。

外小哥利用了幾行代碼直接訪問(wèn)了手機(jī)的相機(jī)功能，這聽(tīng)起來(lái)是一件很新鮮的事情。究竟是怎么實(shí)現(xiàn)的呢？感興趣的話，可以繼續(xù)了解下去哦。

這位國(guó)外小哥是從事網(wǎng)頁(yè)開(kāi)發(fā)的工程師，海外網(wǎng)友都叫他Austin Gil。

既然是從事網(wǎng)頁(yè)開(kāi)發(fā)設(shè)計(jì)的，對(duì)HTML、java、CSS等相關(guān)網(wǎng)頁(yè)語(yǔ)言都很熟悉了。

Austin Gil采用了最簡(jiǎn)單的網(wǎng)頁(yè)語(yǔ)言，僅用HTML，實(shí)現(xiàn)了在網(wǎng)頁(yè)上點(diǎn)擊按鈕就能夠直接打開(kāi)手機(jī)前置鏡頭來(lái)拍照。也可以調(diào)用手機(jī)后置鏡頭，開(kāi)啟錄像模式。

整個(gè)編譯過(guò)程，利用了HTML的capture屬性，設(shè)置幾個(gè)input參數(shù)和加上幾行代碼就搞定了，不費(fèi)吹灰之力。

雖然用JavaScript或其它的方法也可以實(shí)現(xiàn)，但比起別的方法，這樣能夠便捷地獲取用戶相機(jī)權(quán)限，而且不用擔(dān)心安全問(wèn)題。

很多人都想知道相關(guān)代碼，接下來(lái)會(huì)提到的，一起來(lái)看看吧。

教你使用HTML打開(kāi)相機(jī)：

首先創(chuàng)建一個(gè)index.html文檔，配合HTML的accpet屬性，來(lái)指定不同標(biāo)簽所要capture的文件的具體屬性。

Austin Gil設(shè)置了“environment”和“user”兩個(gè)標(biāo)簽。

點(diǎn)擊“environment”，可以調(diào)用相機(jī)的后置鏡頭，且可以錄像；

點(diǎn)擊“user”，可以打開(kāi)相機(jī)前置鏡頭拍照。

具體代碼如下：

<!DOCTYPE html>

<html>

<head>

<style>

* {

font-size: 1.5rem;

}

</style>

</head>

<body>

<label for="environment">Capture environment:</label>

<br>

<input

type="file"

id="environment"

capture="environment"

accept="video/*"

<label for="user">Capture user:</label>

<br>

<input

type="file"

id="user"

capture="user"

accept="image/*"

</body>

</html>

從這些代碼中，我們可以捕獲到一個(gè)信息，就是沒(méi)有提示用戶是否打開(kāi)訪問(wèn)相機(jī)的權(quán)限，網(wǎng)頁(yè)就直接調(diào)用了相機(jī)。

問(wèn)題是，這樣操作，沒(méi)有安全風(fēng)險(xiǎn)嗎？

當(dāng)很多人提出疑惑的時(shí)候，Austin Gil做出了解釋?zhuān)簾o(wú)額外風(fēng)險(xiǎn)。

瀏覽器其實(shí)并不能真正控制手機(jī)相機(jī)APP，即便是這樣操作可以直接訪問(wèn)，但也只不過(guò)是能輕松上傳相機(jī)生成的新文件而已。

簡(jiǎn)單來(lái)說(shuō)，就是對(duì)于用戶而言，瀏覽器通過(guò)HTML只能打開(kāi)手機(jī)攝像頭。如果要把照片、視頻展示到網(wǎng)站上，或是想要保存下來(lái)，還得用到JavaScript的MediaDevices API。

這樣操作是比純用JavaScript更安全的。

因?yàn)檫\(yùn)用JavaScript，在用戶允許訪問(wèn)相機(jī)后，瀏覽器就能直接控制攝像頭了。

而在Web 3.0標(biāo)準(zhǔn)之后，規(guī)定網(wǎng)頁(yè)不能直接訪問(wèn)用戶的手機(jī)鏡頭。

PS：現(xiàn)在主要用的是Web 5的標(biāo)準(zhǔn)。

最后是兼容性，據(jù)悉在這方面并不是很好。

Austin Gil指出，這種直接通過(guò)HTML指令打開(kāi)用戶攝像頭的方式目前還存在不足，比如兼容性不太好。

如下圖所示：

紅色模塊：不支持

綠色模塊：支持

棕色模塊：部分支持

灰色：未知

很多網(wǎng)友在好奇心的驅(qū)使下，測(cè)試了調(diào)用手機(jī)相機(jī)的代碼。也有前端小哥進(jìn)行了測(cè)試，結(jié)果如下：

點(diǎn)擊environment和user按鈕，在MacBook上分別可以打開(kāi)視頻格式和圖片格式的文件；而在iPhone上，使用百度等瀏覽器，真的可以直接打開(kāi)前置和后置攝像頭！

好咯，本期內(nèi)容就分享到這里了~

在線咨詢

上一篇：看動(dòng)漫也能學(xué)Javascript？求求你了，不要這么
下一篇：HTML5第九節(jié) 表單驗(yàn)證

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

前端小程序-js+html調(diào)用電腦攝像頭實(shí)現(xiàn)網(wǎng)頁(yè)拍照

您的項(xiàng)目需求