通过浏览器访问相机

Question

我们正在创建一个用于移动设备的 HTML5 网站，需要通过网络浏览器访问相机，而不是原生应用。我们无法在 iOS 中进行这项工作。有人知道解决方案吗？

Answer 1

你可以试试这个：

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

但它必须是 iOS 6+ 才能工作。这将为您提供一个很好的对话，供您选择拍照或从相册上传照片，即

可以在此处找到示例： Capturing camera/picture data without PhoneGap

Answer 2

截至 2015 年，它现在正常工作。

<input type="file">

这将要求用户上传任何文件。在 iOS 8.x 上，这可以是相机视频、相机照片或照片库中的照片/视频。

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

这和上面一样，但是限制上传到照片只来自相机或图书馆，没有视频。

Answer 3

在 iOS6 中，Apple 通过<input type="file"> 标签支持这一点。我在 Apple 的开发者文档中找不到有用的链接，但有一个示例 here。

看起来覆盖和更高级的功能尚不可用，但这应该适用于很多用例。

编辑：The w3c has a spec that iOS6 Safari seems to implement a subset of. capture 属性明显缺失。

Answer 4

我认为这个是有效的。 录制视频或音频；

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

或（新方法）

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

如果不是，可能会在 ios6 上工作，更多细节可以在get user media找到

Answer 5

2020 年 11 月更新：Google 开发者链接（目前）已失效。更多解释的原始文章仍然可以在web.archive.org找到。

---

这个问题已经有几年的历史了，但在那个时候已经发展了一些额外的可能性，比如直接访问相机、显示预览和捕捉快照（例如用于 QR 码扫描）。

这篇Google Developers 文章深入解释了所有（？）如何将图像/相机数据放入 Web 应用程序的方法，从“在任何地方工作”（甚至在桌面浏览器中）到“仅在现代环境中工作” , 带摄像头的最新移动设备”。以及许多有用的提示。

解释方法：

• 请求一个 URL：最简单但最不令人满意。

• 文件输入（此处的大多数其他帖子都有介绍）：然后可以通过侦听输入元素上的 onchange 事件然后读取事件目标的 files 属性，将数据附加到 a 或使用 JavaScript 操作。

<input type="file" accept="image/*" id="file-input">
<script>
  const fileInput = document.getElementById('file-input');

  fileInput.addEventListener('change', (e) => doSomethingWithFiles(e.target.files));
</script>

files 属性是一个 FileList 对象。

• 拖放（适用于桌面浏览器）：

<div id="target">You can drag an image file here</div>
<script>
  const target = document.getElementById('target');

  target.addEventListener('drop', (e) => {
    e.stopPropagation();
    e.preventDefault();

    doSomethingWithFiles(e.dataTransfer.files);
  });

  target.addEventListener('dragover', (e) => {
    e.stopPropagation();
    e.preventDefault();

    e.dataTransfer.dropEffect = 'copy';
  });
</script>

您可以从drop 事件的dataTransfer.files 属性中获取FileList 对象。

• 从剪贴板粘贴

<textarea id="target">Paste an image here</textarea>
<script>
  const target = document.getElementById('target');

  target.addEventListener('paste', (e) => {
    e.preventDefault();
    doSomethingWithFiles(e.clipboardData.files);
  });
</script>

e.clipboardData.files 又是一个FileList 对象。

• 以交互方式访问摄像头（如果应用程序需要对它“看到”的内容提供即时反馈，例如 QR 码，则必须这样做）：使用 const supported = 'mediaDevices' in navigator; 检测摄像头支持并提示用户同意。然后显示实时预览并将快照复制到画布。

<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>
<script>
  const player = document.getElementById('player');
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  const captureButton = document.getElementById('capture');

  const constraints = {
    video: true,
  };

  captureButton.addEventListener('click', () => {
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, canvas.width, canvas.height);
  });

  // Attach the video stream to the video element and autoplay.
  navigator.mediaDevices.getUserMedia(constraints)
    .then((stream) => {
      player.srcObject = stream;
    });
</script>

不要忘记停止视频流

player.srcObject.getVideoTracks().forEach(track => track.stop());

2020 年 11 月更新：Google 开发者链接（目前）已失效。更多解释的原始文章仍然可以在web.archive.org找到。

Answer 6

Picup 应用程序是一种从 HTML5 页面拍摄照片并将其上传到您的服务器的方法。它需要在服务器上进行一些额外的编程，但除了PhoneGap，我还没有找到其他方法。