GetUserMedia preview video stuck on the first frame

Question

I am having an issue with the preview video that I am creating from getUserMedia. The video would connect, but only show the first frame or two and alternate between them rapidly. I can still get the picture of what the camera is facing at when using ImageCapture, but the preview window stays stuck on the first frame.

I have tried running the stop/play functions to restart the video, and reconnecting the srcObject several times but nothing has worked so far.

I am building our app using Angular 9 and Cordova. The preview window would work the first time I freshly install the app, but once I close it and reopen it, it would refuse to show the preview window properly again. Somehow this problem only occurrs on the Galaxy Active Tab 2, and I have tested on several such tablets. I have tested it on Galaxy Active Tab 1, an LG phone, Samsung S10+ and a few more devices, as well as on the PC with a webcam, where it works flawlessly every time.

Here is a short video of what the preview looks like when it is stuck: https://i.stack.imgur.com/mjIVW.jpg

@ViewChild('video') video: ElementRef;

navigator.mediaDevices.getUserMedia({ video: { facingMode: { exact: 'environment' } }, audio: false })
      .then(async stream => {
        // 1 second await due to crbug.com/711524
        await new Promise(resolve => setTimeout(resolve, 1000));

        try {
          this.spinnerService.isLoading.next(false);

          this.stream = stream;
          this.track = stream.getVideoTracks()[0];

          this.imageCapture = new ImageCapture(this.track);

          this.streaming = true;
          this.cdr.detectChanges();

          this.video.nativeElement.srcObject = stream;
          this.video.nativeElement.play();

        } catch (error) {
          this.cameraIsAvailable = false;
          this.cdr.detectChanges();
          console.log('Couldn\'t get the image capture settings. API is not supported by this browser most likely!');
        }
      }).catch((err) => {
        console.log('An error in getUserMedia() occurred: ' + err);
      });

        <video #video id="video" [ngStyle] ="image ? {'display': 'none'} : {'display': 'block'}"
            style="width: 100%; height: auto; max-height: 70vh;" >
        </video>

Any help would be greatly appreciated!

score 1 · Answer 1 · edited Mar 23 '21 at 19:32

Had quite a similar problem and the solution for me was one of the most weird..

Verify that your <video> tag does not appear within another <video> tag OR, and here comes the most weird part, not in any other tag (even your custom one) that has video in its name. In my case I have a component that wrapped all the logic for video capturing that had a name of ql-video. I've renamed it to ql-stream and it started to work.. The idea came from this answer.
Also I had to use <video element reference>.play(), i.e. myVideoTag.play(). My simple solution did not require this play() call but a more enhanced one somehow did not work without it and was stuck on the first frame the stream has captured like in your question. And here the idea came from your code so +1 for it.

GetUserMedia preview video stuck on the first frame

1 Answers1