Twilio client WebRTC not working on chrome - javascript

I am using Twilio Client softphone in my application and it is working fine on my local system for both inbound and outbound call but when I deployed it on Server (AWS ec2 instance) always I am getting below error on chrome for inbound and outbound call.
getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See (google url) for more details.
I am including twilio.min.js in following manner.
<script type="text/javascript" src="https://media.twiliocdn.com/sdk/js/client/v1.3/twilio.min.js"></script>
<script type="text/javascript" src="https://media.twiliocdn.com/taskrouter/js/v1.4/taskrouter.min.js"></script>
You can see I am including js file by using HTTPS. Even after that I have downloaded twilio.min.js file and added in local directory and included js file by using local directory also but still getting the same error.
So how can I solve this issue.

The getUserMedia API requires you to use HTTPS on your site in Chrome (i.e. the script that executes getUserMedia). That has been the case for quite a while, see here for a detailed explanation.

From the docs: https://www.twilio.com/docs/api/client/twilio-js
You should use HTTPS to serve your page. Starting with Google Chrome
47, HTTP applications will no longer be allowed to call getUserMedia()
and will not be given access to the user's camera and microphone.

Related

Error from p5.sound in browser when it is hosted via HTTP?

I use p5.js in my school project and it does not work in Google Chrome(also Microsoft Edge, idk about Opera), with JavaScript activated, but only when its on hosting. When I got it on Localhost it works just fine. In Mozilla it works in both situations. Iam confused.
http://klauzury2c2021.8u.cz/
you can find all of the code on the site
It looks like you are are hitting this issue with the p5.Sound library that prevents it from working correctly when loaded over http. Since you're hosting your site on a public server the best solution would be to enable HTTPS for your server and have HTTP requests redirect to the HTTPS url. However if you are unable to do this you can make this work with an AudioWorklet polyfill. Just add the following line to the head of your html file:
<script src="https://unpkg.com/#free-side/audioworklet-polyfill/dist/audioworklet-polyfill.js" type="text/javascript"></script>
Updated ↑ Old Answer ↓
I originally misread your question and though you were specifically struggling with testing on localhost. Here are instructions for cases where you are testing with a local server:
Apparently people have had success working around the issue using a tool called ngrok. Which allows you to expose a local service via a public HTTPS endpoint. So if you're running a local HTTP server on port 3000 you would open a terminal and run ngrok http 3000 (having followed the basic installation and setup steps for ngrok). Nrok will assign you a public URL, which it will display in a message to the terminal like this:
Forwarding https://<UNIQUE_ID_HERE>.ngrok.io -> http://localhost:3000
Then instead of accessing your sketch page via http://localhost:3000/ you can access it via https://<UNIQUE_ID_HERE>.ngrok.io/ and that should work around this p5.sound issue.

I have integrate mesibo in my angular app. local stream is working properly. but remote stream is not connected

I am using Angular cli --ssl to run it on HTTPS.
this.api.setupVideoCall('localVideo','remoteVideo',true)
I was following mesibo javascript basic demo app as a reference. Above code is called without any error but still local video working properly, remotevideo is not working. Please help with this as soon as possible.
Seems like a browser security issue. You get media access (camera and microphone), you must run using the HTTPS URL and you MUST also use a valid certificate with recognized authority, the self-signed certificate will not work.
This restriction is by the browsers and not by the mesibo. Refer Mozilla documentation here.
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Embedded Devices - Javascript Debugging

I work on embedded devices but am not able to install any software on them (e.g. programs like gdbserver are out). I need to monitor javascript events on those browsers. For example, if we run a web app on the EWB, the device it's on might have a keyboard pop-up. I need a way to see what triggers this event.
I am thinking along the lines of perhaps embedding something into the HTML or javascript that automatically reports any events back to a workstation somewhere.(I already have logs, but they are not live and it's difficult to pinpoint what happens - even beartailing them... wish I could have something like Firebug, but since it's embedded I can't)
Has anyone seen anything along those lines?
To get a debug connection to a web app or page running on a remote device:
Install vorlon using npm
Download ngrok
Start the vorlon server, the server port will probably be localhost:1337 and the following steps assume this
From a terminal/command prompt run ngrok with ngrok http 1337 and it should report an ip address for the other end of the tunnel, something like def01234.ngrok.io available via http and https.
Instead of the local script tag which vorlon suggests, use the remote ngrok address, e.g. <script src="https://def01234.ngrok.io/vorlon.js"></script>. ngrok exposes both http and https - as this is over the public internet I would strongly recommend using a secure connection.
Log onto the vorlon server on your local machine.
If the above test works you are going to want to do two more things:
Get an account at ngrok (or an alternative secure tunnel service) to get a fixed address.
Configure vorlon authentification according to the instructions on this page. By default it is insecure so ANYBODY with the exposed ngrok address could log onto the dashboard and mess with your embedded devices.

JavaScript API Domain is restricted to localhost phonegap

I am trying to get linked in authentication on my phonegap app so I am using the javascript sdk
What domain do I add to the authentication list? I keep getting the error "JavaScript API Domain is restricted to localhost"
and I tried this: http://www.benwagner.net/mobile/linkedin-developer-api-javascript-domains-cordova-mobile-app/
But linkedin won't allow file:/// anymore
I can see that there seems to be no way to support mobile application Java Script API domain. As the mobile application has no public domain but just a socket, it's a client.
As the link that you have provided claimed to have found a solution in 2013 by just mentioning the protocol file:/// in the domain. However I found another link from 2014 which says that this doesn't work anymore. May be you can try adding file:///, http://localhost.
This should in effect (if the file:/// is allowed) should allow your application on mobile and in localhost browser to sign in.

How may a web page that is loaded via https connect to a WebSocket server running on localhost?

I'm trying to create a web page that can connect to a client-local WebSocket server. The idea is to use the JavaScript client running in the browser as kind of a proxy to enable communication between the remote web server and the locally installed client application which implements the WebSocket service.
So basially, what I'd do is load a web page from https://example.com which includes some JavaScript that opens a new WebSocket to ws://localhost:1234/context.
This works fine as long as the web page is accessed via http. As soon as https is used, however, Firefox and Internet Explorer refuse to connect and the WebSocket constructor throws an exception (SecurityError, code 18).
Now, I already found advice from Mozilla stating that https sites should only use secure (wss://) WebSockets and plain http sites should only use plain WebSockets (link). But I don't really see the security issue when connecting to localhost from within an https context. Besides, this works like a charm for Chrome, Opera and Safari.
So the actual question is: Is there any way to work around this issue? Like introducing a non-https context inside the web page or something similar to get all browsers to connect to ws://localhost from within a https-delivered web page?
Thanks a lot in advance! I'm not exactly a web developer so this kind of browser-specific behaviour isn't really in my fields of expertise :)
You have to accept the cert first.
You can do this by simply going to https://localhost:1234/context, in your case. Once that's done, you can use the wss URL in your question.

Categories

Resources