From 4466b20e7bf3d4a11571008ddd439df0bf4ab47d Mon Sep 17 00:00:00 2001
From: Fabien Lavocat <4154532+FabienLavocat@users.noreply.github.com>
Date: Tue, 25 Jun 2024 14:46:39 -0700
Subject: [PATCH] Set simulcast only when video track is available. Add audio
 example.

---
 example/README.md                             |   2 +-
 example/audio.html                            | 185 ++++++++++++++++++
 package-lock.json                             |   6 +-
 package.json                                  |   2 +-
 packages/sdk-interactivity/package.json       |   2 +-
 .../sdk-interactivity/src/publishedSource.ts  |   8 +-
 6 files changed, 197 insertions(+), 8 deletions(-)
 create mode 100644 example/audio.html
diff --git a/example/README.md b/example/README.md
index c68bf0e..0f0d350 100644
--- a/example/README.md
+++ b/example/README.md
@@ -1,6 +1,6 @@
 # Dolby.io - Millicast Interactivity SDK - Example
 
-This [index.html](index.html) file in this folder contains a very basic example of application using the _Dolby Millicast Interactivity SDK_, to run a bi-directional conversation in between participants.
+This [index.html](index.html) file in this folder contains a very basic example of application using the _Dolby Millicast Interactivity SDK_, to run a bi-directional conversation in between participants. Use the [audio.html](audio.html) for an audio only experience.
 
 To run the application, either upload it on a web server with SSL enabled (Only HTTPS is allowed for a Web RTC application to work) or run a local web server. Here is how to run it using Python:
 
diff --git a/example/audio.html b/example/audio.html
new file mode 100644
index 0000000..e691050
--- /dev/null
+++ b/example/audio.html
@@ -0,0 +1,185 @@
+<html lang="en-US">
+    <head>
+        <title>Dolby Millicast - Interactivity</title>
+        <script src="https://cdn.jsdelivr.net/npm/@millicast/sdk/dist/millicast.umd.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@millicast/sdk-interactivity/dist/millicast-sdk-interactivity.min.js"></script>
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+            integrity="sha256-PI8n5gCcz9cQqQXm3PEtDuPG8qx9oFsFctPg0S5zb8g="
+            crossorigin="anonymous"
+        />
+        <script src="https://cdn.jsdelivr.net/npm/jsrender@1.0.13/jsrender.min.js"></script>
+        <style>
+            body {
+                background-color: #000000;
+            }
+            .bg-header {
+                background-color: #14141a;
+                background-image: linear-gradient(180deg, rgba(204, 133, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
+            }
+            .bg-widget {
+                border-color: rgb(102, 102, 106);
+                border-width: 1px;
+                border-style: solid;
+            }
+            button {
+                height: 50px;
+                width: 250px;
+            }
+            video {
+                max-height: 400px;
+            }
+            .hide {
+                display: none;
+            }
+            .card {
+                background-color: #000000;
+                border-color: rgb(102, 102, 106);
+                border-width: 1px;
+                border-style: solid;
+            }
+            .card-title {
+                color: white;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="bg-header text-white px-4 py-4">
+            <div class="container d-flex flex-wrap">
+                <h1 class="me-auto">Dolby Millicast - Interactivity</h1>
+                <a href="https://github.com/millicast/millicast-sdk-interactivity/" target="_blank">
+                    <img alt="GitHub repository" src="https://img.shields.io/badge/repository-repository?logo=GitHub&label=GitHub" />
+                </a>
+            </div>
+        </div>
+        <div class="px-4 mt-4">
+            <div class="mt-3">
+                <div class="shadow p-3 mb-5 bg-widget rounded text-center hide-on-join">
+                    <div class="container">
+                        <div class="input-group mb-4">
+                            <input id="input-account-id" type="text" class="form-control" placeholder="Dolby Account ID" />
+                            <span class="input-group-text">/</span>
+                            <input id="input-stream-name" type="text" class="form-control" placeholder="Stream Name" />
+                        </div>
+                        <input id="input-publish-token" type="text" class="form-control" placeholder="Publish Token" /><br />
+                        <input id="input-participant-name" type="text" class="form-control" placeholder="Participant Name" /><br />
+                        <select id="lst-audio-devices" class="form-select" title="Audio devices"></select><br />
+                        <button type="button" onclick="join()" class="btn btn-primary">Join the party</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="show-on-join hide container-fluid">
+                <div class="row row-cols-5">
+                    <div id="local-source" class="col">
+                        <div class="card">
+                            <div class="card-body">
+                                <h5 class="card-title">
+                                    Me
+                                    <a href="#" onclick="leave()" class="btn btn-danger btn-sm">Leave</a>
+                                </h5>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script>
+            const elementAccountId = document.getElementById('input-account-id');
+            const elementStreamName = document.getElementById('input-stream-name');
+            const elementPublishToken = document.getElementById('input-publish-token');
+            const elementParticipantName = document.getElementById('input-participant-name');
+
+            const urlParams = new URLSearchParams(window.location.search);
+
+            elementAccountId.value = urlParams.get('aid') ?? '';
+            elementStreamName.value = urlParams.get('room') ?? '';
+            elementPublishToken.value = urlParams.get('pt') ?? '';
+            elementParticipantName.value = urlParams.get('name') ?? '';
+
+            const lstAudioDevices = document.getElementById('lst-audio-devices');
+
+            async function getAudioDevices() {
+                const devices = await navigator.mediaDevices.enumerateDevices();
+                devices.forEach((d) => {
+                    const option = document.createElement('option');
+                    option.value = d.deviceId;
+                    option.text = d.label;
+
+                    if (d.kind === 'audioinput') {
+                        lstAudioDevices.append(option);
+                    }
+                });
+            }
+
+            getAudioDevices();
+
+            async function onSourceAdded(publisher, source) {
+                console.log('onSourceAdded', publisher, source);
+                const template = jsrender.templates(`
+					<div id="source-${source.identifier.sourceId}" class="col">
+						<div class="card">
+							<audio id="audio-${source.identifier.sourceId}" controls="false" autoplay="true" playinline disablePictureInPicture class="card-img-top"></audio>
+							<div class="card-body">
+								<h5 class="card-title">${publisher.name}</h5>
+							</div>
+						</div>
+					</div>
+				`);
+                const rendering = template.render();
+
+                const participantsDiv = document.getElementById('local-source');
+                participantsDiv.insertAdjacentHTML('afterend', rendering);
+
+                await source.receive();
+
+                const audioElement = document.getElementById(`audio-${source.identifier.sourceId}`);
+                audioElement.srcObject = source.mediaStream;
+                audioElement.play();
+                audioElement.controls = false;
+            }
+
+            function onSourceRemoved(publisher, sourceId) {
+                console.log('onSourceRemoved', publisher, sourceId);
+                const element = document.getElementById(`source-${sourceId.sourceId}`);
+                element.remove();
+            }
+
+            var room;
+
+            async function join() {
+                document.querySelectorAll('.hide-on-join').forEach((elem) => elem.classList.add('hide'));
+
+                room = new MillicastInteractivity.Room({
+                    streamName: elementStreamName.value,
+                    streamAccountId: elementAccountId.value,
+                });
+
+                //room.on('viewercount', (count) => console.log('Viewer count is', count));
+                room.on('sourceAdded', onSourceAdded);
+                room.on('sourceRemoved', onSourceRemoved);
+
+                const publishedSource = await room.connect({
+                    publishToken: elementPublishToken.value,
+                    publisherName: elementParticipantName.value,
+                    constraints: {
+                        audio: {
+                            deviceId: lstAudioDevices.value,
+                        },
+                        video: false,
+                    },
+                });
+
+                document.querySelectorAll('.show-on-join').forEach((elem) => elem.classList.remove('hide'));
+            }
+
+            function leave() {
+                room.leave();
+                // Refresh the page
+                window.location.reload();
+            }
+        </script>
+    </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
index 3788f5c..ef60e15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sdk-interactivity",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sdk-interactivity",
-      "version": "0.1.1",
+      "version": "0.1.2",
       "license": "Millicast",
       "workspaces": [
         "packages/*"
@@ -5531,7 +5531,7 @@
     },
     "packages/sdk-interactivity": {
       "name": "@millicast/sdk-interactivity",
-      "version": "0.1.1",
+      "version": "0.1.2",
       "license": "Millicast",
       "dependencies": {
         "@millicast/sdk": "^0.1.46",
diff --git a/package.json b/package.json
index 5595f25..06d2985 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sdk-interactivity",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/packages/sdk-interactivity/package.json b/packages/sdk-interactivity/package.json
index d5a6d2a..7aa3b83 100644
--- a/packages/sdk-interactivity/package.json
+++ b/packages/sdk-interactivity/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@millicast/sdk-interactivity",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "description": "Dolby Millicast Interactivity SDK",
     "main": "dist/millicast-sdk-interactivity.js",
     "scripts": {
diff --git a/packages/sdk-interactivity/src/publishedSource.ts b/packages/sdk-interactivity/src/publishedSource.ts
index 83cea42..6de7af4 100644
--- a/packages/sdk-interactivity/src/publishedSource.ts
+++ b/packages/sdk-interactivity/src/publishedSource.ts
@@ -80,14 +80,18 @@ export class PublishedSource {
             this.#audioTrack = firstOrUndefined(mediaStream.getAudioTracks());
         }
 
+        let simulcast: boolean = false;
         const tracks: MediaStreamTrack[] = [];
-        if (this.#videoTrack) tracks.push(this.#videoTrack);
+        if (this.#videoTrack) {
+            simulcast = true;
+            tracks.push(this.#videoTrack)
+        };
         if (this.#audioTrack) tracks.push(this.#audioTrack);
 
         await this.#publisher.connect({
             mediaStream: tracks,
             sourceId: this.#sourceId.sourceId,
-            simulcast: true,
+            simulcast: simulcast,
         });
     };
 
