整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
自網絡
這是大家在做信息類網站的時候經常要用到的一個功能：
理想情況下我們應該先判斷你的設備上是否有攝像頭或相機，但簡單起見，我們在這里直接寫出了HTML標記，而不是用JavaScript先判斷然后動態生成這些標記
<video id="video" width="300" height="240" autoplay></video>
<button id="snap">拍照</button>
<canvas id="canvas" width="300" height="240"></canvas>
</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);
司項目需要調用攝像頭，看了一下html5文檔，主要是使用html5的getUserMedia()API，寫一個例子來記錄具體的使用方法。
<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');
/**
* 調用用戶媒體設備
* @param constraints 配置信息
* @param success 成功回調函數
* @param error 失敗回調函數
*/
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);
}
}
/**
* 成功回調函數
* @param stream 視頻流
*/
function success(stream){
var CompatibleURL=window.URL || window.webkitURL;
try {
video.src=CompatibleURL.createObjectURL(stream);
} catch (e) {
video.srcObject=stream;
}
video.play();
}
/**
* 失敗回調
* @param error 錯誤對象
*/
function error(error) {
console.log('無法訪問媒體設備', error);
}
if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
getUserMediaToPhoto({video:{width:480,height:320}},success,error);
}else{
alert('不支持訪問用戶媒體設備');
}
/**
* 拍照按鈕點擊事件
*/
function handleClickCapture() {
ctx.drawImage(video,0,0,480,320);
}
</script>
</body>
</html>
實現了基本的攝像頭調用和拍照，實現思路非常簡單，基本上只是在調用api，唯一惡心的地方在于api版本比較多，不得不多做一些判斷。具體的api介紹、使用和參數可以查看MediaDevices.getUserMedia()。
外小哥利用了幾行代碼直接訪問了手機的相機功能，這聽起來是一件很新鮮的事情。究竟是怎么實現的呢？感興趣的話，可以繼續了解下去哦。
這位國外小哥是從事網頁開發的工程師，海外網友都叫他Austin Gil。
既然是從事網頁開發設計的，對HTML、java、CSS等相關網頁語言都很熟悉了。
Austin Gil采用了最簡單的網頁語言，僅用HTML，實現了在網頁上點擊按鈕就能夠直接打開手機前置鏡頭來拍照。也可以調用手機后置鏡頭，開啟錄像模式。
整個編譯過程，利用了HTML的capture屬性，設置幾個input參數和加上幾行代碼就搞定了，不費吹灰之力。
雖然用JavaScript或其它的方法也可以實現，但比起別的方法，這樣能夠便捷地獲取用戶相機權限，而且不用擔心安全問題。
很多人都想知道相關代碼，接下來會提到的，一起來看看吧。
教你使用HTML打開相機：
首先創建一個index.html文檔，配合HTML的accpet屬性，來指定不同標簽所要capture的文件的具體屬性。
Austin Gil設置了“environment”和“user”兩個標簽。
點擊“environment”，可以調用相機的后置鏡頭，且可以錄像；
點擊“user”，可以打開相機前置鏡頭拍照。
具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
* {
font-size: 1.5rem;
}
</style>
</head>
<body>
<label for="environment">Capture environment:</label>
<br>
<input
type="file"
id="environment"
capture="environment"
accept="video/*"
>
<br><br>
<label for="user">Capture user:</label>
<br>
<input
type="file"
id="user"
capture="user"
accept="image/*"
>
</body>
</html>
從這些代碼中，我們可以捕獲到一個信息，就是沒有提示用戶是否打開訪問相機的權限，網頁就直接調用了相機。
問題是，這樣操作，沒有安全風險嗎？
當很多人提出疑惑的時候，Austin Gil做出了解釋：無額外風險。
瀏覽器其實并不能真正控制手機相機APP，即便是這樣操作可以直接訪問，但也只不過是能輕松上傳相機生成的新文件而已。
簡單來說，就是對于用戶而言，瀏覽器通過HTML只能打開手機攝像頭。如果要把照片、視頻展示到網站上，或是想要保存下來，還得用到JavaScript的MediaDevices API。
這樣操作是比純用JavaScript更安全的。
因為運用JavaScript，在用戶允許訪問相機后，瀏覽器就能直接控制攝像頭了。
而在Web 3.0標準之后，規定網頁不能直接訪問用戶的手機鏡頭。
PS：現在主要用的是Web 5的標準。
最后是兼容性，據悉在這方面并不是很好。
Austin Gil指出，這種直接通過HTML指令打開用戶攝像頭的方式目前還存在不足，比如兼容性不太好。
如下圖所示：
紅色模塊：不支持
綠色模塊：支持
棕色模塊：部分支持
灰色：未知
很多網友在好奇心的驅使下，測試了調用手機相機的代碼。也有前端小哥進行了測試，結果如下：
點擊environment和user按鈕，在MacBook上分別可以打開視頻格式和圖片格式的文件；而在iPhone上，使用百度等瀏覽器，真的可以直接打開前置和后置攝像頭！
好咯，本期內容就分享到這里了~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
