手機瀏覽器調用相機功能，只需要幾行代碼就行？前端小哥厲害了

外小哥利用了幾行代碼直接訪問了手機的相機功能，這聽起來是一件很新鮮的事情。究竟是怎么實現的呢？感興趣的話，可以繼續了解下去哦。

這位國外小哥是從事網頁開發的工程師，海外網友都叫他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>

<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>

從這些代碼中，我們可以捕獲到一個信息，就是沒有提示用戶是否打開訪問相機的權限，網頁就直接調用了相機。

問題是，這樣操作，沒有安全風險嗎？

當很多人提出疑惑的時候，Austin Gil做出了解釋：無額外風險。

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

簡單來說，就是對于用戶而言，瀏覽器通過HTML只能打開手機攝像頭。如果要把照片、視頻展示到網站上，或是想要保存下來，還得用到JavaScript的MediaDevices API。

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

因為運用JavaScript，在用戶允許訪問相機后，瀏覽器就能直接控制攝像頭了。

而在Web 3.0標準之后，規定網頁不能直接訪問用戶的手機鏡頭。

PS：現在主要用的是Web 5的標準。

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

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

如下圖所示：

紅色模塊：不支持

綠色模塊：支持

棕色模塊：部分支持

灰色：未知

很多網友在好奇心的驅使下，測試了調用手機相機的代碼。也有前端小哥進行了測試，結果如下：

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

好咯，本期內容就分享到這里了~

自網絡

這是大家在做信息類網站的時候經常要用到的一個功能：

理想情況下我們應該先判斷你的設備上是否有攝像頭或相機，但簡單起見，我們在這里直接寫出了HTML標記，而不是用JavaScript先判斷然后動態生成這些標記

</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);

著web功能越來越強大，我們很多時候需要在web頁面來獲取攝像頭進行操作，原生html5提供了對攝像頭的支持，需要用戶的同意授權，下面是一個基于 HTML5 的調用攝像頭拍照并上傳后臺的示例代碼：

html復制代碼<!DOCTYPE html>
<html>
<head>
    <title>拍照上傳</title>
</head>
<body>
    <video id="video" style="width:300px;height:200px;"></video>
    <br>
    <button id="btn-start">啟動攝像頭</button>
    <button id="btn-stop">停止攝像頭</button>
    <button id="btn-capture">拍照上傳</button>
    <br>
    <canvas id="canvas"></canvas>
    <form id="form-upload" method="post" enctype="multipart/form-data">
        <input type="file" id="input-file" name="file"/>
    </form>

    <script type="text/javascript">
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        
        // 啟動攝像頭
        document.getElementById('btn-start').addEventListener('click', function() {
            navigator.mediaDevices.getUserMedia({
                video: true,
                audio: false
            }).then(function(stream) {
                video.srcObject = stream;
            }).catch(function(err) {
                console.log("啟動攝像頭失敗：" + err);
            });
        });

        // 停止攝像頭
        document.getElementById('btn-stop').addEventListener('click', function() {
            video.pause();
            video.srcObject.getTracks()[0].stop();
            video.srcObject = null;
        });

        // 拍照，并上傳到后臺
        document.getElementById('btn-capture').addEventListener('click', function() {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            ctx.drawImage(video, 0, 0);
            canvas.toBlob(function(blob) {
                var formData = new FormData();
                formData.append('file', blob, 'photo.jpg');
                postRequest('/upload', formData, function(res) {
                    alert(res.message);
                });
            }, 'image/jpeg');
        });

        // 發送 POST 請求
        function postRequest(url, data, callback) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var res = JSON.parse(xhr.responseText);
                    callback(res);
                }
            };
            xhr.send(data);
        }
    </script>
</body>
</html>

上述代碼主要分為以下幾個部分：

html5 的 <video> 元素用于顯示攝像頭數據流，我們可以通過 JavaScript API 控制調用攝像頭、暫停和關閉。同時使用了 <canvas> 元素來緩存視頻幀的圖像數據。
頁面中 btn-start 按鈕通過 getUserMedia() 方法請求瀏覽器授權，并將攝像頭數據流傳給 <video> 元素進行播放。
點擊 btn-capture 按鈕時，通過 toBlob() 將緩存的圖像數據轉化為 Blob 對象，并封裝到 FormData 中，以便發送給后臺服務。
postRequest() 函數用于發送包含文件數據的 POST 請求，其中 FormData 對象中的 key 是上傳后臺服務器處理時需要讀取的參數名稱，通常對應具體的后臺業務邏輯。

最后，需要注意的是，在本地調試和開發時，特別是在 Windows 操作系統下使用 Chrome 瀏覽器訪問時，可能會遇到攝像頭不能正常運行的情況。這時可以打開地址欄，在目標請求前加上 --unsafely-treat-insecure-origin-as-secure="http://localhost:8080" 參數（其中端口號需替換成實際的本地服務端口），即可獲得權限，進行攝像頭使用。

在線咨詢

上一篇：重學前端基礎：瀏覽器的兼容，CDN資源網站，html5shiv插件
下一篇：白露節氣海報設計圖片、文案大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

手機瀏覽器調用相機功能，只需要幾行代碼就行？前端小哥厲害了

您的項目需求