|
<html> |
|
<head> |
|
<title>low framerate/cpu screenshare 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 /> |
|
<button id="start-screenshare" onclick="callObject.stopScreenShare()"> |
|
stop screenshare |
|
</button> |
|
<hr /> |
|
</div> |
|
<div id="videos"></div> |
|
|
|
<!-- |
|
settings that trade-off some video quality for lower cpu usage, for both |
|
camera and screenshare video tracks. |
|
--> |
|
|
|
<script> |
|
async function main() { |
|
// CHANGE THIS TO A ROOM WITHIN YOUR DAILY ACCOUNT |
|
const ROOM_URL = "https:// a daily room url"; |
|
|
|
window.localCam = await navigator.mediaDevices.getUserMedia({ |
|
// minimal cpu for camera: 640 x 360 or 640 x 480 -- at least |
|
// one of which is a native resolution for both cameras and encoders |
|
// on almost all devices |
|
// |
|
video: { width: { max: 640 }, frameRate: 20 }, |
|
audio: true, |
|
}); |
|
|
|
window.callObject = DailyIframe.createCallObject({ |
|
audioSource: window.localCam.getAudioTracks()[0], |
|
videoSource: window.localCam.getVideoTracks()[0], |
|
// audioSource: false, |
|
// videoSource: false, |
|
dailyConfig: { |
|
experimentalChromeVideoMuteLightOff: true, |
|
}, |
|
}); |
|
|
|
callObject.on("track-started", displayTrack); |
|
callObject.on("track-stopped", destroyTrack); |
|
|
|
await callObject.join({ url: ROOM_URL }); |
|
} |
|
|
|
async function startScreenShareWithCustomTrack() { |
|
callObject.stopScreenShare(); |
|
|
|
// minimal cpu for screen share. limit resolution to 1920 and |
|
// decimate by exactly half for larger screens to avoid expensive |
|
// rescaling. also limit the framerate to 5 fps |
|
// |
|
let width = window.screen.width; |
|
if (width > 1920) { |
|
width = width / 2; |
|
} |
|
window.screenStream = await navigator.mediaDevices.getDisplayMedia({ |
|
video: { width: width, frameRate: 5 }, |
|
audio: true, |
|
}); |
|
|
|
callObject.startScreenShare({ |
|
mediaStream: window.screenStream, |
|
}); |
|
} |
|
|
|
// ---- |
|
|
|
function displayTrack(evt) { |
|
console.log("[TRACK STARTED]", evt); |
|
if (evt.track.kind === "video") { |
|
displayVideo(evt); |
|
} else { |
|
playAudio(evt); |
|
} |
|
} |
|
|
|
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 playAudio(evt) { |
|
if (evt.participant.local) { |
|
return; |
|
} |
|
let audioEl = document.createElement("audio"); |
|
document.body.appendChild(audioEl); |
|
audioEl.srcObject = new MediaStream([evt.track]); |
|
audioEl.play(); |
|
} |
|
|
|
function destroyTrack(evt) { |
|
console.log( |
|
"[TRACK STOPPED]", |
|
(evt.participant && evt.participant.session_id) || "[left meeting]", |
|
evt.track.kind |
|
); |
|
|
|
let els = Array.from(document.getElementsByTagName("video")).concat( |
|
Array.from(document.getElementsByTagName("audio")) |
|
); |
|
for (let el of els) { |
|
if (el.srcObject && el.srcObject.getTracks()[0] === evt.track) { |
|
el.remove(); |
|
} |
|
} |
|
} |
|
</script> |
|
</body> |
|
</html> |
