Develop Reference

mediarecorder api playback through Web Audio api (not audio element)

I'm having an issue getting a captured blob from the mediaRecorder api to playback in Chrome (it works in Firefox). Not sure if it's a bug in Chrome.
The error it reports:
undefined:1 Uncaught (in promise) DOMException: Unable to decode audio data
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
var context = new AudioContext();
var record = document.querySelector('#record');
var stop = document.querySelector('#stop');
if (navigator.getUserMedia) {
console.log('getUserMedia supported.');
var constraints = {
audio: true
};
var chunks = [];
var onSuccess = function(stream) {
var mediaRecorder = new MediaRecorder(stream);
record.onclick = function() {
mediaRecorder.start();
console.log(mediaRecorder.state);
console.log("recorder started");
record.style.background = "red";
stop.disabled = false;
record.disabled = true;
}
stop.onclick = function() {
mediaRecorder.stop();
console.log(mediaRecorder.state);
console.log("recorder stopped");
record.style.background = "";
record.style.color = "";
stop.disabled = true;
record.disabled = false;
}
mediaRecorder.onstop = function(e) {
console.log("onstop() called.", e);
var blob = new Blob(chunks, {
'type': 'audio/wav'
});
chunks = [];
var reader = new FileReader();
reader.addEventListener("loadend", function() {
context.decodeAudioData(reader.result, function(buffer) {
playsound(buffer);
},
function(e) {
console.log("error ", e)
});
});
reader.readAsArrayBuffer(blob);
}
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
}
}
var onError = function(err) {
console.log('The following error occured: ' + err);
}
navigator.getUserMedia(constraints, onSuccess, onError);
} else {
console.log('getUserMedia not supported on your browser!');
}
function playsound(thisbuffer) {
var source = context.createBufferSource();
source.buffer = thisbuffer;
source.connect(context.destination);
source.start(0);
}
<button id="record">record</button>
<button id="stop">stop</button>

I have used your code exactly the way it is. Everything is working fine in Chrome browser.
This issue was fixed when bug https://codereview.chromium.org/1579693006/ was closed and added to the Chrome pipeline.
This is no longer an issue.

To close the loop on this, I suspect this was due to the Chrome bug documented in a comment above. It appears this bug was fixed several years ago and should no longer be a problem as WebAudio now uses ffmpeg for decoding.

Can I open the URL automaticly when I scan with WebQR

I am a programmer and I just made a simple webapp, with webview in Android studio. I have everything working except one thing. I used the WebQR set from LazarSoft. In my webapp part I have a file called webqr.js (found beneath) with the following content.
What I am trying to do is when a QR-code is scanned I want to open the result (if it is an URL) automatic in the same browser window. Now it just shows only the result.
Any help would be much appreciated.
var gCtx = null;
var gCanvas = null;
var c=0;
var stype=0;
var gUM=false;
var webkit=false;
var moz=false;
var v=null;
var imghtml='<div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas>'+
'<div id="imghelp">drag and drop a QRCode here'+
'<br>or select a file'+
'<input type="file" onchange="handleFiles(this.files)"/>'+
'</div>'+
'</div>';
var vidhtml = '<video id="v" autoplay></video>';
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
if(files.length>0)
{
handleFiles(files);
}
else
if(dt.getData('URL'))
{
qrcode.decode(dt.getData('URL'));
}
}
function handleFiles(f)
{
var o=[];
for(var i =0;i<f.length;i++)
{
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
qrcode.decode(e.target.result);
};
})(f[i]);
reader.readAsDataURL(f[i]);
}
}
function initCanvas(w,h)
{
gCanvas = document.getElementById("qr-canvas");
gCanvas.style.width = w + "px";
gCanvas.style.height = h + "px";
gCanvas.width = w;
gCanvas.height = h;
gCtx = gCanvas.getContext("2d");
gCtx.clearRect(0, 0, w, h);
}
function captureToCanvas() {
if(stype!=1)
return;
if(gUM)
{
try{
gCtx.drawImage(v,0,0);
try{
qrcode.decode();
}
catch(e){
console.log(e);
setTimeout(captureToCanvas, 500);
};
}
catch(e){
console.log(e);
setTimeout(captureToCanvas, 500);
};
}
}
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
function read(a)
{
var html="<br>";
if(a.indexOf("http://") === 0 || a.indexOf("https://") === 0)
html+="<a target='_blank' href='"+a+"'>"+a+"</a><br>";
html+="<b>"+htmlEntities(a)+"</b><br><br>";
document.getElementById("result").innerHTML=html;
}
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
function success(stream) {
if(webkit)
v.src = window.webkitURL.createObjectURL(stream);
else
if(moz)
{
v.mozSrcObject = stream;
v.play();
}
else
v.src = stream;
gUM=true;
setTimeout(captureToCanvas, 500);
}
function error(error) {
gUM=false;
return;
}
function load()
{
if(isCanvasSupported() && window.File && window.FileReader)
{
initCanvas(800, 600);
qrcode.callback = read;
document.getElementById("mainbody").style.display="inline";
setwebcam();
}
else
{
document.getElementById("mainbody").style.display="inline";
document.getElementById("mainbody").innerHTML='<p id="mp1">QR code scanner for HTML5 capable browsers</p><br>'+
'<br><p id="mp2">sorry your browser is not supported</p><br><br>'+
'<p id="mp1">try <img src="firefox.png"/> or <img src="chrome_logo.gif"/> or <img src="Opera-logo.png"/></p>';
}
}
function setwebcam()
{
document.getElementById("result").innerHTML="- scanning -";
if(stype==1)
{
setTimeout(captureToCanvas, 500);
return;
}
var n=navigator;
document.getElementById("outdiv").innerHTML = vidhtml;
v=document.getElementById("v");
if(n.getUserMedia)
n.getUserMedia({video: true, audio: false}, success, error);
else
if(n.webkitGetUserMedia)
{
webkit=true;
n.webkitGetUserMedia({video:true, audio: false}, success, error);
}
else
if(n.mozGetUserMedia)
{
moz=true;
n.mozGetUserMedia({video: true, audio: false}, success, error);
}
//document.getElementById("qrimg").src="qrimg2.png";
//document.getElementById("webcamimg").src="webcam.png";
document.getElementById("qrimg").style.opacity=0.2;
document.getElementById("webcamimg").style.opacity=1.0;
stype=1;
setTimeout(captureToCanvas, 500);
}
function setimg()
{
document.getElementById("result").innerHTML="";
if(stype==2)
return;
document.getElementById("outdiv").innerHTML = imghtml;
//document.getElementById("qrimg").src="qrimg.png";
//document.getElementById("webcamimg").src="webcam2.png";
document.getElementById("qrimg").style.opacity=1.0;
document.getElementById("webcamimg").style.opacity=0.2;
var qrfile = document.getElementById("qrfile");
qrfile.addEventListener("dragenter", dragenter, false);
qrfile.addEventListener("dragover", dragover, false);
qrfile.addEventListener("drop", drop, false);
stype=2;
}

Welcome to JavaScript, may you long prosper with its many uses!
As you are new to JavaScript, you may not know its Browser API, but fear not!
What you are looking for is window.open
Its syntax is simple:
window.open("http://example.com")
So, when you get the url from you qr decoder, all you have to do is window.open the URL, and viola, the window will appear in a new tab!
Now if you want to open in the same browser window, then you want to use
window.location.replace("http://example.com")
This will redirect the same tab, instead of a new one!
To implement this in your program, take a look at this read function:
function read(a) {
// If it's a URL, open in here
if(a.indexOf("http://") === 0 || a.indexOf("https://") === 0)
window.location.replace(a)
}
Hope I could help!

Chromecast m3u8 error

I have an Android sender that casts a M3U8 file like this:
metaData = new MediaMetadata(MediaMetadata.MEDIA_TYPE_MOVIE);
metaData.putString(MediaMetadata.KEY_TITLE, "Test");
MediaInfo mediaInfo = new MediaInfo.Builder(m3u8URL)
.setContentType("application/x-mpegURL")
.setStreamType(MediaInfo.STREAM_TYPE_BUFFERED)
.setMetadata(metaData)
.build();
try {
player.load(client, mediaInfo, true)
}
Here is my onLoad function (for MediaManager) in my Custom Receiver:
var self = this;
var title = sampleplayer.getValue_(event.data, ['media', 'metadata', 'title']
);
var titleElement = self.element_.querySelector('.media-title');
sampleplayer.setInnerText_(titleElement, title);
var subtitle = sampleplayer.getValue_(event.data, ['media', 'metadata',
'subtitle']);
var subtitleElement = self.element_.querySelector('.media-subtitle');
sampleplayer.setInnerText_(subtitleElement, subtitle);
var artwork = sampleplayer.getValue_(event.data, ['media', 'metadata',
'images', 0, 'url']);
var artworkElement = self.element_.querySelector('.media-artwork');
sampleplayer.setBackgroundImage_(artworkElement, artwork);
var autoplay = sampleplayer.getValue_(event.data, ['autoplay']);
var contentId = sampleplayer.getValue_(event.data, ['media', 'contentId']);
var contentType = sampleplayer.getValue_(event.data, ['media', 'contentType']
);
self.setContentType_(contentType);
self.setState_(sampleplayer.State.LOADING, false);
if (self.mediaPlayer != null)
{
self.mediaPlayer.unload();
}
if (event.data['media'] && event.data['media']['contentId'])
{
self.mediaHost = new cast.player.api.Host(
{
'mediaElement': self.mediaElement_,
'url': contentId
}
);
self.mediaHost.onError = function (errCode)
{
if(self.mediaPlayer != null)
{
self.mediaPlayer.unload();
}
}
var initialTimeIndexSeconds = event.data['media']['currentTime'] || 0;
self.protocol = null;
self.parser = document.createElement('a');
self.parser.href = contentId;
self.ext = self.parser.pathname.split('.').pop();
if (self.ext === 'm3u8') {
self.protocol = cast.player.api.CreateHlsStreamingProtocol(self.mediaHost);
} else if (self.ext === 'mpd') {
self.protocol = cast.player.api.CreateDashStreamingProtocol(self.mediaHost);
} else if (self.ext === 'ism/') {
self.protocol = cast.player.api.CreateSmoothStreamingProtocol(self.mediaHost);
}
console.log('### Media Protocol Identified as ' + self.ext);
if (self.protocol === null) {
self.mediaManager_['onLoadOrig'](event); // Call on the original callback
} else {
self.mediaPlayer = new cast.player.api.Player(self.mediaHost);
self.mediaPlayer.load(self.protocol, initialTimeIndexSeconds);
}
}
self.mediaElement_.autoplay = autoplay || true;
I am not sure what is causing this. This is only happening to M3U8 files. I tested in mp4 and it seems to work. When I debug on Chrome, I tracked that it goes to playing state then the buffering state and gives this error in media_player.js 81. So I am not sure where this is coming from.
Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.
Any ideas as to whats causing this?

Chrome Webcam - Save the recording

Is it possible to save the video stream from the webcam to a physical mp4 file? I want to let the user record and send a video from within our web app.
So far Iv seen people doing a stream.record() but that does not seem exist :
function onVideoFail(e) {
console.log('webcam fail!', e);
};
function hasGetUserMedia() {
// Note: Opera is unprefixed.
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasGetUserMedia()) {
// Good to go!
} else {
alert('getUserMedia() is not supported in your browser');
}
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
var streamRecorder;
var webcamstream;
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true, video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
webcamstream = stream;
// streamrecorder = webcamstream.record();
}, onVideoFail);
} else {
alert ('failed');
}
function sendXHR(){
//Envia bien blob, no interpretado
var xhr = new XMLHttpRequest();
var video=$("#video");
xhr.open('GET', video.src , true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
// Note: .response instead of .responseText
var blob = new Blob([this.response], {type: 'video/webm'});
console.log(blob.size/1024);
console.log(blob.type);
form = new FormData(),
request = new XMLHttpRequest();
form.append("myblob",blob,"Capture.webm");
form.append("myname",$("#name_test").value);
request.open("POST","./UploadServlet",true);
request.send(form);
}
};
xhr.send();
}
function startRecording() {
sendXHR()
}
function stopRecording() {
streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {
var data = {};
data.video = videoblob;
data.metadata = 'test metadata';
data.action = "upload_video";
jQuery.post("http://www.kongraju.in/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
alert ('video uploaded');
}
webcamstream has no record function.
Has anyone a wokring example perhaps?

Why this JavaScript event that does not start?

I'm trying to follow a tutorial on RTCPeerConnection API that enables the sharing of sound, image, data between browsers.
Here is the code that works:
function call() {
callButton.disabled = true;
hangupButton.disabled = false;
trace("Starting call");
if (localStream.getVideoTracks().length > 0) {
trace('Using video device: ' + localStream.getVideoTracks()[0].label);
}
if (localStream.getAudioTracks().length > 0) {
trace('Using audio device: ' + localStream.getAudioTracks()[0].label);
}
var servers = null;
localPeerConnection = new mozRTCPeerConnection(servers);
console.log(localPeerConnection);
trace("Created local peer connection object localPeerConnection");
localPeerConnection.onicecandidate = gotLocalIceCandidate;
remotePeerConnection = new mozRTCPeerConnection(servers);
trace("Created remote peer connection object remotePeerConnection");
remotePeerConnection.onicecandidate = gotRemoteIceCandidate;
remotePeerConnection.onaddstream = gotRemoteStream;
localPeerConnection.addStream(localStream);
trace("Added localStream to localPeerConnection");
localPeerConnection.createOffer(gotLocalDescription);
}
Here is my code that does not work:
Visio.prototype.call = function(visio){
callButton.disabled = true;
hangupButton.disabled = false;
console.log("Starting call...");
if (visio.localStream.getVideoTracks().length > 0) {
visio.trace('Using video device: ' + visio.localStream.getVideoTracks()[0].label);
}
if (visio.localStream.getAudioTracks().length > 0) {
visio.trace('Using audio device: ' + visio.localStream.getAudioTracks()[0].label);
}
var servers = null;
visio.localPeerConnection = new RTCPeerConnection(servers);
console.log(visio.localPeerConnection );
console.log("Created local peer connection object localPeerConnection");
visio.localPeerConnection.onicecandidate = visio.gotLocalIceCandidate;
visio.remotePeerConnection = new RTCPeerConnection(servers);
console.log("Created remote peer connection object remotePeerConnection");
visio.remotePeerConnection.onicecandidate = visio.gotRemoteIceCandidate;
visio.remotePeerConnection.onaddstream = visio.gotRemoteStream;
visio.localPeerConnection.addStream(visio.localStream);
console.log("Added localStream to localPeerConnection");
visio.localPeerConnection.createOffer(visio.gotLocalDescription);
};
with my call to the call method :
callButton.onclick = function(){that.call(that);};
As said in the title, the events : onicecandidate and onaddstream never triggered. I do not know why.
Any idea?
Ok , i modified my function. But it doesn't works anymore :(
This is the full code :
Visio.js
if(mozRTCPeerConnection){
RTCPeerConnection = mozRTCPeerConnection;
}else if(webkitRTCPeerConnection){
RTCPeerConnection = webkitRTCPeerConnection;
} else if(oRTCPeerConnection) {
RTCPeerConnection = oRTCPeerConnection;
} else {
alert("Votre navigateur ne supporte pas l'API RTCPeerConnection");
}
$(document).ready(function(){
new Visio();
});
function Visio() {
this.localStream, this.localPeerConnection, this.remotePeerConnection;
this.cam = new Cam();
//var localVideo = document.getElementById("localVideo");
var remoteVideo = document.getElementById("remoteVideo");
var startButton = document.getElementById("startButton");
var callButton = document.getElementById("callButton");
var hangupButton = document.getElementById("hangupButton");
startButton.disabled = false;
callButton.disabled = true;
hangupButton.disabled = true;
var that = this;
startButton.onclick = function(){that.start();};
callButton.onclick = function () { that.startCall(); };
hangupButton.onclick = function(){that.hangup();};
};
Visio.prototype.trace = function(text) {
console.log((performance.now() / 1000).toFixed(3) + ": " + text);
};
Visio.prototype.start = function(){
startButton.disabled = true;
this.cam.start();
//Waiting for stream.
var that = this;
var id = setInterval(function(){
console.log("Getting Stream...");
that.localStream = that.cam.stream;
if(that.localStream !== null){
console.log("Stream Ok!");
callButton.disabled = false;
clearInterval(id);
}
},500);
};
Visio.prototype.startCall = function () {
callButton.disabled = true;
hangupButton.disabled = false;
console.log("Starting call...");
if (this.localStream.getVideoTracks().length > 0) {
this.trace('Using video device: ' + this.localStream.getVideoTracks()[0].label);
}
if (this.localStream.getAudioTracks().length > 0) {
this.trace('Using audio device: ' + this.localStream.getAudioTracks()[0].label);
}
var servers = null;
this.localPeerConnection = new RTCPeerConnection(servers);
console.log("Created local peer connection object localPeerConnection");
this.localPeerConnection.onicecandidate = this.gotLocalIceCandidate;
this.remotePeerConnection = new RTCPeerConnection(servers);
console.log("Created remote peer connection object remotePeerConnection");
this.remotePeerConnection.onicecandidate = this.gotRemoteIceCandidate;
this.remotePeerConnection.onaddstream = this.gotRemoteStream;
this.localPeerConnection.addStream(this.localStream);
console.log("Added localStream to localPeerConnection");
this.localPeerConnection.createOffer(this.gotLocalDescription);
};
Visio.prototype.gotLocalDescription = function(description){
this.localPeerConnection.setLocalDescription(description);
console.log("Offer from localPeerConnection: \n" + description.sdp);
this.remotePeerConnection.setRemoteDescription(description);
this.remotePeerConnection.createAnswer(this.gotRemoteDescription);
};
Visio.prototype.gotRemoteDescription = function(description){
this.remotePeerConnection.setLocalDescription(description);
console.log("Answer from remotePeerConnection: \n" + description.sdp);
this.localPeerConnection.setRemoteDescription(description);
};
Visio.prototype.gotRemoteStream = function(event){
remoteVideo.src = URL.createObjectURL(event.stream);
trace("Received remote stream");
};
Visio.prototype.gotLocalIceCandidate = function(event){
if (event.candidate) {
remotePeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
trace("Local ICE candidate: \n" + event.candidate.candidate);
}
};
Visio.prototype.gotRemoteIceCandidate = function(event){
if (event.candidate) {
localPeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
trace("Remote ICE candidate: \n " + event.candidate.candidate);
}
};
Visio.prototype.hangup = function() {
console.log("Ending call");
this.localPeerConnection.close();
this.remotePeerConnection.close();
this.localPeerConnection = null;
this.remotePeerConnection = null;
hangupButton.disabled = true;
callButton.disabled = false;
};
And cam.js
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
function Cam(){
this.video = null;
this.stream = null;
navigator.getUserMedia ||
(navigator.getUserMedia = navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia || navigator.msGetUserMedia);
if (!navigator.getUserMedia) {
alert('getUserMedia is not supported in this browser.');
}
};
Cam.prototype.start = function(){
var that = this;
navigator.getUserMedia({
video: true,
audio: true
}, function(stream){that.onSuccess(stream);}, that.onError);
};
Cam.prototype.stop = function(){
this.stopVideo();
this.stopSound();
};
Cam.prototype.startSound = function(){
};
Cam.prototype.stopSound = function(){
};
Cam.prototype.startVideo = function(){
};
Cam.prototype.stopVideo = function(){
};
Cam.prototype.onSuccess = function(stream){
var source = document.getElementById('localVideo');
var videoSource = null;
this.stream = stream;
if (window.webkitURL) {
videoSource = window.webkitURL.createObjectURL(stream);
} else {
videoSource = window.URL.createObjectURL(stream);
}
this.stream = stream;
source.autoplay = true;
source.src = videoSource;
this.video = source;
};
Cam.prototype.onError = function(err) {
alert('There has been a problem retrieving the streams - did you allow access?' + err);
};
Maybe it can help you :).

When you build a constructor function,
var Visio = function () {
// constructor
};
and add a prototype function,
Visio.prototype.startCall = function () {
// this === the new Visio object
};
you can use it like this:
var o = new Visio();
o.startCall();
Now inside your prototype function this is the object o instanceof Visio.
You are confusingly using the function name call. This name is also used by a Function.prototype.call function, with which you can override this.
Example:
Visio.prototype.myThisOverride = function () {
console.log(this);
};
Now when using Function.prototype.call, you see console log printing the string "Hello World", because this === 'Hello World':
var o = new Visio();
o.myThisOverride.call("Hello World");
So coming back to your code, you most likely have to rewrite it to:
Visio.prototype.startCall = function () {
callButton.disabled = true;
hangupButton.disabled = false;
console.log("Starting call...");
if (this.localStream.getVideoTracks().length > 0) {
this.trace('Using video device: ' + this.localStream.getVideoTracks()[0].label);
}
if (this.localStream.getAudioTracks().length > 0) {
this.trace('Using audio device: ' + this.localStream.getAudioTracks()[0].label);
}
var servers = null;
this.localPeerConnection = new RTCPeerConnection(servers);
console.log(this.localPeerConnection );
console.log("Created local peer connection object localPeerConnection");
this.localPeerConnection.onicecandidate = this.gotLocalIceCandidate;
this.remotePeerConnection = new RTCPeerConnection(servers);
console.log("Created remote peer connection object remotePeerConnection");
this.remotePeerConnection.onicecandidate = this.gotRemoteIceCandidate;
this.remotePeerConnection.onaddstream = this.gotRemoteStream;
this.localPeerConnection.addStream(this.localStream);
console.log("Added localStream to localPeerConnection");
this.localPeerConnection.createOffer(this.gotLocalDescription);
};
And use it like this:
var theVisio = new Visio();
callButton.onclick = function () { theVisio.startCall(); };
// which is the same as
callButton.onclick = function () { theVisio.startCall.call(theVisio); };
Or if you defined it like this inside the constructor:
var that = this;
callButton.onclick = function () { that.startCall(); };
// which is the same as
callButton.onclick = function () { that.startCall.call(that); };
And with this said, please respect the names call and apply because understanding operator this isn't the easiest thing in javaScript! ;)