kwindla/iot-receiver.html

## iot-receiver.html
<html>
  <head>
    <title>send cam track and adjust bandwidth with a slider</title>
    <script src="https://unpkg.com/@daily-co/daily-js"></script>
  </head>

  <!--
      simple demo showing a client that only receives video
  -->

  <body onload="main()">
    <h1>video receiving client</h1>
    <div id="local-controls">
      <div id="local-controls">
        <button id="join" onclick="joinRoom()">join room</button>
        <hr />
        <button id="leave" onclick="leaveRoom()">leave room</button>
        <hr />
        <div id="video-recv-kbps">-</div>
        <div id="session-state-display">newly loaded html page</div>
        <hr />
      </div>
    </div>

    <div id="videos"></div>

    <script>
      async function main() {
        // CHANGE THIS TO A ROOM WITHIN YOUR DAILY ACCOUNT
        const ROOM_URL = '...';

        window.call = DailyIframe.createCallObject({
          url: ROOM_URL,
          videoSource: false,
          audioSource: false,
        });

        call.on('joined-meeting', () => {
          console.log('[JOINED MEETING]');
          document.getElementById('session-state-display').innerHTML = 'joined';
          console.log('set to joined');
        });
        call.on('left-meeting', () => {
          console.log('[LEFT MEETING]');
          document.getElementById('session-state-display').innerHTML = 'left';
          document.querySelectorAll('video').forEach((el) => el.remove());
          document.querySelectorAll('audio').forEach((el) => el.remove());
        });
        call.on('error', (e) => {
          console.log('[ERROR]', e);
          document.getElementById('session-state-display').innerHTML =
            'error -> ' + e.toString();
        });

        call.on('track-started', displayTrack);
        call.on('track-stopped', destroyTrack);

        setInterval(updateStatsDisplay, 3000);
      }

      async function joinRoom() {
        await call.join();
      }

      async function leaveRoom() {
        await call.leave();
      }

      async function updateStatsDisplay() {
        const videoRecv = (await call.getNetworkStats()).stats.latest
          .videoRecvBitsPerSecond;
        document.getElementById('video-recv-kbps').innerText = Math.round(
          videoRecv ? videoRecv / 1000 : '-'
        );
      }

      // ----

      function displayTrack(evt) {
        console.log('[TRACK STARTED]', evt);
        if (evt.track.kind === 'video') {
          displayVideo(evt);
        } else {
          playAudio(evt);
        }
      }

      function displayVideo(evt) {
        console.log(evt);
        if (!(evt.track.kind === 'video')) {
          return;
        }
        let videosDiv = document.getElementById('videos');
        let videoEl = document.createElement('video');
        videosDiv.appendChild(videoEl);
        videoEl.style.width = '100%';
        videoEl.srcObject = new MediaStream([evt.track]);
        videoEl.play();
      }

      function playAudio(evt) {
        if (evt.participant.local) {
          return;
        }
        let audioEl = document.createElement('audio');
        document.body.appendChild(audioEl);
        audioEl.srcObject = new MediaStream([evt.track]);
        audioEl.play();
      }

      function destroyTrack(evt) {
        console.log(
          '[TRACK STOPPED]',
          (evt.participant && evt.participant.session_id) || '[left meeting]',
          evt.track.kind
        );

        let els = Array.from(document.getElementsByTagName('video')).concat(
          Array.from(document.getElementsByTagName('audio'))
        );
        for (let el of els) {
          if (el.srcObject && el.srcObject.getTracks()[0] === evt.track) {
            el.remove();
          }
        }
      }
    </script>
  </body>
</html>
	<html>
	<head>
	<title>send cam track and adjust bandwidth with a slider</title>
	<script src="https://unpkg.com/@daily-co/daily-js"></script>
	</head>

	<!--
	simple demo showing a client that only receives video
	-->

	<body onload="main()">
	<h1>video receiving client</h1>
	<div id="local-controls">
	<div id="local-controls">
	<button id="join" onclick="joinRoom()">join room</button>
	<hr />
	<button id="leave" onclick="leaveRoom()">leave room</button>
	<hr />
	<div id="video-recv-kbps">-</div>
	<div id="session-state-display">newly loaded html page</div>
	<hr />
	</div>
	</div>

	<div id="videos"></div>

	<script>
	async function main() {
	// CHANGE THIS TO A ROOM WITHIN YOUR DAILY ACCOUNT
	const ROOM_URL = '...';

	window.call = DailyIframe.createCallObject({
	url: ROOM_URL,
	videoSource: false,
	audioSource: false,
	});

	call.on('joined-meeting', () => {
	console.log('[JOINED MEETING]');
	document.getElementById('session-state-display').innerHTML = 'joined';
	console.log('set to joined');
	});
	call.on('left-meeting', () => {
	console.log('[LEFT MEETING]');
	document.getElementById('session-state-display').innerHTML = 'left';
	document.querySelectorAll('video').forEach((el) => el.remove());
	document.querySelectorAll('audio').forEach((el) => el.remove());
	});
	call.on('error', (e) => {
	console.log('[ERROR]', e);
	document.getElementById('session-state-display').innerHTML =
	'error -> ' + e.toString();
	});

	call.on('track-started', displayTrack);
	call.on('track-stopped', destroyTrack);

	setInterval(updateStatsDisplay, 3000);
	}

	async function joinRoom() {
	await call.join();
	}

	async function leaveRoom() {
	await call.leave();
	}

	async function updateStatsDisplay() {
	const videoRecv = (await call.getNetworkStats()).stats.latest
	.videoRecvBitsPerSecond;
	document.getElementById('video-recv-kbps').innerText = Math.round(
	videoRecv ? videoRecv / 1000 : '-'
	);
	}

	// ----

	function displayTrack(evt) {
	console.log('[TRACK STARTED]', evt);
	if (evt.track.kind === 'video') {
	displayVideo(evt);
	} else {
	playAudio(evt);
	}
	}

	function displayVideo(evt) {
	console.log(evt);
	if (!(evt.track.kind === 'video')) {
	return;
	}
	let videosDiv = document.getElementById('videos');
	let videoEl = document.createElement('video');
	videosDiv.appendChild(videoEl);
	videoEl.style.width = '100%';
	videoEl.srcObject = new MediaStream([evt.track]);
	videoEl.play();
	}

	function playAudio(evt) {
	if (evt.participant.local) {
	return;
	}
	let audioEl = document.createElement('audio');
	document.body.appendChild(audioEl);
	audioEl.srcObject = new MediaStream([evt.track]);
	audioEl.play();
	}

	function destroyTrack(evt) {
	console.log(
	'[TRACK STOPPED]',
	(evt.participant && evt.participant.session_id) \|\| '[left meeting]',
	evt.track.kind
	);

	let els = Array.from(document.getElementsByTagName('video')).concat(
	Array.from(document.getElementsByTagName('audio'))
	);
	for (let el of els) {
	if (el.srcObject && el.srcObject.getTracks()[0] === evt.track) {
	el.remove();
	}
	}
	}
	</script>
	</body>
	</html>