I am trying to make the ebcam work from my html and it won't work. The frames is there. But i cannot make it work. The webcam doesn't open and theres isn't even the pop up asking if I want to allow my wbcam to open....
am I missing something ? like a plug-in to make it work ? o or is there a mistake in my code ?
here is the html:
<!doctype html>
<head>
</head>
<body>
<link href="css.css" rel="stylesheet" />
<script src="js.js"></script>
<video id="video"></video>
<button id="startbutton">Take photo</button>
<canvas id="canvas"></canvas>
<img src="http://placekitten.com/g/200/150" id="photo" alt="photo">
</body>
here is the csss:
html {
background: #111111;
height: 100%;
background: linear-gradient( #333, #000);
}
canvas {
display: none;
}
video, img, #startbutton {
display: block;
float: left;
border: 10px solid #fff;
border-radius: 10px;
}
#startbutton {
background: green;
border: none;
color: #fff;
margin: 100px 20px 20px 20px;
padding: 10px 20px;
font-size: 20px;
}
#container {
overflow: hidden;
width: 880px;
margin: 20px auto;
}/
here is the js:
// JavaScript Document
(function() {
var streaming = false,
video = document.querySelector('#video'),
cover = document.querySelector('#cover'),
canvas = document.querySelector('#canvas'),
photo = document.querySelector('#photo'),
startbutton = document.querySelector('#startbutton'),
width = 200,
height = 0;
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream;
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
function takepicture() {
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
})();
it does ask for access and display my webcam: http://fiddle.jshell.net/e4Hf9/
don't know whats happening here, maybe you have a caching problem. try incognito / private browsing to your troubled page
- double check your code with the Mozilla's tutorial Taking webcam photos
- make sure your project has been correctly deployed on your server, like apache. and access your page via xx.xx.xx.xx:port/your_page
if you directly double click to open your code file, it won't work.
I am trying to make the ebcam work from my html and it won't work. The frames is there. But i cannot make it work. The webcam doesn't open and theres isn't even the pop up asking if I want to allow my wbcam to open....
am I missing something ? like a plug-in to make it work ? o or is there a mistake in my code ?
here is the html:
<!doctype html>
<head>
</head>
<body>
<link href="css.css" rel="stylesheet" />
<script src="js.js"></script>
<video id="video"></video>
<button id="startbutton">Take photo</button>
<canvas id="canvas"></canvas>
<img src="http://placekitten.com/g/200/150" id="photo" alt="photo">
</body>
here is the csss:
html {
background: #111111;
height: 100%;
background: linear-gradient( #333, #000);
}
canvas {
display: none;
}
video, img, #startbutton {
display: block;
float: left;
border: 10px solid #fff;
border-radius: 10px;
}
#startbutton {
background: green;
border: none;
color: #fff;
margin: 100px 20px 20px 20px;
padding: 10px 20px;
font-size: 20px;
}
#container {
overflow: hidden;
width: 880px;
margin: 20px auto;
}/
here is the js:
// JavaScript Document
(function() {
var streaming = false,
video = document.querySelector('#video'),
cover = document.querySelector('#cover'),
canvas = document.querySelector('#canvas'),
photo = document.querySelector('#photo'),
startbutton = document.querySelector('#startbutton'),
width = 200,
height = 0;
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream;
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
function takepicture() {
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
})();
it does ask for access and display my webcam: http://fiddle.jshell.net/e4Hf9/
don't know whats happening here, maybe you have a caching problem. try incognito / private browsing to your troubled page
- double check your code with the Mozilla's tutorial Taking webcam photos
- make sure your project has been correctly deployed on your server, like apache. and access your page via xx.xx.xx.xx:port/your_page
if you directly double click to open your code file, it won't work.
0 commentaires:
Enregistrer un commentaire