Skip to content

Latest commit

 

History

History
219 lines (164 loc) · 8.53 KB

README.md

File metadata and controls

219 lines (164 loc) · 8.53 KB
Raw

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