Develop Reference

WebRTC onicecandidate not getting called in cordova android, but is getting called in browser

I am working on a file sharing project which works on WebRTC, Cordova and Framework7. My code works perfectly fine in a browser but whenever I try to run the same code through an android emulator with Cordova the WebRTC onicecandidate function never seems to get called and I don't get any error messages. If possible I don't want to use any third party libraries and just reuse the same javascript code I already wrote.
function createPeerConn() {
let conf = {
iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
};
myConn = new RTCPeerConnection(conf, { optional: [] });
myConn.onicecandidate = function (event) {
if (event.candidate) {
socket.emit("candidate", event.candidate);
console.log("create peer con called.")
}
};
openDataChannel();
}

That would be because RTCIceServers.urls is not supported by ANDROID Webview as per
https://developer.mozilla.org/en-US/docs/Web/API/RTCIceServer/urls

The issue was that I still had the cordova-webrtc plugin installed which seemed to switch around some scopes. After removing this plugin everything works as expected.

Message Passing Between Web Application and Chrome Extension - How to GET the message?

I am developing a chrome extension.
In my web application, there is a JavaScript embedded in a HTML page which tries to interact with my extension.
let extId = "extension id";
var extPort = chrome.runtime.connect(extId);
extPort.postMessage({from: "WebServer", fn: "greeting"});
In my extension - background script, event listener is set to handle the message.
chrome.runtime.onConnectExternal.addListener(function(port) {
port.onMessage.addListener(function(message, sender) {
if (message.from == "WebServer") {
if (message.fn == "greeting") {
console.log("Message from Web Server");
}
}
});
});
Besides, there is a function in the background script to use XHR to GET the HTML page. The function works fine.
Question: The message (which is shown in console log) can be got only when I visit the HTML page in browser but not when the page got by XHR. Why? (Sorry I am new to JavaScript and Chrome Extension)

ReCaptcha v3 not feeding response token object in IE 11

I'm working on an MVC .Net application.
We introduced reCaptcha v3 in it recently, it works perfectly in Chrome and Firefox, but not at all in IE.
Here is the code contained in the header section:
<script src="https://www.google.com/recaptcha/api.js?render=#ViewBag.CaptchaSiteKey"></script>
<script type="text/javascript">
grecaptcha.ready(function () {
var test = grecaptcha.execute('#ViewBag.CaptchaSiteKey', { action: '#ViewBag.CaptchaEnvironment'+'_' + '#ViewBag.CaptchaActionName'}).then(
function (token) {
// verify the token on the server
document.getElementById("RecaptchaResponse").value = token;
}, function (reason) {
document.getElementById("RecaptchaResponse").value = reason;
});
});
</script>
The Viewbag variables are set as expected, nothing is missing.
The object that need to be fed is created in the form contained in my body section:
input id="RecaptchaResponse" name="RecaptchaResponse" type="hidden" autocomplete="off"
But remains empty when using in IE11.
I've read many articles that were kind of speaking about such behavior, but nothing worked.
Thanks you in advance

Google reCAPTCHA v3 utilizes "JavaScript Promises" in order to function properly.
In your code example, grecaptcha.execute(...) is issuing a "promise" for a token. Once that promise is "fulfilled", the .then(function() { ... }) portion of your code is executed.
Modern versions of Chrome/Firefox support JavaScript Promises. Unfortunately, IE11 does not. In order for promises to work on IE11, you would need to include a polyfill (see: https://github.com/stefanpenner/es6-promise).

Certain $http request not working on iOS Emulators or Devices (but fine on everything else)

hope you are well.
I am currently trying to call an API we have designed on a C# WebAPI which will call successfully on devices. However, on occasion, it will not call on the iOS Platform. This is how I have the calling of the API setup:
$scope.RunNews = function() {
console.log("Testing 123. I don't know!")
var app_url_news = APP_URL.getUrl() + '/api/news/getallnewsinfo';
$http.get(app_url_news).success(function(data) {
console.log("Successful Transfer. Data Below")
console.log(data);
angular.forEach(data.data, function(obj) {
console.log(obj);
if (obj.videoUrl) {
if (Validators.isValidYoutubeUrl(obj.videoUrl)) {
var youtubeVideoId = obj.videoUrl.split('v=')[1].split('&')[0];
obj.videoUrl = 'http://www.youtube.com/embed/' + youtubeVideoId + '?html5=1&rel=0&hl=en_US&version=3';
}
obj.isVideo = true;
} else {
obj.imagePath = APP_URL.getUrl() + '/NewsImages/files/' + obj.imagePath;
obj.isVideo = MediaType.isVideo(obj.imagePath);
}
});
$scope.newsList = data.data;
$ionicLoading.hide();
});
}
}
Currently, this function calls on the ionic serve web browsing emulator and android devices... HOWEVER, on iOS, the $http is never called. I have noticed that this is apparent for multiple $http calls but for others, they work fine.
I'm here to ask if anyone has experienced this issue and has a fix for it? I believe it may have something to do with permissions but I cannot seem to find anything in my project.

I had a similar problem. GET requests couldn't be made on iOS devices but were working in the browser. I fixed the issue by installing cordova-plugin-whitelist. To use it, you must have Cordova version 4.0 or greater.
If the problem persists, you should debug the app for any logs in console and check the request's response and request headers. These will help you pin down what the problem is.

HTML5 Notification not working in Mobile Chrome

I'm using the HTML5 notification API to notify the user in Chrome or Firefox. On desktop browsers, it works. However in Chrome 42 for Android, the permission is requested but the notification itself is not displayed.
The request code, works on all devices:
if ('Notification' in window) {
Notification.requestPermission();
}
The sending code, works on desktop browser but not on mobile:
if ('Notification' in window) {
new Notification('Notify you');
}

Try the following:
navigator.serviceWorker.register('sw.js');
Notification.requestPermission(function(result) {
if (result === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification('Notification with ServiceWorker');
});
}
});
That is, use ServiceWorkerRegistration»showNotification() not new Notification().
That should work on Android both in Chrome and in Firefox — and on iOS in Safari, too.
(The sw.js file can just be a zero-byte file.)
One caveat is that you must run it from a secure origin (an https URL, not an http URL).
See https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration/showNotification.

If you already have a service worker registered, use this:
navigator.serviceWorker.getRegistrations().then(function(registrations) {
registrations[0].showNotification(title, options);
});

Running this code:
if ('Notification' in window) {
Notification.requestPermission();
}
Console in Chrome DevTools shows this error:
Uncaught TypeError: Failed to construct ‘Notification’: Illegal
constructor. Use ServiceWorkerRegistration.showNotification() instead
A better approach might be:
function isNewNotificationSupported() {
if (!window.Notification || !Notification.requestPermission)
return false;
if (Notification.permission == 'granted')
throw new Error('You must only call this \*before\* calling
Notification.requestPermission(), otherwise this feature detect would bug the
user with an actual notification!');
try {
new Notification('');
} catch (e) {
if (e.name == 'TypeError')
return false;
}
return true;
}
Function Source: HTML5Rocks

I had no trouble with the Notification API on Windows Desktop. It even worked without issues on Mobile FF. I found documentation that seemed to indicate Chrome for Android was supported too, but it didn't work for me. I really wanted to prove the API could work for me on my current (2019) version of Chrome (70) for Android. After much investigation, I can easily see why many people have had mixed results. The answer above simply didn't work for me when I pasted it into a barebones page, but I discovered why. According to the Chrome debugger, the Notification API is only allowed in response to a user gesture. That means that you can't simply invoke the notification when the document loads. Rather, you have to invoke the code in response to user interactivity like a click.
So, here is a barebones and complete solution proving that you can get notifications to work on current (2019) Chrome for Android (Note: I used jQuery simply for brevity):
<html>
<head>
<script type="text/javascript" src="libs/jquery/jquery-1.12.4.min.js"></script>
<script>
$( function()
{
navigator.serviceWorker.register('sw.js');
$( "#mynotify" ).click( function()
{
Notification.requestPermission().then( function( permission )
{
if ( permission != "granted" )
{
alert( "Notification failed!" );
return;
}
navigator.serviceWorker.ready.then( function( registration )
{
registration.showNotification( "Hello world", { body:"Here is the body!" } );
} );
} );
} );
} );
</script>
</head>
<body>
<input id="mynotify" type="button" value="Trigger Notification" />
</body>
</html>
In summary, the important things to know about notifications on current (2019) Chrome for Android:
Must be using HTTPS
Must use Notification API in response to user interactivity
Must use Notification API to request permission for notifications
Must use ServiceWorker API to trigger the actual notification

new Notification('your arguments'); This way of creating notification is only supported on desktop browsers, not on mobile browsers. According to the link below. (scroll down to the compatibility part)
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
For mobile browsers below is the way you create a notification (this also works on desktop browsers)
navigator.serviceWorker.ready.then( reg => { reg.showNotification("your arguments goes here")});
Tested on browsers using webkit engine.
For more information please visit below links:
https://developers.google.com/web/updates/2015/05/notifying-you-of-changes-to-notifications
https://developers.google.com/web/fundamentals/push-notifications/display-a-notification