Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 16, 2021 09:41 pm GMT

How to stream a local file into a real-time video call

We've joined a lot of video calls over the last year here at Daily. While its easy to chat in real-time with someone on the other side of the world, streaming a video to watch simultaneously as part of that conversation quickly complicates things. Weve all been in meetings, training sessions, discussion groups, and even catch ups with friends where lags and buggy streams make it impossible to watch a video at the same time.

With great frustration comes great experimentation, and weve come up with a quick hack for streaming local video files during our calls: using the Daily API startScreenShare() method.

This tutorial covers our workaround! Well go over uploading the local file and creating a stream from it, sharing that stream, and making sure that our hack is working.

If youre looking to implement this feature in your own embedded prebuilt UI or Daily call object video app, you can add to your own code as we go. Or, if you want to fiddle with a working prototype, download our gist and create a Daily room if you dont have one already.

Before we get started

We put it in the title and we mean it: this is a hack. Its a workaround, not meant for production, but for low stakes, internal use cases. Somebody may or may not have debuted it by sneaking moms spaghetti into a Daily all hands.

As with any hack, it also comes with a few caveats:

  • If youll be using Chrome, youll need to disable hardware acceleration before you share a video stream.

  • Unfortunately, this solution doesnt work for streaming video from Safari, because Safari doesnt support captureStream().

With that, here we go heres our shot, feet fail us not.

Upload the local video file and create a stream

We need an <input> element with three attributes to upload the video:

  1. id: so that we can use document.getElementById
  2. type: to specify that this input field is for a file upload.
  3. accept: to make sure the uploaded file is a video.
<input id="vid-file-picker" type="file" accept="video/*"" />

We add an event listener to the <input>. On 'change', we call our function playLocalVideoFile():

let videoInput = document.getElementById('vid-file-picker'), callObject;videoInput.addEventListener('change', playLocalVideoFile, false);

playLocalVideoFile() creates a video stream from the file using captureStream() or mozCaptureStream() if youre using FireFox.

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();      }    });}

Now that we have the stream, we can share it.

Share the stream with call participants

We add a <button> to shareVideo() through the screen share stream.

<button onclick="shareVideo()" />share video through screenshare stream</button>

shareVideo() calls the Daily startScreenShare() method on the Daily call object, passing the localVideoStream created via playLocalVideo() as the media stream to be shared:

async function shareVideo() {    callObject.startScreenShare({ mediaStream: localVideoStream });}

Test the stream

Make sure you have a Daily room URL ready. We hardcoded ours as a const in our html file because, again, this is a hack. Relatedly, if youre using Chrome, dont forget to disable hardware acceleration.

Next, open the file in your browser. In a new tab, visit your Daily room URL. You should see two participants in the room tab, but just you in the file tab.

Click "Choose File" and upload the local video of your choice. If you need inspiration for what file to choose, try searching on Pexels for puppies (thats what I did). Finally, click share video through screen share stream and in the tab with the room URL you should see the video coming through.

gif shows video call where video of a puppy plays on the biggest video stream

Snap back to reality (whats next)

Thats it! Thanks for reading. We hope this makes sharing videos for everyone to watch on your calls easier. Let us know in the comments!

And, if youre interested in building more apps that are all about sharing and streaming content, our webinar series might spark some ideas.


Original Link: https://dev.to/trydaily/a-workaround-for-watching-videos-together-on-calls-2hbh

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To