Created
November 14, 2020 02:05
-
-
Save kwindla/398afacfcef2bff845c928784d5f634f to your computer and use it in GitHub Desktop.
Daily.co video call API camera device id demo
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>test device switching</title> | |
| <script src="https://unpkg.com/@daily-co/daily-js"></script> | |
| </head> | |
| <body onload="main()"> | |
| <div id="ui" style="width: 50%; float: left"> | |
| <select id="devices" onchange="changeDevice()"></select> | |
| </div> | |
| <div id="videos" style="width: 50%; float: right"></div> | |
| <script> | |
| async function main() { | |
| const ROOM_URL = ... YOUR ROOM URL HERE ...; | |
| window.callObject = DailyIframe.createCallObject({ | |
| dailyConfig: { | |
| experimentalChromeVideoMuteLightOff: true, | |
| }, | |
| }); | |
| callObject.on("track-started", displayLocalVideo); | |
| await callObject.join({ url: ROOM_URL }); | |
| fillDevicesDropDown(); | |
| } | |
| async function fillDevicesDropDown() { | |
| let devices = (await callObject.enumerateDevices()).devices.filter( | |
| (d) => d.kind === "videoinput" | |
| ); | |
| let currentDeviceId = (await callObject.getInputDevices()).camera | |
| .deviceId; | |
| console.log("current", currentDeviceId, "cameras", devices); | |
| let selectEl = document.getElementById("devices"); | |
| selectEl.innerHTML = ""; | |
| devices.forEach((d) => { | |
| let optionEl = document.createElement("option"); | |
| optionEl.value = d.deviceId; | |
| optionEl.innerHTML = d.label; | |
| optionEl.selected = d.deviceId === currentDeviceId; | |
| selectEl.appendChild(optionEl); | |
| }); | |
| } | |
| function displayLocalVideo(evt) { | |
| console.log(evt); | |
| if (!(evt.track.kind === "video" && evt.participant.local)) { | |
| return; | |
| } | |
| let videosDiv = document.getElementById("videos"); | |
| videosDiv.innerHTML = ""; | |
| let videoEl = document.createElement("video"); | |
| videosDiv.appendChild(videoEl); | |
| videoEl.style.width = "100%"; | |
| videoEl.srcObject = new MediaStream([evt.track]); | |
| videoEl.play(); | |
| } | |
| async function changeDevice() { | |
| let selectEl = document.getElementById("devices"); | |
| console.log("!!! changing"); | |
| callObject.setInputDevices({ videoDeviceId: selectEl.value }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment