GithubHelp home page GithubHelp logo

michael-riha / video-graphik-server Goto Github PK

View Code? Open in Web Editor NEW
14.0 2.0 1.0 19 KB

This is a POC of a video server which uses WebRTC to publish a videostream and HTML/CSS/JS for graphik overlays

License: MIT License

Dockerfile 2.12% Shell 2.47% Python 80.42% HTML 14.99%
gstreamer gstreamer-plugins ffmpeg video-streaming video-processing h264 x264 html-css-javascript video-overlay video-over-ip

video-graphik-server's Introduction

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:

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

alt text

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` 

video-graphik-server's People

Contributors

michael-riha avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

mch03

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.