Add example that demonstrates taking a track out of a stream and addi…

…ng it to another stream
mozdevs · Jan 20, 2016 · 8a387c6 · 8a387c6
1 parent a327086
commit 8a387c6
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -21,6 +21,7 @@ <h1><a href="index.html">MediaRecorder examples</a></h1>
 	  <li><a href="mediadevices-to-mediastreamaudiosourcenode.html">Get audio stream from <code>MediaDevices</code> into an <code>AudioContext</code></a>.</li>
       <li><a href="render-video.html">Render a video stream in a <code>canvas</code></a>.</li>
       <li><a href="canvas-stream.html">Get a video stream from a <code>canvas</code></a>.</li>
+	  <li><a href="take-tracks-out-of-streams.html">Take a <code>MediaStreamTrack</code> out of a <code>MediaStream</code> and add it to another <code>MediaStream</code></a>.</li>
       <li><a href="media-recorder-single-stream.html">Use <code>MediaRecorder</code> with a single stream</a>.</li>
       <li><a href="media-recorder-mimetypes.html">Use <code>MediaRecorder</code> with different mimetypes</a>.</li>
       <li><a href="download-blob.html">Download a file <code>Blob</code></a>.</li>

diff --git a/take-tracks-out-of-streams.html b/take-tracks-out-of-streams.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<head>
+  <title>MediaRecorder examples - Take track out of stream</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="stylesheet" href="styles.css" type="text/css">
+  <script src="take-tracks-out-of-streams.js"></script>
+</head>
+<body>
+  <header>
+    <h1><a href="index.html">MediaRecorder examples</a></h1>
+    <a href="https://github.com/mozdevs/mediarecorder"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+    <p>Take <code>MediaStreamTrack</code> out of a <code>MediaStream</code> and add it to another <code>MediaStream</code>.</p>
+  </header>
+  <main>
+  </main>
+</body>
diff --git a/take-tracks-out-of-streams.js b/take-tracks-out-of-streams.js
@@ -0,0 +1,44 @@
+// This example uses MediaDevices.getUserMedia to get an audio and video stream,
+// and then display it in a video element
+//
+// The relevant functions in use are:
+//
+// navigator.mediaDevices.getUserMedia -> to get live video stream from webcam
+// AudioContext.createMediaStreamDestination -> to create a stream with audio out of a Web AudioContext
+// Stream.getAudioTracks() -> to get only the audio tracks from a stream
+// Stream.addTrack() -> to add a track to an existing stream
+// URL.createObjectURL -> to create a URL for the stream, which we can use as src for the video
+
+
+window.onload = function () {
+
+  // request video stream from the user's webcam
+  navigator.mediaDevices.getUserMedia({
+    video: true
+  })
+  .then(function (stream) {
+    var video = document.createElement('video');
+    video.controls = true;
+    var main = document.querySelector('main');
+    main.appendChild(video);
+
+    var audioContext = new AudioContext();
+    var oscillator = audioContext.createOscillator();
+    oscillator.frequency.value = 110;
+    var streamAudioDestination = audioContext.createMediaStreamDestination();
+    oscillator.connect(streamAudioDestination);
+    oscillator.start();
+
+    // add audio track from audiocontext with beep
+    var audioStream = streamAudioDestination.stream;
+    var audioTracks = audioStream.getAudioTracks();
+    var firstAudioTrack = audioTracks[0];
+    stream.addTrack(firstAudioTrack);
+
+    video.src = URL.createObjectURL(stream);
+    video.play();
+
+  });
+
+};
+