Vidyo.io Remote JS Not Available

Question

I was trying to follow the vidyo.io integration to my Angular web app. While doing this, I am trying to load the Vidyo SDK using,

script.type = 'text/javascript';
script.src = 'https://static.vidyo.io/4.1.12.8/javascript/VidyoClient/VidyoClient.jsonload=onVidyoClientLoaded';

On the callback method named onVidyoClientLoaded, have put the below switch case,

        switch (status.state) {
          case "READY": // The library is operating normally
            console.log("Ready");
            break;
          case "RETRYING": // The library operating is temporarily paused
            console.log("Temporarily unavailable");
            break;
          case "FAILED": // The library operating has stopped
            console.log("Failed");
            break;
          case "FAILEDVERSION": // The library operating has stopped
            console.log("Failed version");
            break;
          case "NOTAVAILABLE": // The library is not available
            console.log("Not available");
            break;
          case "TIMEDOUT":
            console.log("Time out");
            break;
        }

Now after running my angular project, using ng serve --host 0.0.0.0, If I am hitting the url as http://localhost:4200, the "READY" case is getting hit. But if I am hitting the url as http://192.168.X.X:4200, the "NOTAVAILABLE" case is getting hit.

I am not able to understand why this is happening. Please help. Thanks in advance.

Answer 1

You are getting the "NOTAVAILABLE" because of browser restrictions for WebRTC. Most browsers like Chrome and Firefox only allow WebRTC on secured website (HTTPS) with the exception of localhost.

This is the reason why you are able to get "READY" using http://localhost but not http://192.168.x.x