Integration of pre-recorded video with RTC

How to implement?
1

I’m looking at the best approach of integrating a video player into a webRTC session with openvidu.

What we need is for a saved video to be streamed synchronously between users as well as their web cam/sound, so that participant can watch the video at the same time and talk as it plays, and for one or all users to be able to pause or go back in the video with these actions reflected in every participant interface (so that everyone is watching the same part of the video at the same time)
Does anyone have any experience with such an interface, and how did they achieve it?

1 Like
2

Hi,

If uses are connected to the same OpenVidu session, you have already solved the problem of being able to send and receive video and audio in real time. Then, to achive the “common video” thing you want to implement, you could do it in 2 different ways:

  1. Having the users download the video to the browser. Then you can just use the Session.signal API to send messages in broadcast from one user to the others, so the video player in the HTML goes back and forth according to what the “admin” user did in on his side.
  2. If you really want to implement it on the server side and simply stream to all of the clients the exact same video, then you have to use the KurentoPlayer API. OpenVidu exposes this API to allow streaming IP Cameras, but it could be also use to stream a video available in disk. But methods to navigate that video are not currently exposed in OpenVidu, so the only way would be directly using Kurento Media Server.

Method 1 will always be cheaper, as you liberate the server from any task of streaming the common video. Everything is done in the client side. Also, the quality of the ommon video will be much higher,
having it already downloaded.

Regards.

3

Thanks. Yes, I am playing the videos from download by both users and using openvidu signals to synch the times and stop/starts. Works pretty well. I also needed to do the same thing for Youtube clips, using the iframe API I was able to detect start/stop events and timelines and again use signals to match up what people were watching.
I’m rather pleased with the result.

4

Cool!!

This feature can be very interesting for the OpenVidu community, do you plan to make it public?

5

I hadn’t, but I will now.
No one should be denied my sloppy code :wink:

1 Like
6

I know this is an old thread but I need to do something similar and I’m really not loving any of my options.

The problem with the first solution is that this won’t allow the videos to be recorded by OpenVidu as far as I can tell? Unless I am missing something. Perhaps I could merge the stream recording with the pre-recorded video once the OpenVidu session is closed although this sounds like a painful endeavor.

Another option I spent a lot of hours on in the past day was trying to use HTMLMediaElement.captureStream() to get the video and audio tracks from a video element (with the src set to my video URL) and then passing those tracks to my publisher.

Unfortunately, it seems like captureStream() is still a very buggy API on both Chrome and Firefox. I could get video to stream (although Chrome has some issues that require workarounds) but it seems like audio just doesn’t work for some reason. Again, unless I am missing something.

Another option I saw was doing a screen share and then playing the video in the tab/window that is shared. However in my tests of this, the video/audio quality was pretty poor.

With regards to @pabloFuente 's second implementation idea, I’m not entirely clear what you mean by “stream a video available in disk”. Would that be from the client/browser side using the KurentoPlayer API? Or would that be done on the server side directly somehow? Any additional insights there would be much appreciated.

Thanks!

7

Hi!

My second point was actually using a “feature” already implemented and available, but not documented. You can use the IP Camera API to publish a video file (stored and accessible by your media server) into the session. It is actually a very simple process: when publishing and IP Camera through REST API (OpenVidu Docs), in parameter “rtspUri” you can set an absolute path to a video file accessible by Kurento, like this:

"rtspUri": "file:///opt/my-video-file.mp4"

You must make sure Kurento Media Server has read access to that exact path, of course. Otherwise an error (and I’m guessing a pretty obscure one) will be triggered.

But this solution still leaves us with one limitation: the OpenVidu API does not allow to directly handle video playback from the server side. As the API was originally intended for IP cameras (where it makes no sense to pause or rewind the video playback), there are no methods to fast forward/rewind/pause/restart/navigate the video. It will simply play from start to end.

To manage the video playback as Kurento’s PlayerEndpoint allows (PlayerEndpoint (Kurento Client API)) you would have to do so directly calling Kurento’s API. OpenVidu does not exposes these methods through its API.

Regards.

1 Like
8

Hi @pabloFuente, I am able to connect the local file using rtspUri: file:///E:/Shared/video.mp4 but the stream created is always black, can you please guide me why its happening?

Thanks in advance.

9

Can you share the link to your implementation?

10

Hi @pabloFuente, I am able to connect the local file using rtspUri: file:///E:/Shared/video.mp4 but the stream created is always black, can you please guide me why its happening?

Thanks in advance.

11

This looks like a Windows file path.

I suppose you are running Kurento using docker, and docker runs through WSL, and the volume needs to be correctly attached to the container: Can the Kurento Media server process reach that file?

12

Hi @cruizba,

Thanks for the response.

Kurento Media server is deployed on a ubuntu AWS machine and all the things i.e. conference, calls, IP-Camera are working perfectly. I am passing the MP4 file path (from windows in chrome browser client) as @pabloFuente mentioned (“rtspUri”: “file:///opt/my-video-file.mp4”) in his post above to send video file as stream instead of IP camera RTSP URI but I get black video on local as well as remote machines.

13

The video should be in the AWS machine at /opt/my-video-file.mp4

14

I already tried that but from AWS machine or any online path it does not work, it causes an error.

15

Kurento Media Server in all OpenVidu Editions (CE/PRO/ENTERPRISE) always run sharing the directory: /opt/openvidu/recordings. Try to do this:

  1. Create a directory in /opt/openvidu/recordings/ for those prerecorded files, for example:
    mkdir -p /opt/openvidu/recordings/prerecorded-media
  2. Place the video there, the file directory should look like this:
    /opt/openvidu/recordings/prerecorded-media/my-video-file.mp4
  3. Try to setup the rtspUri as:
    “rtspUri”: “file:///opt/openvidu/recordings/prerecorded-media/my-video-file.mp4”
16

I got your point you are talking about the server end but the “rtspUri”: “file:///…" is a part of OpenVidu Client API, how can a user pass his MP4 file?

Here is my working code that works perfectly with IP-Cameras but gives black video when passing MP4 video path instead.

function connect(rtspURI) {
    return new Promise((resolve, reject) => {
      $.ajax({
        type: "POST",
        url: SERVER_URL + "/api/sessions/" + SESSION_ID + "/connection",
        data: JSON.stringify({
          type: "IPCAM",
          rtspUri: rtspURI,
          adaptativeBitrate: false,
          onlyPlayWithSubscribers: false,
          networkCache: 500,
          data: "IP-CAM",
        }),
        headers: {
          Authorization: "Basic " + btoa("OPENVIDUAPP:" + SECRET),
          "Content-Type": "application/json",
        },
        success: (response) => resolve(response),
        error: (error) => resolve(error),
      });
    });
  }
17

You can’t pass a local file path (private) to the AWS instance and expect it to read it. This would be a huge security issue that would “break” the web (anyone could read stuff from other computers).

Kurento Media Server is looking for that file on the server so you need to upload your file on the AWS instance. Then pass the uploaded file path from the server to OpenVidu.

Passing the RTSP URI works because that’s probably exposed to the Internet aka public.

1 Like
18

@mihailj is right. You need to upload that file to your AWS instance.

Thanks for the clarification @mihailj :slight_smile:

19

Thanks @mihailj. Okay, so it means I need to implements the above connect function on server side?

20

Yeah, you can use the REST API connection endpoint.

Or if you’d like to use Node.JS you have this example.

Or maybe you are using Java for back-end.