如何在 HTML 页面中直接拍照（而不打开相机应用程序）？

Question

我知道

<input type="file" accept="image/*" capture>

允许用户拍照的方法（以及类似的其他示例 here 和 accept="video/*" 等），使用此方法时，单击 <input> 通常打开 phone 的相机应用程序，允许用户拍照，然后返回到原始页面。

但是如何使用 Javascript 直接在 HTML 页面、<div> 和 中预览相机"Take photo" 按钮，即不必打开 phone 的相机应用程序？

（当然，用户必须授予对 phone 相机的访问权限）

Answer 1

感谢this tutorial, I finally found the solution using getUserMedia。

注意：由于 Chrome 的最新版本，出于安全原因，它仅在站点为 HTTPS 时有效。如果您想在非 HTTPS 网站上进行测试，可以从 Chrome 开始 "C:\Program Files\Google\Chrome\Application\chrome.exe" --unsafely-treat-insecure-origin-as-secure="http://123.123.123.123"。

var videoElement = document.querySelector('video');
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');

audioSelect.onchange = getStream;
videoSelect.onchange = getStream;

getStream().then(getDevices).then(gotDevices);

function getDevices() { return navigator.mediaDevices.enumerateDevices(); }

function gotDevices(deviceInfos) {
  window.deviceInfos = deviceInfos; 
  for (const deviceInfo of deviceInfos) {
const option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'audioinput') { option.text = deviceInfo.label || `Microphone ${audioSelect.length + 1}`; audioSelect.appendChild(option); } 
if (deviceInfo.kind === 'videoinput') { option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`; videoSelect.appendChild(option); }
  }
}

function getStream() {
  if (window.stream) { window.stream.getTracks().forEach(track => { track.stop(); }); }
  const audioSource = audioSelect.value;
  const videoSource = videoSelect.value;
  const constraints = { audio: {deviceId: audioSource ? {exact: audioSource} : undefined}, video: {deviceId: videoSource ? {exact: videoSource} : undefined} };
  return navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError);
}

function gotStream(stream) {
  window.stream = stream;
  audioSelect.selectedIndex = [...audioSelect.options].findIndex(option => option.text === stream.getAudioTracks()[0].label);
  videoSelect.selectedIndex = [...videoSelect.options].findIndex(option => option.text === stream.getVideoTracks()[0].label);
  videoElement.srcObject = stream;
}

function handleError(error) { console.error('Error: ', error); }

<div id="container">
<div class="select"><label for="audioSource">Audio source: </label><select id="audioSource"></select></div>
<div class="select"><label for="videoSource">Video source: </label><select id="videoSource"></select></div>
<video autoplay muted playsinline></video>
</div>

如何在 HTML 页面中直接拍照（而不打开相机应用程序）？

How to enable taking of a photo directly in a HTML page (and not opening the camera app)?

html

javascript

camera

responsive-design