Created
March 9, 2022 14:07
-
-
Save RanjanSushant/23ec1c1ae4018497bdaa9debd89fc6c0 to your computer and use it in GitHub Desktop.
Audience for Twilio Livestream Demo Codesphere
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <script defer src="../livePlayer/twilio-live-player.min.js"></script> | |
| <script defer src="audience.js" type="text/javascript"></script> | |
| <title>Twilio Livestream | Audience</title> | |
| </head> | |
| <body> | |
| <h1>Audience</h1> | |
| <div id="container"> | |
| <div id="player"> | |
| <!-- livestream goes here --> | |
| </div> | |
| <button id="streamStartEnd">Watch Stream</button> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| const streamPlayer = document.getElementById("player"); | |
| const startEndButton = document.getElementById("streamStartEnd"); | |
| let player; | |
| let watchingStream = false; | |
| const watchStream = async () => { | |
| try { | |
| const response = await fetch("/audienceToken", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| }, | |
| }); | |
| const data = await response.json(); | |
| if (data.message) { | |
| alert(data.message); | |
| return; | |
| } | |
| player = await Twilio.Live.Player.connect(data.token, { | |
| playerWasmAssetsPath: "../livePlayer", | |
| }); | |
| player.play(); | |
| streamPlayer.appendChild(player.videoElement); | |
| watchingStream = true; | |
| startEndButton.innerHTML = "leave stream"; | |
| } catch (error) { | |
| console.log(error); | |
| alert("Unable to connect to livestream"); | |
| } | |
| }; | |
| const leaveStream = () => { | |
| player.disconnect(); | |
| watchingStream = false; | |
| startEndButton.innerHTML = "watch stream"; | |
| }; | |
| const watchOrLeaveStream = async (event) => { | |
| event.preventDefault(); | |
| if (!watchingStream) { | |
| await watchStream(); | |
| } else { | |
| leaveStream(); | |
| } | |
| }; | |
| startEndButton.addEventListener("click", watchOrLeaveStream); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment