MediaStream Capture Canvas and Audio Simultaneously
<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>