js 拍照界面修改

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const video = document.querySelector('video');
    video.srcObject = stream;
    video.play();
  })
  .catch(err => {
    console.error("Error accessing camera: ", err);
  });

navigator.mediaDevices.getUserMedia({
  video: { width: { ideal: 1920 }, height: { ideal: 1080 } }
})
// ...后续代码使用canvas绘制并导出高质量图片

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  // 浏览器支持getUserMedia
} else {
  // 浏览器不支持，提供降级方案或提示用户
}

<video id="preview" width="640" height="480" autoplay></video>
<button id="snap">拍照</button>
<canvas id="canvas" width="640" height="480"></canvas>

<script>
  const video = document.getElementById('preview');
  const canvas = document.getElementById('canvas');
  const snap = document.getElementById('snap');
  let stream;

  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(function(mediastream) {
      stream = mediastream;
      video.srcObject = mediastream;
    })
    .catch(function(err) {
      console.log("An error occurred: " + err);
    });

  snap.addEventListener("click", function() {
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, 640, 480);
    stream.getTracks().forEach(track => track.stop());
  });
</script>