title: How to show Video Stream Tracks from two different streams in one HTMLMediaElement (from camera and WebGL stream)
body: <p>I need to show video from the users camera and virtual objects created with WebGL on a web page in a single html element, probably, either <code>&lt;canvas&gt;</code> or <code>&lt;video&gt;</code>.</p>
  
  <p>I can successfully get user video, it is a stream, from navigator's media devices and show it in <code>&lt;video&gt;</code> element.</p>
  
  <p>I can successfully create virtual visual objects with WebGL and show them in a <code>&lt;canvas&gt;</code> element, by using other's example code here (from MDN).</p>
  
  <p>I need to mix them on a single html element. How can I achieve that.</p>
  
  <p>My further research shows me that there is a <code>captureStream()</code> method of <code>HTMLMediaElement</code> interface. Both <code>&lt;video&gt;</code> and canvas have this method. I can capture the stream from such elements and use it for something else, like attaching into another <em>html element</em> (but not into a canvas element probably) or a <em>WebRTC Peer Connection</em> as source, recording it. But this overwrites the previous stream.</p>
  
  <p>Then I have found that a <strong>stream</strong>, called <code>MediaStream</code>, has <strong>tracks</strong> inside them, like <em>video track</em>s, <em>audio tracks</em> even <em>text tracks</em>. And more can be added by <code>addTrack</code> method of the <code>MediaStream</code>, and they can be gotten by <code>getTracks</code> method. I have added the <strong>video track</strong> from my <code>&lt;canvas&gt;</code> element's stream to the <code>&lt;video&gt;</code> elements stream, however, I can only view the original <strong>video track</strong> from the <strong>user media</strong> in the <code>&lt;video&gt;</code> element.</p>
  
  <p>What am I missing to achieve that? </p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      getting video stream from camera into screen
      &lt;video autoplay&gt;&lt;/video&gt;
  
      getting virtual objects into screen
      &lt;canvas id="glcanvas" width="640" height="480"&gt;&lt;/canvas&gt;
    &lt;/body&gt;
    // webgl codes that draws a rotating colored cube on html canvas webgl context
    &lt;script src="gl-matrix.js"&gt;&lt;/script&gt;
    &lt;script src="webgl-demo.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
      // getting video stream from camera into screen
      const video = document.querySelector("video"); 
  
      navigator.mediaDevices.getUserMedia({video: true})
        .then(stream =&gt; {
          let canv = document.querySelector("#glcanvas");
          let canvstrm = canv.captureStream();
          // get track from the canvas stream and add to the user media stream
          let canvstrmtrack = canvstrm.getTracks()[0]
          stream.addTrack(canvstrmtrack);
          video.srcObject = stream;
      })
    &lt;/script&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://gist.github.com/fselcukcan/6096e4ec23700ad3b64672951a4566ca" rel="nofollow noreferrer">Complete gist</a></p>