H5 手机摄像头拍照：完整指南及代码示例

H5调用手机摄像头进行拍照，需要使用HTML5的新特性，即getUserMedia()方法，该方法可以获取用户的媒体设备，如摄像头、麦克风等。

以下是实现H5调用手机摄像头进行拍照的步骤：

创建一个video标签用于显示摄像头捕获的视频，以及一个canvas标签用于绘制图片。

<video id='video'></video>
<canvas id='canvas'></canvas>

使用getUserMedia()方法获取用户的媒体设备，同时将视频流绑定到video标签上。

navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
  var video = document.getElementById('video');
  video.srcObject = stream;
  video.play();
}).catch(function(err) {
  console.log('Error: ' + err);
});

当需要拍照时，将视频画面绘制到canvas标签上，并将canvas转化为图片。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var imgData = canvas.toDataURL('image/png');

可以将图片数据保存到本地或上传到服务器等操作。

// 保存到本地
var link = document.createElement('a');
link.href = imgData;
link.download = 'photo.png';
link.click();

// 上传到服务器
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
  console.log('上传成功');
};
xhr.send('imgData=' + encodeURIComponent(imgData));

通过以上步骤，就可以实现H5调用手机摄像头进行拍照了。