TypeError, captureStream is not a function

Question

I have created a HTML5 page with video element. A sample video is played. After I had tried to record the stream in the video element. I am using the RecordRTC library for recording functionality. I have the following code

var stream = document.getElementById("my_video").captureStream();
var recorder = RecordRTC(stream, { 
  type: 'video'
});

recorder.startRecording();

The recording is successfully working on Chrome browser and Mozilla browser till version 57. But in last January , Mozilla browser updated to version 58. After this update, I got error when trying to record video using Mozilla.

The error message is:

TypeError 
message: document.getElementById("my_video").captureStream is not a function"

How to resolve this issue?

Answer 1

Well, according to the docs this is experimental tech so Firefox requires you to prefix moz to the function name: mozCaptureStream. I'm a little surprised it worked at all previously.

You can check for the browser version with navigator.userAgent.

const sUsrAg = navigator.userAgent;

if (sUsrAg.indexOf('Firefox') > -1) {
  console.log('Firefox');
  document.getElementById("my_video").mozCaptureStream();
} else {
  console.log('Other');
  document.getElementById("my_video").captureStream();
}

<video id="my_video"></video>