I have a video (webm) capture script that works fine. It records video then offers it as a download. The pertinent part of the code is this:

stopBtn.addEventListener('click', function() {
    recorder.ondataavailable = e => {
        ul.style.display = 'block';
        var a = document.createElement('a'),
            li = document.createElement('li');
        a.download = ['video_', (new Date() + '').slice(4, 28), '.'+vid_format].join('');
        a.textContent = a.download;
        a.href = URL.createObjectURL(stream); //<-- deprecated usage?
        li.appendChild(a);
        ul.appendChild(li);
    };
    recorder.stop();
    startBtn.removeAttribute('disabled');
    stopBtn.disabled = true;
}, false);

This works, as I say. However, the console says that passing media streams to URL.createObjectURL is deprecated, and I should use HTMLMediaElement srcObject instead.

So I changed it to:

a.href = URL.createObjectURL(video.srcObject);

...and although everything still works, I get the same warning.

Does anyone know how I can get a URL or blob data without this deprecated way?

I have also tried reading the src and currentSrc properties from the video element, but they e back empty where a stream is involved.

I have a video (webm) capture script that works fine. It records video then offers it as a download. The pertinent part of the code is this:

stopBtn.addEventListener('click', function() {
    recorder.ondataavailable = e => {
        ul.style.display = 'block';
        var a = document.createElement('a'),
            li = document.createElement('li');
        a.download = ['video_', (new Date() + '').slice(4, 28), '.'+vid_format].join('');
        a.textContent = a.download;
        a.href = URL.createObjectURL(stream); //<-- deprecated usage?
        li.appendChild(a);
        ul.appendChild(li);
    };
    recorder.stop();
    startBtn.removeAttribute('disabled');
    stopBtn.disabled = true;
}, false);

This works, as I say. However, the console says that passing media streams to URL.createObjectURL is deprecated, and I should use HTMLMediaElement srcObject instead.

So I changed it to:

a.href = URL.createObjectURL(video.srcObject);

...and although everything still works, I get the same warning.

Does anyone know how I can get a URL or blob data without this deprecated way?

I have also tried reading the src and currentSrc properties from the video element, but they e back empty where a stream is involved.

• javascript
• video
• stream
• webrtc
• webm

• 1 you're trying to download the stream? The mon way to do this is to create a blob via MediaRecorder and then download the blob (which involves URL.createObjectURL but with a blob, not a stream) – Philipp Hancke Commented Aug 15, 2017 at 11:53
• Basically I just want to save the recorded video out to a server. Thanks for the tip - could you give me any pointers on how to do that or what to read? A code snippet would be ace. – Mitya Commented Aug 15, 2017 at 11:57
• Did this code really worked ? Weiiird... – Kaiido Commented Aug 15, 2017 at 13:04
• webrtc.github.io/samples/src/content/getusermedia/record – Philipp Hancke Commented Aug 15, 2017 at 13:09

2 Answers 2

I am really surprised that your code did even work...

If stream is really a MediaStream, then the browser should not even know what size it would have to download, thus not when to stop downloading (it's a stream).

MediaRecorder#ondataavailable will expose an Event with a data property filled with a chunk of the recorded MediaStream. In this event, you will have to store these chunks in an Array, and then you will download the concatenation of these Blobs chunks, usually in the MediaRecorder#onstop event.

const stream = getCanvasStream(); // we'll use a canvas stream so that it works in stacksnippet
const chunks = []; // this will store our Blobs chunks
const recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => chunks.push(e.data); // a new chunk Blob is given in this event
recorder.onstop = exportVid; // only when the recorder stops, we do export the whole;
setTimeout(() => recorder.stop(), 5000); // will stop in 5s
recorder.start(1000); // all chunks will be 1s

function exportVid() {
  var blob = new Blob(chunks); // here we concatenate all our chunks in a single Blob
  var url = URL.createObjectURL(blob); // we creat a blobURL from this Blob
  var a = document.createElement('a');
  a.href = url;
  a.innerHTML = 'download';
  a.download = 'myfile.webm';
  document.body.appendChild(a);
  stream.getTracks().forEach(t => t.stop()); // never bad to close the stream when not needed anymore
}


function getCanvasStream() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  // a simple animation to be recorded
  let x = 0;
  const anim = t => {
    x = (x + 2) % 300;
    ctx.clearRect(0, 0, 300, 150);
    ctx.fillRect(x, 0, 10, 10);
    requestAnimationFrame(anim);
  }
  anim();
  document.body.appendChild(canvas);
  return canvas.captureStream(30);
}

URL.createObjectURL(MediaStream) was used for <video> elements. But this also led to some difficulties for browsers to close physical devices access, since BlobURLs can have a longer lifetime than the current document.
So it is now deprecated to call createObjectURL with a MediaStream, and one should use MediaElement.srcObject = MediaStream instead.

1. Create a html video element and use (to display the stream in the video element):

video.srcObject=stream

2. Then you need to convert the variable video with the frame to a canvas element we do this by:

var canvas = document.createElement("canvas");
var ctx    = canvas.getContext('2d');

ctx.drawImage(video, 0, 0)

3. Get data url from canvas through this code:

var du = canvas.toDataURL()