I can't display the video stream in Google Chrome (v21)
Code
<html>
<head>
<script>
window.addEventListener('DOMContentLoaded', function() {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if(navigator.getUserMedia) {
navigator.getUserMedia({video: true, audio: true}, function(stream) {
var video = document.getElementById('sourcevid');
video.src = stream;
}, function(error) {
console.error(error.code);
});
} else {
console.log('Not supported in this browser.');
}
}, false);
</script>
</head>
<body>
<video id="sourcevid" autoplay>Put your fallback message here.</video>
</body>
</html>
Please help me understand where the problem is.
I had the same problem and I fixed it by calling the play method on the video element. Even if you add the autoplay attribute, it won't work. My best guess for that is that at the moment of loading the video tag the source is empty so it can't start.
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;
var success = function(stream){
var video = document.getElementById('myVideo');
video.src = webkitURL.createObjectURL(stream);
//Even if autoplay is true you need to call the play method
video.play();
}
var error = function(err){
console.log(err)
}
navigator.getUserMedia({video:true, audio:true}, success, error);
This won't work unless you have the flag for Chrome Enable PeerConnection enabled...
1) Go to the web address about:flags in Chrome
2) Find Enable PeerConnection
3) Enable it
4) Restart Chrome
5) ???
6) Profit...?
I got similar issue but it is just resolved by adding source with blank initially.
<video id="sourcevid" src="" autoplay>Put your fallback message here.</video>
Related
This is the code I used in the index page. I want to let users record a video using their webcam. When I run the app, all I see is space where the video recorder is supposed to be and the stop button. When I do "inspect source" and hover over the area where the recorder is supposed to be, it gets highlighter, that means its their, I just cant see it. Also there is an error shown in the inspect source code which is shown and the code is shown below that.
<script type="text/javascript">
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
var cameraStream = '';
if (navigator.getUserMedia) {
navigator.getUserMedia(
{audio: true, video: true}
function(stream)
{
cameraStream = Stream;
video.src = window.URL.createObjectURL(stream);
}
function()
{
document.writeln("problem")
}
);
}
else
{
document.writeln("not support");
}
document.querySelector('#stopbt').addEventListener(
'click',
function(e)
{
video.src="";
cameraStream.stop();
});
</script>
You need a , in between the } and { (in between lines 64 and 65)
Sorry not a semicolon
Try refreshing because the screenshot has an error but it is different code than the code in the question. The code in the question should work because the user friendly description of the error is the correct error that would show in what the code is.
i have a webcam script but it doesnt seem to work i also dont get any console errors can some one please help me to see what m i doing wrong
Photo.js
(function(){
var video = document.getElementById('video'),
vendorURL = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.WebKitGetUserMedia||
navigator.msGetUserMedia;
navigator.getMedia({
video:true,
audio:false
}, function(stream) {
video.src = vendorURL.createObjectURL(stream);
video.play();
}, function(error) {
//an error occured
//error.code
});
});
index.html
<div class="booth">
<video id="video" width="400" height="300"></video>
</div><!-- end booth -->
and here is a fiddle Fiddle
This tutorial is script is taken from
https://youtu.be/gA_HJMd7uvQ?t=456
There are two issues at javascript at Question. 1) The IIFE is not actually called; you can call the immediately invoked function expression by including opening and closing parentheses () before closing parenthesis ) 2) w and k at navigator.WebKitGetUserMedia should be lowercase characters navigator.webkitGetUserMedia
(function() {
var video = document.getElementById('video'),
vendorURL = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || /* substituted `w` for `W`, `k` for `K` */
navigator.msGetUserMedia;
navigator.getMedia({
video: true,
audio: false
}, function(stream) {
video.src = vendorURL.createObjectURL(stream);
video.play();
}, function(error) {
console.log(error)
//an error occured
//error.code
});
}()); // added `()` before closing `)`
jsfiddle https://fiddle.jshell.net/heLs62sg/1/
It looks like you have wrapped this code in a closure which wont run unless you specifically call it from somewhere.
(function(){
// Code will not execute automatically
});
Note the extra parenthesis on the final line in the following example:
(function(){
// Code will execute automatically
})();
Alternatively, you could assign your code to a variable and manually call it, eg:
var func = (function(){
// Some Code in here
});
func();
I suspect that this is the root cause of your problem, but I cant say for sure that your webcam code works but this should be a step in the right direction.
I'm trying to use the getUserMedia method to access my webcam and track my face with clmtrackr (https://github.com/auduno/clmtrackr).
Some weeks ago it was working but since Chrome update to v50 I encounter issues, it uses the replacement video instead of calling my webcam.
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// check for camerasupport
if (navigator.getUserMedia) {
var videoSelector = {video : true};
if (window.navigator.appVersion.match(/Chrome\/(.*?) /)) {
var chromeVersion = parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10);
if (chromeVersion < 20) {
videoSelector = "video";
}
};
navigator.getUserMedia(videoSelector, function( stream ) {
if (video.mozCaptureStream) {
video.mozSrcObject = stream;
} else {
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
}
video.play();
}, function() {
//it uses this alt video
insertAltVideo(video);
alert("There was some problem trying to fetch video from your webcam, using a fallback video instead.");
});
} else {
insertAltVideo(video);
alert("Your browser does not seem to support getUserMedia, using a fallback video instead.");
}
PS : It works as I want on Firefox
Thanks in advance
navigator.getUserMedia no longer works in Chrome (it returns undefined), use the newer MediaDevices interface:
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var videoTracks = stream.getVideoTracks();
console.log('Got stream with constraints:', constraints);
console.log('Using video device: ' + videoTracks[0].label);
stream.onended = function() {
console.log('Stream ended');
};
window.stream = stream; // make variable available to console
video.srcObject = stream;
})
.catch(function(error) {
// ...
}
See more:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en
https://developers.google.com/web/updates/2015/10/media-devices?hl=en
I am trying to study web RTC. This is example where I just want to show my camera video.
<html>
<head>
<title>Web RTC</title>
</head>
<body>
<video autoplay></video>
<script type="text/javascript">
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
var hdConstraints = {
video : {
mandatory: {
minWidth: 1280,
minHeight: 720
}
}
};
var errorCallback = function(e) {
console.log('Rejected!', e);
};
var successCallback = function(stream) {
video.src = window.URL.createObjectURL(stream);
}
if (navigator.getUserMedia) {
navigator.getUserMedia(hdConstraints, successCallback, errorCallback);
}
else {
console.log('sh');
}
</script>
</body>
</html>
Problem is that chrome wont let my camera start. I was clicking on camera icon and I told chrome that he should ask me next time for permission... if anyone is thinking in that direction, that is not the case. In Firefox this works just fine. That first console log is throwing an error and Google did not helped me with it. You can try i your self. Any ideas?
Thank you in advance.
I am working on implementing getUserMedia for audio/video and then having it saved via local storage through HTML5 api. I have two issues.
The first issue is that when the audio connects it echos my voice very faintly and has a constant static sound (tested in firefox). Is there any known issues with this, I was unable to find an answer of any sort.
As well, is there documentation stopping and putting the mediaStream file into something to be saved via local storage or through ajax/php or anything like that? I am a little lost on how to stop and then keep the file.
MY JavaScript code and HTML code is below... THANK YOU!
<section>
<!-- <audio controls autoplay></audio> -->
<video controls autoplay></video>
<input id="startRecording" type="button" value="Start Recording"/>
<input id="stopRecording" type="button" value="Stop Recording"/>
</section>
window.onload = function() {
function hasGetUserMedia() {
//Note: opera is unprefixed
return !!(navigator.hasGetUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
} //Check for Get User Media in browsers
function startRecording() {
navigator.getUserMedia({audio: true, video: true},function(stream) {audio.src = window.URL.createObjectURL(stream); },onFail);
}
function stopRecording() {
var audio = document.querySelector('video');
audio.src = "";Q
}
var onFail = function(e) {
console.log("ERROR");
}
var audio = document.querySelector('video');
if (hasGetUserMedia()) {
//AWESOME! Do whatever needs to be done
window.URL = (window.URL || window.webkitURL || window.webkitURL || window.mozURL || window.msURL);
navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia );
var startRecord = document.getElementById('startRecording');
var endRecord = document.getElementById('stopRecording');
startRecord.onclick = startRecording;
endRecord.onclick = stopRecording;
} else {
alert("FAIL");
//Put in fallback for flash/silverlight?
} //Check for getUserMedia()
} //load this stuff onload
It is currently possible to capture video indirectly through the canvas, but the Mediastream Recorder API isn't implemented yet. So sound is going to be hard anyway.
As for the echo's, that is very well possible. See:
https://hacks.mozilla.org/2013/06/webrtc-comes-to-firefox/
So I'm afraid you will have to wait a bit longer still.