/video_streaming_on_web

Web Cam Video Streaming using aiohttp, aiortc, OpenCV, WebRTC, React and etc

Primary LanguageJavaScript

Introduction

This project shows how to do video streaming on web epecially using WebRTC with ReactJS.

Note: Only run and tested on Ubuntu 18.04.

Browser Test

[Supported]

  • Chrome on Ubuntu(Linux), macOS, and Windows
  • Firefox on Ubuntu(Linux)
  • Safari on macOS and iOS (iPhone, iPad, etc)

[Not supported]

  • Microsoft Edge
  • Internet Explorer
  • Chrome on iOS (iPhone, iPad , etc)

Environment

For python 3,

    # for aiortc 
    $ apt install libavdevice-dev libavfilter-dev libopus-dev libvpx-dev pkg-config
    $
    # Aussme that anaconda or miniconda is already installed
    $ conda create -n vs python=3.7
    $ conda activate vs
    (vs)$ pip install aiohttp aiortc opencv-python

For node.js,

    $ sudo apt-get install curl  
    $ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -  
    $ sudo apt-get install nodejs

For SSL on iOS, please read this site first and make sure that Websocket on iOS really depends on SSL.

    # assume that your IP address is 192.168.1.50
    $ cd cert
    cert$ openssl genrsa -out server.key 2048
    cert$ openssl req -new -x509 -sha256 -key server.key -out server.crt -days 365 -subj /CN=192.168.1.50
    # if you see the error about .rnd, go to trouble shooting section 
    cert$
    cert$ sudo npm install budo
    cert$ budo --ssl --cert=./server.crt --key=./server.key
  • Visit https://192.168.1.50:9966/
  • View and export the certificate as server.key <== the same name above
  • Update ./cert/server.pem with ./cert/server.key and ./cert/server.crt
    cert$ copy server.key server.share.pem
  • Email server.share.pem as an attachment to yourself
  • Open the mail on iPhone and click the certificate to download
  • Go to Settings -> Download Profile --> Install and verify it
  • Go to Settings -> General -> About -> Certificate Trust Settings --> Turn it On

Do NOT forget to update the followin files

  • line 6 in ./react-webrct-app/src/components/const.js

STUN server

Bascially, you can use any of public STUN servers on the internet like stun.l.google.com:19302 or you don't need it in this project. However, you might consider running your own STUN in case like you test it on a Firefox browser without internet. Here's how to run your own STUN server.

    $ sudo apt-get install coturn  
    $ sudo /etc/turnserver.conf /etc/turnserver.conf.old  
    $ sudo copy ./data/turnserver.conf /etc/turnserver.conf   
    $ sudo turnserver  

    # Put your own stun server IP address in ./webrtc/index.js and ./webrtc/view.js

If you want to set SSL, then...

    $ sudo mkdir /var/local/cert  
    $ sudo copy ./cert/stun-* /var/local/cert  

    # Uncomment line 14, 15 in turnserver.conf

Do NOT forget to update the followin files

  • line 19 in ./webrtc/index.js
  • line 19 in ./webrtc/view.js
  • line 2 in ./react-webrct-app/src/components/ReactRTC/functions/constants.js

How to Run

For aiohttp/aiortc server,

    $ conda activate vs 
    (vs) $ cd webrtc  
    (vs) webrtc$ python server.py --cert-file ../cert/server.crt --key-file ../cert/server.key

For react app,

    # Modify wss://IP-address:4000/ws with your server IP
    $
    $ cd react-webrtc-app
    react-webrtc-app$ npm install
    react-webrtc-app$ npm start

How to use

You need to put an exact IP address on a browswer because localhost or 127.0.0.1 don't work with the certificate which is created by the IP address of your machine.

  • Navigate to https://your_IP_address:4000/

    • Check the below options

      • Use datachannel
      • Use video
      • Use audio (if required)

    • Click Start to start process.

    • Once the video is successfully getting processed, proceed to view

    • On another system(or browser) navigate to https://[your_IP_address]:4000/view

    • Click on start button

  • Navigate to https://your_IP_address:3000/

    • Click the button to connect to the cam

[Reference - One on One Test using ReactRTC Module]

  • Open a new browser and navigate to 'https://your_IP_address:3000/one_on_one'

    • Click the green button next to 'Share Screen'
    • Enter a room key in the text box and click 'submit'

  • Open another new browser and navigate to 'https://your_IP_address:3000/one_on_one'

    • Click the green button next to 'Share Screen'
    • Enter the same room key in the text box and click 'submit'

Trouble Shooting

(1) If you encounter a problem when you install aiortc on Ubuntu 18.04,

    conda install av -c conda-forge

(2) It seems like Safari is the only browser that doesn't accept a self-signed untrusted certificate for secure WebSockets.

  • Make sure you're using SHA256 generating the self-signed key
  • Make sure your CommonName is set to the same host (i.e. IP) you are running — you can use the command -subj /CN=192.168.1.54
  • You need to send the .cer file to your phone and manually Install/Trust it (which adds it to General > Profiles)
  • You can find the details in here

(3) can not find ~/your_home/.rnd

    openssl rand -out /home/your_home/.rnd -hex 256

(4) How to test websocket

    curl https://127.0.0.1:4000/ws -v -H "Connection: Upgrade" -H "Upgrade: WebSocket"

Reference