web-mediarecorder

I've built some code that will get the MediaRecorder API to capture audio and video, and then use the ondataavailable function to send the corresponding webm file blobs up to a server via websockets. The server then sends those blobs to a client via websockets which puts the video together in a buffer using the Media Source Extension API. This works well, except that if I want to start a stream partway through, I can't just send the latest blob because the blob by itself is unplayable. Also, if I send the blobs out of order the browsers usually complain that the audio encoding doesn't match up

I need to save a file of unknown size, potentially multiple gigabytes, in JS. The data source is a mediastream captured using mediarecorder. In Chrome, this can be accomplished using the filesystem and filewriter apis with filesystem: urls by writing blob chunks to a fileentry as they are received, then setting a download link to the file url. However, I cannot find a way to do this in Firefox or Edge (whenever it gets mediarecorder). This works for me in Firefox: navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => record(stream, 5000) .then(recording => { stop(stream); video

I have a perfectly working demo animation within a canvas element that I can record as a webm video file with MediaRecorder and captureStream() from the <canvas> element. The animations from the 2d context api come out just fine in the resulting video, but when I try to use drawImage() in order to add an image to the canvas I can't seem to make it work properly. In the latter case the MediaRecorder.ondataavailable handler doesn't receive valid data and the resulting video file is a 0-byte file. I even implemented a demo where I can toggle whether or not a drawImage() call is performed. in the

MediaRecorder ondataavailable work successful once. I need to get blob, get it base64, send to my server, decode this base64 to audio blob. This is very strange. For example, output: blob1 blob2 blob3 blob4 blob5 blob6 blob7 blob8 blob9 .... I can hear just blob1, other blobs is "disabled". Try it! This code record audio: window.startRecord = function(cb){ var int; navigator.mediaDevices.getUserMedia({ audio: true , video:false}).then(function(stream){ var options = { audioBitsPerSecond : 128000, videoBitsPerSecond : 2500000, mimeType : 'audio/webm\;codecs=opus' } if(!MediaRecorder

I start and stop a MediaRecorder stream. The red "recording" icon appears in the Chrome tab on start, but doesn't go away on stop. The icon looks like this: My code looks like this: const mediaRecorder = new MediaRecorder(stream); ... // Recording icon in the tab becomes visible. mediaRecorder.start(); ... // Recording icon is still visible. mediaRecorder.stop(); I also have a mediaRecorder.onstop handler defined. It doesn't return anything or interfere with the event object. What's the proper way to clear the "recording" indicator for a tab after starting and stopping a MediaRecorder instance