Black Screenshot Street View Android
fadao23 opened this issue · comments
I'm submitting a ... (check one with "x")
- question
- any problem or bug report
- feature request
If you choose 'problem or bug report', please select OS: (check one with "x")
- Android
- iOS
- Browser
cordova information:
com-badrit-base64 0.2.0 "Base64"
com.darktalker.cordova.screenshot 0.1.5 "Screenshot"
cordova-android-support-gradle-release 3.0.1 "cordova-android-support-gradle-release"
cordova-plugin-add-swift-support 2.0.2 "AddSwiftSupport"
cordova-plugin-badge 0.8.8 "Badge"
cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-crop 0.3.1 "CropPlugin"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-fcm-with-dependecy-updated 4.1.1 "Cordova FCM Push Plugin"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 3.2.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-nativegeocoder 3.2.2 "NativeGeocoder"
cordova-plugin-privacyscreen 0.3.1 "PrivacyScreenPlugin"
cordova-plugin-purchase 10.0.1 "Purchase"
cordova-plugin-screen-orientation 3.0.2 "Screen Orientation"
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-telerik-imagepicker 2.3.3 "ImagePicker"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-sqlite-storage 4.0.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
es6-promise-plugin 4.2.2 "Promise"
package.json
"@ionic-native/core": "^5.27.0",
"@ionic-native/google-maps": "^5.5.0",
Current behavior:
Actually in my app, the user can make a screenshot inside the app todo some reports. So in the iOS plateforme I can make the screenshot. But when I try in the Android I got this :
Expected behavior:
The user can take a screen of the app and user the screen to make some annotations.
Related code, data or error log (please format your code or data):
This is the streetView HTML Page
<ion-content>
<img class="target" src="../../../assets/imgs/pinpoint.png">
<div class="pano" id="map_canvas1" #map_canvas1></div>
<ion-fab style="margin-bottom: 100px;" vertical="bottom" horizontal="start" slot="fixed" [hidden]="hide">
<ion-fab-button color="danger" (click)="cancel()">
<ion-icon name="close"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-fab style="margin-bottom: 100px;" vertical="bottom" horizontal="end" slot="fixed" [hidden]="hide">
<ion-fab-button (click)="takeScreen()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
StreetView TS Page :
import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Platform, LoadingController, ActionSheetController, ModalController, AlertController, NavController } from '@ionic/angular';
import {
GoogleMaps,
StreetViewPanorama
} from '@ionic-native/google-maps/ngx';
import { Environment, GoogleMapOptions, GoogleMapsEvent, MyLocation, GoogleMapsAnimation, ILatLng, StreetViewCameraPosition } from '@ionic-native/google-maps';
import { Screenshot } from '@ionic-native/screenshot/ngx';
import { File } from '@ionic-native/file/ngx';
import { StreetViewService } from '../../services/streetView/street-view.service';
@Component({
selector: 'app-street-view',
templateUrl: './street-view.page.html',
styleUrls: ['./street-view.page.scss'],
})
export class StreetViewPage implements OnInit {
@ViewChild('map_canvas1', {static: true}) streeViewElement: any;
private panorama: StreetViewPanorama;
private isLoading: boolean;
private filename: string;
private coordinates: any;
public hide = false;
constructor(private file: File,
private router: Router,
private platform: Platform,
private navCtr: NavController,
private screenshot: Screenshot,
private changeRef: ChangeDetectorRef,
private activatedRoute: ActivatedRoute,
private streetViewService: StreetViewService,
private loadingController: LoadingController) {
this.activatedRoute.queryParams.subscribe(params => {
if (this.router.getCurrentNavigation().extras.state) {
this.coordinates = this.router.getCurrentNavigation().extras.state.coordinates;
}
});
}
ngOnInit() {
}
ionViewDidEnter() {
console.log("Stree View Welcome");
this.streeViewElement = this.streeViewElement.nativeElement;
this.streeViewElement.style.width = this.platform.width() + 'px';
this.streeViewElement.style.height = this.platform.height() + 'px';
this.panorama = GoogleMaps.createPanorama(this.streeViewElement, {
camera: {
target: {lat: this.coordinates.lat, lng: this.coordinates.lng}
}
});
this.panorama.one(GoogleMapsEvent.PANORAMA_READY).then(() => {
console.log('panorama is ready!');
});
let tmp = Math.floor(Math.random() * 10000000) + 1;
this.filename = tmp.toString();
}
takeScreen() {
this.present();
this.hide = true;
this.changeRef.detectChanges();
// Take a screenshot and save to file
this.screenshot.save('jpg', 80, this.filename).then(this.onSuccess, this.onError);
// Take a screenshot and get temporary file URI
this.screenshot.URI(80).then(this.onSuccessToBase64.bind(this), this.onError);
}
onSuccessToBase64(res) {
this.dismiss();
this.navCtr.back();
if (this.platform.is("iphone") || this.platform.is("ios")) {
const tmp = 'url';
let title = this.filename;
let description = '';
let size = 0;
let sample = 0;
let filename = this.filename;
let data = res.URI;
let url = res.URI;
let coordinates = {
lat : this.coordinates.lat,
lng : this.coordinates.lng
};
let obj = {filename, data, tmp, title, description, size, sample, url, coordinates};
this.streetViewService.putPicture(obj);
} else {
let path = 'file://' + res.filePath.substring(0, res.filePath.lastIndexOf('/') + 1);
console.log(path);
this.file.resolveDirectoryUrl(path).then(directoryEntry => {
this.file.getFile(directoryEntry, this.filename + '.jpg', {}).then(fileEntry => {
fileEntry.file(fileobj => {
this.file.readAsDataURL(path, this.filename + '.jpg').then(data => {
const tmp = 'url';
let title = ' ';
let description = '';
let size = 0;
if (fileobj.size !== undefined) {
size = fileobj.size;
}
let sample = 0;
let filename = this.filename;
let url = data;
let coordinates = {
lat : this.coordinates.lat,
lng : this.coordinates.lng
};
let obj = {filename, data, tmp, title, description, size, sample, url, coordinates};
this.streetViewService.putPicture(obj);
});
});
}, err => {
console.log("Error getFile");
console.log(err);
this.dismiss();
});
}, error => {
console.log("Error resolve Directory URL");
console.log(error);
this.dismiss();
});
}
}
cancel() {
this.navCtr.back();
}
onError(err) {
console.log(err);
this.dismiss();
}
async present() {
this.isLoading = true;
return await this.loadingController.create({
spinner: 'crescent',
translucent: true,
}).then(a => {
a.present().then(() => {
console.log('presented');
if (!this.isLoading) {
a.dismiss().then(() => console.log('abort presenting'));
}
});
});
}
async dismiss() {
this.isLoading = false;
return await this.loadingController.dismiss().then(() => console.log('dismissed'));
}
}
For the screenshot I use this plugin :
'@ionic-native/screenshot/ngx'
So why in the android plateforme I got black screen ?
Thanks 🙌🏼
As you may know, the map / street view are not a HTML element. It's a native view.
I don't know the details of the Screenshot plugin, but the screenshot plugin does not include the native view.
Please ask to the developer of the screenshot plugin for more details.
Thanks for the answer @wf9a5m75 !
Yes I doubted the problem was with the native view.
I tried another solution with the Street View Static API.
But the Static API use as parameter :
- position
- heading
- fov
- pitch
- radius
In all the event fonctions, the heading data is not able. Do you know how can I get this ?
And the events fonctions are just triggered once, when I move a second time the view, functions are not triggered. This is a normal behavior?
Thanks
The code should be like this:
panorama.on(GoogleMapsEvent.PANORAMA_CAMERA_CHANGE).subscribe(params: any[]) {
const pov: StreetViewCameraPosition = params[0];
const heading: number = pov.bearing;
const pitch: number = pov.tilt;
const zoom: number = pov.zoom;
});Thanks @wf9a5m75 !!
This works great 👌🏼