通过浏览器访问相机

Question

我们正在为移动设备创建一个 HTML5 网站，需要通过网络浏览器访问相机，而无需成为本机应用程序。我们在 iOS 中无法实现此功能。有人知道这个问题的解决方案吗？

Answer 1

您可以尝试这个：

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

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

>示例可以在这里找到：
不使用 PhoneGap 捕获相机/图片数据

Answer 2

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

<input type="file">

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

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

与上述相同，但仅限上传来自相机或图库的照片，不得上传视频。

Answer 3

在 iOS6 中，Apple 通过 标签支持此功能。我在 Apple 的开发人员文档中找不到有用的链接，但这里有一个示例。

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

编辑： w3c 有一个规范，iOS6 Safari 似乎实现了其中的一个子集。 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 上工作，更多详细信息可以在 获取用户媒体

Answer 5

更新 11/2020：Google Developer 链接（目前）已失效。仍然可以在 web.archive.org。

---

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

这篇 Google 开发者文章深入解释了所有 ( ？）如何将图像/相机数据导入 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 码）提供即时反馈，则这是必需的）：使用 constsupported = '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>

不要忘记通过更新 11/2020 停止视频流

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

：Google Developer 链接（目前）已失效。仍然可以在 web.archive.org。

Answer 6

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