Black Screenshot Street View Android

[fadao23]

I'm submitting a ... (check one with "x")

• [ ] question
• [X] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [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 🙌🏼

[wf9a5m75]

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.

[fadao23]

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

[wf9a5m75]

https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/master/www/StreetViewPanorama.js#L289-L299

[wf9a5m75]

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;
});

[fadao23]

Thanks @wf9a5m75 !!

This works great 👌🏼