kwindla/iot-sender.html

## iot-sender.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 bandwidth slider in media-server-mode calls,
      with no video rendering at all. simulcast is disabled so that
      the client is sending only a single video stream. this means
      that any receiving client must have enough bandwidth to receive
      whatever bitrate this client is sending.
  -->

  <body onload="main()">
    <h1>video sending 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 />
        <input
          id="send-kbs-slider"
          style="width: 100%"
          type="range"
          min="80"
          max="1200"
          value="600"
          onchange="setSendKbs(this)"
          oninput="updateSendKbsDisplay(this)"
        />
        <div id="send-kbs-display">600</div>
        <div id="session-state-display">newly loaded html page</div>
        <hr />
      </div>
    </div>

    <script>
      async function main() {
        // CHANGE THIS TO A ROOM WITHIN YOUR DAILY ACCOUNT THAT HAS
        // THE ROOM PROPERTY `sfu_switchover` set to `1`
        const ROOM_URL = '...';

        window.call = DailyIframe.createCallObject({
          url: ROOM_URL,
          dailyConfig: {
            experimentalChromeVideoMuteLightOff: true,
            disableSimulcast: true,
          },
        });

        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';
        });
        call.on('error', (e) => {
          console.log('[ERROR]', e);
          document.getElementById('session-state-display').innerHTML =
            'error -> ' + e.toString();
        });
      }

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

        sendKbs = Number(document.getElementById('send-kbs-slider').value);

        console.log('[SETTING SEND BANDWIDTH]', sendKbs);
        call.setBandwidth({ kbs: sendKbs });
      }

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

      async function updateSendKbsDisplay(slider) {
        document.getElementById('send-kbs-display').innerText = slider.value;
      }

      async function setSendKbs(slider) {
        console.log('[SETTING SEND BANDWIDTH]', slider.value);
        if (call) {
          call.setBandwidth({ kbs: Number(slider.value) });
        }
      }
    </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 bandwidth slider in media-server-mode calls,
	with no video rendering at all. simulcast is disabled so that
	the client is sending only a single video stream. this means
	that any receiving client must have enough bandwidth to receive
	whatever bitrate this client is sending.
	-->

	<body onload="main()">
	<h1>video sending 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 />
	<input
	id="send-kbs-slider"
	style="width: 100%"
	type="range"
	min="80"
	max="1200"
	value="600"
	onchange="setSendKbs(this)"
	oninput="updateSendKbsDisplay(this)"
	/>
	<div id="send-kbs-display">600</div>
	<div id="session-state-display">newly loaded html page</div>
	<hr />
	</div>
	</div>

	<script>
	async function main() {
	// CHANGE THIS TO A ROOM WITHIN YOUR DAILY ACCOUNT THAT HAS
	// THE ROOM PROPERTY `sfu_switchover` set to `1`
	const ROOM_URL = '...';

	window.call = DailyIframe.createCallObject({
	url: ROOM_URL,
	dailyConfig: {
	experimentalChromeVideoMuteLightOff: true,
	disableSimulcast: true,
	},
	});

	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';
	});
	call.on('error', (e) => {
	console.log('[ERROR]', e);
	document.getElementById('session-state-display').innerHTML =
	'error -> ' + e.toString();
	});
	}

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

	sendKbs = Number(document.getElementById('send-kbs-slider').value);

	console.log('[SETTING SEND BANDWIDTH]', sendKbs);
	call.setBandwidth({ kbs: sendKbs });
	}

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

	async function updateSendKbsDisplay(slider) {
	document.getElementById('send-kbs-display').innerText = slider.value;
	}

	async function setSendKbs(slider) {
	console.log('[SETTING SEND BANDWIDTH]', slider.value);
	if (call) {
	call.setBandwidth({ kbs: Number(slider.value) });
	}
	}
	</script>
	</body>
	</html>