navigator.mediaDevices.nativeMediaDevices.getUserMedia rejects

[danhab99]

Expected Behaviour

I'm not quite sure

Actual Behaviour

Throws error:

Video recorder error DOMException: Could not start source

Reproduce Scenario (including but not limited to)

Repo link

navigator.mediaDevices.nativeMediaDevices.getUserMedia({
        'audio': false,
        'video': true
      }).then(function(mediastream) {
        var options = { mimeType: 'video/mp4' };
        this._mediaRecorder = new navigator.MediaRecorder(mediastream, options);
        this._startF = this._mediaRecorder.start;
        this._stopF = this._mediaRecorder.stop;
      }).catch(err => console.error("Video recorder error", err));

Steps to Reproduce

1. Clone repo
2. Do ionic cordova run android
3. Go to chrome://inspect/#devices and click on "Ionic App"
4. Check console to find error

Platform and Version (eg. Android 5.0 or iOS 9.2.1)

Android 7.0

(Android) What device vendor (e.g. Samsung, HTC, Sony...)

Samsung Galaxy S6

Cordova CLI version and cordova platform version

cordova --version                                    8.0.0
cordova platform version android                     8.0.0

Plugin version

cordova-plugin-android-permissions 1.0.0 "Permissions"
cordova-plugin-camera 4.0.2 "Camera"
cordova-plugin-camera-preview 0.9.0 "cordova-plugin-camera-preview"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.1 "Device"
cordova-plugin-device-motion 1.2.5 "Device Motion"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-gyroscope 0.1.4 "Device Gyroscope"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-media-capture 3.0.1 "Capture"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"
es6-promise-plugin 4.2.2 "Promise"
phonegap-plugin-media-stream 1.2.1 "MediaStream"

Sample Code that illustrates the problem

this.platform.ready().then(() => {
      console.log("Video camera platform ready");
      navigator.mediaDevices.nativeMediaDevices.getUserMedia({
        'audio': false,
        'video': true
      }).then(function(mediastream) {
        var options = { mimeType: 'video/mp4' };
        this._mediaRecorder = new navigator.MediaRecorder(mediastream, options);
        this._startF = this._mediaRecorder.start;
        this._stopF = this._mediaRecorder.stop;
      }).catch(err => console.error("Video recorder error", err));
    });

Logs taken while reproducing problem

Video recorder error DOMException: Could not start source

[mhartington]

Looks like your code has a few issues with it. I have the following demo working well using this.

export class HomePage {
  constructor(public navCtrl: NavController, public plt: Platform) {}
  @ViewChild('video') video: ElementRef;
  mediaRecorder;
  chunks = [];
  getVideo() {
    this.plt.ready().then(() => {
      navigator.mediaDevices
        .getUserMedia({
          audio: true,
          video: true
        })
        .then(mediaStream => {
          this.video.nativeElement.srcObject = mediaStream;
          this.video.nativeElement.onloadedmetadata = e =>
            this.video.nativeElement.play();
          // var options = { mimeType : 'video/quicktime'};
          this.mediaRecorder = new MediaRecorder(mediaStream);

          this.mediaRecorder.start();
          this.mediaRecorder.onstop = e => {
            this.video.nativeElement.srcObject = null;
            this.video.nativeElement.onloadedmetadata = e =>
              this.video.nativeElement.pause();

            let blob = new Blob(this.chunks);
            this.chunks = [];
            let src = URL.createObjectURL(blob);

            this.video.nativeElement.src = src;
          };
          this.mediaRecorder.ondataavailable = e => {
            this.chunks.push(e.data);
          };
        });
    });
  }

  stopVideo() {
    this.mediaRecorder.stop();
  }
}

[danhab99]

@mhartington your solution works. Thank you so much for this, I have been struggling with this problem for two weeks.

[ChristopherTotty]

Same here! I have been working on a side project for a week trying to get mic input with a number of different plugin/permission methods that led to the same error. Switching to this plugin worked!

[danhab99]

I spoke too soon. I tried your solution here and ran it on my phone using ionic cordova run android and I got

ERROR Error: Uncaught (in promise): NotReadableError: Could not start source
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:4973)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at <anonymous>

Is there something I'm doing wrong? Do I need to do something special with permissions? Because I thought I handled it here.

[mhartington]

You're demo app doesn't throw that error for me.

I dont think this is an issue with the plugin, rather your app/code. Let's move the conversation off to the Ionic slack for now, as the plugin is working just fine.

[danhab99]

Link to conversation for the next time I screw up

[ChristopherTotty]

And the important part of that link for folks that wander in later:

danhab99 [3 days ago] In src/home.ts I use the Camera Preview plugin to see the camera, but it locks up the camera so PhoneGap Media Stream can't get a stream going

When I stopped Camera Preview before I started recording it worked just fine