通过浏览器访问相机

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通过<input type="file">标签支持此功能.我找不到苹果的开发者文档中一个有益的联系,但有一个例子在这里.

它看起来像叠加层和更高级的功能尚不可用,但这应该适用于很多用例.

编辑: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>

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

• 从剪贴板粘贴

<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());

11/2020 更新：Google Developer 链接（目前）已失效。带有更多解释的原始文章仍然可以在web.archive.org找到。

Answer 6

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