[Stream] WebRTC Template Improvements (cloudflare#4157)

* Add port numbers to fix stackblitz automatic startup * Pull the variables up and show clear instructions * fixup! Pull the variables up and show clear instructions --------- Co-authored-by: Peter Bacon Darwin <pbacondarwin@cloudflare.com>
OilyLime · Feb 1, 2024 · e1b7771 · e1b7771
1 parent 598b2c4
commit e1b7771
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/templates/stream/webrtc/package.json b/templates/stream/webrtc/package.json
@@ -4,8 +4,8 @@
 	"private": true,
 	"scripts": {
 		"build-ts": "tsc && cp dist/WHIPClient.js src/WHIPClient.js && cp dist/WHEPClient.js src/WHEPClient.js && cp dist/negotiateConnectionWithClientOffer.js src/negotiateConnectionWithClientOffer.js",
-		"dev": "WRANGLER_SEND_METRICS=false wrangler pages dev --local ./src",
-		"start-stackblitz": "WRANGLER_SEND_METRICS=false wrangler pages dev --local ./src"
+		"dev": "WRANGLER_SEND_METRICS=false wrangler pages dev --local --port 1180 ./src",
+		"start-stackblitz": "WRANGLER_SEND_METRICS=false wrangler pages dev --local  --port 1180 ./src"
 	},
 	"devDependencies": {
 		"typescript": "^4.5.4",

diff --git a/templates/stream/webrtc/src/index.html b/templates/stream/webrtc/src/index.html
@@ -1,5 +1,21 @@
 <html>
 	<head>
+		<script>
+			/**
+			 * How to start:
+			 *
+			 * 1. Create a Stream Live Input at https://dash.cloudflare.com/?to=/:account/stream/inputs/
+			 * 2. In the "Connection Information" tab, note the WHIP and WHEP URLs and fill them in below
+			 * 3. Save the file and reload the page
+			 */
+
+			// WHIP Publish URL
+			const publishURL = "<WEBRTC_WHIP_URL_FROM_YOUR_LIVE_INPUT>";
+
+			// WHEP Playback URL
+			const playbackURL = "<WEBRTC_WHEP_PLAYBACK_URL_FROM_YOUR_LIVE_INPUT>";
+		</script>
+
 		<!-- This adapter normalizes cross-browser differences in WebRTC APIs. Currently necessary in order to support Firefox. -->
 		<script
 			src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/8.1.2/adapter.min.js"
@@ -15,25 +31,23 @@ <h5>(local mirror)</h5>
 		<video id="input-video" autoplay muted></video>
 
 		<script type="module">
+			// This element will show your local webcam view
 			import WHIPClient from "./WHIPClient.js";
 
-			const url = "<WEBRTC_URL_FROM_YOUR_LIVE_INPUT>";
 			const videoElement = document.getElementById("input-video");
-
-			self.whipClient = new WHIPClient(url, videoElement);
+			self.whipClient = new WHIPClient(publishURL, videoElement);
 		</script>
 
 		<h4>Playing video using WHEP</h4>
 		<h5>(remote content)</h5>
 		<video id="remote-video" controls autoplay muted></video>
 
 		<script type="module">
+			// This element will show the playback from Stream
 			import WHEPClient from "./WHEPClient.js";
 
-			const url = "<WEBRTC_PLAYBACK_URL_FROM_YOUR_LIVE_INPUT>";
 			const videoElement = document.getElementById("remote-video");
-
-			self.whepClient = new WHEPClient(url, videoElement);
+			self.whepClient = new WHEPClient(playbackURL, videoElement);
 		</script>
 	</body>
 </html>