HTML5 的調用攝像頭拍照和獲取視頻流的方法

著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" 參數（其中端口號需替換成實際的本地服務端口），即可獲得權限，進行攝像頭使用。

兩天發布了一篇關于利用html5在手機端進行撥號和發送短信的教程，今天再說一下利用html5在手機端調用攝像頭以及錄音的教程

HTML5 調用手機攝像頭

在html5中可以利用type類型為file的input的標簽調起手機的攝像頭

例：html5調用手機攝像頭進行拍照

<input type="file" accept="image/*" capture="camera">

例：html5調用手機攝像頭進行錄像

<input type="file" accept="video/*" capture="camera">

HTML5 進行手機錄音

input 標簽，不僅僅可以調用起手機的攝像頭，還可以錄音呢

例：

<input type="file" accept="audio/*" capture="microphone">

input代碼解析

input accept 屬性

accept屬性可以限制可用文件的類型，當 input 標簽的 type 屬性為 file 時，可以規定服務器所接受的文件類型

例如：

accept="audio/*" 表示所有音頻文件
accept="video/*" 表示視頻文件
accept="image/"* 表示圖片文件

當然你也可以使用文件后綴名的形式

例：

accept="image/png* 表示只接收后綴名為 png 的圖片
accept="image/jpg* 表示只接收后綴名為 jpg 的圖片
accept=".png, .jpg, .jpeg" 表示可以同時接收 png jpg jpeg 后綴的文件

input capture 屬性

、前言

最近有遇到一個需求，在h5瀏覽器中實現掃碼功能，其本質便是打開手機攝像頭定時拍照，特此做一個記錄。主要技術棧采用的是vue2，使用的開發工具是hbuilderX。
經過測試發現部分瀏覽器并不支持打開攝像頭，測試了果子，華子和米，發現夸克瀏覽器無法打開攝像頭實現功能。

h5調用攝像頭實現掃一掃只能在https環境下，亦或者是本地調試環境！！

二、技術方案

經過一番了解之后，找到了兩個方案
1.使用html5-qrcode(對二維碼的精度要求較高，勝在使用比較方便，公司用的是vue2，因此最終采用此方案)
2.使用vue-qrcode-reader(對vue版本和node有一定要求，推薦vue3使用，這里就不展開說了)

三、使用方式

當點擊中間的掃碼時，設置isScanning屬性為true,即可打開掃碼功能，代碼復制粘貼即可放心‘食用’。

使用之前做的準備

通過npm install html5-qrcode 下載包
引入 import { Html5Qrcode } from 'html5-qrcode';

html結構
<view class="reader-box" v-if="isScaning">
	<view class="reader" id="reader"></view>
</view>

所用數據
data(){
    return{
        html5Qrcode: null,
        isScaning: false,
    }
}

methods方法
openQrcode() {
    this.isScaning = true;
    Html5Qrcode.getCameras().then((devices) => {
    if (devices && devices.length) {
    this.html5Qrcode = new Html5Qrcode('reader');
    this.html5Qrcode.start(
        {
        facingMode: 'environment'
        },
        {
        focusMode: 'continuous', //設置連續聚焦模式
        fps: 5,       //設置掃碼識別速度
        qrbox: 280   //設置二維碼掃描框大小
        },
        (decodeText, decodeResult) => {
         if (decodeText) {	//這里decodeText就是通過掃描二維碼得到的內容
            this.action(decodeText)  //對二維碼邏輯處理
            this.stopScan(); //關閉掃碼功能
        }
    },
        (err) => {
            // console.log(err);  //錯誤信息
         }
     );
    }
    });
},

stopScan() {
	console.log('停止掃碼')
	this.isScaning = false;
	if(this.html5Qrcode){
    this.html5Qrcode.stop();
	}
}

css樣式
.reader-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.reader {
		width:100%;
		// width: 540rpx;
		// height: 540rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

四、最終效果

作者：極客轉
鏈接：https://juejin.cn/post/7316795553798815783

在線咨詢

上一篇：HTML中嵌入視頻和音頻代碼
下一篇：淺談 React 中的 XSS 攻擊

您的項目需求

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

整合營銷服務商