I have just started working with phone gap and I am experiencing some issues. As I understand there have been some recent updates to phone gap so some of the info is a bit out dated.
I am trying to play an MP4 video stream.
I have tried this on both Windows 7 and Linux Ubuntu Server. Currently I am working with Ubuntu 14.04 Server and Bluestacks Android Emulator on Windows.
I followed the following install guide: http://dasunhegoda.com/installrun-phonegap-ubuntu/797/
I then created my app like so:
cd /root
phonegap create myapp
cd myapp
I have then tried to install the video player using:
phonegap plugin add https://github.com/moust/cordova-plugin-videoplayer.git
This install some directories in the plugins directory.
I have then modified the index.html file of www to the following between the body tags
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device MY APP</p>
<p class="event received">Device is Ready MY APP</p>
<p>Play File Now<p/>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function playVideo(vidUrl)
{
VideoPlayer.play(
vidUrl,
{
volume: 0.5,
//scalingMode: VideoPlayer.SCALING_MODE.SCALE_TO_FIT_WITH_CROPPING
},
function () {
console.log("video completed");
},
function (err) {
console.log(err);
}
);
}
</script>
</body>
Whenever I try to click the play video link I can see in the console VideoPlayer not defined. I am accessing the app using the phone gap app on my Bluestack Android emulator. I have however, used jsconsole.com to log issues in the code, so I also have this in the head
<script src="http://jsconsole.com/remote.js?C2624EAC-3434-46D2-A3C5-C57D1C5584C8"></script>
I cannot see further instruction regarding installing the plugin, it seems the one command should be sufficient. Many people mention adding features to the config.xml file. I however do not have /res/xml/config.xml, I only seem to have one config file outside off www in the project root.
Can anyone point me in the right direction?
Update
Full index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<script src="http://jsconsole.com/remote.js?4AF41FCD-34CB-482B-ADD9-D966BB408076"></script>
<!-- <script type="text/javascript" src="js/VideoPlayer.js"></script>-->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<p>Play File Now<p/>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="js/VideoPlayer.js"></script>-->
<script type="text/javascript">
app.initialize();
function init()
{
console.log("Trying to show uuid");
var uuid = device.uuid;
console.log("UUID is: " + uuid);
play_video("http://techslides.com/demos/sample-videos/small.mp4");
}
function play_video(URL)
{
VideoPlayer.play(URL);
}
</script>
</body>
Use this Plugin for Play Video.
Try to install from below git link.
cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git
Then create function for Play Video.
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
Call this funciton to your button div.
<p>Play File Now<p/>
Copy JS File from plugin folder to your JS folder.
And modify in your Index.html.
<script src="js/video.js"></script>
For reference you can check below link.
https://github.com/dawsonloudon/VideoPlayer
Edit 1:
Modify your VideoPlayer.js file as below.
cordova.define("cordova/plugin/videoplayer",
function(require, exports, module) {
var exec = require("cordova/exec");
var VideoPlayer = function () {};
/**
* Starts the video player intent
*
* #param url The url to play
*/
VideoPlayer.prototype.play = function(url) {
exec(null, null, "VideoPlayer", "playVideo", [url]);
};
var videoPlayer = new VideoPlayer();
module.exports = videoPlayer;
});
if (!window.plugins) {
window.plugins = {};
}
if (!window.plugins.videoPlayer) {
window.plugins.videoPlayer = cordova.require("cordova/plugin/videoplayer");
}
Edit 2
Modify your Index.html Give it a try.
Add js file before head tag completion as below.
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/VideoPlayer.js"></script>
<title>Hello World</title>
</head>
And also change play_video function as below.
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
It is working for me well in my app.
Hope this will help you.
Related
This is geo js file which id directly connected via index.html can you please explain me why i am unable to run. whether it is debugging problem or apk extraction problem.
my ionic project works fine with ionic serve --lab ,but while copied the.apk file in build folder to my phone and install the app but blank screen appears ,
Please can anyone suggest what might be my problem
my app is using google maps,key is provieded for both app and browser in index.html
here is my code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 17.3850, lng: 78.4867},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
//var posOptions={timeout:10000, enableHighAccuracy:true};
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Here');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJWfIcxV1Q1-lG66bpqhLfBB1zevi9bG4&callback=initMap">
</script>
<!-- your app's js -->
<script src="js/geo.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-royal">
<h1 class="title">Geo Location example</h1>
</ion-header-bar>
<ion-content>
<div id="map"></div>
</ion-content>
</ion-pane>
</body>
</html>
I am new to phonegap. I have installed the Cordova Local-Notification Plugin.
But i am getting error "cannot read the property 'local' of undefined phonegap"
Here is my code
<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">-->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="appa">
<h1>Apache Cordovadas</h1>
<!--<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>-->
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="../plugins/de.appplant.cordova.plugin.local-notification/www/local-notification.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
<!-- <script type="text/javascript" src="js/index.js"></script>-->
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when PhoneGap is loaded.
//
// At this point, the document has loaded but phonegap-1.0.0.js has not.
// When PhoneGap is loaded and talking with the native device,
// it will call the event `deviceready`.
//
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
document.addEventListener('deviceready', function () {
alert("start");
// Schedule notification for tomorrow to remember about the meeting
cordova.plugins.notification.local.schedule({
id: 10,
title: "Meeting in 15 minutes!",
text: "Jour fixe Produktionsbesprechung",
at: tomorrow_at_8_45_am,
data: { meetingId:"#123FG8" }
});
// Join BBM Meeting when user has clicked on the notification
cordova.plugins.notification.local.on("click", function (notification) {
if (notification.id == 10) {
joinMeeting(notification.data.meetingId);
}
});
// Notification has reached its trigger time (Tomorrow at 8:45 AM)
cordova.plugins.notification.local.on("trigger", function (notification) {
if (notification.id != 10)
return;
// After 10 minutes update notification's title
setTimeout(function () {
cordova.plugins.notification.local.update({
id: 10,
title: "Meeting in 5 minutes!"
});
}, 600000);
});
alert("start");
}
,
false);
</script>
</body>
</html>
Please help me out of this im getting hold for last 3 days.
Thanks in Advance.
Try running it on your actual phone or on an emulation.
Many plugins wont fully work while testing on a browser.
I tried to convert a react application into a mobile app, i got success with iOS, but now, when I'm trying with android, it shows the white screen of death, and the chrome remote inspector doesn't show any significant reason, this is the chrome log
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>MMJ Recs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/main.css"/>
<script>
window.prompt = function(){
}
</script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
<script src="./js/index.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./js/vendor.js"></script>
<script src="./js/vendor.bundle.js"></script>
<script src="./js/build.js"></script>
<script type="text/javascript">
Stripe.setPublishableKey('pk_test_AzADtnJ7sM7pQJu32JOmHB3M');
</script>
</body>
</html>
and this is my main.js
import React from 'react';
import Router from 'react-router';
import routes from './routes';
import ReactDOM from 'react-dom';
//ReactDOM.render(routes, document.getElementById('app'));
function startApp(){
Router.run(routes, Router.HistoryLocation, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
}
function startAppCordova(){
Router.run(routes, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
}
window.onload = function(){
var url = document.URL;
var isSmart = (url.indexOf("http://") === -1 && url.indexOf("https://") === -1);
if( isSmart ){
document.addEventListener('deviceready', startAppCordova, false);
}
else{
startApp();
}
}
I suspect it could be a problem with the JavaScript engine, for older phones which have older JS engines you can use a Polyfill downloaded from https://cdn.polyfill.io/v2/docs/, which I used it to sort out this error which I saw when running adb logcat with my phone connected and opened the app :
Uncaught TypeError: Object function Object() { [native code] } has no method 'assign
Run adb logcat to see what the error is in your case, you probably won't see it from the Chrome console
I am developing an android app using phonegap. I have added google-play-services library project successfully. Now I want to integrate AdMob for advertising purpose. I have followed these steps https://developers.google.com/mobile-ads-sdk/docs/. My project is built and run successfully but ads are not showing there.
I have added AdMob Cordova Plugin and the SCRIPT in index.html. Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />-->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->
<!-- <link href="lib/ionic/css/ionic.css" rel="stylesheet"> -->
<link href="css/app.css" rel="stylesheet">
<!-- <link href="css/leaflet.css" rel="stylesheet">
<link href="css/leaflet.draw.css" rel="stylesheet">
<link href="css/nv.d3.css" rel="stylesheet"> -->
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<style type="text/css">
.css-form input.ng-invalid.ng-dirty {
/*background-color: #FA787E;*/
outline: none;
box-shadow:0px 0px 7px #FA787E;
border-color:#FA787E;
}
.css-form input.ng-valid.ng-dirty {
/*background-color: #78FA89;*/
outline: none;
box-shadow:0px 0px 7px #78FA89;
border-color:#78FA89;
}
</style>
<!-- ionic/angularjs js -->
<script src="js/leaflet.js"></script>
<script src="js/d3.js"></script>
<script src="js/nv.d3.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.js"></script>
<script src="js/geolocation.js"></script>
<script src="js/angularjs-nvd3-directives.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-leaflet-directive.min.js"></script>
<script src="js/leaflet.draw.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view animation="slide-left-right-ios7">
</ion-nav-view>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="deviceinfo.js"></script>
<script type="text/javascript" src="telephonenumber.js"></script>
<script type="text/javascript" src="sharedprefs.js"></script>
<!-- your app's js -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="js/geolib.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript">
Date.prototype.deductHours= function(h){
this.setHours(this.getHours()-h);
return this;
}
Date.prototype.addHours= function(h){
this.setHours(this.getHours()+h);
return this;
}
</script>
<script>
function onDocLoad() {
initApp();
}
function initApp() {
initAd();
console.log("initApp is running");
// display the banner at startup
window.plugins.AdMob.createBannerView();
}
function initAd(){
if ( window.plugins && window.plugins.AdMob ) {
console.log("initAd is running");
var ad_units = {
ios : {
banner: 'ca-app-pub-2899535788334936/6458250207',
interstitial: 'ca-app-pub-2899535788334936/3672907408'
},
android : {
banner: 'ca-app-pub-2899535788334936/6458250207',
interstitial: 'ca-app-pub-2899535788334936/3672907408'
}
};
var admobid = ( /(android)/i.test(navigator.userAgent) ) ? ad_units.android : ad_units.ios;
window.plugins.AdMob.setOptions( {
publisherId: admobid.banner,
interstitialAdId: admobid.interstitial,
bannerAtTop: false, // set to true, to put banner at top
overlap: false, // set to true, to allow banner overlap webview
offsetTopBar: false, // set to true to avoid ios7 status bar overlap
isTesting: false, // receiving test ad
autoShow: true // auto show interstitial ad when loaded
});
registerAdEvents();
} else {
alert( 'admob plugin not ready' );
}
}
function registerAdEvents() {
document.addEventListener('onReceiveAd', function(){});
document.addEventListener('onFailedToReceiveAd', function(data){});
document.addEventListener('onPresentAd', function(){});
document.addEventListener('onDismissAd', function(){ });
document.addEventListener('onLeaveToAd', function(){ });
document.addEventListener('onReceiveInterstitialAd', function(){ });
document.addEventListener('onPresentInterstitialAd', function(){ });
document.addEventListener('onDismissInterstitialAd', function(){ });
}
function onResize() {
var msg = 'web view: ' + window.innerWidth + ' x ' + window.innerHeight;
document.getElementById('sizeinfo').innerHTML = msg;
}
</script>
</body>
</html>
Can anyone tell me what actually I have missed here? I think my project is not finding the plugin anyhow. But I have added the the plugin in config.xml also. Then whats wrong? Please reply!!
No need to add separate sdk's for both GCM and AdMob, google play services contains both sdk you can use it. Use latest android google play services that contains both sdk packages.
You are doing with old way, actually, google have declared updated google_play_services library, which contains all your individual libraries in it. So dont use individual libs, just get updated google_play_service lib and go on...!!!
Ok my problem solved. The problem was not related to google-play-sevices configuration. So I can't accept any answer. Thank you everyone to help me. At least I got the surety that I was not wrong in google-play-services and admob configuration.
So i've gotten jQuery 1.8.2 working with Phonegap no problem, but as soon as I add in jquery.mobile.1.2.0, the default Phonegap example breaks. the deviceready event stops firing.
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<input type="text" name="firstname" id="firstname" />
Say Hello
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function displayHello(){
var name = document.getElementById("firstname").value;
navigator.notification.alert("My name is "+ name);
}
</script>
</body>
</html>
index.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
So this is the default code example Phonegap comes with, and i've only added
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
in index.html.
Not sure what is going on as it seems other people have gotten Phonegap and jQuery Mobile to work just fine together.
I've tried dumbing the js down and just calling the deviceready event.
And I've tried following this solution and the other posted below it to no avail.
Correct way of using JQuery-Mobile/Phonegap together?
But the same thing happens. With jQuery Mobile deviceready never fires, without it, it fires fine.
Any help would be appreciated! Maybe i'm just missing something simple here.
I have also tried different version combinations of jQuery and jQuery Mobile with no luck.
I was running the Android Phonegap version and cordova-2.3.0. I recently tried upgrading to cordova-2.4.0 to see if that would help but nothing...
Update: No errors are thrown in the LogCat/DDMS
I had the same issue a while ago and I ended up throwing out the launcher of phonegap.
I suggest doing it like so :
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// your functions here
}
</script>
I hope it helps
Try putting scripts above jquery mobile library.:
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function displayHello(){
var name = document.getElementById("firstname").value;
navigator.notification.alert("My name is "+ name);
}
</script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
updates:
<script type="text/javascript">
$(document).on('pageinit', function($){
app.initialize();
});
</script>
I noticed that the browser does not work, but using the emulator or PhoneGap build ondeviciready event and the same example works!
I had the exact same problem even after adding the libraries to the head, but as soon as I moved cordova.js below jquery-mobile, deviceready started firing again.
<head>
<script type="text/javascript" src="jqueryMobile/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</head>