I making a web application that need to record stream from the pc/mobile mic/camera using java script and html5(no flash). how i can do it?
There are two methods, getusermedia and the legacy method using an input, which is what ios6 allows:
Old way:
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
Current way:
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true, video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
}, onFailSoHard);
} else {
video.src = 'somevideo.webm'; // fallback.
}
These samples were copied from here. HTML5Rocks has many working samples as well.
navigator.getUserMedia ( constraints, successCallback, errorCallback );
Short description with example
API
Supported browsers
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'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 have a web page that requests use of the microphone. I understand that getUserMedia() has little or no support for mobile browsers but i'm trying to figure out a way of letting the viewer know that they need to visit the site on a supported browser. I'm trying not to use screensize media queries as support my slowly come in.
var onSuccess = function (stream) {
alert('success');
};
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
var constraints = {
video: false,
audio: true
};
if (navigator.getUserMedia) {
navigator.getUserMedia (
constraints,
onSuccess,
function (error) {
alert("Error: you need to allow access to use the microphone.",error)
});
};
It's strange because the page loads fine as if getUserMedia() is available but no "allow access" message pops up?
You should need to alert if there's no getUserMedia also:
var onSuccess = function(stream) {
alert('Success!');
}
var onError = function(error) {
alert('Error :(');
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: false, audio: true }, onSuccess, onError);
} else {
onError();
}
Also take a look to MediaDevices.getUserMedia
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.
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>