-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Set simulcast only when video track is available. Add audio example.
- Loading branch information
1 parent
880670e
commit 4466b20
Showing
6 changed files
with
197 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/[email protected]/dist/css/bootstrap.min.css" | ||
| integrity="sha256-PI8n5gCcz9cQqQXm3PEtDuPG8qx9oFsFctPg0S5zb8g=" | ||
| crossorigin="anonymous" | ||
| /> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/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> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters