H5手机端调用手机摄像头拍照

在HTML5中，调用手机摄像头拍摄照片通常涉及到JavaScript和一些设备访问API，比如Web API (Media Streams)。以下是简单的步骤：

1. **获取用户授权**：首先，你需要在`<script>`标签内通过`getUserMedia()`方法请求用户的媒体权限，尤其是对相机的访问。

<script>
function getUserMediaSuccess(stream) {
   // 接下来处理流
}
function getUserMediaError(err) {
   console.error('Failed to access camera: ', err);
}

navigator.mediaDevices.getUserMedia({ video: true })
    .then(getUserMediaSuccess)
    .catch(getUserMediaError);
</script>

2. **创建视频元素**：创建一个HTML5 `<video>`元素，并设置其srcObject属性为从`getUserMedia()`获取的stream，这样视频就会显示实时摄像头画面。

<video id="camera" width="300" height="200"></video>

3. **触发拍照**：当用户想要拍照时，你可以创建一个Canvas画布，然后从video元素上截取帧，保存为图片。例如：

document.getElementById('takePicture').addEventListener('click', function() {
    var canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    // 然后将canvas转换为Blob并下载
});

4. **下载图片**：将生成的canvas转换为Blob，然后提供给用户下载。

var imgBlob = canvas.toDataURL('image/jpeg'); // 或者 image/png
var link = document.createElement('a');
link.href = imgBlob;
link.download = 'photo.jpg'; // 可自定义文件名
link.click();

请注意，以上示例需要在现代浏览器支持WebRTC和getUserMedia的情况下运行，并且可能受到浏览器安全策略的影响。在实际应用中，可能还需要处理更多边缘情况和兼容问题。