- Implemented setOutputSize. Cleanup demos. Add new dynamic resolutio…

…n demo.
Mill1995 · Apr 30, 2020 · 9b15507 · 9b15507
1 parent 379b7ae
commit 9b15507
Show file tree

Hide file tree

Showing 10 changed files with 397 additions and 183 deletions.
diff --git a/README.md b/README.md
@@ -138,6 +138,12 @@ Update the z-index (draw order) of an already added stream or data object. Ident
 
 If you have added the same MediaStream multiple times, all instances will be updated.
 
+### `merger.setOutputSize(width, height)`
+
+Change the size of the canvas and the output video track.
+
+Automatically updates `merger.width` and `merger.height`.
+
 ### `merger.start()`
 
 Start the merging and create `merger.result`.
@@ -170,7 +176,7 @@ This library makes it easy to change streams in a WebRTC connection without need
 
 The result MediaStream will appear to be constant and stable, no matter what streams you add/remove!
 
-[P2P Streaming Demo](https://t-mullen.github.io/video-stream-merger/demo/p2p.html)
+[P2P Streaming Demo](https://t-mullen.github.io/video-stream-merger/demo/p2p-dynamic.html)
 
 ```javascript
 getusermedia({video: true, audio:true}, (err, webcamStream) => {

diff --git a/demo/files.html b/demo/files.html
@@ -1,22 +1,25 @@
 <html lang="en">
-  <head>
-    <title>Files Demo</title>
-  </head>
-  <body>
-    <h1>video-stream-merger demo</h1>
-
-    <p>Merge and manipulate existing media.</p>
-
-    <p>The below demo merges two MP4 and AAC files together.</p>
-
-    <br><br>
-
-    <button>Click to Start</button>
-    <br>
-    <video controls id="output"></video>
-
+
+<head>
+  <title>Files Demo</title>
+  <link href="demo/style.css" rel="stylesheet" />
+</head>
+
+<body>
+  <h1>video-stream-merger demo</h1>
+
+  <p>Merge and manipulate existing media.</p>
+
+  <p>The below demo merges two MP4 and AAC files together.</p>
+
+  <br><br>
+
+  <button>Click to Start</button>
+  <br>
+  <video controls id="output"></video>
+
   <script src="./../dist/video-stream-merger.js"></script>
-  
+
   <script>
     // we need to "warm up" the AudioContext with a user event
     document.querySelector('button').addEventListener('click', function () {
@@ -44,7 +47,7 @@ <h1>video-stream-merger demo</h1>
         mute: true,
         draw: function (ctx, frame, done) {
           count++
-          ctx.drawImage(frame, merger.width/2 - count/2, merger.height/2 - count/2, count, count)
+          ctx.drawImage(frame, merger.width / 2 - count / 2, merger.height / 2 - count / 2, count, count)
           done()
         }
       })
@@ -56,5 +59,20 @@ <h1>video-stream-merger demo</h1>
       outputElement.autoplay = true
     })
   </script>
-  </body>
-</html>
+
+
+  <!-- just a Github octocat, ignore! -->
+  <a href="https://github.com/RationalCoding/video-stream-merger" class="github-corner"
+    aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250"
+      style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0;" aria-hidden="true">
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor" class="octo-body"></path>
+    </svg></a>
+</body>
+
+</html>
diff --git a/demo/p2p-dynamic.html b/demo/p2p-dynamic.html
@@ -0,0 +1,107 @@
+<html lang="en">
+
+<head>
+  <link href="demo/style.css" rel="stylesheet" />
+</head>
+
+<body>
+  <h1>P2P Demo</h1>
+
+  <p>Webcam stream is cloned to make several streams, which are merged together and sent over a single WebRTC
+    MediaTrack.</p>
+  <p>This demo uses renegotiation. The total horizontal resolution scales with number of streams.</p>
+
+  <h3>Sending Peer</h3>
+  <div class="wrapper">
+    <video muted autoplay id="one" style="display:inline-block; height: 100px; background:black;"></video>
+  </div>
+  <h3>Receiving Peer</h3>
+  <div class="wrapper">
+    <video autoplay id="two" style="display:inline-block; height: 100px; background:black;"></video>
+  </div>
+  <br>
+  <button>Add Stream</button>
+  <button>Remove Stream</button>
+  <script src="./../dist/video-stream-merger.js"></script>
+  <script src="getusermedia.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/7.0.0/simplepeer.min.js"></script>
+  <script>
+    var CANVAS_MULTIPLIER = 3
+
+    var players = document.querySelectorAll('video')
+    var buttons = document.querySelectorAll('button')
+
+    getusermedia({ audio: true, video: true }, function (err, webcam) {
+      if (err) throw err
+
+
+      const VIDEO_WIDTH = 400
+      const VIDEO_HEIGHT = 300
+      var merger = new VideoStreamMerger({
+        width: VIDEO_WIDTH,
+        height: VIDEO_HEIGHT
+      })
+      merger.start()
+
+      players[0].srcObject = merger.result
+
+      var peer1 = new SimplePeer({ initiator: true, stream: merger.result })
+      var peer2 = new SimplePeer()
+
+      peer1.on('signal', function (data) {
+        peer2.signal(data)
+      })
+      peer2.on('signal', function (data) {
+        peer1.signal(data)
+      })
+
+      peer2.on('stream', function (stream) {
+        players[1].srcObject = stream
+      })
+
+      var numStreams = 0
+      var curStream = 0
+      var clones = []
+
+      buttons[0].addEventListener('click', function () {
+        clones.push(webcam.clone())
+        const curStream = numStreams
+        merger.addStream(clones[clones.length - 1], {
+          mute: numStreams > 0,
+          draw: function (ctx, frame, done) {
+            if (curStream >= numStreams) curStream = 0
+
+            ctx.drawImage(frame, VIDEO_WIDTH * curStream, 0, VIDEO_WIDTH, VIDEO_HEIGHT)
+
+            done()
+          }
+        })
+        numStreams++
+        merger.setOutputSize(numStreams * VIDEO_WIDTH, VIDEO_HEIGHT)
+      })
+
+      buttons[1].addEventListener('click', function () {
+        merger.removeStream(clones.pop())
+        numStreams--
+        merger.setOutputSize(numStreams * VIDEO_WIDTH, VIDEO_HEIGHT)
+      })
+
+    })
+
+  </script>
+
+  <!-- just a Github octocat, ignore! -->
+  <a href="https://github.com/RationalCoding/video-stream-merger" class="github-corner"
+    aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250"
+      style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0;" aria-hidden="true">
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor" class="octo-body"></path>
+    </svg></a>
+</body>
+
+</html>
diff --git a/demo/p2p-fixed.html b/demo/p2p-fixed.html
@@ -0,0 +1,114 @@
+<html lang="en">
+
+<head>
+  <link href="demo/style.css" rel="stylesheet" />
+  <style>
+    .wrapper {
+      max-height: 150px;
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>P2P Demo</h1>
+
+  <p>Webcam stream is cloned to make several streams, which are merged together and sent over a single WebRTC
+    MediaTrack.</p>
+  <p>No renegotiation ever occurs. The total horizontal resolution of all streams never changes.</p>
+  <p>Resolution can be improved at the cost of higher latency.</p>
+
+  <h3>Sending Peer</h3>
+  <div class="wrapper">
+    <video muted autoplay id="one" style="display:inline-block; width: 200px; background:black;"></video>
+  </div>
+  <h3>Receiving Peer</h3>
+  <div class="wrapper">
+    <video autoplay id="two" style="display:inline-block; width: 200px; background:black;"></video>
+  </div>
+  <br>
+  <button>Add Stream</button>
+  <button>Remove Stream</button>
+  <script src="./../dist/video-stream-merger.js"></script>
+  <script src="getusermedia.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/7.0.0/simplepeer.min.js"></script>
+  <script>
+    var CANVAS_MULTIPLIER = 3
+
+    var players = document.querySelectorAll('video')
+    var buttons = document.querySelectorAll('button')
+
+    getusermedia({ audio: true, video: true }, function (err, webcam) {
+      if (err) throw err
+
+      var merger = new VideoStreamMerger({
+        width: 400 * CANVAS_MULTIPLIER,
+        height: 300 * CANVAS_MULTIPLIER
+      })
+      merger.start()
+
+      players[0].srcObject = merger.result
+
+      var peer1 = new SimplePeer({ initiator: true, stream: merger.result })
+      var peer2 = new SimplePeer()
+
+      peer1.on('signal', function (data) {
+        peer2.signal(data)
+      })
+      peer2.on('signal', function (data) {
+        peer1.signal(data)
+      })
+
+      peer2.on('stream', function (stream) {
+        players[1].srcObject = stream
+      })
+
+      var numStreams = 0
+      var curStream = 0
+      var clones = []
+
+      buttons[0].addEventListener('click', function () {
+        clones.push(webcam.clone())
+        merger.addStream(clones[clones.length - 1], {
+          mute: numStreams > 0,
+          draw: function (ctx, frame, done) {
+            if (curStream >= numStreams) curStream = 0
+
+            var unit = merger.width / numStreams
+            ctx.drawImage(frame, unit * curStream, 0, unit, merger.height / numStreams)
+
+            curStream++
+            done()
+          }
+        })
+        numStreams++
+        players[0].style.width = 200 * numStreams + 'px'
+        players[1].style.width = 200 * numStreams + 'px'
+      })
+
+      buttons[1].addEventListener('click', function () {
+        merger.removeStream(clones.pop())
+        numStreams--
+        players[0].style.width = 200 * numStreams + 'px'
+        players[1].style.width = 200 * numStreams + 'px'
+      })
+
+    })
+
+  </script>
+
+  <!-- just a Github octocat, ignore! -->
+  <a href="https://github.com/RationalCoding/video-stream-merger" class="github-corner"
+    aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250"
+      style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0;" aria-hidden="true">
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor" class="octo-body"></path>
+    </svg></a>
+</body>
+
+</html>