HTML/CSS/JS video graphics on top of WebRTC live feeds with gstreamer

First I really wanna thank @Centricular and specially @MathieuDuponchelle who did all the heavy lifting and made this tiny experiments even possible

This Code is part of my Gstreamer 101 with python where I got familiar with gstreamer inside a docker-container and the possiblities of gstreamer in case of WebRTC as well as CEF.

This is - at the moment -

just a remix of a few other projects:

THX to:

• @MathieuDuponchelle's gstcefsrc

• @matthew1000 & @moschopsuk -> Brave

  where I copied more ot less the whole webserver/websocket-logic to interact with gstreamer

• @notedit -> gstreamer-rtc-streamer

  which code helped me a lot to get webRTC working and structured, because I had not much python knowledge

Motivation

Years I wanted to have a 'headless' version of OBS where I could overlay a Browser over a video-stream. As I dug more into webRTC I really wanted to bring this into the mix. I am no python-ninja - not even a well enough python-dev, I would say - but I did not want to struggle with C/C++ (or more and less their build systems) so I choose python to interact with gstreamer on a more deep level.

Thanks to a lot of examples all over github, as well as the work of the BBC with Brave (shout out in this case to @moschopsuk & @matthew1000 )!

Goal

• run gstreamer in Docker
• build CEF-plugin in the Container to bundle it
• experiment with gstreamer and GLib in python
• develop a couple of small demos with `gstreamer``
• try to build something like a news studio with graphik overlay where participants can publish via webrtc to be broadcasted

something like

please ignore the content, it is all about graphics and video mixing, of course!

---

build the container

docker build --tag=riha/gst-video-graphik-server .

what it does

• installs gstreamer and all the dependencies on ubuntu 19.10 (TODO: update to LTS 20.x.x, asap)

• builds the gstcefsrc

  look into the install_scripts/install-cefPlugin.sh.

  The version is pinned to a certain working commit of this plugin, just to be sure it works!

• installs python dependencies

TODO:

• I did not include (COPY) the src-Folder in the container, yet because I wanna code during runtime of the container!
• I do not provide an ENTRYPOINT because it is still a work in progress and not a product

run the container

docker run -it -p 7001:7001 -p 8001:8001 -v $PWD/src:/opt riha/gst-video-graphik-server:latest

what it does

• opens port 8001 for the http/websocket-server for

  • webRTC signaling
  • http-server for the webRtc ingest
    • as well as HTML-graphics for the background

• opens port 7001 to watch the stream with ffmpeg (or gstreamer of course!)

  ffplay tcp://127.0.0.1:7001

• maps the src/-folder to /opt inside the container to run the code and develop/debug

run the server-code

inside the container

1. cd /opt
2. python3 server.py
3. "DONE"

4. open `TCP`-stream on the host with

`ffplay tcp://127.0.0.1:7001` 

---