通过浏览器进入摄像头

我们正在为手机创建一个 HTML5网站，需要通过网络浏览器获得相机访问，而不是一个本地应用程序。我们在 iOS 系统中很难做到这一点。有人知道怎么解决这个问题吗？

217723 次浏览
小开

皮卡应用程序是一种从 HTML5页面获取图片并上传到服务器的方法。它需要在服务器上进行一些额外的编程，但是除了 PhoneGap，我没有找到其他的方法。

小开

我觉得这个起作用了。 录制视频或音频;

<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上工作，更多的细节可以在 获取用户媒体上找到

小开

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

它看起来像覆盖和更高级的功能尚未可用，但这应该工作的很多用例。

编辑: W3c 有一个规范，iOS6 Safari 似乎实现了。 capture属性明显缺失。

小开

你可以试试这个:

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

但它 必须是 iOS6 + 工作。这将给你一个很好的对话，你可以选择要么采取一张照片或上传一个从您的专辑，即。

Screenhot

这里有一个例子: 在不使用 PhoneGap 的情况下捕获相机/图片数据

小开

截至2015年，现在是 只是工作。

<input type="file">

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

iOS/iPhone photo/video/file upload

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

这是如上所述，但限制上传到 照片只从相机或图书馆，没有视频。

小开

更新11/2020 : Google 开发者链接(目前)已经死亡。原来的文章与许多更多的解释仍然可以在 Web.archive. org找到。

这个问题已经存在了几年，但是在这段时间里，一些额外的可能性已经发生了变化，比如直接访问相机，显示预览和捕捉快照(例如二维码扫描)。

这篇 Google 开发者文章提供了对所有(?)的深入解释如何将图像/照相机数据导入 web 应用程序，从“到处工作”(甚至在桌面浏览器中)到“只能在带有照相机的现代最新移动设备上工作”。还有很多有用的提示。

解释方法:

  • 要求一个 URL: 最简单但最不令人满意。

  • 文件输入(这里大多数其他帖子都有提到) : 通过侦听 input 元素上的 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对象。

  • 交互式访问相机(如果应用程序需要对它“看到”的东西给出即时反馈，如二维码，则必须访问) : 用 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 开发者链接(目前)已经死亡。原来的文章与许多更多的解释仍然可以在 Web.archive. org找到。


提交答案