Remembering user's device selections for the next call

[prprabhu-ms]

Smooth device selection is a critical part of the user experience of a communications application. We have heard repeatedly from folks how important it is to reduce the friction in having the end-user all set up for their call, and we continue to innovate in this space.

Here, I show how you can save the user's device selection across application sessions. Both the CallComposite and CallWithChatComposite include a pre-call configuration screen where the user can select the audio and video devices they want to use for the call.

The call control bar also allows the user to switch devices during a call.

You can use the web localStorage API to save the user's device selections at the end of a call, and pre-populate the selections in future calls. Both CallAdapter and CallWithChatAdapter expose information about the user's selected devices, including an id that is stable across browser sessions.

Save selected devices when a call ends

The most straightforward way to create and adapter is to use the included React custom hooks.

function App(): JSX.Element {
 // ... setup code
 const callAdapter = useAzureCommunicationCallAdapter({ /* callAdapterArgs */ });
 // Create <CallComposite> etc.
}

The hooks include an optional callback to augment the created adapter. You can use that to subscribe to the 'callEnded' event that fires when the call ends.

function App(): JSX.Element {
  // ... setup code
  const callAdapter = useAzureCommunicationCallAdapter({ /* callAdapterArgs */ }, async (adapter) => {
    adapter.on('callEnded', () => {
      const cameraId = adapter.getState().devices.selectedCamera?.id;
      if (cameraId) {
        window.localStorage.setItem('selectedCamera', cameraId);
      }
    });
    return adapter;
  })
  // Create <CallComposite> etc.
}

Restore saved devices when starting a call

You can use the same post-creation callback to restore the selected devices in future sessions.

function App(): JSX.Element {
  // ... setup code
  const callAdapter = useAzureCommunicationCallAdapter({ /* callAdapterArgs */ }, async (adapter) => {
    adapter.on('callEnded', () => { /* save the selected camera */ });
    
    // Choose intended UX:
    // - await the returned promise to ensure camera is selected before the user gets to the configuration screen.
    //   Drawback: The configuration screen may take a bit longer to load.
    // - Don't await the returned promise to get to the configuration screen sooner.
    //   Drawback: Potential jank. The user might see the camera selection change in the UI.
    await restoreSelectedCamera(adapter);
    
    return adapter;
  })
   // Create <CallComposite> etc.
}

async function restoreSelectedCamera(adapter: CallAdapter): Promise<void> {
    const cameraId = window.localStorage.getItem('selectedCamera');
    if (!cameraId) {
      return;
    }
    
    // Query cameras to hydrate adapter state.
    await adapter.queryCameras();
    
    const selectedCamera = adapter.getState().devices.cameras.find((camera) => camera.id === cameraId);
    if (selectedCamera) {
      await adapter.setCamera(selectedCamera);
    }
}

Put it all together

The code showed how to save and restore the selected camera, but you can do the same for the selected microphone and speaker. This way, when the user joins their next call from your application, they can continue where they left off!