从浏览器访问相机
Posted
技术标签:
【中文标题】从浏览器访问相机【英文标题】：Access from the Browser to Camera 【发布时间】：2011-11-15 07:44:56 【问题描述】：我有一个关于的问题。 （android 和 ios 浏览器）
谷歌和苹果在一年前宣布，从浏览器到相机的访问应该很快就会可用。
我需要此功能用于移动 Web 应用程序。
此功能现在可用吗？
【问题讨论】：
更新（2012 年 10 月）此功能现已在 ios6 和 android 3+ 中可用 【参考方案1】：正如他们所说的，我确实使用了输入，并且在 iO 上工作得非常好。我可以从相机或相册中获取图片并设置一个 img 元素。
这里是代码：http://jsfiddle.net/2wZgv/
js:
<script>
oFReader = new FileReader();
oFReader.onload = function (oFREvent)
document.getElementById("fotoImg").src = oFREvent.target.result;
document.getElementById("fotoImg").style.visibility = "visible";
var screenHeight = screen.availHeight;
screenHeight = screenHeight - 220;
document.getElementById("fotoImg").style.height = screenHeight;
;
$(function()
$("input:file").change(function ()
var input = document.querySelector('input[type=file]');
var oFile = input.files[0];
oFReader.readAsDataURL(oFile);
);
);
</script>
picturephotoalbummobilejquerycamera
【讨论】：
不幸的是，我刚刚意识到这在 Android 上不起作用...它显示“内存不足”要完成... =/ 要使用 Android，您必须降低照片质量，所以它会在浏览器上加载... 非常感谢@CarinaPilar，但我正在尝试通过单击按钮将所选图像保存到本地磁盘。那么我们该怎么做呢？？【参考方案2】：试试这个东西。
<video id="Video" autoplay="autoplay" audio="muted" height ="100%"> </video>
<script type="text/javascript">
if (navigator.getUserMedia)
var video = document.getElementById('Video');
video.src = null;
navigator.getUserMedia('video', successCallback, errorCallback);
//if everything if good then set the source of the video element to the mediastream
function successCallback(stream)
video.src = stream;
//If everything isn't ok then say so
function errorCallback(error)
alert("An error occurred: [CODE " + error.code + "]");
else
//show no support for getUserMedia
alert("Native camera is not supported in this browser!");
</script>
但请记住，这仅适用于 Android 版 Opera Mobile。目前没有其他浏览器支持相机访问。据我所知，iOS 现在不支持此功能，将来可能会支持。
谢谢。
【讨论】：
Chrome 和 Firefox 支持带有供应商前缀的 getUserMedia。支持：caniuse.com/#feat=stream 我正在尝试使用类似的指南...但我无法让 img#show-picture 更新空白图像并将其替换为输入字段捕获的图像。见这里：robnyman.github.io/camera-api 我忘了用上面的例子加载jQuery！【参考方案3】：尝试以下方法：
<html>
<body>
<form>
<input type="file" accept="image/*;capture=camera"/>
<input type="submit"/>
</form>
</body>
</html>
【讨论】：
请至少对您的代码写一个简短的解释。谢谢。 适用于 Android 默认浏览器。谢谢。【参考方案4】：这是w3c draft
读完后输入标签应该是
<input type="file" accept="image/*" capture="camera" id="capture">
【讨论】：
【参考方案5】：这是可能的。您可以通过浏览器应用程序访问相机。如果您正在通过 Phone Gap 进行开发，请查找 http://docs.phonegap.com/phonegap_camera_camera.md.html
这是PhoneGap中用于访问相机的相机API。
【讨论】：
以上是关于从浏览器访问相机的主要内容，如果未能解决你的问题，请参考以下文章
您可以从 Mobile Safari 访问 iPhone 相机吗？ [关闭]