kwindla · November 9, 2021 23:05
diff --git a/custom-track-mute-unmute-2.html b/custom-track-mute-unmute-2.html
 <html>
  <head>
    <title>low</title>
    <script src="https://unpkg.com/@daily-co/daily-js"></script>
  </head>

  <!-- 
      example: calling getUserMedia() directly and joining with mic off and cam off
                    
  -->

  <body onload="main()">
    <div id="local-controls">
      <button onclick="subscribeToAllCurrentParticipants()">
        subscribe to all current participants
      </button>
      <button onclick="toggleCamera()">toggle camera</button>
      <button onclick="toggleMic()">toggle mic</button>
      <button onclick="toggleBoth()">toggle both</button>
      <hr />
    </div>
    <div id="device-state"></div>
    <div id="videos"></div>

    <script>
      const ROOM_URL = YOUR-ROOM-URL-HERE ;

      let audioSource = null;
      let videoSource = null;

      async function main() {
        const initialStream = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: true,
        });
        audioSource = initialStream.getAudioTracks()[0];
        videoSource = initialStream.getVideoTracks()[0];

        window.call = DailyIframe.createCallObject({
          // uncomment to test whether track subscriptions are a complicating factor
          // subscribeToTracksAutomatically: false,
          audioSource: false,
          videoSource: false,
          url: ROOM_URL,
        });

        call.on('joined-meeting', () => console.log('[JOINED MEETING]'));
        call.on('left-meeting', () => console.log('[LEFT MEETING]'));
        call.on('error', (e) => console.error(e));

        call.on('participant-joined', (e) =>
          console.log('[PARTICIPANT JOINED]', e)
        );
        call.on('participant-updated', (e) =>
          console.log('[PARTICIPANT UPDATED]', e)
        );
        call.on('participant-left', (e) =>
          console.log('[PARTICIPANT LEFT]', e)
        );

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

        //

        await call.join();
        updateDeviceDisplay();
      }

      // ----

      function subscribeToAllCurrentParticipants() {
        Object.keys(call.participants()).forEach((id) => {
          if (id === 'local') {
            return;
          }
          call.updateParticipant(id, { setSubscribedTracks: true });
        });
        updateDeviceDisplay();
      }

      async function toggleCamera() {
        if (!call) {
          return;
        }
        if (call.localVideo()) {
          // turn off
          call.setLocalVideo(false);
          await call.setInputDevicesAsync({ videoSource: false });
          videoSource.stop();
        } else {
          // turn on
          const stream = await navigator.mediaDevices.getUserMedia({
            video: true,
            audio: false,
          });
          videoSource = stream.getVideoTracks()[0];
          await call.setInputDevicesAsync({ videoSource });
          call.setLocalVideo(true);
        }
        updateDeviceDisplay();
      }

      async function toggleMic() {
        if (!call) {
          return;
        }
        if (call.localAudio()) {
          // turn off
          call.setLocalAudio(false);
          await call.setInputDevicesAsync({ audioSource: false });
          audioSource.stop();
        } else {
          // turn on
          const stream = await navigator.mediaDevices.getUserMedia({
            video: false,
            audio: true,
          });
          audioSource = stream.getAudioTracks()[0];
          await call.setInputDevicesAsync({ audioSource });
          call.setLocalAudio(true);
        }
        updateDeviceDisplay();
      }

      async function toggleBoth() {
        await toggleCamera();
        await toggleMic();
      }

      function updateDeviceDisplay() {
        setTimeout(() => {
          const el = document.getElementById('device-state');
          el.innerHTML = `audio: ${call.localAudio()} video: ${call.localVideo()}`;
        }, 100);
      }

      // ----

      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>low</title>
	<script src="https://unpkg.com/@daily-co/daily-js"></script>
	</head>

	<!--
	example: calling getUserMedia() directly and joining with mic off and cam off

	-->

	<body onload="main()">
	<div id="local-controls">
	<button onclick="subscribeToAllCurrentParticipants()">
	subscribe to all current participants
	</button>
	<button onclick="toggleCamera()">toggle camera</button>
	<button onclick="toggleMic()">toggle mic</button>
	<button onclick="toggleBoth()">toggle both</button>
	<hr />
	</div>
	<div id="device-state"></div>
	<div id="videos"></div>

	<script>
	const ROOM_URL = YOUR-ROOM-URL-HERE ;

	let audioSource = null;
	let videoSource = null;

	async function main() {
	const initialStream = await navigator.mediaDevices.getUserMedia({
	audio: true,
	video: true,
	});
	audioSource = initialStream.getAudioTracks()[0];
	videoSource = initialStream.getVideoTracks()[0];

	window.call = DailyIframe.createCallObject({
	// uncomment to test whether track subscriptions are a complicating factor
	// subscribeToTracksAutomatically: false,
	audioSource: false,
	videoSource: false,
	url: ROOM_URL,
	});

	call.on('joined-meeting', () => console.log('[JOINED MEETING]'));
	call.on('left-meeting', () => console.log('[LEFT MEETING]'));
	call.on('error', (e) => console.error(e));

	call.on('participant-joined', (e) =>
	console.log('[PARTICIPANT JOINED]', e)
	);
	call.on('participant-updated', (e) =>
	console.log('[PARTICIPANT UPDATED]', e)
	);
	call.on('participant-left', (e) =>
	console.log('[PARTICIPANT LEFT]', e)
	);

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

	//

	await call.join();
	updateDeviceDisplay();
	}

	// ----

	function subscribeToAllCurrentParticipants() {
	Object.keys(call.participants()).forEach((id) => {
	if (id === 'local') {
	return;
	}
	call.updateParticipant(id, { setSubscribedTracks: true });
	});
	updateDeviceDisplay();
	}

	async function toggleCamera() {
	if (!call) {
	return;
	}
	if (call.localVideo()) {
	// turn off
	call.setLocalVideo(false);
	await call.setInputDevicesAsync({ videoSource: false });
	videoSource.stop();
	} else {
	// turn on
	const stream = await navigator.mediaDevices.getUserMedia({
	video: true,
	audio: false,
	});
	videoSource = stream.getVideoTracks()[0];
	await call.setInputDevicesAsync({ videoSource });
	call.setLocalVideo(true);
	}
	updateDeviceDisplay();
	}

	async function toggleMic() {
	if (!call) {
	return;
	}
	if (call.localAudio()) {
	// turn off
	call.setLocalAudio(false);
	await call.setInputDevicesAsync({ audioSource: false });
	audioSource.stop();
	} else {
	// turn on
	const stream = await navigator.mediaDevices.getUserMedia({
	video: false,
	audio: true,
	});
	audioSource = stream.getAudioTracks()[0];
	await call.setInputDevicesAsync({ audioSource });
	call.setLocalAudio(true);
	}
	updateDeviceDisplay();
	}

	async function toggleBoth() {
	await toggleCamera();
	await toggleMic();
	}

	function updateDeviceDisplay() {
	setTimeout(() => {
	const el = document.getElementById('device-state');
	el.innerHTML = `audio: ${call.localAudio()} video: ${call.localVideo()}`;
	}, 100);
	}

	// ----

	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>