Use device labels rather than IDs in widget API
device IDs are different for each origin, so won't match up when passed in & out of widgets. Use the label instead. For https://github.com/vector-im/element-web/issues/23331
This commit is contained in:
		
					parent
					
						
							
								47f7e0e5a0
							
						
					
				
			
			
				commit
				
					
						4a5b69800c
					
				
			
		
					 2 changed files with 49 additions and 2 deletions
				
			
		| 
						 | 
				
			
			@ -18,6 +18,7 @@ import React, { useCallback, useEffect, useState } from "react";
 | 
			
		|||
import { useHistory } from "react-router-dom";
 | 
			
		||||
import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 | 
			
		||||
import { MatrixClient } from "matrix-js-sdk/src/client";
 | 
			
		||||
import { logger } from "matrix-js-sdk/src/logger";
 | 
			
		||||
 | 
			
		||||
import type { IWidgetApiRequest } from "matrix-widget-api";
 | 
			
		||||
import { widget, ElementWidgetActions, JoinCallData } from "../widget";
 | 
			
		||||
| 
						 | 
				
			
			@ -31,6 +32,7 @@ import { useRoomAvatar } from "./useRoomAvatar";
 | 
			
		|||
import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
 | 
			
		||||
import { useLocationNavigation } from "../useLocationNavigation";
 | 
			
		||||
import { useMediaHandler } from "../settings/useMediaHandler";
 | 
			
		||||
import { findDeviceByName } from "../media-utils";
 | 
			
		||||
 | 
			
		||||
declare global {
 | 
			
		||||
  interface Window {
 | 
			
		||||
| 
						 | 
				
			
			@ -96,8 +98,30 @@ export function GroupCallView({
 | 
			
		|||
      const onJoin = async (ev: CustomEvent<IWidgetApiRequest>) => {
 | 
			
		||||
        const { audioInput, videoInput } = ev.detail
 | 
			
		||||
          .data as unknown as JoinCallData;
 | 
			
		||||
        if (audioInput !== null) setAudioInput(audioInput);
 | 
			
		||||
        if (videoInput !== null) setVideoInput(videoInput);
 | 
			
		||||
 | 
			
		||||
        if (audioInput !== null) {
 | 
			
		||||
          const deviceId = await findDeviceByName(audioInput);
 | 
			
		||||
          if (!deviceId) {
 | 
			
		||||
            logger.warn("Unknown audio input: " + audioInput);
 | 
			
		||||
          } else {
 | 
			
		||||
            logger.debug(
 | 
			
		||||
              `Found audio input ID ${deviceId} for name ${audioInput}`
 | 
			
		||||
            );
 | 
			
		||||
            setAudioInput(deviceId);
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (videoInput !== null) {
 | 
			
		||||
          const deviceId = await findDeviceByName(videoInput);
 | 
			
		||||
          if (!deviceId) {
 | 
			
		||||
            logger.warn("Unknown video input: " + videoInput);
 | 
			
		||||
          } else {
 | 
			
		||||
            logger.debug(
 | 
			
		||||
              `Found video input ID ${deviceId} for name ${videoInput}`
 | 
			
		||||
            );
 | 
			
		||||
            setVideoInput(deviceId);
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
        await Promise.all([
 | 
			
		||||
          groupCall.setMicrophoneMuted(audioInput === null),
 | 
			
		||||
          groupCall.setLocalVideoMuted(videoInput === null),
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue