swipswaps/video_streaming_on_web

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

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

• ReactRTC
• ReactRTC example and easy explanation about WebRTC
• React + WebRTC SPA
• aiortc
• WebSocket, Aiohttp, Django
• Simple Chat written in aiohttp using WebSocket
• WebSocket Test with curl
• Inconsitent behaviour from getUserMedia (Answer) https
• How to use jsmgp.js
• How to use jsmpeg player in React
• Video Streaming using OpenCV
• WebRCT 101
• Open source stun server
• 7 ways to stream RTSP on the page
• Installation issues on Ubuntu 18.4
• Test SSL Key for https
• new video tag policy for iOS
• coturn configuration in Ubuntu 18.04
• video autoplay fix on iPhone
• Setting up Coturn with SSL
• How to fix the ICE candidate problem on iOS
• create-react-app error fix
• How to use dangerouslySetInnerHTML
• Test streaming url
• video autoplay is not working in Safari
• Websocket problem regarding SSL on iOS
• EasyRTC + React
• IP Camera + OpenCV + Python 3
• ReactJS Joystick Feature