How to resolve indefinite loading spinner from recording a video using XRExtras.MediaRecorder

I have a project that uses the MediaRecorder like so:

      XRExtras.MediaRecorder.initRecordButton()  // Adds record button
      XRExtras.MediaRecorder.initMediaPreview()  // Adds media preview and share
      XRExtras.MediaRecorder.configure({
        watermarkImageUrl: require('./assets/Logo.png'),  // Adds watermark to photo/video
        watermarkMaxWidth: 100,
        watermarkMaxHeight: 15,
        watermarkLocation: 'bottomMiddle',
      })

      XR8.MediaRecorder.configure({
        maxDurationMs: 15000,
        enableEndCard: false,
      })

Im running into a bug where, on some devices i get an indefinite loading spinner around the recording button, which doesn’t allow me to save the recorded video, but on other devices the recording works just fine. I’m not sure how to diagnose this issue and was looking for some insight.

2 Likes

Hello @Sina_Amini are you receiving any console errors or logs on devices where it loads forever?

What specific devices are these? What are the length of the videos? Do very short videos load infinitely as well or is it just long ones? more information would be helpful.

If longer videos cause the problem you may need to reduce the maxDurationMs

Tha max duration of the videos currently is 15 seconds. The bug happens on the devices regardless of how long they record for, whether its 1 second or the full 15 seconds. The devices that get the bug so far are an iphone 15 pro and an iphone 13 pro max. I don’t have any console errors or logs from these devices but i can try to get some

Can you repro this in our default sample project here?

Or is it project specific to yours?

The devices that experienced this bug also experience it on that default sample project.

Here is a test recording from one of our devs running ios 17.4 with an iPhone 15 pro, experiencing the issue on the above sample project:

The video in my previous comment was from a different sample project. We re-recorded a test using the sample project you linked. Same phone and issue as before.

Hello @Sina_Amini thank you for your patience here. We have reported this to the internal team and will keep you updated.

Hi @Ian has there been any updates on the issue?

I got this same issue as well any incoming updates @Ian

The team has pushed a fix to XRExtras that should resolve the issue. It’s currently in the beta version - if you are using the Cloud Editor, please update head.html and add :beta to the xrextras meta tag:

Example (Cloud Editor)

<meta name="8thwall:package" content="@8thwall.xrextras:beta">

If you are self-hosting, you’d append -beta to your xrextras script tag:

<script src="//cdn.8thwall.com/web/xrextras/xrextras-beta.js"></script>

We’ll look to promote the fix to the release version of xrextras soon, but you can test/verify the fix in the beta channel for now. Let us know if this resolves your issue.

1 Like

Thanks @Ian! I updated to the beta version and it works!

2 Likes