RanjanSushant/audience.html

## audience.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="../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>

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