HTML5拍照正方代碼
HTML5提供了許多新特性，其中就包括了使用瀏覽器攝像頭進行圖像采集和處理的功能。下面是一個簡單的HTML5拍照正方代碼：
這是一個HTML5拍照正方代碼示例：
<html>
<head>
<title>HTML5拍照正方代碼</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">拍照</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
var video = document.querySelector("#video");
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
// 獲取用戶的媒體訪問權限
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(error) {
console.log("無法訪問攝像頭：" + error.message);
});
document.getElementById("snap").addEventListener("click", function() {
// 先將視頻的內容繪制到canvas上
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 獲得canvas上的圖像數據
var imageData = canvas.toDataURL("image/png");
// 將圖像數據賦值給img標簽的src屬性
document.querySelector("#photo").src = imageData;
});
</script>
<img id="photo" src="" width="640" height="480" alt="拍照結果">
</body>
</html>上面代碼中，首先我們創建了一個video元素，用于顯示攝像頭的內容。然后，我們使用getUserMedia()方法獲取用戶的媒體訪問權限，并將攝像頭的數據流賦值給video元素的srcObject屬性，從而實現了攝像頭的實時預覽。
當用戶點擊“拍照”按鈕時，我們使用canvas元素將當前視頻幀繪制到畫布上，然后將畫布中的圖像數據轉換成base64編碼的字符串，賦值給img元素的src屬性，從而顯示拍照的結果。
這是一個非常簡單的HTML5拍照正方代碼示例，但它卻展示了使用HTML5攝像頭API進行圖像采集和處理的基本原理。