@uppy/webcam - Webcam recording freezes for 1-2 seconds during start of recording on Chrome M1 Mac

[rorito]

Bug description: When recording video using the webcam package, I frequently (but not every time) see the video preview playback freeze for 1-2 seconds, and the resulting recording video has frozen or stuck frames at the same location. Audio records fine during the whole recording process.

Browser: Chrome Version 103.0.5060.53 (Official Build) (arm64) OS Version: Mac OSX Version 12.3.1 Hardware: MacBook Pro (13-inch, M1, 2020). 16GB Memory. Webcams: Built-in Facetime HD and Logitech C200 (USB Camera VID:1133 PID:2083)

Steps to Reproduce:

1. Go to the Uppy dashboard example https://uppy.io/examples/dashboard/
2. Click Camera
3. FaceTime HD Camera will most likely be selected by default
4. Create some motion by waving at the camera
5. Click the Record Video button
6. Notice if preview player video freezes for ~1 second after clicking record. If it freezes, it will be visible during playback too. This only seems to happen at the start of recording.

Note: It's hard to reproduce this bug. Often times after recording a video where a freeze happens, if you re-record the freeze may not happen the second time. This also is not just an issue with the preview player. The resulting video (and the videos transcoded by Transloadit) have the frozen / stuck video frames as well.

Screencast / Example: https://www.youtube.com/watch?v=5RGdL97W3lI

Potential causes of the bug:

1. In Webcam.jsx startRecording(), there's a setInterval that gets called every 1000 ms to check on the current recording length. Maybe this is causing a delay, jank, etc.
2. There's also a dataavailable listenerthat gets setup at the start of recording
3. It could be some of the options that are passed to the MediaRecorder constructor
4. Some kind of race condition in calling MediaRecorder.start()
5. Some kind of bug in the Chrome media stack on Mac

[rorito]

I'm also able to reproduce this locally. Here's the uppy, webcam, and vue versions

"dependencies": {
        "@ionic/vue": "^6.0.8",
        "@ionic/vue-router": "^6.0.8",
        "@uppy/core": "^2.3.1",
        "@uppy/dashboard": "^2.3.0",
        "@uppy/robodog": "^2.8.1",
        "@uppy/transloadit": "^2.3.1",
        "@uppy/vue": "^0.4.8",
        "@uppy/webcam": "^2.2.1",
        "@uppy/xhr-upload": "^2.1.2",
        "arrive": "^2.4.1",
        "platform": "^1.3.6",
        "vue": "^3.2.25",
        "vue-facebook-login-component-next": "^1.0.4",
        "vue-router": "^4.0.12",
        "yup": "^0.32.11"
    },

[arturi]

Hi! Thanks for the detailed report. I see the issue on your screencast, but so far couldn’t reproduce locally. A few of us at Transloadit have also attempted on their machines and couldn’t catch the bug. I’ll keep trying, will utilize and M1 Mac tomorrow.

[arturi]

Hi, as mentioned in the support ticket, I was not able to reproduce on M1 Mac, loaded it as much as I could — no freeze. Which leads me to believe it could be an issue with your specific machine, unless you are able to reproduce on different devices?

[rorito]

Hi @arturi, I was able to reproduce the issue on a brand new, fresh out of the box M1 Mac

Browser: Chrome Version 103.0.5060.134 (Official Build) (arm64) OS Version: Mac OSX Version 11.2.2 Hardware: MacBook Pro (13-inch, M1, 2020). 16GB Memory Note: This is a late 2020 machine that was still new in box. I wanted to test first without running any OS updates. I'll run them now and provide feedback as well.

Screencast:

https://user-images.githubusercontent.com/930780/180361052-80a3c325-3ba5-456f-8f24-50f2d8885ef5.mov

I tested by continuously waving my hand while recording. This is a slight variation of this issue, as you can't see the freeze during the recording preview, but you can clearly see it during the playback.

Nothing else is running on this machine. I literally took it out of the box, setup OSX, installed Chrome, and then ran this test.

[LevanMamontTsiklauri]

Hey @rorito

Any news? meybe you have found any fixes?

[dhlanm]

I just wanted to add on that I have run into an issue like this with an entirely different package utilizing Chrome MediaRecorder with a preview window followed by recording. Extremely ephemeral, and only ever observed on M1 Macs, with identical freezing behavior to what @rorito is seeing. This makes me suspicious that there is a Chrome bug, although it's also possible that both implementations have the same subtle, self-made problem when switching from previewing the video to actually recording it. If you were ever able to figure out how to consistently reproduce or mitigate this, @rorito please let me know!

[cellis]

Have also experienced this with react-webcam... also on M1 Mac/Chrome. Doesn't seem to be just this package.

[ngaer]

We've been having a similar issue for a while now.

We utilize MediaRecorder directly, without any third-party library, so I don't think the issue is specific to this project. In our use case, we also show the preview of the media stream at first and then start recording after pressing a button. The freeze happens only once when you start first recording in a while. After this first freeze, you can record again and there would be no freezes anymore, even if you will reload the page or restart Chrome.

So to me, it feels like OS level issue. Probably when you doing first time recording some process starts up and maybe it causes the freeze. That could explain why it doesn't reproduce anymore after that even after restart of the browser.

Either case, I'd love to hear others' thoughts on this.