Ionic-native: Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided

[frankenState]

I'm submitting a but report for the plugin '@ionic-native/camera';
I followed thoroughly the documentation in the ionicframework native documentation but I always getting an error of 'Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided'

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Steps to reproduce:

First Command:
npm install -g ionic cordova

Second Command:
ionic start ionic-camera

Third & Fourth Command:

ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera

Import the camera in the app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Camera } from '@ionic-native/camera';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    Camera,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Edited the home.html in src/pages

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private camera: Camera) {

  }

  getImage() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {
     // imageData is either a base64 encoded string or a file URI
     // If it's base64 (DATA_URL):
     let base64Image = 'data:image/jpeg;base64,' + imageData;

     console.log(base64Image);

    }, (err) => {
     // Handle error
        console.log(err);
    });
  }

}

Added the the code in the home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <button (click)="getImage()" ion-button>Camera</button>
</ion-content>

COmmand to run the project:
ionic cordova run browser

Any help will be greatly appreciated.

[kuldeepaksharma]

@frankenState, Don't know the solution, but the issue appears to be due to a latest flash player update that came in on January 8th. I have certain applications which have the same problem running a flash camera plugin.
Downgrading the version of your chrome (below v71) should make this app run again. But, I don't know the solution.
HTH

[ntregillus]

just found this for chrome version 71:
https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems

net-net URL.createObjectURL is depreciated

[sarathi0333]

I too get the same issue. Kindly let me if anyone found a fix.

[ntregillus]

you can now use the srcObject property on the video element like the following:

navigator.mediaDevices
      .getUserMedia({ video: true })
      .then((stream) => {
        this.video.srcObject = stream;
        return this.video.play();
      })
      // Now the video is ready set this state so it's actually displayed
      .then(():any  => {
        this.state = Mode.CameraReady;
      })

      .catch((err) => {
        console.error(err);
        this.state = Mode.Error;
        this.errorMessage = 'There was a problem starting your camera';
      }); 

[tekdroid]

@ntregillus Have you submitted this as a PR to the https://github.com/apache/cordova-plugin-camera repo? Looks like they have quite a few old PRs still open, wonder if it's slowly being abandoned.

[ntregillus]

I have not... I was mainly doing some prototyping with the camera, then abandoned the project... I am unsure where to start to submit a PR for this one :)

[xgqfrms]

refs

https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL