getUserMedia.js
Shim for getUserMedia(). Uses native implementation for modern browsers and a Flash fallback for everyone else.
getUserMedia() shim demo
I am confused why
Modernizr.getusermedia
is undefined, but when I type in
!!navigator.webkitGetUserMedia
it returns true. I am using Chrome and I know webrtc is supported... so why does Modernizr say its undefined.
The Modernizr that I downloaded with bower has the getusermedia.js file in it with the line:
Modernizr.addTest('getusermedia', !!Modernizr.prefixed('getUserMedia', navigator));
Source: (StackOverflow)
Is it possible to use Chrome to capture video (webcam) and audio (microphone) from the browser and then save the stream as video file?
I would like to use this to create a video/photobooth-like application that allows users to record a simple (30 second) message (both video and audio) to files that can later be watched.
I have read the documentation but I have not (yet) seen any examples on how to capture both audio & video, also I did not find a way yet to store the results in a video file.
Who can help?
Source: (StackOverflow)
How do we go about requesting camera/microphone access with getUserMedia() after being denied once?
I'm working with getUserMedia to access the user's camera and pipe the data to a canvas. That bit all works fine.
In testing, I hit deny once. At this point in Chrome and Firefox, any subsequent requests with getUserMedia() default to the denied state.
We obviously don't want to annoy the hell out of our users by requesting permissions for camera/microphone on every page load after being denied. That's already annoying enough with the geolocation api.
However, there has to be a way to request it again. Simply because a user hit deny once doesn't mean they want to deny webcam access for all time.
I've been reading about the spec and googling around for a while but I'm not finding anything explicitly about this problem.
Edit:
Further research, it appears that hitting Deny in Chrome adds the current site to a block list. This can be manually accessed via chrome://settings/content. Scroll to Media. Manage Exceptions, remove the blocked site(s).
Linking to chrome://settings/content doesn't work (in the case where we want to add a helpful link to let people re-enable permissions).
The whole UX for dealing with permissions around getUserMedia stinks. =(
Source: (StackOverflow)
I am recording audio from getUserMedia({audio:true}); in the browser using Recorder.js and then exporting it as a WAV file because that's the only option the library provides.
A 1 minute 20 seconds file is 14.1 MB large. I need to upload the audio to a server and I need to do it fast. How do I convert the WAV audio in any other compressed format to lower the file size?
I don't mind converting to:
- MP3
- Opus
- WebM
- Ogg
- FLAC
- any other format you know of
If there is no way as of now to convert to any of these formats, how can I compress the WAV file on the client?
PS: I did a lot of searches to find anything that converts WAV in JS, but found nothing. libmp3lame.js isn't working in Chrome.
Thanks!
Source: (StackOverflow)
I am building a site for sing-alongs where the user can capture a video of themselves singing along with an mp3. I have gotten to the point that I can access the camera and display the live stream, but how can i save the video so the user can download and keep it?
My code:
<!DOCTYPE html>
<head>
<link rel='nofollow' href="css/bootstrap.css" rel="stylesheet"">
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<button class="btn" onclick="show();">Record!</button>
<div id="record" style="display:none; text-align:center;">
<div id="container">
<video autoplay="false" id="videoElement">
</video>
</div>
<button id="play" class="btn" onclick="play()">Start Recording!</button>
<audio id="song" style="hidden">
<source src="love.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
document.getElementById("videoElement").pause();
}
function videoError(e) {
alert("There was an error with the video stream.\nCheck that your webcam is connected.");
}
function play()
{
var video = document.getElementById("videoElement");
var music = document.getElementById("song");
var button = document.getElementById("play");
if (video.paused) {
video.play();
music.play();
button.textContent = "Stop Recording";
} else {
video.pause();
music.pause();
button.textContent = "Continue Recording";
}
}
function show()
{
document.getElementById("record").style.display="block";
}
</script>
</body>
is there a way in handleVideo i can save the stream as it comes or something?
Source: (StackOverflow)
I would like to see if it's possible to have direct access to Opus using getUserMedia or anything similar from the latest browsers.
I've been researching on it a lot but with no Good results.
I'm aware that either Opus or Speex are actually used in webkitSpeechRecognition API. I would like to do speech recognition but using my own server rather than Google's.
Source: (StackOverflow)
I would like some advice on how best to get the microphone activity level of an audio MediaStreamTrack javascript object in Chrome/Canary. The MediaStreamTrack object is an audio track of the MediaStream returned by getUserMedia, as part of the WebRTC javascript API.
Source: (StackOverflow)
I'm attempting to randomly capture an image from a webcam and then save it to my server, right now i'm using getUserMedia to stream the webcam to video element then I can capture an image to a canvas using a button but i'm not sure how to save that image from the canvas to my server.
Another issue is getUserMedia only works in Chrome, Opera and Firefox, is there any alternative for IE?
This is what i'm currently working with:
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="getBase" onclick="getBase()">Get Base64</button>
<textarea id="textArea"></textarea>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
document.getElementByID("getBase").addEventListener("click", getBase());
}, false);
function getBase(){
var imgBase = canvas.toDataURL("image/png");
document.getElementByID("textArea").value=imgBase;
}
</script>`
Thanks Heaps
Source: (StackOverflow)
This question already has an answer here:
So I have this HTML5 project I'm working on, where I'm converting an iOS app to a web-based one. Accompanying part of the content creation of the app is an audio recording, which I'm trying to replicate in JavaScript without the use of plugins; so far, I've been able to record audio from getUserMedia(), and turn it into a WAV thanks to Recorder.js.
Now, however, I'm a bit lost. I currently have two separate views, one for recording content and one for playing it back, but I don't know how to get the audio exported form Recorder.js into my JSON payload for playback (I'd like to avoid forcing a server upload or client download).
So I guess my specific question is, how do I take the blob object (something I know almost nothing about) made by Recorder.js and turn it into either raw data, or somehow send the File through JSON?
UPDATE: I've decided to try and use the speex.js tool (https://github.com/jpemartins/speex.js) to encode a .OGG (much smaller than a .WAV). However, I'm not really sure how to use it; the demo page didn't seem to work for me, and trying to call the .encode() function of a Speex object doesn't seem to actually encode the data, I only get zeros in the object fields. Does anyone know of any resources where I can learn how to use this type of tool?
Source: (StackOverflow)
Trying to call drawImage with a video whose source is a webcam feed seems to fail in Firefox with an
NS_ERROR_NOT_AVAILABLE: Component is not available.
I have tried to wait for every event the video tag fires: play, playing, canplay, loadeddata, loadedmetadata, and so on, and nothing works. This seems to be because these events are firing before the stream is properly loaded into the <video> element.
JSFiddle with error (You can view the error in the console)
A side effect is that the width and height of the video is also incorrect.
Source: (StackOverflow)
I'm capturing audio input from microphone with getUserMedia() function, works fine in chrome, but in firefox sound dies out after 5 seconds. If I send request for microphone again (without reloading the page) same thing happens. Here is the code (I used http://updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled as guidance):
//getting the function depending on browser
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
// success callback when requesting audio input stream
function gotAudioStream(stream) {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
// Create an AudioNode from the stream.
var mediaStreamSource = audioContext.createMediaStreamSource( stream );
// Connect it to the destination to hear yourself (or any other node for processing!)
mediaStreamSource.connect( audioContext.destination );
}
function gotError(err) {
alert("An error occured! " + err);
}
//when button clicked, browser asks a permission to access microphone
jQuery("#sound_on").click(function()
{
navigator.getMedia({audio: true},gotAudioStream,gotError);
});
Any ideas?
EDIT/UPDATE
Thank you, csch, for the reference. Workaround by Karoun Kasraie worked!
context = new AudioContext();
navigator.getUserMedia({ audio: true }, function(stream) {
// the important thing is to save a reference to the MediaStreamAudioSourceNode
// thus, *window*.source or any other object reference will do
window.source = context.createMediaStreamSource(stream);
source.connect(context.destination);
}, alert);
Source: (StackOverflow)
I'm trying to find out what will be the size of the image I get from the webcam using getUserMedia.
Right now, in my Macbook, I have supposedly a 720p camera, but the image I'm getting is 640x480. I'm assuming this won't always be the case, though, and I'd like to be able to handle as many cameras as possible. (I care way more about aspect ratio than size itself, I just want to make sure pictures don't show up stretched)
Is it possible to do this?
Thank you!
Daniel
Source: (StackOverflow)
I'm using the recorder.js and getUserMedia to do some audio recording in the browser. When starting the recording, the user is given the "Allow this site to use your microphone" prompt, and once they click allow, Chrome adds an indicator onto the tab's favicon to show that it is recording:
My issue is that the indicator never goes away, even after my application has stopped recording. Basically, I'd like to revoke my own recording permissions. Is this possible?
Source: (StackOverflow)
I am capturing audio data using getUserMedia() and I want to send it to my server so I can save it as a Blob in a MySQL field.
This is all I am trying to do. I have made several attempts to do this using WebRTC, but I dont even know at this point if this is right or even the best way to do this.
Can anybody help me?
Here is the code I am using to capture audio from the microphone:
navigator.getUserMedia({
video:false,
audio:true,
},function(mediaStream){
// output mediaStream to speakers:
var mediaStreamSource=audioContext.createMediaStreamSource(mediaStream);
mediaStreamSource.connect(audioContext.destintion);
// send mediaStream to server:
// WebRTC code? not sure about this...
var RTCconfig={};
var conn=new RTCPeerConnection(RTCconfig);
// ???
},function(error){
console.log('getUserMedia() fail.');
console.log(error);
});
How can I send this mediaStream up to the server?
After Googling around Ive been looking into WebRTC, but this seems to be for just peer to peer communication - actually, now I'm looking into this more, I think this is the way to go. It seems to be the way to communicate from the clients browser up to the host webserver, but nothing I try even comes close to working.
Ive been going through the W3C documentation (which I am finding way too abstract), and Ive been going thru this article on HTML5 Rocks (which is bringing up more questions than answers). Apparently I need a signalling method, can anyone advise which signalling method is best for sending mediaStreams, XHR, XMPP, SIP, Socket.io or something else?
What will I need on the server to support the receiving of WebRTC? My web server is running a basic LAMP stack.
Also is it best to wait until the mediaStream is finished recording before I send it up to the server, or is it better to send the mediaStream as its being recorded? I want to know if I am going about doing this the right way. I have written file uploaders in javascript and HTML5, but uploading one of these mediaStreams seems hellishly more complicated and I'm not sure if I am approaching it right.
Any help on this would be greatly appreciated.
Source: (StackOverflow)
I have a modal dialog box in my application which uses getUserMedia to display a video from the user's camera. This causes a "Deny/Allow" bar to appear. Let's say that the user closes the dialog before clicking "Deny" or "Allow". The bar remains, even though the elements that would be using it have disappeared.
Is there a way to notify the browser that it can hide the permission request even though the user never interacted with it?
Source: (StackOverflow)