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

H5 调用手机摄像头进行拍照可以通过以下步骤实现：

使用 HTML5 的 getUserMedia() 方法获取摄像头视频流。
将视频流显示在页面上。
使用 canvas 将视频截图，并转换为 base64 编码的图像数据。
将图像数据发送到服务器进行处理，或直接使用 JavaScript 处理。

以下是示例代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>使用 HTML5 调用摄像头进行拍照</title>
	<style>
		#video {
			width: 100%;
			height: auto;
		}
		#canvas {
			display: none;
		}
		#photo {
			width: 100%;
			height: auto;
		}
	</style>
</head>
<body>
	<video id='video' autoplay></video>
	<canvas id='canvas'></canvas>
	<button id='capture'>拍照</button>
	<img id='photo' src='' alt='拍照结果'>
	<script>
		var video = document.getElementById('video');
		var canvas = document.getElementById('canvas');
		var photo = document.getElementById('photo');
		var capture = document.getElementById('capture');

		// 获取摄像头视频流
		navigator.mediaDevices.getUserMedia({ video: true })
			.then(function(stream) {
				video.srcObject = stream;
			})
			.catch(function(err) {
				console.log('获取摄像头视频流失败：' + err);
			});

		// 拍照
		capture.onclick = function() {
			canvas.width = video.videoWidth;
			canvas.height = video.videoHeight;
			canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
			photo.src = canvas.toDataURL('image/png');
		};
	</script>
</body>
</html>

在上述示例中，我们使用了 JavaScript 的 canvas 对象将视频截图，并将截图转换为 base64 编码的图像数据，然后将其显示在 img 标签中。如果需要将图像数据发送到服务器进行处理，可以使用 Ajax 或 WebSocket 等技术实现。