Daily.co embed own js

dailyco.html

<style>
  #callframe {
		height: 75vh;
		min-height: 400px;
	}
</style>

<script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>

<script>
  const roomUrl = 'https://flik.daily.co/5lO7tNjTQFHJzwt0ZL4i';
  
  function tryEl(e) {
    var privEl = document.querySelector('#vs-presentation');

    if (!privEl) {
      window.requestAnimationFrame(tryEl);
    } else {
      changePlayer(privEl);
    }
  }
  
  async function changePlayer(presentationEl) {
    const mainwrapper = document.querySelector('.vs-mainwrapper');
    
    const callframeEl = document.createElement('div');
    callframeEl.id = 'callframe';
    
    mainwrapper.insertBefore(callframeEl, presentationEl.nextSibling)
    
    presentationEl.remove();

    callFrame = window.DailyIframe.createFrame(
      document.getElementById('callframe')
    );

    callFrame
      .on('loaded', showEvent)
      .on('started-camera', showEvent)
      .on('camera-error', showEvent)
      .on('joining-meeting', showEvent)
      //.on('joined-meeting', showCallDisplay)
      .on('recording-started', showEvent)
      //.on('recording-stopped', resetRecordingButton)
      .on('recording-stats', showEvent)
      .on('recording-error', showEvent)
      .on('app-message', showEvent)
      .on('input-event', showEvent)
      .on('error', showEvent)
      // .on('participant-joined', updateParticipantInfoDisplay)
      // .on('participant-updated', updateParticipantInfoDisplay)
      // .on('participant-left', updateParticipantInfoDisplay)
      // .on('left-meeting', hideCallDisplay);
      .on('left-meeting', showEvent);
    
    joinCall();
  }
  
  function onLoaded() {
    joinCall();
  }
    
	async function joinCall() {
    const userName = _authData && _authData.name ? _authData.name : null;
    await callFrame.join({
      url: roomUrl,
      showLeaveButton: false,
      userName
    });
  }
    
  function showEvent(e) {
    console.log('callFrame event', e);
  }
  tryEl();

</script>