'Video lag when using mediarecorder on chrome/opera only when touching screen

I have so far only been able to test this on my own phone (Android) so not sure if my phone is the problem, so if someone could replicate it that would already be helpful.

I am using MediaRecorder to record a video from the phone camera that I get by using getUserMedia. (see code below) The issue is that as soon as I start the recording and then touch the screen the framerate of the video drops to 0 (maybe 1) fps. If I don't touch the screen everything runs smoothly. If I touch the screen and the recording has stopped/not yet started then everything runs smoothly. This also only happens in Chrome and Opera, but not in Firefox (only browsers I have tested). It also only happens on my phone, in the browser on my pc it runs fine.

If someone knows how to fix this or if there is a way to avoid it, all help is appreciated. The app that I am using this is in supposed to mainly be used on phones and therefore I can't really ignore the problem.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script>
    let stream = null;
    let blobRecorded = null;
    let mediaRecorder = null;

    async function getCamera() {
      stream = null;
      let video = document.getElementById("testVideo");
      try {
        stream = await navigator.mediaDevices.getUserMedia({
          video: {
            facingMode: 'environment',
            width: { min: 1280, ideal: 1920, max: 4096 },
            height: { min: 720, ideal: 1080, max: 2160 },
            frameRate: 60,
          },
          audio: false

        });
        video.srcObject = stream;
        video.onloadedmetadata = () => {
          video.play();
        };
      } catch (err) {
        console.error(err);
      }
    }

    async function startRecording() {
      mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm" });
      mediaRecorder.addEventListener('dataavailable', ((e) => blobRecorded = e.data));

      mediaRecorder.addEventListener('stop', () => {
        const file = new File([blobRecorded], `video.webm`, { type: "video/webm", lastModified: new Date().getTime() });
        // ... do more with file 
      });

      mediaRecorder.start();
    }

    function stopRecording() {
      if (mediaRecorder != null) mediaRecorder.stop();
    }

  </script>
</head>

<body>
  <video id="testVideo"></video>
  <button onclick="getCamera()">Get Camera</button>
  <button onclick="startRecording()">Start recording</button>
  <button onclick="stopRecording()">Stop recording</button>
</body>

</html>

---- Edit ----
While I wasn't able to solve this problem I just wanted to give a quick update in case anyone else is dealing with this. The reason for the lag is this part:

width: { min: 1280, ideal: 1920, max: 4096 },
height: { min: 720, ideal: 1080, max: 2160 },

On my phone if I set the width and height to about 700 it still works without lag, but anything more than that results in the aforementioned lag.

I have "solved" the problem by just using an HTML input tag with the type file (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)

<input type="file" name="video" accept="video/*" capture='environment'></input>
javascripthtmlmediarecorder


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions