From 96081b2ec62f8fc44ab8f40a9e6eb780588a8f33 Mon Sep 17 00:00:00 2001
From: Braden Riggs <48164242+Briggs599@users.noreply.github.com>
Date: Tue, 14 Feb 2023 10:52:45 -0800
Subject: [PATCH] Workshop

Workshop code + ReadMe
---
 1-viewer-app/app.js                           | 51 ++++++++++++++++
 1-viewer-app/complete-sample/app-complete.js  | 58 +++++++++++++++++++
 .../complete-sample/index-complete.html       | 24 ++++++++
 .../complete-sample/style-complete.css        | 18 ++++++
 1-viewer-app/index.html                       | 24 ++++++++
 1-viewer-app/style.css                        | 18 ++++++
 2-publisher-app/app.js                        | 40 +++++++++++++
 .../complete-sample/app-complete.js           | 53 +++++++++++++++++
 .../complete-sample/index-complete.html       | 28 +++++++++
 .../complete-sample/style-complete.css        | 23 ++++++++
 2-publisher-app/index.html                    | 28 +++++++++
 2-publisher-app/style.css                     | 23 ++++++++
 README.md                                     | 30 +++++++++-
 13 files changed, 417 insertions(+), 1 deletion(-)
 create mode 100644 1-viewer-app/app.js
 create mode 100644 1-viewer-app/complete-sample/app-complete.js
 create mode 100644 1-viewer-app/complete-sample/index-complete.html
 create mode 100644 1-viewer-app/complete-sample/style-complete.css
 create mode 100644 1-viewer-app/index.html
 create mode 100644 1-viewer-app/style.css
 create mode 100644 2-publisher-app/app.js
 create mode 100644 2-publisher-app/complete-sample/app-complete.js
 create mode 100644 2-publisher-app/complete-sample/index-complete.html
 create mode 100644 2-publisher-app/complete-sample/style-complete.css
 create mode 100644 2-publisher-app/index.html
 create mode 100644 2-publisher-app/style.css

diff --git a/1-viewer-app/app.js b/1-viewer-app/app.js
new file mode 100644
index 0000000..92de346
--- /dev/null
+++ b/1-viewer-app/app.js
@@ -0,0 +1,51 @@
+// Dolby.io Streaming Workshop: Part 1
+// App.js manages the viewer functionality.
+// Web Docs: https://docs.dolby.io/streaming-apis/docs/web#viewer
+
+let joinBtn = document.getElementById("joinBtn");
+let leaveBtn = document.getElementById("leaveBtn");
+let videoPlayer = document.getElementById("videoPlayer");
+
+function addStreamToYourVideoTag(mediaTrack) {
+	// Takes in a stream and assigns it to the <video> element
+	videoPlayer.srcObject = mediaTrack;
+	videoPlayer.hidden = false;
+	videoPlayer.autoplay = true;
+}
+
+/////////////////////////////////////////////////////////////////////////////////
+//Part 1: Authenticate Connection to Dolby.io Streaming servers (Millicast)
+
+/////////////////////////////////////////////////////////////////////////////////
+
+/////////////////////////////////////////////////////////////////////////////////
+//Part 2: Connect to a stream.
+async function connectStream() {
+	leaveBtn.disabled = false;
+	joinBtn.disabled = true;
+	
+	//Specify the join options.
+	const options = {
+		disableVideo: false,
+		disableAudio: true,
+		bandwidth: 0, //Sets it to the max (un-throttled)
+	};
+
+	//Add stream to the video tag.
+
+
+	// Connecting to the stream.
+	try {
+
+		// Broadcasts can be started from the Dolby.io Dashboard https://streaming.dolby.io/#/tokens
+	} catch (e) {
+		console.log("Connection failed, handle error", e);
+
+	}
+}
+/////////////////////////////////////////////////////////////////////////////////
+
+function stopStream() {
+	//Closes Stream and resets browser.
+	location.reload();
+}
diff --git a/1-viewer-app/complete-sample/app-complete.js b/1-viewer-app/complete-sample/app-complete.js
new file mode 100644
index 0000000..7c8d37b
--- /dev/null
+++ b/1-viewer-app/complete-sample/app-complete.js
@@ -0,0 +1,58 @@
+// Dolby.io Streaming Workshop: Part 1
+// App.js manages the viewer functionality.
+// Web Docs: https://docs.dolby.io/streaming-apis/docs/web#viewer
+
+let joinBtn = document.getElementById("joinBtn");
+let leaveBtn = document.getElementById("leaveBtn");
+let videoPlayer = document.getElementById("videoPlayer");
+
+function addStreamToYourVideoTag(mediaTrack) {
+	// Takes in a stream and assigns it to the <video> element
+	videoPlayer.srcObject = mediaTrack;
+	videoPlayer.hidden = false;
+	videoPlayer.autoplay = true;
+}
+
+/////////////////////////////////////////////////////////////////////////////////
+//Part 1: Authenticate Connection to Dolby.io Streaming servers (Millicast)
+const tokenGenerator = () =>
+	window.millicast.Director.getSubscriber({
+		streamName: "YOUR STREAM NAME",
+		streamAccountId: "YOUR ACCOUNT ID",
+	});
+
+const millicastView = new window.millicast.View("ldm5fm0w", tokenGenerator);
+/////////////////////////////////////////////////////////////////////////////////
+
+/////////////////////////////////////////////////////////////////////////////////
+//Part 2: Connect to a stream.
+async function connectStream() {
+	leaveBtn.disabled = false;
+	joinBtn.disabled = true;
+	//Specify the join options.
+	const options = {
+		disableVideo: false,
+		disableAudio: true,
+		bandwidth: 0, //Sets it to the max (un-throttled)
+	};
+
+	//Add stream to the video tag.
+	millicastView.on("track", (event) => {
+		addStreamToYourVideoTag(event.streams[0]);
+	});
+
+	// Connecting to the stream.
+	try {
+		await millicastView.connect(options);
+		// Broadcasts can be started from the Dolby.io Dashboard https://streaming.dolby.io/#/tokens
+	} catch (e) {
+		console.log("Connection failed, handle error", e);
+		millicastView.reconnect();
+	}
+}
+/////////////////////////////////////////////////////////////////////////////////
+
+function stopStream() {
+	//Closes Stream and resets browser.
+	location.reload();
+}
diff --git a/1-viewer-app/complete-sample/index-complete.html b/1-viewer-app/complete-sample/index-complete.html
new file mode 100644
index 0000000..90eec20
--- /dev/null
+++ b/1-viewer-app/complete-sample/index-complete.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Dolby.io Stream Viewer App</title>
+		<meta name="description" content="Dolby.io Workshop Part #1: Building a WebRTC stream viewing app." />
+
+		<script src="https://cdn.jsdelivr.net/npm/@millicast/sdk/dist/millicast.umd.min.js"></script>
+		<link rel="stylesheet" href="style-complete.css" />
+	</head>
+	<body>
+		<h1>Dolby.io Workshop Part #1: WebRTC Stream Viewer</h1>
+		<button id="joinBtn" onclick="connectStream()">Join Stream</button>
+		<button id="leaveBtn" disabled onclick="stopStream()">Leave Stream</button>
+		<video width="640" height="360" id="videoPlayer" class="vidBox" hidden controls>
+			Your browser does not support the video playback with the video tag.
+		</video>
+		<div>
+			<a href="https://bit.ly/dolbyio-at-treehacks" target="_blank">Create a Dolby.io Account</a> |
+			<a href="https://docs.dolby.io/streaming-apis/docs/web#viewer" target="_blank">Dolby.io Streaming Docs</a> |
+			<a href="url">Hackathon Quick Start</a>
+		</div>
+		<script src="app-complete.js"></script>
+	</body>
+</html>
diff --git a/1-viewer-app/complete-sample/style-complete.css b/1-viewer-app/complete-sample/style-complete.css
new file mode 100644
index 0000000..ed1617f
--- /dev/null
+++ b/1-viewer-app/complete-sample/style-complete.css
@@ -0,0 +1,18 @@
+body {
+	font-family: "Helvetica", Sans-Serif;
+	color: white;
+	background-color: black;
+	margin: auto;
+	max-width: 640px;
+}
+video {
+	border-radius: 10px;
+	margin-top: 20px;
+}
+h1 {
+	margin-top: 15%;
+}
+div {
+	margin-top: 10px;
+	font-size: large;
+}
diff --git a/1-viewer-app/index.html b/1-viewer-app/index.html
new file mode 100644
index 0000000..faf7059
--- /dev/null
+++ b/1-viewer-app/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Dolby.io Stream Viewer App</title>
+		<meta name="description" content="Dolby.io Workshop Part #1: Building a WebRTC stream viewing app." />
+
+		<script src=""></script>
+		<link rel="stylesheet" href="style.css" />
+	</head>
+	<body>
+		<h1>Dolby.io Workshop Part #1: WebRTC Stream Viewer</h1>
+		<button id="joinBtn" onclick="connectStream()">Join Stream</button>
+		<button id="leaveBtn" disabled onclick="stopStream()">Leave Stream</button>
+		<video width="640" height="360" id="videoPlayer" class="vidBox" hidden controls>
+			Your browser does not support the video playback with the video tag.
+		</video>
+		<div>
+			<a href="https://bit.ly/dolbyio-at-treehacks" target="_blank">Create a Dolby.io Account</a> |
+			<a href="https://docs.dolby.io/streaming-apis/docs/web#viewer" target="_blank">Dolby.io Streaming Docs</a> |
+			<a href="url">Hackathon Quick Start</a>
+		</div>
+		<script src="app.js"></script>
+	</body>
+</html>
diff --git a/1-viewer-app/style.css b/1-viewer-app/style.css
new file mode 100644
index 0000000..ed1617f
--- /dev/null
+++ b/1-viewer-app/style.css
@@ -0,0 +1,18 @@
+body {
+	font-family: "Helvetica", Sans-Serif;
+	color: white;
+	background-color: black;
+	margin: auto;
+	max-width: 640px;
+}
+video {
+	border-radius: 10px;
+	margin-top: 20px;
+}
+h1 {
+	margin-top: 15%;
+}
+div {
+	margin-top: 10px;
+	font-size: large;
+}
diff --git a/2-publisher-app/app.js b/2-publisher-app/app.js
new file mode 100644
index 0000000..5558605
--- /dev/null
+++ b/2-publisher-app/app.js
@@ -0,0 +1,40 @@
+// Dolby.io Streaming Workshop: Part 2
+// App.js manages the publisher functionality.
+// Web Docs: https://docs.dolby.io/streaming-apis/docs/web#publish-a-stream
+
+let startBtn = document.getElementById("startBtn");
+let endBtn = document.getElementById("endBtn");
+let videoPlayer = document.getElementById("videoPlayer");
+
+function addStreamToYourVideoTag(mediaTrack) {
+	// Takes in a stream and assigns it to the <video> element
+	videoPlayer.srcObject = mediaTrack;
+	videoPlayer.hidden = false;
+	videoPlayer.autoplay = true;
+}
+
+/////////////////////////////////////////////////////////////////////////////////
+//Part 1: Authenticate Connection to Dolby.io Streaming servers (Millicast)
+
+/////////////////////////////////////////////////////////////////////////////////
+
+/////////////////////////////////////////////////////////////////////////////////
+//Part 2: Broadcast Stream.
+async function connectStream() {
+	startBtn.disabled = true;
+	endBtn.disabled = false;
+
+	// Start broadcast
+	try {
+		//To view the stream navigate to: https://viewer.millicast.com?streamId=YOUR_ACCOUNT_ID/YOUR_STREAM_NAME
+	} catch (e) {
+		console.error("Connection failed, handle error", e);
+	}
+}
+/////////////////////////////////////////////////////////////////////////////////
+
+function stopStream() {
+	//Ends Stream and resets browser.
+	
+	location.reload();
+}
diff --git a/2-publisher-app/complete-sample/app-complete.js b/2-publisher-app/complete-sample/app-complete.js
new file mode 100644
index 0000000..c1db32b
--- /dev/null
+++ b/2-publisher-app/complete-sample/app-complete.js
@@ -0,0 +1,53 @@
+// Dolby.io Streaming Workshop: Part 2
+// App.js manages the publisher functionality.
+// Web Docs: https://docs.dolby.io/streaming-apis/docs/web#publish-a-stream
+
+let startBtn = document.getElementById("startBtn");
+let endBtn = document.getElementById("endBtn");
+let videoPlayer = document.getElementById("videoPlayer");
+
+function addStreamToYourVideoTag(mediaTrack) {
+	// Takes in a stream and assigns it to the <video> element
+	videoPlayer.srcObject = mediaTrack;
+	videoPlayer.hidden = false;
+	videoPlayer.autoplay = true;
+}
+
+/////////////////////////////////////////////////////////////////////////////////
+//Part 1: Authenticate Connection to Dolby.io Streaming servers (Millicast)
+const tokenGenerator = () =>
+	window.millicast.Director.getPublisher({
+		token: "YOUR TOKEN", 
+		streamName: "YOUR STREAM NAME",
+	});
+
+const publisher = new window.millicast.Publish("my-stream-name", tokenGenerator);
+/////////////////////////////////////////////////////////////////////////////////
+
+/////////////////////////////////////////////////////////////////////////////////
+//Part 2: Broadcast Stream.
+async function connectStream() {
+    startBtn.disabled = true;
+	endBtn.disabled = false;
+    const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
+    addStreamToYourVideoTag(mediaStream);
+    
+    const broadcastOptions = {
+        mediaStream: mediaStream
+      };
+      
+      // Start broadcast
+      try {
+        await publisher.connect(broadcastOptions);
+        //To view the stream navigate to: https://viewer.millicast.com?streamId=YOUR_ACCOUNT_ID/YOUR_STREAM_NAME
+      } catch (e) {
+        console.error('Connection failed, handle error', e);
+      }
+}
+/////////////////////////////////////////////////////////////////////////////////
+
+function stopStream() {
+	//Ends Stream and resets browser.
+    publisher.stop();
+	location.reload();
+}
diff --git a/2-publisher-app/complete-sample/index-complete.html b/2-publisher-app/complete-sample/index-complete.html
new file mode 100644
index 0000000..3210e20
--- /dev/null
+++ b/2-publisher-app/complete-sample/index-complete.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Dolby.io Stream Publisher App</title>
+		<meta name="description" content="Dolby.io Workshop Part #2: Building a WebRTC publisher app." />
+
+		<script src="https://cdn.jsdelivr.net/npm/@millicast/sdk/dist/millicast.umd.min.js"></script>
+		<link rel="stylesheet" href="style-complete.css" />
+	</head>
+	<body>
+		<h1>Dolby.io Workshop Part #2: WebRTC Broadcaster</h1>
+		<button id="startBtn" onclick="connectStream()">Start Stream</button>
+		<button id="endBtn" disabled onclick="stopStream()">End Stream</button>
+		<video width="640" height="360" id="videoPlayer" class="vidBox" hidden controls>
+			Your browser does not support the video playback with the video tag.
+		</video>
+		<div>
+			<a href="https://bit.ly/dolbyio-at-treehacks" target="_blank">Create a Dolby.io Account</a> |
+			<a href="https://docs.dolby.io/streaming-apis/docs/web#publish-a-stream" target="_blank"
+				>Dolby.io Streaming Docs</a
+			>
+			|
+			<a href="url">Hackathon Quick Start</a>
+		</div>
+		<b>Live broadcasts can be found at: https://viewer.millicast.com?streamId=ACCOUNT_ID/STREAM_NAME</b>
+		<script src="app-complete.js"></script>
+	</body>
+</html>
diff --git a/2-publisher-app/complete-sample/style-complete.css b/2-publisher-app/complete-sample/style-complete.css
new file mode 100644
index 0000000..e5171b7
--- /dev/null
+++ b/2-publisher-app/complete-sample/style-complete.css
@@ -0,0 +1,23 @@
+body {
+	font-family: "Helvetica", Sans-Serif;
+	color: black;
+	background-color: white;
+	margin: auto;
+	max-width: 640px;
+}
+video {
+	border-radius: 10px;
+	margin-top: 20px;
+}
+h1 {
+	margin-top: 15%;
+}
+div {
+	margin-top: 10px;
+	font-size: large;
+}
+b {
+	font-size: small;
+	background-color: bisque;
+	
+}
\ No newline at end of file
diff --git a/2-publisher-app/index.html b/2-publisher-app/index.html
new file mode 100644
index 0000000..f78f06c
--- /dev/null
+++ b/2-publisher-app/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Dolby.io Stream Publisher App</title>
+		<meta name="description" content="Dolby.io Workshop Part #2: Building a WebRTC publisher app." />
+
+		<script src=""></script>
+		<link rel="stylesheet" href="style.css" />
+	</head>
+	<body>
+		<h1>Dolby.io Workshop Part #2: WebRTC Broadcaster</h1>
+		<button id="startBtn" onclick="connectStream()">Start Stream</button>
+		<button id="endBtn" disabled onclick="stopStream()">End Stream</button>
+		<video width="640" height="360" id="videoPlayer" class="vidBox" hidden controls>
+			Your browser does not support the video playback with the video tag.
+		</video>
+		<div>
+			<a href="https://bit.ly/dolbyio-at-treehacks" target="_blank">Create a Dolby.io Account</a> |
+			<a href="https://docs.dolby.io/streaming-apis/docs/web#publish-a-stream" target="_blank"
+				>Dolby.io Streaming Docs</a
+			>
+			|
+			<a href="url">Hackathon Quick Start</a>
+		</div>
+		<b>Live broadcasts can be found at: https://viewer.millicast.com?streamId=ACCOUNT_ID/STREAM_NAME</b>
+		<script src="app.js"></script>
+	</body>
+</html>
diff --git a/2-publisher-app/style.css b/2-publisher-app/style.css
new file mode 100644
index 0000000..e5171b7
--- /dev/null
+++ b/2-publisher-app/style.css
@@ -0,0 +1,23 @@
+body {
+	font-family: "Helvetica", Sans-Serif;
+	color: black;
+	background-color: white;
+	margin: auto;
+	max-width: 640px;
+}
+video {
+	border-radius: 10px;
+	margin-top: 20px;
+}
+h1 {
+	margin-top: 15%;
+}
+div {
+	margin-top: 10px;
+	font-size: large;
+}
+b {
+	font-size: small;
+	background-color: bisque;
+	
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index fed3d1c..9633544 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,29 @@
-# Project Title
+## Dolby.io Streaming Getting Started Workshop with the WebSDK
+Dolby.io Streaming (formerly Millicast) is a one-to-many webRTC streaming solution for ultra low latency live streams that can scale for large audiences. 
+
+This workshop will take you zero-to-hero by teaching you how to set up a WebRTC stream Viewer and a WebRTC stream Publisher.
+
+**Quick Links**
+- [Create a Dolby.io Account](https://bit.ly/dolbyio-at-treehacks)
+- [Dolby.io WebRTC Streaming Documentation](https://docs.dolby.io/streaming-apis/docs/web)
+- ~~Workshop Recording 02/15/23~~ (Available after workshop)
+
+### Get Started
+The workshop can be divided into **2** sections:
+1. Building a **Viewer** application that allows the end user to join and view a Dolby.io stream.
+2. Building a **Publisher** application that allows content creators to publish a stream that viewers can enjoy with the viewer app.
+
+>The workshop requires a rich text editor pre-installed on your machine.
+
+Both part #1 and part #2 include completed code samples in their respective folders. To use the completed samples you **must add your Dolby.io Streaming API keys** to the app-complete.js file. 
+
+
+
+
+### Next Steps / Further Reading
+>  Interested in a many-to-many conferencing solution? [Learn more about Dolby.io Communications](https://docs.dolby.io/communications-apis/docs).
+- [What is WebRTC?](https://webrtc.org/)
+- [Building Multiviewer Livestream Viewer App](https://dolby.io/blog/building-a-webrtc-live-stream-multiviewer-app/)
+- [Securing Streams with Tokens](https://dolby.io/blog/secure-token-authentication-with-dolby-io-millicast-streaming-webrtc/)
+- [Simulcasting What & Why?](https://dolby.io/blog/what-is-simulcast-and-why-does-it-matter-for-streaming/)
+- [WebRTC-enabled OBS](https://dolby.io/blog/using-webrtc-in-obs-for-remote-live-production/)
\ No newline at end of file