RanjanSushant/streamer.html

## streamer.html
<!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>

## streamer.js
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();
	<!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>
	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();