通过浏览器访问相机

Posted 2023-02-15

【中文标题】通过浏览器访问相机

【英文标题】：Camera access through browser

【发布时间】：2011-09-14 06:21:17

【问题描述】：

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

【参考方案1】：

你可以试试这个：

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

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

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

【讨论】：

这在 android 上也很棒！

上传到服务器的不错的演示。有谁知道如何修改它以将图片保存到设备上的本地相册中？

唯一的问题是，至少在 iphone (ios 7.0.4) 上，至少目前它会创建一个名为 always 'image.jpg' 的临时图像。因此，如果您以相同的形式上传几张图片，它们会因名称相同而相互覆盖，除非您对它们进行重命名，请小心！

@K.Niemczyk：你有想过吗？如果是这样，我会对解决方案感兴趣。我发现了这个：dev.w3.org/2009/dap/camera（本地存储参见示例 6-7）

太棒了。 Here's a fiddle 对于任何想要在他们的设备上测试此代码的人。

【参考方案2】：

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

<input type="file">

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

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

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

【讨论】：

有没有办法限制用户从照片库中选择文件？我只想接受新拍摄的图像。

@Daryl 不在 iOS 上。 Android 支持 capture 属性，它就是这样做的。见Correct Syntax for HTML Media Capture

我应该关闭这个拍照或视频和照片库弹出窗口一段时间后用户不要点击它。

视频功能好像没有了？

【参考方案3】：

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

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

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

【参考方案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找到

【参考方案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找到。

【讨论】：

这就是为什么链接答案还应该包括答案中的细节，链接中断。

我在网络档案中挖掘了原始文章并添加了示例。希望取消反对票。

【参考方案6】：

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

【讨论】：

在 iOS8 中，您不再需要 Picup。 HTML5 支持 。已在 Safari 和 Chrome 中验证。