h5开发app如何调用手机拍照功能

H5开发App可以通过调用手机的摄像头实现拍照功能，这样用户就可以在App内直接拍摄照片，方便快捷。下面将详细介绍如何实现这个功能以及原理：

1. HTML5的getUserMedia API：getUserMedia是HTML5中用于获取用户媒体设备（比如摄像头、麦克风）的API，通过该API可以直接访问并使用摄像头功能。首先需要在HTML中引入getUserMedia对象：

```html

```

2. 调用摄像头并显示画面：可以通过调用getUserMedia方法来打开摄像头并在页面上显示摄像头的实时画面。以下是示例代码：

```javascript

var constraints = { video: { facingMode: "environment" }, audio: false }; // facingMode可以选择前/后置摄像头

var video = document.querySelector('video');

function successCallback(stream) {

window.stream = stream; // 将stream保存在全局，方便后面使用

if (window.URL) {

video.src = window.URL.createObjectURL(stream); // 将stream转化为URL，赋值给video

} else {

video.src = stream;

}

video.play(); // 播放实时画面

}

function errorCallback(error) {

console.log('navigator.getUserMedia error: ', error);

}

navigator.getUserMedia(constraints, successCallback, errorCallback);

```

3. 拍照功能实现：在调用摄像头并展示画面后，就可以通过canvas来捕捉画面，并将其转化为图片，实现拍照功能。以下是示例代码：

```javascript

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

document.getElementById('take-photo').addEventListener("click", function() {

ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 将实时画面绘制到canvas上

var imgData = canvas.toDataURL('image/jpeg'); // 将canvas内容转化为base64格式的图片数据

// 这里可以根据需求将图片数据发送到服务器或者做其他处理

});

```

通过上述步骤，就可以在H5开发的App中调用手机的摄像头功能并实现拍照功能。用户可以在App内直接拍摄照片，并可以将照片保存到本地或者上传到服务器等操作。

需要注意的是，getUserMedia API在不同浏览器中可能存在兼容性问题，可以借助第三方库如adapter.js来兼容各个浏览器。同时，调用摄像头功能需要提前获取用户的许可，因此在真实项目中需要增加用户授权的提示和逻辑处理。