从浏览器访问相机
Posted
技术标签:
【中文标题】从浏览器访问相机【英文标题】：Access camera from a browser 【发布时间】：2012-08-15 00:32:15 【问题描述】：是否可以（Apple 内置）？
最佳解决方案是客户端 javascript。希望避免使用 Java 或 Flash。
【问题讨论】：
禁用自己的相机 见：***.com/questions/6976079/… @Aesthete：很像html5的geolocation对象，它会先请求权限。
据我记忆，Flash 可以访问网络摄像头/摄像头。我对 JS 有疑问。
【参考方案1】：
HTML5 规范确实允许访问网络摄像头，但我最后检查了一下，它还远未最终确定，并且几乎没有浏览器支持。
这是一个帮助您入门的链接： http://www.html5rocks.com/en/tutorials/getusermedia/intro/
如果您希望 Flash 能够跨浏览器工作，您可能必须使用它。
W3 draft
【讨论】：
【参考方案2】：截至 2017 年，WebKit announces support for WebRTC on Safari
现在您可以使用 video 和标准 javascript WebRTC 访问它们
例如
var video = document.createElement('video');
video.setAttribute('playsinline', '');
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.style.width = '200px';
video.style.height = '200px';
/* Setting up the constraint */
var facingMode = "user"; // Can be 'user' or 'environment' to access back or front camera (NEAT!)
var constraints =
audio: false,
video:
facingMode: facingMode
;
/* Stream it to video element */
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream)
video.srcObject = stream;
);
玩玩吧。
【讨论】：
你好，但仍然不支持ios webview，是吗？您有任何解决方法可以在 ios webview 中访问相机吗？其他问题参考：***.com/questions/54319924/…谢谢【参考方案3】：Danny Markov 提供了一个非常酷的解决方案。它使用 navigator.getUserMedia 方法并且应该在现代浏览器中工作。我已经用 Firefox 和 Chrome 成功地测试了它。 IE 不工作：
这是一个演示：
https://tutorialzine.github.io/pwa-photobooth/
链接到 Danny Markovs 描述页面：
http://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps/
GitHub 链接：
https://github.com/tutorialzine/pwa-photobooth/
【讨论】：
这在 iOS 10 设备上不起作用（没有测试过其他任何东西）。它说this browser doesnt support getUserMedia 或类似的东西。【参考方案4】：
可以使用 HTML5。
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
【讨论】：
【参考方案5】：您可以为此使用 HTML5：
<video autoplay></video>
<script>
var onFailSoHard = function(e)
console.log('Reeeejected!', e);
;
// Not showing vendor prefixes.
navigator.getUserMedia(video: true, audio: true, function(localMediaStream)
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
// Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
// See crbug.com/110938.
video.onloadedmetadata = function(e)
// Ready to go. Do some stuff.
;
, onFailSoHard);
</script>
Source
【讨论】：
【参考方案6】：Video Tutorial: Accessing the Camera with HTML5 & appMobi API会对您有所帮助。
另外，你可以试试getUserMedia 方法（Opera 12 支持）
【讨论】：
【参考方案7】：是的，可以从浏览器访问相机，以下是对我有用的代码
<html><head>
</head><body>
<video src="" ></video>
<br />
<button id='flipCamera'>Flip</button>
</body>
<script>
var front = false;
var video = document.querySelector('video');
document.getElementById('flipCamera').onclick = function() front = !front; ;
var constraints = video: facingMode: (front? "user" : "environment"), width: 640, height: 480 ;
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream)
video.srcObject = mediaStream;
video.onloadedmetadata = function(e)
video.play();
;
)
.catch(function(err) console.log(err.name + ": " + err.message); )
</script></html>
【讨论】：
【参考方案8】： <style type="text/css">
#container
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
#videoElement
width: 500px;
height: 375px;
background-color: #777;
</style>
<div id="container">
<video autoplay="true" id="videoElement"></video>
</div>
<script type="text/javascript">
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia||navigator.oGetUserMedia;
if(navigator.getUserMedia)
navigator.getUserMedia(video:true, handleVideo, videoError);
function handleVideo(stream)
video.srcObject=stream;
video.play();
function videoError(e)
</script>
【讨论】：
请提供更多解释！【参考方案9】：**简单的 JAVASCRIPT 香草 **
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia)
navigator.mediaDevices.getUserMedia( video: true )
.then(function (stream)
video.srcObject = stream;
)
.catch(function (err0r)
console.log("Something went wrong!");
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
#container
align-self: center;
margin-left: 350px;
align-items: center;
justify-content: center;
position: relative;
width: 1000px;
height: 1000px;
background-color: black;
padding: 3px;
#videoElement
transform: rotate(90deg);
align-self: center;
height: 50a0px;
left: 20;
width: 700px;
position:absolute;
padding: 1px;
top: 120px;
</style>
</head>
<body>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script src="index.js">
</script>
</body>
</html>【讨论】：
以上是关于从浏览器访问相机的主要内容，如果未能解决你的问题，请参考以下文章
您可以从 Mobile Safari 访问 iPhone 相机吗？ [关闭]