title: MediaStream Capture Canvas and Audio Simultaneously
body: <p>I'm working on a project in which I'd like to:</p>
  
  <ol>
  <li>Load a video js and display it on the canvas.</li>
  <li>Use filters to alter the appearance of the canvas (and therefore the video).</li>
  <li>Use the MediaStream captureStream() method and a MediaRecorder object to record the surface of the canvas and the audio of the original video. </li>
  <li>Play the stream of both the canvas and the audio in an HTML video element.</li>
  </ol>
  
  <p>I've been able to display the canvas recording in a video element by tweaking this WebRTC demo code: <a href="https://webrtc.github.io/samples/src/content/capture/canvas-record/" rel="noreferrer">https://webrtc.github.io/samples/src/content/capture/canvas-record/</a></p>
  
  <p>That said, I can't figure out how to record the video's audio alongside the canvas. Is it possible to create a MediaStream containing MediaStreamTrack instances from two different sources/elements? </p>
  
  <p>According to the MediaStream API's specs there should theoretically be some way to accomplish this:
  <a href="https://w3c.github.io/mediacapture-main/#introduction" rel="noreferrer">https://w3c.github.io/mediacapture-main/#introduction</a></p>
  
  <p><em>"The two main components in the MediaStream API are the MediaStreamTrack and MediaStream interfaces. The MediaStreamTrack object represents media of a single type that originates from one media source in the User Agent, e.g. video produced by a web camera. A MediaStream is used to group several MediaStreamTrack objects into one unit that can be recorded or rendered in a media element."</em></p>