WebRTCAdaptor Javascript SDK integration having issue with websocket connection.

[Kashif Tariq]

Hi, 
Im having Issue with the websocket connection using WebRTCAdaptor Javascript SDK.

Here is my WebRTCAdaptor instance configuration.

const config = {
      websocket_url: `ws://localhost:5080/WebRTCAppEE/websocket`,
      mediaConstraints: mediaConstraints,
      peerconnection_config: {
          'iceServers': [{'urls': 'stun:stun1.l.google.com:19302'}]
      },
      sdp_constraints: {
          OfferToReceiveAudio : false,
          OfferToReceiveVideo : true,
      },
      localVideoId: videoRef.current.id, // <video id="id-of-video-element" autoplay muted></video>
      bandwidth: 900, // default is 900 kbps, string can be 'unlimited'
      dataChannelEnabled: true, // enable or disable data channel
      callback: (info, description) => {
        if (info === "initialized") {
          console.log("Initialized, waiting for connection...");
        } else if (info === "connected") {
          console.log("Connected, starting to publish...");
          adaptorRef.current.publish(streamName, "live");
        }
      }, // check info callbacks bellow
      callbackError: (error) => {
        console.error("Error: " + error);
      }, // check error callbacks bellow
  }
  
adaptorRef.current = new WebRTCAdaptor(config);

and here is the error Im getting in my browser console.

WebSocket connection to 'ws://localhost:5080/WebRTCAppEE/websocket?target=origin' failed: 
initWebSocketConnection @ websocket_adaptor.js:43
WebSocketAdaptor @ websocket_adaptor.js:15
checkWebSocketConnection @ webrtc_adaptor.js:1101
initialize @ webrtc_adaptor.js:230
WebRTCAdaptor @ webrtc_adaptor.js:217
(anonymous) @ VideoStream.jsx:59
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
performSyncWorkOnRoot @ react-dom.development.js:21737
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
batchedEventUpdates$1 @ react-dom.development.js:21877
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
dispatchUserBlockingUpdate @ react-dom.development.js:4172
websocket_adaptor.js:108  error occured: {"isTrusted":true}
VideoStream.jsx:32 Error: WebSocketNotConnected

can anyone please help me regarding this issue.

Thanks.

[Yash]

HI @Kashif Tariq
I hope you are fine.
Please make sure that you are using correct web socket URL. In the sample it is:

websocket_url: `ws://localhost:5080/WebRTCAppEE/websocket`

You need to use your server IP address or domain name.

[Kashif Tariq]

Hi, @Yash

thanks for the reply,

Im running the Ant media server on my local machine for testing purpose so according to you the websocket_url should be :

websocket_url: `ws://127.0.0.1:5080/WebRTCAppEE/websocket`

If its not the case can you please guide me on how can I set this up.
Thanks.

[Yash]

Hi @Kashif Tariq
If server is running locally then the following web socket seems fine.

ws://localhost:5080/WebRTCAppEE/websocket

Could you please check if you are able to publish the stream using AMS WebRTC sample web page on the following URL?

http://localhost:5080/WebRTCAppEE/