I'm using the following html code. I'm able to get a video stream on my desktop, but I'm getting a grey play button in the android webView app. I'm serving this over a https connection.
Please guide me as Im new to both of these code snippets.
HTML
<div id="video-container">
<video id="camera-stream" width="500" autoplay></video>
</div>
Script.js
window.onload = function() {
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true },
function(localMediaStream) {
var vid = document.getElementById('camera-stream');
vid.srcObject = localMediaStream;
},
function(err) {
console.log('The following error occurred when trying to use getUserMedia: ' + err);
}
);
} else { alert('Sorry, your browser does not support getUserMedia'); }
}
This screenshot is taken from my desktop chrome browser.
and this is taken from my phone webView.
I know this is an old thread but I recently run into the same issue and only after a lot of tries I finally found the solution.
If you see this play button all the permission should be set correctly.
It seems that the webview is waiting for an user interaction to start the stream but tapping on the icon does not starts the video (idk how the user should "approve" the streaming)
The solution is to change the setting of the webview in you webapp:
webView.settings.mediaPlaybackRequiresUserGesture = false;
In this way the stream starts correctly without any user interaction
Related
I'm creating a simple webview app using nativescript-vue where there is nothing else in the app except the webview that loads a website fullscreen.
On iOS it works great, I can log in to the website turn the app off and on and I'm still logged in.
On Android, the cookies are not saved and you have to log in again every time you turn the app off.
Any way I can enable cookies in the webview for Android?
I couldn't make it work with cookies, so I had to switch and use localstorage as a backup for saving tokens instead of cookies.
Here is how my final version looks:
<template>
<Page>
<WebView #loadStarted="onLoadStarted"
#loaded="onWebViewLoaded"
src="https://yoururl.com/"
/>
</Page>
</template>
<script>
import { isAndroid } from "tns-core-modules/platform"
export default {
methods: {
onLoadStarted (webargs) {
if (isAndroid) {
const webView = webargs.object;
webView.android.getSettings().setDomStorageEnabled(true) // This will enable local storage
}
},
onWebViewLoaded(webargs) { // I use this only to disable the default zoom buttons
if (isAndroid) {
const webView = webargs.object;
webView.android.getSettings().setDisplayZoomControls(false)
webView.android.getSettings().setBuiltInZoomControls(false)
}
},
}
};
</script>
Apparently, you should be able to enable cookies doing this (at least for newer SDK users):
webView.on(WebView.loadStartedEvent, (args) => {
webView.android.getSettings().setAcceptThirdPartyCookies(webView, true)
});
But that didn't work as expected as it seemed like sometimes it would save cookies and sometimes it won't or sometimes it would remove cookies (when you log out) and sometimes not.
I hope this info helps someone as it sure seems there is little to none info about this especially if you aren't much familiar with pure Java Android development.
This code should work
const webView = webargs.object;
if (android.os.Build.VERSION.SDK_INT >= 21) {
android.webkit.CookieManager.getInstance().setAcceptThirdPartyCookies(webView.android, true);
}
I've got a problem with some code in Ionic.
I am developing an app on Ios and Android that needs access to the video.
The video is private and specific that is why I need to store them in the assets folder.
Here is the problem, sometimes on Android, the video can not be loaded from this file and I have a GET error, it tries 30 times to get the video and then stop.
That means that whenever I play the video I get an Error saying: Uncaught promise the play() method was interrupted by a call to pause().
Here are the request from the app
Error message
Above are the request and the error code.
Here is my HTML5 code :
<ion-row class="ion-justify-content-center ion-align-items-center">
<video class="ion-no-margin" #video *ngIf="exercise?.video"
playsinline loop preload="auto" [ngClass]="{'preview-video': !isExerciseStarted}"
tappable (click)="onClickStartVideo()" [poster]="exercise.thumbnail">
<source [src]="exercise?.video" type='video/mp4'>
</video>
</ion-row>
And here is the TypeScript :
public onClickStartVideo() {
const video = (<HTMLVideoElement>this.video.nativeElement);
if (this.isVideoPlaying) {
video.currentTime = 0;
} else {
video.currentTime = 0;
video.play();
}
this.isVideoPlaying = true;
}
Thank you for your help.
Good day! I am developing a simple mobile app using jQuery Mobile with InAppBrowser plugin on IntelXDK. The purpose of the InAppBrowser is to let users view external web pages within the app. On IntelXDK emulator, the browser closes when I click on "Return to App" button and then it returns to the app. However, I encountered a problem on an Android build when I clicked on the "Done" button I received the message:
Webpage not available
The webpage at file:///android_asset/www/[object%20Event] might be temporarily down...
I have used the following so users can click and view external web pages:
Opening links in external device browser with Cordova/jQuery-mobile
I have modified the above to be used on my app:
$(document).on('click', '.link', function (e) {
var elem = $(this);
var url = elem.attr('href');
if (url.indexOf('http://') !== -1) {
e.preventDefault();
document.addEventListener("deviceready", onDeviceReady, false);
onDeviceReady(url);
//return false;
}
});
function onDeviceReady(url) {
var ref = window.open(url, '_blank', 'location=yes');
}
Thank you for your time and help. I really appreciate it.
The reason why it was displaying an error message because the test file was calling another onDeviceReady function. Problem solved!
I have been researching all morning about integrating an android barcode scanner app into a web page, but haven't found exactly what I need to know. I want to have a web page that the user can fill in text fields by using an android barcode scanner. So the user would be on a web page and would either click inside the text field or click a button next to the text field that would start the android barcode scanner. They would then scan the barcode and the text field would be filled in.
I have found solutions on how to do this and then go to a different page, but it is important that the user stays on the same page. I have seen the zxing project and thought that might be able to be used, but I'm not sure if it allows for the page to stay the same.
I'm pretty sure this is possible and is wondering if any one could give me a high level overview on how they would do it. I was thinking it might be able to be done with an ajax request that gets submitted on a button click. The ajax request would get sent to my server, the server would send something to the android device that would start the scanner and return the data which in turn gets sent back in the ajax response. Is there any way to cut out the server though and just have the android browser starting the barcode scanner? Thank you for your time and I appreciate any discussion on it.
ZXing (zebra crossing) provides the capability to initiate the bar code scanner via a webpage through a button click event, anchor tag, or other action that could call a URL on a mobile device.
When the barcode scanner application is installed on an android device, a URL call to:
zxing://scan/?ret=http://foo.com/products/{CODE}/description&SCAN_FORMATS=UPC_A,EAN_13
Will bring up the device bar code reader, the user scans the code, and the code is returned via the callback URL parameter supplied in the zxing URL.
You can view an example (works on android) here: http://zxing.appspot.com/scan
You can try this for Android:
You can use Zxing library for barcode scan for webpages
<!DOCTYPE html>
<script type="text/javascript">
//This entire block of script should be in a separate file, and included in each doc in which you want scanner capabilities
function zxinglistener(e){
localStorage["zxingbarcode"] = "";
if(e.url.split("\#")[0] == window.location.href){
window.focus();
processBarcode(decodeURIComponent(e.newValue));
}
window.removeEventListener("storage", zxinglistener, false);
}
if(window.location.hash != ""){
localStorage["zxingbarcode"] = window.location.hash.substr(1);
self.close();
window.location.href="about:blank";//In case self.close is disabled
}else{
window.addEventListener("hashchange", function(e){
window.removeEventListener("storage", zxinglistener, false);
var hash = window.location.hash.substr(1);
if (hash != "") {
window.location.hash = "";
processBarcode(decodeURIComponent(hash));
}
}, false);
}
function getScan(){
var href = window.location.href.split("\#")[0];
window.addEventListener("storage", zxinglistener, false);
zxingWindow = window.open("zxing://scan/?ret=" + encodeURIComponent(href + "#{CODE}"),'_self');
}
</script>
<html>
<head>
<script type="text/javascript">
function processBarcode(b){
var d = document.createElement("div");
d.innerHTML = b;
document.body.appendChild(d);
}
</script>
</head>
<body>
<button onclick="getScan()">get Scan</button>
</body>
</html>
For reference: Read link
Using a javascript interface and loadurl(javascript...) you can communicate with your webpage from Android
public void loadScript(String script){
webview.loadUrl("javascript:(function() { " + script + "})()");
}
private class JavaScriptInterface {
public void startQRScan() {
...
}
}
There are plenty of examples on google.
I am building a phonegap based mobileweb application which is built almost completely with jquerymobile.
In couple of pages, there are links to external sites and the client wants to show a popup asking if the user is willing to leave the app and go to the external site. Client also asked that the application shall exit if the user chooses to follow the link.
Here is my JS:
if (typeof CORP == "undefined" || !CORP) {
var CORP = {};
}
(function() {
CORP.mk = {
var mobile = false;
init: function() {
$("[data-role='page']").on("pagebeforeshow", CORP.mk.setHandlers);
},
onDeviceReady: function () {
CORP.mk.mobile = true;
document.addEventListener("pause", CORP.mk.onPause, false);
},
onPause: function () { // Exit the app if it goes to background
navigator.app.exitApp();
},
setHandlers: function () {
if ( CORP.mk.mobile ) {
$("a[rel='external']").click(function (e) {
e.preventDefault();
CORP.mk.externalLink = $(this).attr("href");
alert(CORP.mk.externalLink);
navigator.notification.confirm("You are about to close this mobile app and open your web browser.",
CORP.mk.popupConfirm,
"Close This App?");
});
}
}
};
})():
$(document).bind("pageinit", CORP.mk.init);
document.addEventListener("deviceready", CORP.mk.onDeviceReady, false);
Here is my markup:
<a rel='external' data-ajax='false' href='http://www.google.com'>googly</a>
Problem: I tested this code ignoring CORP.mk.mobile on chrome desktop browser and it works fine. However $(this).attr("href"); always returns '#' for the href in Android or IOS and I cannot launch external application with phonegap. I want to be able to get the actual link and launch external app. I tried many combinations and couldn't find a solution. Appreciate any insights.
Finally found the issue. This is happening due to e.preventDefault(); which is replacing the link. I am surprised that this doesn't happen in desktop browsers..
So, instead of
e.preventDefault();
CORP.mk.externalLink = $(this).attr("href");
I need to do
CORP.mk.externalLink = $(this).attr("href");
e.preventDefault();