Skip to content

Instantly share code, notes, and snippets.

@emdadul38

emdadul38/simple-start-camera.html

Forked from kwindla/simple-start-camera.html
Created October 27, 2021 07:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save emdadul38/5d1019b0b9813dcfe8f42bf613dbcbc1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save emdadul38/5d1019b0b9813dcfe8f42bf613dbcbc1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @kwindla kwindla revised this gist Nov 15, 2019. No changes.
  2. @kwindla kwindla created this gist Nov 15, 2019.
    83 changes: 83 additions & 0 deletions simple-start-camera.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>basic video call object demo</title>
    <script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
    <!-- <script crossorigin src="../dist/daily-iframe.js"></script> -->
    </head>
    <body onload="run()">

    <p> <button onclick="callFrame.startCamera()">start camera</button> </p>
    <p> <button onclick="callFrame.join()">join call</button> </p>
    <p> <button onclick="callFrame.leave()">leave call</button> </p>

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

    <script>
    function showEvent(e) { console.log('video call event -->', e); }

    async function run() {
    window.callFrame = window.DailyIframe.createCallObject();

    callFrame.on('loading', showEvent)
    .on('loaded', showEvent)
    .on('started-camera', showEvent)
    .on('camera-error', showEvent)
    .on('joining-meeting', showEvent)
    .on('joined-meeting', showEvent)
    .on('left-meeting', leftMeeting)
    .on('participant-joined', showEvent)
    .on('participant-updated', showEvent)
    .on('participant-left', showEvent)
    .on('error', showEvent)
    .on('track-started', trackStarted)
    .on('track-stopped', trackStopped);

    await callFrame.load({
    url: ROOM_URL // <------- need to set a room URL here
    });

    function trackStarted(e) {
    showEvent(e);
    let vidsContainer = document.getElementById('videos');
    if (!(e.track && e.track.kind === 'video')) {
    return;
    }
    let vid = findVideoForParticipant(e.participant.session_id);
    if (!vid) {
    vid = document.createElement('video');
    vid.session_id = e.participant.session_id;
    vid.style.width = '100%';
    vid.autoplay = true;
    vid.muted = true;
    vid.playsInline = true;
    vidsContainer.appendChild(vid);
    }
    vid.srcObject = new MediaStream([ e.track ]);
    }

    function trackStopped(e) {
    showEvent(e);
    // in a real application we would do something with our layout and
    // media elements, here, of course!
    }

    function findVideoForParticipant(session_id) {
    for (const vid of document.getElementsByTagName('video')) {
    if (vid.session_id === session_id) {
    return vid;
    }
    }
    }

    function leftMeeting(e) {
    showEvent(e);
    document.getElementById('videos').innerHTML='';
    }
    }
    </script>
    </body>
    </html>