getUserMedia API

Rupesh Kumar

unread,

Feb 22, 2012, 7:01:28 AM2/22/12

to discuss...@googlegroups.com

I tried with the the given code for the audio capture from the microphone in many browsers like(opera,chrome canary,chromium-beta n others also)...

<html>

<body>

<p id="status">To start recording, press the ? button.</p>

var recBtn = document.getElementById('recBtn');

var stopBtn = document.getElementById('stopBtn');

function report(s) {

document.getElementById('status').textContent = s;

}

function msgRecord() {

report('Attempting to access microphone...');

navigator.getUserMedia({audio:true}, gotStream, noStream);

recBtn.disabled = true;

}

var msgStream, msgStreamRecorder;

function gotStream(stream) {

report('Recording... To stop, press to ? button.');

msgStream = stream;

msgStreamRecorder = stream.record();

stopBtn.disabled = false;

stream.onended = function () {

msgStop();

}

function msgStop() {

report('Creating file...');

stopBtn.disabled = true;

msgStream.onended = null;

msgStream.stop();

msgStreamRecorder.getRecordedData(msgSave);

}

function msgSave(blob) {

report('Uploading file...');

var x = new XMLHttpRequest();

x.open('POST', 'uploadMessage');

x.send(blob);

x.onload = function () {

report('Done! To record a new message, press the ? button.');

recBtn.disabled = false;

};

x.onerror = function () {

report('Failed to upload message. To try recording a message again, press the ? button.');

recBtn.disabled = false;

};

}

function noStream() {

report('Could not obtain access to your microphone. To try again, press the ? button.');

recBtn.disabled = false;

}

</script>

</body>

</html>

But it is not working.

Is it possible to capture audio from microphone in HTML5 by using javascript. If yes then which browser supports it and wat is the exact code.

Tribolet Luc

unread,

Feb 22, 2012, 7:20:15 AM2/22/12

to discuss-webrtc

You use the sample code given on the specification w3c page and it's
still a draft.

Therefore you have to use prefix on method which depend the browser
you're using.

To be able to capture media from device on chrome/chromium you have to
use the method webkitGetUserMedia() like :

navigator..webkitGetUserMedia("audio", gotStream, noStream);

Regards

Luc

Guillem

unread,

Feb 22, 2012, 9:22:36 AM2/22/12

to discuss...@googlegroups.com

But the

msgStreamRecorder = stream.record();

you get a error not found because is not available yet. I try to get the audio from browser and I only found the wami-recorder project to make possible.

Regards

Rupesh Kumar

unread,

Feb 23, 2012, 12:13:07 AM2/23/12

to discuss-webrtc

Hi Tribolet,

Thanks for the response. But still after the prefix also it is not
working.
I have used the getUserMedia API for video capturing in opera browser
and is working but when i try to do the same with audio (capturing
from microphone) ,it doesnt work.

This code is working fine for capturing video from webcam in opera
browser but audio part is not working.

<!DOCTYPE html>
<html>
<body>

<video id="sourcevid" autoplay>Put your fallback message here.</video>
<audio id="sourceaid" autoplay >Put your fallback message here.</
audio>
/* JavaScript code */
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
// Assign the <video> element to a variable
var video = document.getElementById('sourcevid');
var audio = document.getElementById('sourceaid');

// Replace the source of the video element with the stream from
the camera
if (navigator.getUserMedia) {
navigator.getUserMedia('audio,video', successCallback,
errorCallback);
// Below is the latest syntax. Using the old syntax for the
time being for backwards compatibility.
// navigator.getUserMedia({video: true}, successCallback,
errorCallback);
function successCallback(stream) {
video.src = stream;
audio.src = stream;

//var rate = audio.mozSampleRate;
//var channels = audio.mozChannels;
//var length = audio.mozFrameBufferLength;
//audio.src = stream;
}
function errorCallback(error) {
console.error('An error occurred: [CODE ' + error.code +
']');
return;
}
} else {
console.log('Native web camera streaming (getUserMedia) is not
supported in this browser.');
return;
}
}, false);

</script>
</body>
</html>

Suggest something.

Thanks and Regards,
Rupesh

On Feb 22, 5:20 pm, Tribolet Luc <luc.tribo...@gmail.com> wrote:
> You use the sample code given on the specification w3c page and it's
> still a draft.
>
> Therefore you have to use prefix on method which depend the browser
> you're using.
>
> To be able to capture media from device on chrome/chromium you have to
> use the method webkitGetUserMedia() like :
>
> navigator..webkitGetUserMedia("audio", gotStream, noStream);
>
> Regards
>
> Luc
>
> On 22 fév, 13:01, Rupesh Kumar <rupeshs...@gmail.com> wrote:
>
>
>
>
>
>
>
> > I tried with the the given code for theaudiocapture from themicrophone
> > in many browsers like(opera,chrome canary,chromium-beta n others also)...
> > <html>
> > <body>
> > <input type="button" value="?" onclick="msgRecord()" id="recBtn">
> > <input type="button" value="?" onclick="msgStop()" id="stopBtn" disabled>
> > <p id="status">To start recording, press the ? button.</p>
> > <script>
> > var recBtn = document.getElementById('recBtn');
> > var stopBtn = document.getElementById('stopBtn');
> > function report(s) {
> > document.getElementById('status').textContent = s;
> > }
> > function msgRecord() {

> > report('Attempting to accessmicrophone...');

> > report('Could not obtain access to yourmicrophone. To try again, press

> > the ? button.');
> > recBtn.disabled = false;
> > }
> > </script>
>
> > </body>
> > </html>
>
> > But it is not working.

> > Is it possible to captureaudiofrommicrophonein HTML5 by using

Tribolet Luc

unread,

Feb 23, 2012, 4:08:44 AM2/23/12

to discuss-webrtc

Hi Rupesh,

I don't think Opera is able to capture audio for now (if someone knows
could you tell me ?).

Try to reproduce this code : http://dathor.blogspot.com/2012/02/webrtc-getusermedia-and-websockets.html

I don't work with Opera at this moment so I can't help you more. But
for Chrome you have to use the prefix "webkit" in order to make webrtc
functional.

Regards,

Luc

Reply all

Reply to author

Forward