10

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

 4 years ago
source link: https://dev.to/trydaily/a-workaround-for-watching-videos-together-on-calls-2hbh
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Cover image for How to stream a local file into a real-time video call

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

Apr 16 Originally published at daily.co

・4 min read

We've joined a lot of video calls over the last year here at Daily. While it’s 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. We’ve 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 we’ve 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! We’ll go over uploading the local file and creating a stream from it, sharing that stream, and making sure that our hack is working.

If you’re 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 don’t have one already.

Before we get started

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

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

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

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

With that, here we go here’s 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/*"" />
Enter fullscreen modeExit fullscreen mode

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);
Enter fullscreen modeExit fullscreen mode

playLocalVideoFile() creates a video stream from the file using captureStream() or mozCaptureStream() if you’re 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();
      }
    });
}
Enter fullscreen modeExit fullscreen mode

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>
Enter fullscreen modeExit fullscreen mode

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 });
}
Enter fullscreen modeExit fullscreen mode

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 you’re using Chrome, don’t 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 (that’s 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 (what’s next)

That’s 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 you’re interested in building more apps that are all about sharing and streaming content, our webinar series might spark some ideas.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK