Record the Firefox tab as a video like screencastify on chrome

Question

I would like to record a firefox browser tab through browser extension like Screencastify extension does in chrome. About Recording Session of chrome extension , chrome.tabCapture API is used to get the stream of the currently active tab and to record the stream RecordRTC.js of Web-RTC Experiment is used. Like wise, Is there any API in Mozilla Firefox to get the stream of the tab in Firefox browser.

P.S : I am asking about recording the tab of the firefox not recording the screen or window or through cam.

Answer 1

There are several privileged apis that let you capture parts of windows or xul elements onto a canvas context. The canvas can then be captured into a media stream.

Answer 2

You can record a tab in Firefox like this:

var constraints = { video: { mediaSource: "browser" } };

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => video.srcObject = stream)
  .catch(log);

var offset = () => video.srcObject.getVideoTracks()[0].applyConstraints({
    mediaSource: "browser",
    scrollWithPage: false,
    viewportOffsetX: x.value,
    viewportOffsetY: y.value
  })
  .catch(log);

var log = msg => div.innerHTML += "<br>" + msg;

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<span title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span> <strong>This is an experimental technology</strong><br>Because this technology's specification has not stabilized, check the compatibility table for the proper browsers versions. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.</p>
Capture offset:<br>
<input id="x" min="0" max="500" value="0" oninput="offset()" type="range">
<input id="y" min="0" max="500" value="0" oninput="offset()" type="range"><br>
<video id="video" height="120" width="320" autoplay></video><br>
<div id="div"></div><br>

Note that for this snippet to work here in the browser, you first have to view this page in https.

And then, for security reasons, you have to append ,stacksnippets.net to the list of sites in media.getusermedia.screensharing.allowed_domains under about:config to allow this to work.

Lastly, you also have to set media.navigator.permission.disabled to true in about:config since Firefox doesn't implement a Tab chooser.

None of this would be necessary in an extension.

In an extension you would use the browserWindow constraint to pass in the outer window id of the tab you wish to capture.

Warning: You may want to remove ,stacksnippets.net and media.navigator.permission.disabled afterwards, due to the inherent security risks. SO posts can potentially steal your bank account info this way, by iframing common bank urls you may be logged in to, for only you (and now them!) to see, effectively end-running cross-origin restrictions. No joke!