Is it possible to access the camera (built-in on Apples) from a browser?
Optimal solution would be client-side javascript. Looking to avoid using Java or Flash.
This question is related to
javascript
camera
The answer is
<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>
Video Tutorial: Accessing the Camera with HTML5 & appMobi API will be helpful for you.
Also, you may try the getUserMedia method (supported by Opera 12)
As of 2017, WebKit announces support for WebRTC on Safari
Now you can access them with video and standard javascript WebRTC
E.g.
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;
});
Have a play with it.
**SIMPLE JAVASCRIPT VANILLA **
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>The HTML5 spec does allow accessing the webcamera, but last I checked, it is far from finalized, and has very, very little browser support.
This is a link to get you started: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
You'll probably have to use flash if you want it to work cross-browser.
Possible with HTML5.
You can use HTML5 for this:
<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>
There is a really cool solution from Danny Markov for that. It uses navigator.getUserMedia method and should work in modern browsers. I have tested it successfully with Firefox and Chrome. IE didn't work:
Here is a demo:
https://tutorialzine.github.io/pwa-photobooth/
Link to Danny Markovs description page:
http://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps/
Link to GitHub:
Source: Stackoverflow.com