Ios 通过浏览器访问摄像头

我们正在为移动设备创建一个HTML5网站，需要通过网络浏览器获取摄像头访问权限，而不是原生应用程序。在iOS中，我们很难做到这一点。有人知道这方面的解决方案吗？

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

我认为这一种是有效的。 录制视频或音频

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

或（新方法）

函数更新（流）{
document.querySelector（'video'）.src=stream.url；
}

---

如果不是，可能会在ios6上运行，更多详细信息可以在ios6的中找到，苹果通过

标签支持这一点。我在苹果的开发者文档中找不到有用的链接，但有一个例子

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

编辑：捕获属性明显缺失。

您可以尝试以下操作：

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

但它必须是iOS 6+才能工作。这将给你一个很好的对话，让你选择拍摄一张照片或从相册上传一张照片

可以在此处找到一个示例：

---

从2015年起，它现在只起作用

<input type="file">

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

---

如上所述，但将上传限制为仅从相机或图书馆上传照片，不上传视频。

更新11/2020：谷歌开发者链接（目前）已失效。有更多解释的原始文章仍然可以在上找到

---

这个问题已经提出了几年，但在这段时间内，一些其他的可能性已经发展起来，比如直接访问相机、显示预览和捕捉快照（例如用于二维码扫描）

本文深入解释了如何将图像/相机数据导入web应用程序的所有方法，从“随时随地工作”（甚至在桌面浏览器中）到“仅在配备相机的现代最新移动设备上工作”。以及许多有用的提示

解释方法：

• 询问URL：最简单但最不令人满意

• 文件输入（在这里的大多数其他文章中都有介绍）：然后，可以通过侦听输入元素上的onchange事件，然后读取事件目标的files属性，将数据附加到一个文件或使用JavaScript进行操作

您可以从

drop

事件的

dataTransfer.files

属性中获取

FileList

对象

• 从剪贴板粘贴

不要忘了使用停止视频流

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

---

更新11/2020：谷歌开发者链接（目前）已失效。有更多解释的原始文章仍然可以在上找到。

这在Android上也很棒！很好的上传到服务器的演示。有人知道如何修改此选项以将图片保存到设备上的本地相册中吗？唯一的问题是，至少在iphone（ios 7.0.4）上，至少在创建名为always

'image.jpg'

的临时图像时是这样的。因此，如果你上传了一些相同格式的图片，它们会由于相同的名称而相互覆盖，除非你做了一些事情来重命名它们，小心@K.Niemczyk：你有没有想过？如果是这样的话，我会对解决方案感兴趣。我发现：（参见示例6-7了解本地存储）非常棒。适用于任何想在其设备上测试此代码的人。在iOS8中，您不再需要Picup。HTML5支持。已在Safari和Chrome中验证。是否有任何方法限制用户从照片库中选择文件？我只想接受新拍摄的图像。@Daryl不在iOS上。Android支持

capture

属性，它就是这样做的。请看我是否应该在用户不点击一段时间后关闭此“拍照”或“视频和照片库”弹出窗口。看起来视频功能不再存在了？这就是为什么链接答案还应该包括答案中的细节，链接中断。我在web存档中挖掘了原始文章并添加了示例。如果能取消反对票，我会很感激的。

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

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

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

<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>

<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>

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