title: How to avoid SecurityError: The operation is insecure. at Firefox when using .mozCaptureStream and MediaRecorder?
body: <p>Given the code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;video width="320" height="280"&gt;&lt;/video&gt;
    &lt;script&gt;
        const video = document.querySelector("video");
        const src = "https://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm#t=0,10";
        let recorder;
        video.oncanplay = () =&gt; {
          video.play(); 
          const mediaStream = video.captureStream();
          recorder = new MediaRecorder(mediaStream);
          recorder.ondataavailable = event =&gt; 
            console.log(URL.createObjectURL(event.data));
          
          recorder.start();
        }
  
        video.onpause = () =&gt; recorder &amp;&amp; recorder.stop();
  
        video.src = src;
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Chromium browser captures the playback of <code>&lt;video&gt;</code> element using <code>.captureStream()</code>,  <code>MediaRecorder()</code> and logs <code>Blob URL</code> of resulting <code>Blob</code> at <code>dataavailable</code> event of <code>MediaRecorder</code> instance.</p>
  
  <p>At Firefox browser which currently implements <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/captureStream" rel="nofollow noreferrer"><code>.mozCaptureStream()</code></a> an error is thrown <code>recorder.start()</code> call <code>SecurityError: The operation is insecure.</code> and at <code>recorder.stop()</code> call <code>InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable</code>.</p>
  
  <p>The errors are apparently due to <a href="https://w3c.github.io/mediacapture-fromelement/#security-considerations" rel="nofollow noreferrer">Security Considerations</a> of <a href="https://w3c.github.io/mediacapture-fromelement/" rel="nofollow noreferrer">Media Capture from DOM Elements</a>. </p>
  
  <p>How can we avoid the errors described above and achieve same result which Chromium and Chrome browsers implement at Firefox browser?</p>