Created
March 9, 2022 14:00
-
-
Save RanjanSushant/9cb6523af510ebc2b6bce53ce722de16 to your computer and use it in GitHub Desktop.
Streamer for the Twilio Livestream Demo Codepshere
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
<!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="https://sdk.twilio.com/js/video/releases/2.18.0/twilio-video.min.js" | |
></script> | |
<script defer src="streamer.js" type="text/javascript"></script> | |
<title>Twilio Livestream | Streamer</title> | |
</head> | |
<body> | |
<h1>Streamer</h1> | |
<div id="container"> | |
<div id="stream"> | |
<!-- video will be added here dynamically --> | |
</div> | |
<div id="controls"> | |
<input id="identity" type="text" placeholder="Your name" required /> | |
<input | |
id="streamName" | |
type="text" | |
placeholder="Livestream name" | |
required | |
/> | |
<button id="streamStartEnd">Start Stream</button> | |
</div> | |
</div> | |
</body> | |
</html> |
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
const stream = document.getElementById("stream"); | |
const identityInput = document.getElementById("identity"); | |
const streamNameInput = document.getElementById("streamName"); | |
const startEndButton = document.getElementById("streamStartEnd"); | |
// const video = document.getElementsByTagName("video")[0]; | |
const video = document.querySelector("video"); | |
let streaming = false; | |
let room; | |
let streamDetails; | |
let liveNotification = document.createElement("div"); | |
liveNotification.innerHTML = "LIVE"; | |
liveNotification.id = "liveNotification"; | |
const addLocalVideo = async () => { | |
const videoTrack = await Twilio.Video.createLocalVideoTrack(); | |
const trackElement = videoTrack.attach(); | |
stream.appendChild(trackElement); | |
}; | |
const startStream = async (streamName, identity) => { | |
// Create the livestream | |
const startStreamResponse = await fetch("/start", { | |
method: "POST", | |
headers: { | |
"Content-Type": "application/json", | |
}, | |
body: JSON.stringify({ | |
streamName: streamName, | |
}), | |
}); | |
streamDetails = await startStreamResponse.json(); | |
const roomId = streamDetails.roomId; | |
// Get an Access Token | |
const tokenResponse = await fetch("/streamerToken", { | |
method: "POST", | |
headers: { | |
"Content-Type": "application/json", | |
}, | |
body: JSON.stringify({ | |
identity: identity, | |
room: roomId, | |
}), | |
}); | |
const tokenData = await tokenResponse.json(); | |
// Connect to the Video Room | |
room = await Twilio.Video.connect(tokenData.token); | |
streaming = true; | |
stream.insertBefore(liveNotification, video); | |
startEndButton.disabled = false; | |
}; | |
const endStream = async () => { | |
// If streaming, end the stream | |
if (streaming) { | |
try { | |
const response = await fetch("/end", { | |
method: "POST", | |
headers: { | |
"Content-Type": "application/json", | |
}, | |
body: JSON.stringify({ | |
streamDetails: streamDetails, | |
}), | |
}); | |
const data = await response.json(); | |
room.disconnect(); | |
streaming = false; | |
liveNotification.remove(); | |
startEndButton.innerHTML = "start stream"; | |
identityInput.disabled = false; | |
streamNameInput.disabled = false; | |
} catch (error) { | |
console.log(error); | |
} | |
} | |
}; | |
const startOrEndStream = async (event) => { | |
event.preventDefault(); | |
if (!streaming) { | |
const streamName = streamNameInput.value; | |
const identity = identityInput.value; | |
startEndButton.innerHTML = "end stream"; | |
startEndButton.disabled = true; | |
identityInput.disabled = true; | |
streamNameInput.disabled = true; | |
try { | |
await startStream(streamName, identity); | |
} catch (error) { | |
console.log(error); | |
alert("Unable to start livestream."); | |
startEndButton.innerHTML = "start stream"; | |
startEndButton.disabled = false; | |
identityInput.disabled = false; | |
streamNameInput.disabled = false; | |
} | |
} else { | |
endStream(); | |
} | |
}; | |
startEndButton.addEventListener("click", startOrEndStream); | |
window.addEventListener("beforeunload", async (event) => { | |
event.preventDefault(); | |
await endStream(); | |
e.returnValue = ""; | |
}); | |
addLocalVideo(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment