add play-from-disk-renegotation example

Rain Liu · Rain Liu · commit 7ca94def51f3 · 2021-09-24T13:41:12.000-07:00
diff --git a/Cargo.toml b/Cargo.toml
@@ -52,6 +52,7 @@ env_logger = "0.8"
 clap = "2"
 hyper = { version = "0.14", features = ["full"] }
 signal = {path = "examples/signal" }
+tokio-util = "0.6.8"
 
 [profile.dev]
 opt-level = 0
@@ -96,6 +97,11 @@ name = "play-from-disk"
 path = "examples/play-from-disk/play-from-disk.rs"
 bench = false
 
+[[example]]
+name = "play-from-disk-renegotation"
+path = "examples/play-from-disk-renegotation/play-from-disk-renegotation.rs"
+bench = false
+
 [[example]]
 name = "reflect"
 path = "examples/reflect/reflect.rs"
diff --git a/examples/README.md b/examples/README.md
@@ -7,7 +7,7 @@ All examples are ported from [Pion](https://github.com/pion/webrtc/tree/master/e
 #### Media API
 - [x] [Reflect](reflect): The reflect example demonstrates how to have webrtc-rs send back to the user exactly what it receives using the same PeerConnection.
 - [x] [Play from Disk](play-from-disk): The play-from-disk example demonstrates how to send video to your browser from a file saved to disk.
-- [ ] [Play from Disk Renegotation](play-from-disk-renegotation): The play-from-disk-renegotation example is an extension of the play-from-disk example, but demonstrates how you can add/remove video tracks from an already negotiated PeerConnection.
+- [x] [Play from Disk Renegotation](play-from-disk-renegotation): The play-from-disk-renegotation example is an extension of the play-from-disk example, but demonstrates how you can add/remove video tracks from an already negotiated PeerConnection.
 - [x] [Insertable Streams](insertable-streams): The insertable-streams example demonstrates how webrtc-rs can be used to send E2E encrypted video and decrypt via insertable streams in the browser.
 - [x] [Save to Disk](save-to-disk): The save-to-disk example shows how to record your webcam and save the footage to disk on the server side.
 - [x] [Broadcast](broadcast): The broadcast example demonstrates how to broadcast a video to multiple peers. A broadcaster uploads the video once and the server forwards it to all other peers.
diff --git a/examples/play-from-disk-renegotation/index.html b/examples/play-from-disk-renegotation/index.html
@@ -0,0 +1,80 @@
+<html>
+<head>
+  <title>play-from-disk-renegotation</title>
+</head>
+
+<body>
+<button onClick="window.addVideo()"> Add Video</button>
+<br/>
+<button onClick="window.removeVideo()"> Remove Video</button>
+<br/>
+
+
+<h3> Video </h3>
+<div id="remoteVideos"></div>
+<br/>
+
+<h3> Logs </h3>
+<div id="logs"></div>
+</body>
+
+<script>
+  let activeVideos = 0
+  let pc = new RTCPeerConnection({
+    iceServers: [
+      {
+        urls: 'stun:stun.l.google.com:19302'
+      }
+    ]
+  })
+  pc.ontrack = function (event) {
+    var el = document.createElement(event.track.kind)
+    el.srcObject = event.streams[0]
+    el.autoplay = true
+    el.controls = true
+
+    event.track.onmute = function (event) {
+      el.parentNode.removeChild(el);
+    }
+
+    document.getElementById('remoteVideos').appendChild(el)
+  }
+
+  let doSignaling = method => {
+    pc.createOffer()
+            .then(offer => {
+              pc.setLocalDescription(offer)
+
+              return fetch(`/${method}`, {
+                method: 'post',
+                headers: {
+                  'Accept': 'application/json, text/plain, */*',
+                  'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(offer)
+              })
+            })
+            .then(res => res.json())
+            .then(res => pc.setRemoteDescription(res))
+            .catch(alert)
+  }
+
+  // Create a noop DataChannel. By default PeerConnections do not connect
+  // if they have no media tracks or DataChannels
+  pc.createDataChannel('noop')
+  doSignaling('createPeerConnection')
+
+  window.addVideo = () => {
+    if (pc.getTransceivers().length <= activeVideos) {
+      pc.addTransceiver('video')
+      activeVideos++
+    }
+
+    doSignaling('addVideo')
+  };
+
+  window.removeVideo = () => {
+    doSignaling('removeVideo')
+  };
+</script>
+</html>
diff --git a/examples/play-from-disk-renegotation/play-from-disk-renegotation.rs b/examples/play-from-disk-renegotation/play-from-disk-renegotation.rs
