Overlay in stream

How to implement?
1

So I’m making a one to many streaming website using OpenVidu and I want to give PUBLISHER option to add image overlay in the video means both image and video should be streamed to the SUBSCRIBERS. Any leads for that?

2

@pabloFuente Any help would be appreciated

3

Yes, this is possible by making use of OpenVidu Filters: https://openvidu.io/docs/advanced-features/filters/

It is not listed right now in OpenVidu GStreamer filters just because we didn’t go through all of available GStreamer plugins, but there’s a very interesting one called gdkpixbufoverlay.

It allows you to precisely overlay an image file into a video stream. I’ve already tried it and it works great. Besides, it is listed under “plugins-good” list of Gstreamer (it has also a “plugins-bad” list that contains plugins that might be buggy), so it should work perfectly fine. Following the OpenVidu docs of Gstreamer filters, an example of gdkpixbufoverlay usage could be:

gdkpixbufoverlay location=/images/my-image.png offset-x=10 offset-y=10 overlay-height=200 overlay-width=200

The full method the Publisher should call is:

publisher.stream.applyFilter("GStreamerFilter", {
  "command": "gdkpixbufoverlay location=/images/my-image.png offset-x=10 offset-y=10 overlay-height=200 overlay-width=200"
});

Filters are applied on the server side, so Kurento process must have access to the image you set in location parameter. In the example, Kurento should have read access over file /images/my-image.png

I’ll add this cool Gstreamer filter to the list in OpenVidu documentation, as I think is something many people will find useful.

Regards

2 Likes
4

Thanks a lot :smile:

5 
publisher.stream.applyFilter("GStreamerFilter", {
  "command": "gdkpixbufoverlay location=/tmp/qwe.jpeg"
});

Stream.ts:296 Applying filter to stream phw9gcritjkksbfl_CAMERA_YIWKS
Promise {}
Session.ts:935 Media error: {"error":"UNEXPECTED_PIPELINE_ERROR: Could not load overlay image. (gstgdkpixbufoverlay.c(508): gst_gdk_pixbuf_overlay_start (): /GstPipeline:pipeline16/KmsFilterElement:kmsfilterelement17/GstGdkPixbufOverlay:gdkpixbufoverlay15:\nFailed to open file '/tmp/qwe.jpeg': No such file or directory)(errCode=5)"}

@pabloFuente /tmp/qwe.jpeg is having 777 permissions and the file is present in that location. Any leads on what could be the issue?

The Kurento server is running as root by the following command
docker run -p 4443:4443 --rm -e openvidu.secret=secret openvidu/openvidu-server-kms:2.11

6

I am having the same issue :confused:

7

The image has to be accessible from Kurento Media Server.

As KMS is dockerized, the best way is publishing the image in a web page.

Other way can be using a volume in Docker.

Finally, you can also create the image overlay in the browser instead of using a server filter.

Regards