I have an app that is using a webview to launch an html that loads JWP7 and throws an error Uncaught TypeError :cannot read property 'jwplayer.volume' of null
The same page is loading perfectly on mobile and desktop browsers.
I tried to add in the javascript of the html after the jwplayer.js is being called and before the setup, the following code:
if (typeof jwplayer.volume == "undefined" || typeof jwplayer.volume == null )
jwplayer.volume = 10;
I do see the new volume property using a desktop/mobile browser but it doesn't changes the TypeError in the webview, probably because the TypeError is thrown while running the jwplayer.js script, before it reaches my javascript check.
When i'm Using the JWP6 everything is working perfectly.
Any suggestions on how to fix it?
I inspected the jwplayer.js code.
And saw that it reads the last settings of Volume (jwplayer.volume) and Mute (jwplayer.mute) from the LocalStorage; instead of from cookie.
(Probably JWPlayer 6 was using cookies.)
So, you need to enable LocalStorage access in your WebView; like you do for JavaScript.
Sample code below.
WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true); // This will allow access
webView.setWebViewClient(new WebViewClient());
/* WebView.setWebContentsDebuggingEnabled(true); // This is to inspect your WebView from desktop Chrome. (>= API 19) You may not want to include this in production. */
webView.loadUrl(url);
JW Player doesn't support using the web player in Android or iOS webview; however, there are native mobile SDKs available to support in-app video: developer.jwplayer.com/android-sdk
Related
I want to access elements of our website that is embedded in a iframe of our ios App.
It has the same problem as file access.
SecurityError: Blocked a frame with origin "file://" from accessing a cross origin frame...
The file access problem is solved through this plugin https://github.com/globules-io/cordova-plugin-ios-xhr.
But access in a iframe is not solved.
How can i access elements in a iframe of a cordova WKWebview ios app?
I've run into a similar issue in my Cordova apps with WkWebView. You'll need to get the iframe to run under the "same-origin" of your app. This is the only workaround I've found. It involves writing content directly to the iframe, rather than giving it a src="...". This way, iframe runs as same-origin as parent. (Anything loaded via src="file://..." is treated as unique-origin in WkWebView, so blocks any cross-frame JavaScript.)
function frameEl_injectHtml(frameEl, injectHtml) {
// frameEl must exist in DOM before its contentWindow is accessible.
if (!frameEl.contentWindow) { alert("frameInjectHtml() but frameEl not (yet or anymore) in DOM."); return; }
frameEl.contentWindow.document.open('text/htmlreplace');
frameEl.contentWindow.document.write(injectHtml);
frameEl.contentWindow.document.close();
}
// Create <frame>, insert into DOM, and inject content.
var frameHtml = "<html><head></head>" +
"<body style='background-color:#eee; color:#000;'>" +
"iframe body" +
"<script>window.parent.alert('iframe even same-origin as parent.');</script>" +
"</body></html>";
var frameEl = document.createElement('iframe');
frameEl.src = "about:blank";
document.body.appendChild(frameEl);
frameEl_injectHtml(frameEl, frameHtml);
You'll have to load the contents of the website pages somehow outside of this workaround, e.g. with an ajax call.
I have tried every possible way to access camera on webview on cordova.
It work on android, but doesn't work on iOS.
Can someone explain how to implement access camera feature via cordova webview on iOS thanks.
Inappbrowser side (Angular)
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({ video: { facingMode: 'environment' } })
.then(stream => {
// this.videoDom.srcObject = stream;
this.videoDom.srcObject = stream;
this.videoDom.setAttribute('playsinline', 'true');
this.videoDom.play();
this.stream = stream.getTracks();
requestAnimationFrame(tick);
})
}
Cordova side
I have install cordova-plugin-camera and add permission in config.xml on ios platform.
On iOS11/12 navigator.getMediaDevices is not available for WKWebView and UIWebView. It is only available for Safari. (https://forums.developer.apple.com/thread/88052)
WebRTC is only supported in Safari. No WKWebView, not even
SFSafariViewController.
You can try to use this plugin normally should solve your problem: https://github.com/phonegap/phonegap-plugin-media-stream
navigator.mediaDevices.getUserMedia({
'audio': true,
'video': {
facingMode: 'environment'
}
}).then(function(mediaStream) {
// Do what you want with
}
There is a simpler way, just use input type file
This shows the camera for taking a picture
<input type="file" accept="image/*" capture>
This for recording video
<input type="file" accept="video/*" capture>
This will prompt to take a picture or video, choose from the photo library or explore files
<input type="file">
There are a few other combinations. But it probably doesn't work on Android
This is a duplicate of: NotReadableError: Could not start source (Please read this link as its related to Cordova and getUserMedia) and potentially Progressive Web App: Error Accessing navigator.mediaDevices.getUserMedia?
There are changes to Safari on iOS 13 & Safari 13: https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
SFSafariViewController has gained getUserMedia functionality (!!!)
https://bugs.webkit.org/show_bug.cgi?id=183201
However WKWebView does not seem to gain getUserMedia functionality (this might be a bug, watch the webkit link closely):
https://bugs.chromium.org/p/chromium/issues/detail?id=752458
https://bugs.webkit.org/show_bug.cgi?id=185448
iOS 13 and Safari 13 release notes:
https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
I've thought of a hacky way you can make this work on iOS by using the new postMessage API feature of cordova-plugin-inappbrowser which enables you to send messages from pages loaded into the Inappbrowser Webview back to the main Cordova app Webview.
This is not present in the latest release on npm (3.0.0), so you'd need to install the master version (3.1.0-dev) directly from Github:
cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser
In the page loaded into the inappbrowser, you can then post messages back to the Cordova app webview:
function openCamera(){
postMessage({
action: "camera"
});
}
function postMessage(message){
if(!webkit.messageHandlers.cordova_iab) throw "Cordova IAB postMessage API not found!";
webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify(message));
}
<button onclick="openCamera()">Open camera<button>
On the Cordova app side, you can then listen for that message and respond to it:
var iab = cordova.InAppBrowser.open(myUrl, '_blank', iabOpts);
iab.addEventListener('message', function (e) {
if(e.data.action === 'camera'){
openCamera();
}
});
function openCamera() {
var animationDelay = 500; // delay to wait for camera window animation
navigator.camera.getPicture(function(){
log("successfully opened camera");
if (device.platform === "iOS"){
// unhide IAB
iab.show();
}
}, function(cameraError){
error("error opening camera: "+cameraError);
if (device.platform === "iOS"){
iab.show();
}
});
if (device.platform === "iOS"){
// hide IAB so camera window is in view
setTimeout(iab.hide, animationDelay);
}
}
This allows you to directly call cordova-plugin-camera from within the inappbrowser.
However it is hacky because on iOS, by default the camera window will appear below the inappbrowser window in the view hierarchy and hence not be visible.
My hack is to hide the inappbrowser window upon opening the camera, which causes the camera window to be at the top of the visible view hierarcy and be displayed.
However, upon dismissing the camera window, the Cordova app window will briefly be displayed while the inappbrowser window is being animated to show again.
I created a test case example in my inappbrowser test app repo: https://github.com/dpa99c/cordova-plugin-inappbrowser-test/tree/camera
You can try it like this:
git clone -b camera https://github.com/dpa99c/cordova-plugin-inappbrowser-test
cd cordova-plugin-inappbrowser-test
cordova platform add ios
cordova run ios
I'm developing an application for W10 Mobile (UWP) in Xamarin forms and I have implemented a WebView and I tried to get the URL of this but it is more complicated than I thought at first, I tried to get it through the source property, but not is possible, I would appreciate a help.
You could create an event handler to the navigation completed event.
With that you can check the URL
example:
WebView browser = new WebView();
browser.Navigated += OnNavigatedHandler;
public void OnNavigatedHandler (object sender, WebNavigatedEventArgs args){
Console.WriteLine ("Navigated to: " + args.Url);
}
I'm having trouble getting the URL of the browser in real time, the way you indicate I enter an infinite loop, I have a binding in my WebView on the SourceProperty in the view model called URL, when there is a change in the URL property I detect it thanks to PropertyChanged, the problem is that the event navigated only runs when updating the value of the URL property which causes the infinite loop to load the WebView infinitely. Is there any other way to get the URL?
I have uploaded in Pastebin the classes of the test project I am using:
View: pastebin.com/msyu9dJF
ViewModel: pastebin.com/LaCfC31c
BaseViewModel: pastebin.com/i6GCFbbe
I'm afraid im having the same probem as this unasnwered question.
I have a blank IFRAME In my cordova ionic IOS App for embedded YouTube videos.
I change the NG-SRC="" of iframe by clicking Next Video. But upon testing it appears that the phone/cordova/webview is caching the old content of the iframes. I can only get through 20 videos or so before crashing out of memory.
I have tried using angular.element.remove() to remove the iframe as well as setting the iframe src to blank first, and neither seemed to affect how much memory is in use, per Xcode. I've also tried the cordova plugin ClearCache and that didnt clear any memory either.
Please help! Is there a better way to embed youtube in a cordova app?
I have spent weeks working on this all to have it crashing down around me (no pun intended)
My Video view is like:
<ion-view view-title="Random Video">
<iframe id="youtube" sandbox="allow-scripts allow-same-origin" ng-src="{{video.url | trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe>
<h4>{{video.title}}</h4>
<button ng-click="nextVideo()">
</ion-view>
My controller is like:
angular.module('starter.controllers')
.controller('VideoCtrl', function(VideoService) {
$scope.video = {};
$scope.nextVideo = function() {
$scope.video = null; //doesnt seem to help
//$scope.$destroy(); //doesn't help
//angular.element(document.querySelector( '#youtube' )).attr("src", " ");
//angular.element(document.querySelector( '#youtube' )).remove();
//neither of the above 2 remove any memory
VideoService.getVideo().then(function(response){
$scope.video = response.data;
});
}
$scope.nextVideo();
});
Note, when I load my app onto a website instead, and load in chrome, I can cycle through videos without seeing the memory usage go up (looking at taskmgr.exe at least)
It might seem like setting the iframe to an empty string should be enough, but for some browsers and some situations it isn't. It might be necessary to recursively delete event listeners and elements one by one. Maybe surprisingly, the recursive method (1) below is faster than just setting to an empty string (2):
1.Recursive
while (box.lastChild) {
box.removeChild(box.lastChild);
}
2. Setting empty string
myNode.innerHTML = '';
See https://stackoverflow.com/a/3955238/1158376 for reference.
Additionally, in the recursive approach, one might need to apply special treatment to some items, for example first remove event listeners, nullify functions (http://javascript.crockford.com/memory/leak.html), and use dedicated cleanup methods, like with jQuery (http://javascript.info/tutorial/memory-leaks).
Another strategy you could try is to load a new web page with a fresh iframe for every video you play. Loading a new page should enable the browser to release the previously claimed memory.
A PDF file is generated on server side and pushed to client end for download. While the download works in all browsers on windows , fails on IPAD.
Please advise.
Specification : OS 6, Safari 6.1 , Chrome 23.0.1271.100
Please note: In this application pdf is not downloaded on to a new url (NO REDIRECTION).
General behavior: IPad browser (safari / chrome) does not support the download window, hence its expected to open the pdf and provides option to view in pdf compatible apps. Which is not currently happening.
When i debug the below servlet action code for download, the pdf file is successfully generated on server but browser on Ipad does not show :-(
Code sample :
/** Setting response Header **/
response.setHeader("Content-Type", "application/pdf");
response.setHeader("Content-Disposition", "attachment;filename=sample.pdf");
response.setHeader("Connection", "close");
response.setHeader("Cache-Control","cache");
response.setHeader("Pragma","cache");
response.setDateHeader ("Expires", dt.getTime() + 100000);
/** Writing to output **/
InputStream stream = info.getInputStream();
OutputStream os = response.getOutputStream();
try {
response.setContentType(contentType);
copy(stream, response.getOutputStream());
}
finally {
if (stream != null) {
stream.close();
}
}
After testing, the download action code pasted above appeared to be working fine as the issue was BROWSER specific.
Andriod Tablet - Firefox browser downloads the pdf onto pop up window.
IPad : Safari - FIX: Forced the content to open up in a new tab, something like this :
window.open(print_url);
where print_url is the baseurl+action.do+additional_parameter.
To display a pdf instead of asking the browser to save it, use "inline" instead of "attachment".
response.setHeader("Content-Disposition", "inline;filename=sample.pdf");
Also, you're setting content type twice, once in the header and once using setContentType().
I'm not sure if those two headers interact or cancel each other out, so can't say for sure that it's a source of error, but it seems like something to consider changing.