h5做app能调用手机摄像头

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无疑是一种非常强大的技术方案，为我们的应用程序提供了多种创造性的方法，为我们的用户带来更流畅、更高效的体验。