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