Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Daily hack for streaming a local video file during a call.
<html>
<head>
<title>stream local video file</title>
<script src="https://unpkg.com/@daily-co/daily-js"></script>
</head>
<body onload="main()">
<div id="local-controls" style="width: 50%; float: left; visibility: hidden">
<input id="vid-file-picker" type="file" accept="video/*"" />
<button onclick="shareVideo()" />share video through screenshare stream</button>
<hr />
<video id="local-vid" controls style="width: 100%"></video>
</div>
<div id="videos" style="margin-left: 50%"></div>
<script>
const ROOM_URL = "https://your-domain.daily.co/hello";
let videoInput = document.getElementById('vid-file-picker'), callObject;
async function main() {
videoInput.addEventListener('change', playLocalVideoFile, false);
// const ROOM_URL = "https://kimberlee-daily.daily.co/loose-lips-sink-tests";
callObject = window.DailyIframe.createCallObject({
subscribeToTracksAutomatically: false,
dailyConfig: {
experimentalChromeVideoMuteLightOff: true,
},
});
callObject.on("track-started", displayVideo);
callObject.on("track-stopped", destroyVideo);
await callObject.join({ url: ROOM_URL });
document.getElementById('local-controls').style.visibility = 'visible';
}
async function shareVideo() {
callObject.startScreenShare({ mediaStream: localVideoStream });
}
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 = "100%";
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();
}
}
}
function playLocalVideoFile(evt) {
let videoEl = document.getElementById('local-vid');
let file = this.files[0];
let type = file.type;
if (!videoEl.canPlayType(type)) {
alert('cannot play that file');
return;
}
videoEl.src = URL.createObjectURL(file);
videoEl.play().then(() => {
// Mozilla currently prefixes the function name, so we have to check for either
if (typeof videoEl.mozCaptureStream == 'function') {
window.localVideoStream = videoEl.mozCaptureStream();
} else if (typeof videoEl.captureStream == 'function') {
window.localVideoStream = videoEl.captureStream();
}
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment