f1ee3604de
This one is gonna take some explaining: When in resist fingerprinting mode, Firefox exhibits some funny behavior: when we ask for the the list of media devices, it gives us fake device IDs. But when the js-sdk requests a stream for any of those devices, Firefox associates the stream with the real device ID. Now, in order to get the names of devices included in their metadata when you query the device list, you need to be holding a stream. For this reason, useMediaHandler was set up to reload the device list whenever matrix-js-sdk got a new local stream. But because of the inconsistency in device IDs, it would enter an infinite cycle telling matrix-js-sdk to request a stream for the fake device ID, but with matrix-js-sdk always responding with the real device ID. I already wasn't happy with useMediaHandler's use of @ts-ignore comments to inspect private js-sdk fields, and in the meantime we've come up with a simpler function for requesting device names, so I decided to refactor useMediaHandler to use it instead. Importantly, it doesn't break in resist fingerprinting mode. This created a new UX issue though: now, when on the lobby screen, useMediaHandler would request microphone access so it could get device names, followed immediately by a *second* pop-up for the lobby screen to request camera access. That's 1 pop-up too many, so I changed useMediaHandler to only request device names when a component is mounted that actually wants to show them. Currently, the settings modal is the only such component, and users normally only open it *after* granting full audio/video access, so this solution works out quite nicely.
89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
/*
|
|
Copyright 2022 New Vector Ltd
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
import { logger } from "matrix-js-sdk/src/logger";
|
|
|
|
/**
|
|
* Finds a media device with label matching 'deviceName'
|
|
* @param deviceName The label of the device to look for
|
|
* @param devices The list of devices to search
|
|
* @returns A matching media device or undefined if no matching device was found
|
|
*/
|
|
export async function findDeviceByName(
|
|
deviceName: string,
|
|
kind: MediaDeviceKind,
|
|
devices: MediaDeviceInfo[]
|
|
): Promise<string | undefined> {
|
|
const deviceInfo = devices.find(
|
|
(d) => d.kind === kind && d.label === deviceName
|
|
);
|
|
return deviceInfo?.deviceId;
|
|
}
|
|
|
|
/**
|
|
* Gets the available audio input/output and video input devices
|
|
* from the browser: a wrapper around mediaDevices.enumerateDevices()
|
|
* that requests a stream and holds it while calling enumerateDevices().
|
|
* This is because some browsers (Firefox) only return device labels when
|
|
* the app has an active user media stream. In Chrome, this will get a
|
|
* stream from the default camera which can mean, for example, that the
|
|
* light for the FaceTime camera turns on briefly even if you selected
|
|
* another camera. Once the Permissions API
|
|
* (https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API)
|
|
* is ready for primetime, this should allow us to avoid this.
|
|
*
|
|
* @return The available media devices
|
|
*/
|
|
export async function getNamedDevices(): Promise<MediaDeviceInfo[]> {
|
|
// First get the devices without their labels, to learn what kinds of streams
|
|
// we can request
|
|
let devices: MediaDeviceInfo[];
|
|
try {
|
|
devices = await navigator.mediaDevices.enumerateDevices();
|
|
} catch (error) {
|
|
logger.warn("Unable to refresh WebRTC devices", error);
|
|
devices = [];
|
|
}
|
|
|
|
let stream: MediaStream | null = null;
|
|
try {
|
|
if (devices.some((d) => d.kind === "audioinput")) {
|
|
// Holding just an audio stream will be enough to get us all device labels
|
|
stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
} else if (devices.some((d) => d.kind === "videoinput")) {
|
|
// We have to resort to a video stream
|
|
stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
}
|
|
} catch (e) {
|
|
logger.info("Couldn't get media stream for enumerateDevices: failing");
|
|
throw e;
|
|
}
|
|
|
|
if (stream !== null) {
|
|
try {
|
|
return await navigator.mediaDevices.enumerateDevices();
|
|
} catch (error) {
|
|
logger.warn("Unable to refresh WebRTC devices", error);
|
|
} finally {
|
|
for (const track of stream.getTracks()) {
|
|
track.stop();
|
|
}
|
|
}
|
|
}
|
|
|
|
// If all else failed, continue without device labels
|
|
return devices;
|
|
}
|