HTML5是當(dāng)前全球使用最廣泛的Web標(biāo)準(zhǔn)技術(shù)之一，已經(jīng)成為Web開(kāi)發(fā)的主流。HTML5不僅支持各種與繪圖、動(dòng)畫(huà)、音頻和視頻相關(guān)的特性，而且還提供了許多移動(dòng)設(shè)備通用的接口。其中，針對(duì)移動(dòng)設(shè)備的相機(jī)和麥克風(fēng)API是其中的重點(diǎn)。下面我們就來(lái)詳細(xì)介紹如何在HTML5中使用手機(jī)相機(jī)。
第一步：獲取用戶(hù)認(rèn)證
利用HTML5獲取用戶(hù)認(rèn)證方式有多種，最常見(jiàn)的是使用getUserMedia API。這個(gè)API是W3C支持視頻、WebRTC（瀏覽器之間音頻和視頻通訊的標(biāo)準(zhǔn)）標(biāo)準(zhǔn)的一部分，可以獲取設(shè)備攝像頭和麥克風(fēng)的訪(fǎng)問(wèn)權(quán)限。
如果希望用戶(hù)始終授權(quán)相機(jī)訪(fǎng)問(wèn)，并省略由瀏覽器彈出的授權(quán)請(qǐng)求框，請(qǐng)確保您的網(wǎng)站已使用HTTPS。
getUserMedia() API的調(diào)用方式是：
```javascript
navigator.getUserMedia(constraints, successCallback, errorCallback);
```
其中，constraints是包含：
- audio:（需要音頻）
- video：（需要視頻）
- facingMode：支持 back（后置）或 front（前置）相機(jī)調(diào)用。
例如：
```javascript
const videoConstraints = {
facingMode: 'environment',
audio: false
};
navigator.mediaDevices.getUserMedia({ video: videoConstraints })
.then(stream => {
const video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(err => {
console.log('getUserMedia Error: ', err);
});
```
如果授權(quán)成功，getUserMedia(successCallback, errorCallback)回調(diào)函數(shù)的參數(shù)就可以使用了。
第二步：展示攝像頭畫(huà)面
通過(guò)將視頻流分配給HTML5 video元素的srcObject屬性來(lái)展示視頻流。此時(shí)，可以使用video.setAttribute('width', '500');和video.setAttribute('height', '400');來(lái)設(shè)置視頻元素的大小。
```html
```
第三步：拍照
當(dāng)攝像頭拍攝到的圖像在video元素中顯示時(shí)，可以將video元素嵌入到canvas元素中并使用toDataURL()方法將其轉(zhuǎn)換為圖像數(shù)據(jù)。 使用canvas.getContext('2d')繪制圖像并保存為圖像數(shù)據(jù)。
```javascript
const canvas = document.querySelector('#canvas');
const video = document.querySelector('#video');
const width = canvas.width = video.videoWidth;
const height = canvas.height = video.videoHeight;
// Get drawing context from canvas
const ctx = canvas.getContext('2d');
// Draw the image onto the context
ctx.drawImage(video, 0, 0, width, height);
const data = canvas.toDataURL('image/jpeg');
```
這就是在HTML5中調(diào)用移動(dòng)設(shè)備攝像頭的詳細(xì)步驟。同時(shí)，我們也可以通過(guò)音頻API錄制音頻，具體方式與獲取視頻流類(lèi)似。HTML5無(wú)疑是一種非常強(qiáng)大的技術(shù)方案，為我們的應(yīng)用程序提供了多種創(chuàng)造性的方法，為我們的用戶(hù)帶來(lái)更流暢、更高效的體驗(yàn)。
