I have a problem I do not know how to solve, I do not know if it's a bug of 'azure media player' but when I view a streaming video shows me this error "'Uncaught Error: cannot find the request in the request queue azuremediaplayer.min.js (2,338210)' but if I see a local video as a mp4 does not give me any problems. What could be the problem? Excuse my English.
By the way, I'm using Ripple to emulate Android, if I visualize from a physical device does not give me problems.
Thanks
(function () {
"use strict";
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
var myOptions = {
"nativeControlsForTouch": false,
controls: false,
autoplay: false,
width: "640px",
height: "360px",
poster: "",
logo: {
enabled: false
}
}
var myPlayer = amp("azuremediaplayer", myOptions);
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
//var element = document.getElementById("deviceready");
//element.innerHTML = 'Device Ready';
//element.className += ' ready';
myPlayer.src([
{
//"src": "movie/Rutina.mp4",
//"type": "video/mp4"
"src": "http://amssamples.streaming.mediaservices.windows.net/830584f8-f0c8-4e41-968b-6538b9380aa5/TearsOfSteelTeaser.ism/manifest",
"type": "application/vnd.ms-sstr+xml",
"protectionInfo": [
{
"type": "AES",
"authenticationToken": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cm46bWljcm9zb2Z0OmF6dXJlOm1lZGlhc2VydmljZXM6Y29udGVudGtleWlkZW50aWZpZXIiOiI5ZGRhMGJjYy01NmZiLTQxNDMtOWQzMi0zYWI5Y2M2ZWE4MGIiLCJpc3MiOiJodHRwOi8vdGVzdGFjcy5jb20vIiwiYXVkIjoidXJuOnRlc3QiLCJleHAiOjE3MTA4MDczODl9.lJXm5hmkp5ArRIAHqVJGefW2bcTzd91iZphoKDwa6w8"
}
]
}
]);
myPlayer.autoplay(true);
};
function onPause() {
// TODO: This application has been suspended. Save application state here.
};
function onResume() {
// TODO: This application has been reactivated. Restore application state here.
};
} )();
<!DOCTYPE html>
<html>
<head>
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<meta http-equiv="Content-Security-Policy" content="default-src http://amp.azure.net 'self' data: gap: blob: https://ssl.gstatic.com http://amssamples.streaming.mediaservices.windows.net 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self'; media-src http://localhost:4400/ blob:">
<title>Mobile</title>
<link href="lib/ionic/release/css/ionic.css" rel="stylesheet" />
<link href="http://amp.azure.net/libs/amp/1.6.3/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
<script src="http://amp.azure.net/libs/amp/1.6.3/azuremediaplayer.min.js"></script>
</head>
<body>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"></video>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script src="lib/ionic/release/js/ionic.bundle.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Unfortunately, using an emulator for video playback can be an unreliable testing scenario. The issue you're seeing could very well be unique to the emulator itself, which can be dependent on the performance of the machine your emulator is running on as well as the capabilities of the emulator.
You are better of testing your code on a physical device, especially if the issue is not occurring on it.
Related
I am working on building out a simple web map in Folium that adds the functionality of a Mapbox geocoder to the index.html file that is generated from my map script. From what I can find, I don't see any way to add a geocoder directly in my Python script (which uses the Folium library), so this seems just about the only way to accomplish this.
I've looked at Mapbox's documentation, and while I'm very new to Javascript, I'm hoping that I can just copy & paste pieces of the Javascript in the referenced documentation directly into the index.html file that's spit out.
Here's my Python script that initially creates the map in Folium. It only contains a single marker in downtown Atlanta with a Layer Control box in the top-left corner of the map. For the sake of brevity, I've made this map as practically stripped down as possible:
# dependencies
import folium
# Declare map variable
m = folium.Map(location=[33.756290532017985, -84.39698869622109],
tiles=None,
zoom_start=11,
zoom_control=False)
# Mapbox street layer
folium.TileLayer(
tiles = 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}#2x?access_token=pk.eyJ1Ijoid3dyaWdodDIxIiwiYSI6ImNsNmNnbW92cjF3YXczY281NXRua25xMHgifQ.1Xa_wr0DUhuoNGP0Cbe5Kg',
attr = 'Mapbox',
name = 'Streets',
overlay = False,
control = True,
show = True,
min_zoom = 11,
max_zoom = 30
).add_to(m)
# Add marker in Atlanta
folium.Marker([33.74908343904121, -84.38812827298649]).add_to(m)
# Add in layer control
folium.LayerControl(position='topleft').add_to(m)
m.save("../index.html")
The resulting index.html (when opened in VSCode) looks very ugly. To my eyes, it's practically unreadable but nevertheless reproduced here:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/leaflet#1.6.0/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet#1.6.0/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_c8f6a7d59d7e0d75d463b5df65347ca6 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
</head>
<body>
<div class="folium-map" id="map_c8f6a7d59d7e0d75d463b5df65347ca6" ></div>
</body>
<script>
var map_c8f6a7d59d7e0d75d463b5df65347ca6 = L.map(
"map_c8f6a7d59d7e0d75d463b5df65347ca6",
{
center: [33.756290532017985, -84.39698869622109],
crs: L.CRS.EPSG3857,
zoom: 11,
zoomControl: false,
preferCanvas: false,
}
);
var tile_layer_57433496d1534b262b2ead21a58cd5f2 = L.tileLayer(
"https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}#2x?access_token=pk.eyJ1Ijoid3dyaWdodDIxIiwiYSI6ImNsNmNnbW92cjF3YXczY281NXRua25xMHgifQ.1Xa_wr0DUhuoNGP0Cbe5Kg",
{"attribution": "Mapbox", "detectRetina": false, "maxNativeZoom": 30, "maxZoom": 30, "minZoom": 11, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_c8f6a7d59d7e0d75d463b5df65347ca6);
var marker_c56903aa791d9f42199fb8edd7fbf18e = L.marker(
[33.74908343904121, -84.38812827298649],
{}
).addTo(map_c8f6a7d59d7e0d75d463b5df65347ca6);
var layer_control_31fb53235cbe88479bc47b285b10ca9c = {
base_layers : {
"Streets" : tile_layer_57433496d1534b262b2ead21a58cd5f2,
},
overlays : {
},
};
L.control.layers(
layer_control_31fb53235cbe88479bc47b285b10ca9c.base_layers,
layer_control_31fb53235cbe88479bc47b285b10ca9c.overlays,
{"autoZIndex": true, "collapsed": true, "position": "topleft"}
).addTo(map_c8f6a7d59d7e0d75d463b5df65347ca6);
</script>
Once I get to this step, I've tried nearly every possible combination of copy/pasting in the various bits of JS from the Mapbox geocoder documentation (referenced at the beginning of this post), but I'm not sure where exactly it goes or if this is even possible to do. I've made sure to properly change all the necessary references to the map object once I copy it over, but I can't get it working properly. That is, I can't get the index.html file that is generated from my Python script to correctly show an autofill geocoder box (similar to what you get with Google Maps). The error that I get most often from my browser console is RangeError: Maximum call stack size exceeded
Is it even possible to "add in" a Mapbox geocoder to a Folium map that's built in a Python environment? If not, is there a better way to build out a Folium map in Python but still manage to incorporate some of the really cool Mapbox features, like the geocoder?
You can't do what you're trying to do.
Folium generates code for Mapbox.js, which is based on Leaflet.
Mapbox-GL-Geocoder, as its name suggests, works with Mapbox GL JS.
Different, incompatible libraries.
I'm trying to get some Google Ads to play nice. Basically, we have some inline ads that we display between listings:
<div class="listing-ad" id="ad<%row_num%>">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1210636681400112"
data-ad-slot="2068176827"
data-ad-format="horizontal"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
These work ok. We load the Google scripts in requireJS using:
"google_ads": "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1210636681400112",
We now want to include an "anchor" ad at the bottom of the page. As per the article ( https://support.google.com/adsense/answer/7478225?hl=en ), I'm adding this near the end of my page:
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1210636681400112",
enable_page_level_ads: true,
overlays: {bottom: true}
});
When running their example, the ad shows but I get:
{ message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.",
If I comment out enable_page_level_ads: true, the ad still shows (but not at the bottom), and I then get a new error message:
message: "adsbygoogle.push() error: All ins elements in the DOM with
class=adsbygoogle already have ads in them.",
I'm at my witts end as to what else to try. I guess ideally, I'd like an <ins> HTML option where I can pass data-ad-overlays="bottom" as an option (vs doing it as a <script>).
I've even tried passing the options via:
(adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-1210636681400112", enable_page_level_ads: true, overlays: { bottom: true } })
Yet still no joy.
Is this possible? Am I missing something stupid? I feel like I've been chasing my tail on this for hours now!
Bottom anchor ads aren't well supported today. There is no good way to force them as top anchors are default and AdSense frontend doesn't provide way to switch to bottom. The article you provided is outdated and needs to be revamped or more likely removed. But if you do want to force bottom anchors you can try the following snippet:
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1234567891234567",
enable_page_level_ads: true,
overlays: {bottom: true}
});
</script>
</head>
Note that web property id is no longer present in the tag and that makes the difference. Though by removing web property id you might miss on some other optimizations.
I have a fully functional App on Android and IOS, and now I want to have a web version taking advantage of Flutter's cross-platform features.
To do this, I created a "Chrome Device" from VS Code and I did the Firebase App registration within the Firebase console. In the index.html I included the configuration as explained in Flutter Firebase Installation Web ...
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="appname">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>AppName</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "xxx", //with my particular values
authDomain: "xxx",
databaseURL: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx",
appId: "xxx",
measurementId: "xxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig); //
</script>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing || reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
</body>
</html>
When I run the App in Chrome I get an Oh No! Error 5 in the browser and no error messages in the VS Code console.
If I include an await in the Firebase initialization line in index.html:
await firebase.initializeApp(firebaseConfig);
Again the Oh No! Error 5, but when I reload the page I get the following error on web_entrypoint.dart:
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created -
call Firebase App.initializeApp() (app/no-app).
at Object.u [as app] (https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js:1:18836) at
Object.getApp
(http://localhost:65003/packages/firebase_database_web/src/interop/app.dart.lib.js:630:89)
//... more debug lines
In my lib/src/pages/main.dart, which works fine on IOS and Android, I'm making sure to initialize the Firebase services first ...
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
final prefs = PreferenciasUsuario();
await prefs.initPrefs();
await PushNotificationsProvider.initializeApp();
FirebaseDatabase database;
database = FirebaseDatabase.instance;
database.setPersistenceEnabled(true);
database.setPersistenceCacheSizeBytes(10000000);
runApp(MyApp());
}
I've read most of the answers on the subject on StackOverflow, but they haven't worked for me, I don't know if it's because I'm doing it particularly with Flutter.
How can I resolve the No Firebase App '[DEFAULT]' error and get my application run on the web?
I have this on my server
app.get('*', function(req, res) {
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
const body = renderToString(<RouterContext {...renderProps} />)
res.send(`
<!DOCTYPE html>
<html>
<head>
<link href="//cdn.muicss.com/mui-0.6.5/css/mui.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="root">${body}</div>
<script defer src="assets/app.js"></script>
</body>
</html>
`)
})
})
And this on the client side
import { Router, hashHistory, browserHistory, match } from 'react-router'
let history = browserHistory
//client side, will become app.js
match({ routes, location, history }, (error, redirectLocation, renderProps) => {
render(<Router {...renderProps} />, document.getElementById('root'))
})
the problem
It works only when I remove the (let history = browserHistory), but it adds the /#/ hash prefix to my url(which I don't want to happen).
When I leave the let (history = browserHistory) there, it throws an error
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) < ! -- react-empty: 1 -
(server) < section data-reactro
The error message is pretty clear, however, I don't understand why it works with the hashHistory but fails with the browserHistory
version incompatibility issue
solution
{
"history": "^2.1.2",
"react-router": "~2.5.2"
}
links:
https://github.com/reactjs/react-router/issues/3003
I have created the LinkedIn app and retrieved the client id and client_secret.
Now inside the integrated api of OAuth.io created an api and have added the keys and permission scope.
I want to run this project using Ionic Framework. What should be done to achieve it.
P.S: I am new to Ionic Framework and OAuth.io. So please don't mind my style of asking the question.
whole index.html:
<!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">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="js/ng-cordova-oauth.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button class="button" ng-click="linkedInLogin()">Login via LinkedIn</button>
</body>
</html>
whole app.js:
angular.module('starter', ['ionic', 'ngCordova', 'ngCordovaOauth'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller("MainCtrl", function($scope, $cordovaOauth) {
document.addEventListener( "deviceready", onDeviceReady );
function onDeviceReady( event ) {
// on button click code
$scope.linkedInLogin = function(){
OAuth.initialize('07IxSBnzVoGGQL2MpvXjSYakagE')
OAuth.popup('linkedin').done(function(result) {
// Here you will get access token
console.log(result)
result.me().done(function(data) {
// Here you will get basic profile details of user
console.log(data);
})
});
};
}
});
Please go through the steps and below code:
1) create a project from terminal as ionic start linkedinlogin blank
2)cd linkedinlogin project
3)Add the required platform in terminal as ionic add platform ****
4)Add the ng-cordova.min.js file above the cordova.ja file in our project
5)Install ng-cordova-oauth as bower install ng-cordova-oauth -S
6)Then include ng-cordova-oauth.min.js file in index.html
7)Inject 'ngCordova' and 'ngCordovaOauth' as dependency in app.js file
8)In index.html create a button as login via linkedin
9)In app.js create a Controller with below code
10)Please update your cordova platform if the above plugin doesn't work
$cordovaOauth.linkedin(clientId, clientSecret, ['r_basicprofile', 'r_emailaddress']).then(function(success){
//Here you will get the access_token
console.log(JSON.stringify(success));
$http({method:"GET", url:"https://api.linkedin.com/v1/people/~:(email-address,first-name,last-name,picture-url)?format=json&oauth2_access_token="+success.access_token}).success(function(response){
// In response we will get firstname, lastname, emailaddress and picture url
// Note: If image is not uploaded in linkedIn account, we can't get image url
console.log(response);
}, function(error){
console.log(error);
})
}, function(error){
console.log(error);
})
I thing you read the ngCordova plugins.
Using oauth.io i have implemented login via linkedin:
Please follow the steps:
1. Create a app in oauth.io and get public key.
2. Click on the Integrated APIs menu from the left side bar.
3. Now click on ADD APIs green button on the right top corner.
4. Now Search and select LinkedIn.
5. Now add the Client id and Client Secret in keys and permission scope.
6. use below command to add plugin to project:
cordova plugin add https://github.com/oauth-io/oauth-phonegap
7. For controller code check below code.
document.addEventListener( "deviceready", onDeviceReady );
function onDeviceReady( event ) {
// on button click code
$scope.linkedInLogin = function(){
OAuth.initialize('your public key')
OAuth.popup('linkedin').done(function(result) {
// Here you will get access token
console.log(result)
result.me().done(function(data) {
// Here you will get basic profile details of user
console.log(data);
})
});
};
}
Hope it may be help you..