when i route app (Ionic(Capacitor)) to external website camera stream preview work only when touching
android
private void loadWebView() {
// ...
webView.loadUrl("https://example.com/");
}
on example.com js code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<body>
<video id="stream" autoplay playsinline width="200" height="200"></video>
</body>
</html>
<script type="text/javascript">
navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {
document.getElementById('stream').srcObject = stream;
});
</script>
on localhost all fine
P.S on a Cordova browser too fine
i try use browser from cordova, but it's hard for me
Related
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WorkFridge - A Magic Box</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
Unable to access our angular website on iPhone but can be accessed on the android phone. we are getting a black screen on iPhone.
website url: http://stage.workfridge.com
I'm trying to build this directory type of app and I'm using iframe to embed other sites into the app.I'd also like the links of the embedded sites to open within the parent window.
With the Progressive web app version, this works great and there are no redirections to external pages.
With the Native android version, the iframe links are redirected back to the original web site.
Here is the code.
var app = angular.module('bible', []);
app.controller('MainCtrl', function($scope, $element) {
});
app.directive('iframeDirective', ['$sce', function($sce) {
return {
restrict: 'E',
template: '<iframe src="{{ trustedUrl }}" frameborder="0" allowfullscreen></iframe>',
link: function(scope) {
scope.trustedUrl = $sce.trustAsResourceUrl("https://www.bible.com/bible/100/JHN.3");
}
}
}]);
*{margin:0;padding:0}
html, body {height:100%;width:100%;-webkit-overflow-scrolling:touch;position:fixed; overflow:auto;}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
<!DOCTYPE html>
<html ng-app="bible">
<head>
<meta charset="utf-8" />
<title>Bible app</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js" data-semver="1.2.0"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<iframe-directive></iframe-directive>
</body>
</html>
Any help is much appreciated. Thank you!
Finally got it to work for Android replacing iframe with object data:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<object data="https://www.bible.com/bible/100/JHN.3" width="100%" height="700" type="text/html">
Alternative Content
</object>
</body>
</html>
Fully functional in Android!
Downside is that it doesn't scroll in IOS yet!
MobileFirst app with Ionic crashes upon tapping android back button (which I override with App.overrideBackButton() ).
I wrote a very simple test app (new project, new workspace), first without Ionic then adding Ionic references: without Ionic everything works fine, no inherent errors in the console, with ionic I get two errors:
As soon as the app starts:
"Error in Success callbackId: App1084986710 : Error: Unknown event action undefined", source: file:///android_asset/www/default/worklight/cordova.js (309)
When I tap the back button (from page 2)
W/UnimplementedWebViewApi(21373): Unimplemented WebView method onKeyDown called from: android.webkit.WebView.onKeyDown(WebView.java:2389)
Updates:
If I remove WL.App.overrideBackButton(goBack); and WL.App.resetBackButton(); from the js functions both errors persist, and the app still crashes upon tapping the back button.
If I link/include the Ionic css and js but remove any Ionic content (no ng-app property, no app.js reference from index.html) the back button override works fine.
index.html
<!DOCTYPE HTML>
<html style="height:100%" ng-app="myTryOut" id="content">
<head>
<meta charset="UTF-8">
<title>TryOut</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/ionic.css">
<link rel="stylesheet" href="css/ionicons.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body onload="initLoad()">
<div id="container">
<!-- content will be loaded here -->
</div>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="js/initOptions.js"></script>
<script src="js/ionic-bundle.js"></script>
<script src="js/app.js"></script>
</body>
</html>
page1.html
<!DOCTYPE html>
<html>
<h2>Page 1</h2>
<button class="button button-block button-assertive" onclick="goToPage2()">Go</button>
</html>
page2.html
<!DOCTYPE html>
<html>
<h2>Page 2</h2>
<button class="button button-block button-assertive" onclick="goBack()">Back</button>
</html>
main.js
function wlCommonInit(){
}
function initLoad() {
goBack();
}
function goToPage2() {
$("#container").load("html/derp.html",function(){
console.log("I'm in page 2");
WL.App.overrideBackButton(goBack);
});
}
function goBack() {
$("#container").load("html/dorp.html",function(){
console.log("I'm in page 1");
WL.App.resetBackButton();
});
}
app.js
var myModule = angular.module('myTryOut', ['ionic']);
I am building one AudioBook android application using corona sdk. I am stuck with mp3 streaming.
Please help me.
Refer this website
Try this HTML5 code:
<head>
<title>Radio</title>
<meta name="viewport" content="maximum-scale=1, minimum-scale=1,
width=device-width, user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html { -webkit-text-size-adjust: none; }
body {margin: 3px 3px 3px 3px;}
</style>
</head>
<body>
<audio id="audio" controls autoplay src="http://oggvorbis.tb-stream.net:
80/technobase.ogg;"></audio>
<script type="text/javascript">
window.onload = function() {
var audioPlayer = document.getElementById("audio");
audioPlayer.load();
audioPlayer.play();
};
</script>
</body>
I'm searching for a way to load remote html's in phonegap android app.
I'm using super.loadUrl("file:///android_asset/www/hello.html"); but how to load remote html page?
it's very simple Venkat,
just load required html page with the http request,
super.loadUrl("http://www.test.com/test1.html");
or you can load local html file like you did
super.loadUrl("file:///android_asset/www/hello.html");
and in hello.html used window.location in onLoad() javascript function to load external html page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>LoadUrl
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
window.location="http://170.60.26.20:8099/Sencha/Html/index.html";
}
</script>
</head>
<body onload="onBodyLoad()">
</body>
</html>
Please make sure you set the internet permission in android manifest file.