Project-Lightspeed icon indicating copy to clipboard operation
Project-Lightspeed copied to clipboard

React not Connecting to Websocket Host

Open BadCo-NZ opened this issue 3 years ago • 1 comments

This may be related to other issues, but I didn't see the specific error that I was getting.

Mine is being run in docker-compose through Portainer (Portainer handles .env files a bit differently). I can get OBS to connect to the ingest server, I can reach the react page, but pressing play does nothing.

The webrtc logs show only Waiting for RTP Packets and not any connection.

In the browser console I am seeing the below errors. The font one is obvious and has PR waiting to fix it. The other issue I see is React trying to reach the webRTC host on the wrong address and port.

Loading failed for the <script> with source “https://kit.fontawesome.com/99754263de.js”. [10.10.10.210:8888:1:1](http://10.10.10.210:8888/)

Firefox can’t establish a connection to the server at ws://localhost:8080/websocket. [SocketContext.jsx:11:16](http://10.10.10.210:8888/static/js/context/SocketContext.jsx)
  Socket encountered error. Closing socket. [SocketContext.jsx:106:14](http://10.10.10.210:8888/static/js/context/SocketContext.jsx)
    onerror SocketContext.jsx:106

Any thoughts as to what is going on here?

.env file

WEBSOCKET_HOST=10.10.10.210
WEBSOCKET_PORT=8088
WEB_PORT=8888
INGEST_PORT=8084
STREAM_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

compose file

version: '3'

services:
  ingest:
    image: projectlightspeed/ingest
    #Uncomment below to build locally
#    image: lightspeed-ingest
#    build:
#      context: ./ingest
#      dockerfile: Dockerfile
    env_file: 'stack.env'
    restart: on-failure
    ports:
      - "8084:8084"
  
  react:
    image: projectlightspeed/react
    #Uncomment below to build locally
#    image: lightspeed-react
#    build:
#      context: ./frontend
#      dockerfile: Dockerfile
    env_file: 'stack.env'
    restart: on-failure
    ports:
      - "8888:80"

  webrtc:
    image: projectlightspeed/webrtc
    #Uncomment below to build locally
#    image: lightspeed-webrtc
#    build:
#      context: ./webrtc
#      dockerfile: Dockerfile
    env_file: 'stack.env'
    command: ["lightspeed-webrtc", "--addr=0.0.0.0", "--ip=10.10.10.210", "--ports=20000-20100", "run"]
    restart: on-failure
    ports:
      - 8088:8080 # WebRTC
      - 65535:65535/udp # RTP
      - 20000-20100:20000-20100/tcp # WebRTC PeerConnection
      - 20000-20100:20000-20100/udp # WebRTC PeerConnection UDP

BadCo-NZ avatar Sep 15 '22 10:09 BadCo-NZ

You need to update the config file in the frontend/build folder. Change the URL to the public URL of your hosted React

adammpolak avatar Jan 07 '23 22:01 adammpolak