Last active
January 21, 2021 04:05
-
-
Save kwindla/05c51e626b1e6673c319a0f3d182a987 to your computer and use it in GitHub Desktop.
Daily.co video API draggable call window example
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>draggable call window</title> | |
| <script src="https://unpkg.com/@daily-co/daily-js"></script> | |
| </head> | |
| <body onload="main()"> | |
| <div | |
| id="call-container" | |
| style="position: absolute; width: 400px; height: 400px" | |
| > | |
| <div | |
| id="events-target" | |
| style="position: absolute; z-index: 10; width: 100%; height: 100%" | |
| ></div> | |
| </div> | |
| <script> | |
| async function main() { | |
| // CHANGE THIS TO A ROOM WITHIN YOUR DAILY ACCOUNT | |
| const ROOM_URL = "https:// ROOM URL HERE"; | |
| window.callContainer = document.getElementById("call-container"); | |
| window.callContainerEventsTarget = document.getElementById( | |
| "events-target" | |
| ); | |
| window.callContainerEventsTarget.addEventListener( | |
| "mousemove", | |
| containerMouseEvent | |
| ); | |
| window.call = DailyIframe.createFrame(callContainer, { | |
| iframeStyle: { | |
| position: "absolute", | |
| zIndex: 0, | |
| width: "100%", | |
| height: "100%", | |
| border: "1px solid black", | |
| }, | |
| }); | |
| call.on("error", (e) => console.error(e)); | |
| await call.join({ url: ROOM_URL }); | |
| } | |
| function containerMouseEvent(el) { | |
| if (el.buttons === 1) { | |
| // dragging | |
| callContainer.style.top = | |
| callContainer.offsetTop + el.movementY + "px"; | |
| callContainer.style.left = | |
| callContainer.offsetLeft + el.movementX + "px"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment