HTML5网页如何调用手机摄像头 HTML5网页获取用户媒体的完整指南

<video id="video" autoplay playsinline></video>
<script>
  const video = document.getElementById('video');
<p>async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: false // 手机网页通常不需要录音
});
video.srcObject = stream;
} catch (err) {
console.error("无法访问摄像头：", err);
}
}</p><p>startCamera();
</script>

<button id="capture">拍照</button>
<canvas id="canvas" style="display:none;"></canvas>
<a id="download" style="display:block; text-align:center;">下载照片</a>

const captureBtn = document.getElementById('capture');
const canvas = document.getElementById('canvas');
const downloadLink = document.getElementById('download');
const context = canvas.getContext('2d');
<p>captureBtn.addEventListener('click', () => {
// 设置画布尺寸与视频一致
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;</p><p>// 绘制当前帧
context.drawImage(video, 0, 0, canvas.width, canvas.height);</p><p>// 将图像导出为 data URL
const imageData = canvas.toDataURL('image/jpeg');
downloadLink.href = imageData;
downloadLink.download = 'photo.jpg';
downloadLink.textContent = "点击下载照片";
});

const constraints = {
  video: {
    facingMode: "environment" // 强制使用后置摄像头
  }
};
await navigator.mediaDevices.getUserMedia(constraints);

async function getCameras() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const videoDevices = devices.filter(device => device.kind === 'videoinput');
  return videoDevices;
}

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
  alert("你的浏览器不支持摄像头调用");
  return;
}