kwindla · October 11, 2020 21:52
diff --git a/leave-bug-repro-attempt.html b/leave-bug-repro-attempt.html
 <html>
  <head>
    <title>infinite loop safari leave bug repro attempt</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://unpkg.com/@daily-co/daily-js"></script>
  </head>
  <body>
    <div id="buttons" style="width: 50%; float: left;">
      room url:
      <input size="40" type="text" id="roomUrl"
       value ="https://TEAM.daily.co/ROOM"
      /><br />
      <hr />

      <div id="join-button">
        <button id="join" onclick="loadAndJoin()">start</button>
      </div>

      <div id="leave-buttons" style="visibility: hidden">
        <button id="leave" onclick="leaveAndStopTracks()">leave (just this client)</button>
        <hr />
        <button id="leave" onclick="allClientsLeave()">all clients leave</button>
      </div>
    </div>

    <div id="videos" style="width: 50%; float: right;"></div>

    <script>

    async function loadAndJoin() {
      window.camStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
      window.callObject = DailyIframe.createCallObject({
        url: document.getElementById("roomUrl").value,
        audioSource: camStream.getAudioTracks()[0],
        videoSource: camStream.getVideoTracks()[0],
        dailyConfig: {
          experimentalChromeVideoMuteLightOff: true,
        },
      });

      callObject.on('error', (e) => console.error('error event ->', e));
      callObject.on('joined-meeting', showLeaveButtons);
      callObject.on('left-meeting', () => { 
        showJoinButton();
        document.getElementById('videos').innerHTML = '';
      });
      callObject.on('app-message', (e) => {
        console.log('app message ->', e);
        if (e.data === 'leave') {
          leaveAndStopTracks();
        }
      });
      callObject.on('track-started', showTrack);
      callObject.on('track-stopped', removeTrack);

      await callObject.join();
    }

    function showJoinButton() {
      document.getElementById('join-button').style.visibility = null;
      document.getElementById('leave-buttons').style.visibility = 'hidden';
    }

    function showLeaveButtons() {
      document.getElementById('join-button').style.visibility = 'hidden';
      document.getElementById('leave-buttons').style.visibility = null;
    }

    async function allClientsLeave() {
      callObject.sendAppMessage('leave');
      leaveAndStopTracks();
    }

    async function leaveAndStopTracks() {
      callObject.leave()
        .finally(() => callObject.destroy())
        .finally(() => camStream.getTracks().forEach((t) => t.stop()));
    }
    
    async function showTrack(e) {
      console.log('track-started ->', e);
      let t = e.track;
      if (t.kind === 'audio') {
        return;
      }
      let vid = document.createElement('video');
      vid.style.width = '100%';
      vid.autoplay = true;
      vid.srcObject = new MediaStream([ t ]);
      document.getElementById('videos').append(vid);
    }

    async function removeTrack(e) {
      console.log('track-stopped ->', e);
      let videosContainer = document.getElementById('videos');
      let children = videosContainer.children;
      for (let i = 0; i < children.length; i++) {
        if (children[i].srcObject.getTracks().includes(e.track)) {
          videosContainer.removeChild(children[i]);
        }
      }
    }
    </script>
  </body>
 </html>
	<html>
	<head>
	<title>infinite loop safari leave bug repro attempt</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<script src="https://unpkg.com/@daily-co/daily-js"></script>
	</head>
	<body>
	<div id="buttons" style="width: 50%; float: left;">
	room url:
	<input size="40" type="text" id="roomUrl"
	value ="https://TEAM.daily.co/ROOM"
	/><br />
	<hr />

	<div id="join-button">
	<button id="join" onclick="loadAndJoin()">start</button>
	</div>

	<div id="leave-buttons" style="visibility: hidden">
	<button id="leave" onclick="leaveAndStopTracks()">leave (just this client)</button>
	<hr />
	<button id="leave" onclick="allClientsLeave()">all clients leave</button>
	</div>
	</div>

	<div id="videos" style="width: 50%; float: right;"></div>

	<script>

	async function loadAndJoin() {
	window.camStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
	window.callObject = DailyIframe.createCallObject({
	url: document.getElementById("roomUrl").value,
	audioSource: camStream.getAudioTracks()[0],
	videoSource: camStream.getVideoTracks()[0],
	dailyConfig: {
	experimentalChromeVideoMuteLightOff: true,
	},
	});

	callObject.on('error', (e) => console.error('error event ->', e));
	callObject.on('joined-meeting', showLeaveButtons);
	callObject.on('left-meeting', () => {
	showJoinButton();
	document.getElementById('videos').innerHTML = '';
	});
	callObject.on('app-message', (e) => {
	console.log('app message ->', e);
	if (e.data === 'leave') {
	leaveAndStopTracks();
	}
	});
	callObject.on('track-started', showTrack);
	callObject.on('track-stopped', removeTrack);

	await callObject.join();
	}

	function showJoinButton() {
	document.getElementById('join-button').style.visibility = null;
	document.getElementById('leave-buttons').style.visibility = 'hidden';
	}

	function showLeaveButtons() {
	document.getElementById('join-button').style.visibility = 'hidden';
	document.getElementById('leave-buttons').style.visibility = null;
	}

	async function allClientsLeave() {
	callObject.sendAppMessage('leave');
	leaveAndStopTracks();
	}

	async function leaveAndStopTracks() {
	callObject.leave()
	.finally(() => callObject.destroy())
	.finally(() => camStream.getTracks().forEach((t) => t.stop()));
	}

	async function showTrack(e) {
	console.log('track-started ->', e);
	let t = e.track;
	if (t.kind === 'audio') {
	return;
	}
	let vid = document.createElement('video');
	vid.style.width = '100%';
	vid.autoplay = true;
	vid.srcObject = new MediaStream([ t ]);
	document.getElementById('videos').append(vid);
	}

	async function removeTrack(e) {
	console.log('track-stopped ->', e);
	let videosContainer = document.getElementById('videos');
	let children = videosContainer.children;
	for (let i = 0; i < children.length; i++) {
	if (children[i].srcObject.getTracks().includes(e.track)) {
	videosContainer.removeChild(children[i]);
	}
	}
	}
	</script>
	</body>
	</html>