I am trying to take pictures from an Ionic 4 PWA application.
I read this docs from Ionic team and implemented all the proposed steps... (https://capacitor.ionicframework.com/docs/guides/ionic-framework-app/)
The (weird) result can be seen in the picture below:
When the camera prompt seen in this picture is shown, Chrome console prints out an object called MediaStreamTrack with this values:
kind: "video"
id: "6250dfa4-d9aa-4a87-ab9f-ae085f929c3f"
label: "screen-capture-recorder"
enabled: true
muted: false
onmute: null
onunmute: null
readyState: "live"
onended: null
contentHint: ""
proto: MediaStreamTrack
When I click in the button to take picture, I can see this message:
Unable to take photo! DOMException: setOptions failed - pwa-camera.entry.js:259
I have used the sample code the Ionic team presented in the docs:
export class Tab2Page {
photo: SafeResourceUrl;
constructor(
private sanitizer: DomSanitizer
) { }
async takePicture() {
const image = await Plugins.Camera.getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.DataUrl,
source: CameraSource.Camera
});
this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
}
}
And...
<ion-content>
<img [src]="photo">
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
I changed everything in this code trying to figure out what is going wrong, but nothing seem to fix this behavyour.
Can anyone point me in the right direction?
My Chrome version is 79.0.3945.79
Thanks in advance.
Related
I am using react-paypal-js for the payments in the code as follows (Next.JS)
import { useEffect } from "react";
import {
PayPalScriptProvider,
PayPalButtons,
usePayPalScriptReducer
} from "#paypal/react-paypal-js";
import {
Badge,
Button,
Center,
Flex,
Heading,
Image,
Link,
Stack,
Text,
useColorModeValue,
} from '#chakra-ui/react';
const ButtonWrapper = ({ type }: any) => {
const [{ options }, dispatch] = usePayPalScriptReducer();
useEffect(() => {
dispatch({
type: "resetOptions",
value: {
...options,
intent: "subscription",
},
});
}, [dispatch]);
return (<PayPalButtons
createSubscription={(_data, actions) => {
return actions.subscription
.create({
plan_id: "P-3RX065706M3469222L5IFM4I",
})
.then((orderId) => {
return orderId;
});
}}
style={{
label: "subscribe",
color: "silver"
}}
/>);
}
export default function CheckoutPage() {
return (
<Center py={6}>
<Stack
borderWidth="1px"
borderRadius="lg"
w={{ sm: '100%', md: '540px' }}
height={{ sm: '476px', md: '20rem' }}
direction={{ base: 'column', md: 'row' }}
color={"white"}
// bg={useColorModeValue('white', 'gray.900')}
boxShadow={'2xl'}
padding={4}>
<Stack
flex={1}
flexDirection="column"
justifyContent="center"
alignItems="center"
p={1}
pt={2}>
<Heading fontSize={'2xl'} fontFamily={'body'}>
Checkout
</Heading>
<PayPalScriptProvider options={{
"client-id": "test",
components: "buttons",
intent: "subscription",
vault: true,
}}>
<ButtonWrapper type="subscription"></ButtonWrapper>
</PayPalScriptProvider>
</Stack>
</Stack>
</Center>
);
}
But due to dark mode on the website, the buttons appear to be really weird and I tried changing the color with classnames but it doesn't change to black.
I doubt if we can do anything to change the color but it seems as if this is not the issue if I plan to use the script in browser render as shown here
Please help me out on how can I change the background color to black
Updated image:
Using this Storybook demo as a simpler starting point, you can just add a black background div:
<div style={{ maxWidth: "750px", minHeight: "200px", backgroundColor: "black"}}>
<PayPalScriptProvider
options={{
"client-id": "test",
components: "buttons",
intent: "subscription",
vault: true,
}}
>
<ButtonWrapper type="subscription" />
</PayPalScriptProvider>
</div>
This seems to produce what you want. It's only viable for Subscriptions, not one-time checkouts, because for Subscriptions the black "Debit or Credit Card" button does not open an inline form.
For one-time payments, if including that black button the inline form it expands would have dark text that does not look correct on a dark background. The only viable option for a dark background site that includes this black button would be to put the buttons within a light-colored well, similar to the following (using plain HTML/JS to keep this example simple and universal, but the same can be done with react)
<script src="https://www.paypal.com/sdk/js?client-id=test¤cy=USD"></script>
<div id="paypal-button-container" style="background-color:white; padding:5px; border-radius:5px;"></div>
<script>
paypal.Buttons({}).render('#paypal-button-container');
</script>
On a dark background page, this gives:
I am new with ionic, I'm trying to integrate a google map in my application with ionic-native-googlemaps. In my browser it works fine but when I build for android or ios I have a blank page, and if I look at the console of google chrome at url chrome://inspect/device I don't have an error.
This is my typescript file
import {AfterViewInit, Component, OnInit} from '#angular/core';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
MarkerOptions,
Marker,
Environment, LatLng, GoogleMapOptions
} from '#ionic-native/google-maps/ngx';
import { ActionSheetController, Platform, AlertController } from '#ionic/angular';
#Component({
selector: 'app-favoris',
templateUrl: './favoris.component.html',
styleUrls: ['./favoris.component.scss'],
})
export class FavorisComponent implements OnInit, AfterViewInit {
map: GoogleMap;
constructor(
public alertController: AlertController,
public actionCtrl: ActionSheetController,
private platform: Platform
) {
}
ngOnInit() {
// await this.platform.ready();
// await this.loadMap();
}
ngAfterViewInit() {
this.platform.ready().then( () => {
this.loadMap();
});
}
loadMap() {
const map = GoogleMaps.create('map');
map.one( GoogleMapsEvent.MAP_READY ).then( ( data: any ) => {
const coordinates: LatLng = new LatLng( 45.649864, -73.584213 );
const position = {
target: coordinates,
zoom: 14
};
map.animateCamera( position );
const markerOptions: MarkerOptions = {
position: coordinates,
// icon: "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png",
title: 'Hello California',
draggable: true
};
const marker = map.addMarker( markerOptions )
.then( ( markesr: Marker ) => {
markesr.showInfoWindow();
});
});
}
}
And in my html file I have
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>List</ion-title>
</ion-toolbar>
<ion-toolbar class="new-background-color">
<ion-title class="text-center text-white">Favoris</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="map" style="height:100%;"></div>
</ion-content>
</ion-app>
I have searched for a solution everywhere but I have not found anything.
finaly i solve my problem, if someone have a same problem later,
just downgrade a version ionic-google maps and ionic core like this
"#ionic-native/core": "^5.24.0",
"#ionic-native/google-maps": "^5.0.0-beta.20",
After that look if your div with who contains google if is have a 500px height or more if it's ok, your map workly fine and you need to paid google map too.
you don't have to downgrade googleMap .
there is two way to solve this problem :
First you can put the tag DIV outside ion-content
<div id="map" style="height:100%;"></div>
<ion-content>
</ion-content>
OR you can add style css to put the content background transparant to overlaye the map screen.
In my case it was showing right on Android but no IOS. API key was ok. The map was there, under the html, but ion-content was not transparent.
Try adding this to your global scss or css file.
._gmap_cdv_ {
--background: transparent !important;
}
For iOS and Chrome, if your application has 'location' function. Apple is serious about location security aspect and Google Chrome is also somewhat serious about it. Hence:
Step 1. In your Mac enable 'Location Services' under 'Security and Privacy' :
Navigate to 'Settings'=>'Security & Privacy'=>Privacy Tab=>Select
Location Services ; click the padlock to make changes=>make sure
checkbox is checked for Google Chrome
Step 2. In Google Chrome go
to Settings=>privacy & Security=>make sure localhost:8100 is in the
'allowed' list=>click on it and on the next tab 'Reset permissions'
and select 'Allow' in the drop-down box for location property.
That should do it.
I want to move from 1 page to another page and for that I have write below code in home.page.html file.
<div style="display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px;">
<ion-button (click)="goToLoginPage()" size="large">Continue</ion-button>
</div>
Below is home.page.ts file code.
export class HomePage {
constructor(public navController: NavController) {
}
goToLoginPage(){
this.navController.navigateForward(LoginVCPage) // Getting error at this line.
}
}
Below is error screenshot.
Any help will be appreciated
In Ionic 4 using NavController is deprecated. See this statement from the Migration Guide:
In V4, navigation received the most changes. Now, instead of using
Ionic's own NavController, we integrate with the official Angular
Router.
Angular manages it's routes in a separate file, in Ionic 4 this file is named app-routing.module.ts. Every time you create a new page using ionic g page pagename the CLI will automatically create a new entry in the routes array in app-routing.module.ts.
So assuming you have created a test page and now have following routes in app-routing.module.ts:
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'test', loadChildren: './test/test.module#TestPageModule' },
];
You can move to another page by adding a href property to your button with the corresponding path (e.g. '/test') to the page you want to move to:
<ion-button href="/test">Move to test page</ion-button>
You could also use the routerLink directive as pointed out here:
<ion-button [routerLink]="['/test']">Move to test page</ion-button>
If you want/need to navigate programmatically you'll have to inject the router service into your page/component and call navigateByUrl like so:
constructor(private router: Router) { }
goToTestPage() {
this.router.navigateByUrl('/test');
}
Also see the Angular docs on routing and the Ionic v4 docs on this topic.
To add to #Phonolog 's answer you should also use routerDirection="forward" or whatever direction it may be.
I am completely new to Angularjs and haven’t been doing any code for ages. I started setting up my website again with Angularjs. I have a main page and an about page, to which the user gets via ngRoute on ng-click (or hitting space). Once on the about page, the user can go back by clicking somewhere on the page and so on.
App.js
var app = angular.module("MyApp", ["ngRoute"]);
app.config(function($locationProvider, $routeProvider) {
$routeProvider
.when("/teaser", {
controller:"teaserCtrl",
templateUrl:'teaser.html'
})
.when("/about", {
controller:"aboutCtrl",
templateUrl: "about.html"
})
.otherwise({
redirectTo:"/teaser"
})
});
app.controller("mainCtrl", function($scope, $http, $location) {
$scope.v = {
inverted: false,
display: true,
offwhite: true,
}
$scope.$on("space", function() {
if ($scope.v.teaser) {
$location.path("/about")
$scope.v.teaser = false
} else {
$location.path("/teaser")
$scope.v.teaser = true
}
$scope.$apply()
})
$scope.goHome = function(){
$scope.$broadcast("goHome")
}
});
app.directive("ngMobileClick", [function () {
return function (scope, clickElement, attrs) {
clickElement.bind("touchstart click", function (e) {
e.preventDefault();
e.stopPropagation();
scope.$apply(attrs["ngMobileClick"]);
});
}
}])
HTML
<body ng-controller="mainCtrl as main" ng-mobile-click="goHome()" ng-class="{inverted: v.inverted, bg: v.offwhite}" space>
<div class="content" ng-view ng-hide="v.display"></div>
//My body code
<script ng-init="sw = 'some website'; id="about.html" type="text/ng-template">
<div class="about">
<p class="text" ng-click="next(); $event.stopPropagation()">
<p>some text</p>
<br>
<a ng-href="{{mail}}" ng-click="$event.stopPropagation()">some address</a>
</p>
</div>
</script>
</body>
The code for the about page is written into a script and it has hyperlinks (ng-href). Now my issue: As you can see, I changed my ng-click to ng-mobile-click for the body-section. If I also change it in the script for the hyperlinks, something weird is happening which I can’t really figure out (links change to hover color, but still no redirection to the ng-href.
For the desktop version, the click is triggering ngRoute, but I can also click the links. For the mobile version this is not possible any more. Any ideas how I can fix this? I know, there is no hovering possible, but somehow I need to detect the hyperlinks also on mobile devices without being redirected to the main-page.
As I said: this is my first try with Angularjs and I haven’t done any code for a while, please be as clear as possible!
There is another controller for teaser/about which I haven’t put here, as well as the directive for the keyup.
Any ideas or suggestions? Thank you so much in advance!
I just setup flowplayer to play rtmp streams, but for some reason I need to click on the splash screen (Play stream text) to start the video even though I have autoPlay: true.
Is this a bug, or am I missing some configuration settings?
<!-- video -->
<div id="stream" class="stream" style="width: 1000px; height: 650px; display: block;">
Play stream text
</div>
<script type="text/javascript">
flowplayer("stream", "/flowplayer/flowplayer-3.2.7.swf", {
clip: {
url: 'mystream',
live: 'true',
provider: 'rtmp',
scaling: 'orig',
autoPlay: true
},
plugins: {
rtmp: {
url: '/flowplayer/flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://mms.mysite.com/live/'
}
},
canvas: {
backgroundGradient: 'none'
}
});
</script>
I guess the reason is that the so called splash screen should not be used as the way you suggest. If you put anything between the div, or as the documents to use , it always becomes a click-able area and the autoPlay true will come into place only when the player being really loaded (after you clicked).
I think the better way to go for the splashscreen would to use the recommended way in the document: http://flowplayer.org/documentation/skinning/