HTML5是当前全球使用最广泛的Web标准技术之一，已经成为Web开发的主流。HTML5不仅支持各种与绘图、动画、音频和视频相关的特性，而且还提供了许多移动设备通用的接口。其中，专为移动设备的相机和麦克风API是其中的重点。下面我们就来详细介绍如何在HTML5中使用手机相机。
第一步获取用户认证
利用HTML5获取用户认证方法有多种，最常常出现在大家视野里的是使用getUserMedia API。这个API是W3C支持视频、WebRTC（浏览器之间音频和视频通讯的标准）标准的一部分，可以获取设备摄像头和麦克风的访问权限。
如果希望用户始终授权相机访问，并省略由浏览器弹出的授权请求框，请确保您的网站已使用HTTPS。
getUserMedia() API的调用方法是
```javascript
navigator.getUserMedia(constraints, successCallback, errorCallback);
```
其中，constraints是包含
- audio:（需要音频）
- video（需要视频）
- facingMode支持 back（后置）或 front（前置）相机调用。
例如
```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);
});
```
如果授权成功，getUserMedia(successCallback, errorCallback)回调函数的参数就可以使用了。
第二步展示摄像头画面
通过将视频流分配给HTML5 video元素的srcObject属性来展示视频流。此时，可以使用video.setAttribute('width', '500');和video.setAttribute('height', '400');来设置视频元素的大小。
```html
```
第三步拍照
当摄像头拍摄到的图像在video元素中显示时，可以将video元素嵌入到canvas元素中并使用toDataURL()方法把它转换为图像数据。 使用canvas.getContext('2d')绘制图像并保存为图像数据。
```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中调用移动设备摄像头的详细步骤。同时，我们也可以借助音频API录制音频，具体方法与获取视频流类似。HTML5无疑是一种非常强大的技术方案，为我们的应用程序提供了多种创造性的方法，为我们的用户带来更流畅、更高效的体验。