Created
January 19, 2021 04:18
-
-
Save kwindla/9ec5a939d9eead6fd6b250cdc01d0b22 to your computer and use it in GitHub Desktop.
Sample code for Daily video calls API -- custom tracks for both main video and screenshare
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> | |
| <title>screenshare custom track with the Daily API</title> | |
| <script src="https://unpkg.com/@daily-co/daily-js"></script> | |
| </head> | |
| <body onload="main()"> | |
| <div id="local-controls"> | |
| <button | |
| id="start-screenshare" | |
| onclick="startScreenShareWithCustomTrack()" | |
| > | |
| start screenshare | |
| </button> | |
| <hr /> | |
| </div> | |
| <div id="videos"></div> | |
| <script> | |
| async function main() { | |
| // CHANGE THIS TO A ROOM WITHIN YOUR DAILY ACCOUNT | |
| const ROOM_URL = "https:// ROOM URL HERE"; | |
| window.localCam = await navigator.mediaDevices.getUserMedia({ | |
| video: { height: 720 }, | |
| audio: true, | |
| }); | |
| window.callObject = DailyIframe.createCallObject({ | |
| audioSource: window.localCam.getAudioTracks()[0], | |
| videoSource: window.localCam.getVideoTracks()[0], | |
| dailyConfig: { | |
| experimentalChromeVideoMuteLightOff: true, | |
| }, | |
| }); | |
| callObject.on("track-started", displayVideo); | |
| callObject.on("track-stopped", destroyVideo); | |
| await callObject.join({ url: ROOM_URL }); | |
| } | |
| async function startScreenShareWithCustomTrack() { | |
| window.screenStream = await navigator.mediaDevices.getDisplayMedia(); | |
| callObject.startScreenShare({ | |
| mediaStream: window.screenStream, | |
| }); | |
| } | |
| 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 = "200px"; | |
| videoEl.srcObject = new MediaStream([evt.track]); | |
| videoEl.play(); | |
| } | |
| function destroyVideo(evt) { | |
| let vids = document.getElementsByTagName("video"); | |
| for (let vid of vids) { | |
| if ( | |
| vid.srcObject && | |
| vid.srcObject.getVideoTracks()[0] === evt.track | |
| ) { | |
| vid.remove(); | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment