-
-
Save emdadul38/5d1019b0b9813dcfe8f42bf613dbcbc1 to your computer and use it in GitHub Desktop.
Daily.co API for video chat: start camera before joining.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment