Audio/permissionsissues with whereby/core in Next.js

[BarbaraRM]

We’re integrating @whereby.com/core into a Next.js (React 18 + TypeScript) app with a custom pre-join + in-call media UI (device selection, permission validation, noise reduction toggles, etc.).

• We’re seeing inconsistent behavior across browsers, mainly:
• Users can’t access microphone audio even when devices are detected.
• Permission state handling is unreliable/stuck in some browsers (especially Safari, Edge mobile, DuckDuckGo, brave).
• Safari often requires separate mic/camera permission prompts, which complicates validation.

We understand many of these issues likely need to be handled at the UI on our side. We’d appreciate any guidelines / recommended patterns / example implementation for:

• Correct permission + device readiness validation (blocked vs prompt vs granted)
• Switching mic/camera/speaker devices during the meeting using whereby/core APIs
• Managing noise reduction / audio constraints behavior consistently across browsers

Any pointers or documentation would be very helpful.

[thyal]

Hi @BarbaraRM!

There's a couple of things here, I'll try to respond to each one.

Is there any reason you are using @whereby.com/core instead of @whereby.com/browser-sdk? The browser-sdk has react hooks, and we also have a nextjs example here: https://github.com/whereby/sdk/tree/main/apps/nextjs-example

1. In terms of permissions, I agree that we can improve our documentation/examples on this area. I've logged that as an internal ticket.

For now though, here is some examples on how to handle permission and errors.
You can subscribe to localMediaStartError like so:

  localMedia.subscribeLocalMediaStartError((error) => {
    if (error?.name === 'NotAllowedError') {
      // User denied permission (blocked state)
    } else if (error?.name === 'NotFoundError') {
      // No device available
    } else if (error?.name === 'NotReadableError') {
      // Device in use by another app
    }
  });

alternatively, you can subscribe to microphone or camera errors specifically:

  localMedia.subscribeCameraDeviceError((error) => { /* handle */ });
  localMedia.subscribeMicrophoneDeviceError((error) => { /* handle */ });

2. For device switching during a call, you can use:

  localMedia.setCameraDevice(deviceId);
  localMedia.setMicrophoneDevice(deviceId);
  localMedia.setSpeakerDevice(deviceId);

Available devices are in localMedia.getState().cameraDevices, microphoneDevices, and speakerDevices.

3. For noise reduction, we currently don't support this (other than browser defaults), but this is something we are planning to add support for in the near future.

Hopefully this helps a bit in debugging and error handling. For Safari, unfortunately Safari handles permissions a bit differently, and we do try to handle this directly in the SDK, but it might result in separate permission prompts for camera and microphone. I'll do a bit of debugging here and see if there is anything more we can do on our side.