Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(service-providers): stop using camera when leaving device test #2072

Merged
merged 1 commit into from
Nov 1, 2023
Merged

fix(service-providers): stop using camera when leaving device test #2072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 49 additions & 52 deletions packages/flat-pages/src/DevicesTestPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,49 @@ export const DevicesTestPage = observer(function DeviceTestPage() {
const [microphoneDevices, setMicrophoneDevices] = useState<IServiceVideoChatDevice[]>([]);
const [speakerDevices, setSpeakerDevices] = useState<IServiceVideoChatDevice[]>([]);

const [cameraDeviceId, setCameraDeviceId] = useState<string>("");
const [microphoneDeviceId, setMicrophoneDeviceId] = useState<string>("");
const [speakerDeviceId, setSpeakerDeviceId] = useState<string>("");
const [cameraDeviceId, setCameraDeviceId] = useState<string>(preferencesStore.cameraId || "");
const [microphoneDeviceId, setMicrophoneDeviceId] = useState<string>(
preferencesStore.microphoneId || "",
);
const [speakerDeviceId, setSpeakerDeviceId] = useState<string>(
preferencesStore.speakerId || "",
);

const [isCameraAccessible, setIsCameraAccessible] = useState(true);
const [isMicrophoneAccessible, setIsMicrophoneAccessible] = useState(true);
const [isSpeakerAccessible, setIsSpeakerAccessible] = useState(true);

const [volume, setVolume] = useState(0);

// Make 'setDeviceID' happen first when the track was not created.
useEffect(() => {
if (rtc && cameraDeviceId) {
void rtc.setCameraID(cameraDeviceId).catch(() => {
setIsCameraAccessible(false);
});
}
}, [rtc, cameraDeviceId]);

useEffect(() => {
if (rtc && microphoneDeviceId) {
void rtc.setMicID(microphoneDeviceId).catch(() => {
setIsMicrophoneAccessible(false);
});
}
}, [rtc, microphoneDeviceId]);

useEffect(() => {
if (rtc && speakerDeviceId) {
void rtc.setSpeakerID(speakerDeviceId).catch(() => {
setIsSpeakerAccessible(false);
});
}
}, [rtc, speakerDeviceId]);

useEffect(() => {
if (!rtc) {
return;
}
// @FIXME only run once
const avatar = rtc.getTestAvatar();
if (avatar) {
avatar.enableCamera(true);
Expand All @@ -62,6 +90,7 @@ export const DevicesTestPage = observer(function DeviceTestPage() {
avatar.enableCamera(false);
avatar.enableMic(false);
avatar.setElement(null);
rtc.stopTesting();
};
}
return;
Expand Down Expand Up @@ -123,66 +152,33 @@ export const DevicesTestPage = observer(function DeviceTestPage() {
};
}, [rtc, sp]);

useEffect(() => {
if (rtc && cameraDeviceId) {
void rtc.setCameraID(cameraDeviceId).catch(() => {
setIsCameraAccessible(false);
});
}
}, [rtc, cameraDeviceId]);

useEffect(() => {
if (rtc && microphoneDeviceId) {
void rtc.setMicID(microphoneDeviceId).catch(() => {
setIsMicrophoneAccessible(false);
});
}
}, [rtc, microphoneDeviceId]);

useEffect(() => {
if (rtc && speakerDeviceId) {
void rtc.setSpeakerID(speakerDeviceId).catch(() => {
setIsSpeakerAccessible(false);
});
}
}, [rtc, speakerDeviceId]);

useEffect(() => {
// check device id on changes
if (cameraDevices.length > 0 && !cameraDeviceId) {
const lastCameraId = preferencesStore.cameraId;
if (lastCameraId && cameraDevices.find(device => device.deviceId === lastCameraId)) {
setCameraDeviceId(lastCameraId);
} else {
setCameraDeviceId(cameraDevices[0].deviceId);
}
if (
cameraDevices.length > 0 &&
!cameraDevices.find(device => device.deviceId === cameraDeviceId)
) {
setCameraDeviceId(cameraDevices[0].deviceId);
}
}, [preferencesStore, cameraDeviceId, cameraDevices]);

useEffect(() => {
// check device id on changes
if (microphoneDevices.length > 0 && !microphoneDeviceId) {
const lastMicrophoneId = preferencesStore.microphoneId;
if (
lastMicrophoneId &&
microphoneDevices.some(device => device.deviceId === lastMicrophoneId)
) {
setMicrophoneDeviceId(lastMicrophoneId);
} else {
setMicrophoneDeviceId(microphoneDevices[0].deviceId);
}
if (
microphoneDevices.length > 0 &&
!microphoneDevices.some(device => device.deviceId === microphoneDeviceId)
) {
setMicrophoneDeviceId(microphoneDevices[0].deviceId);
}
}, [preferencesStore, microphoneDeviceId, microphoneDevices]);

useEffect(() => {
// check device id on changes
if (speakerDevices.length > 0 && !speakerDeviceId) {
const lastSpeakerId = preferencesStore.speakerId;
if (lastSpeakerId && speakerDevices.some(device => device.deviceId === lastSpeakerId)) {
setSpeakerDeviceId(lastSpeakerId);
} else {
setSpeakerDeviceId(speakerDevices[0].deviceId);
}
if (
speakerDevices.length > 0 &&
!speakerDevices.some(device => device.deviceId === speakerDeviceId)
) {
setSpeakerDeviceId(speakerDevices[0].deviceId);
}
}, [preferencesStore, speakerDeviceId, speakerDevices]);

Expand All @@ -193,6 +189,7 @@ export const DevicesTestPage = observer(function DeviceTestPage() {
}, [preferencesStore.mirrorMode, rtc]);

const joinRoom = async (): Promise<void> => {
preferencesStore.updateSpeakerId(speakerDeviceId);
preferencesStore.updateCameraId(cameraDeviceId);
preferencesStore.updateMicrophoneId(microphoneDeviceId);
await joinRoomHandler(roomUUID, pushHistory);
Expand Down
1 change: 1 addition & 0 deletions packages/flat-services/src/services/video-chat/video-chat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export abstract class IServiceVideoChat implements IService {
public abstract getAvatar(uid?: IServiceVideoChatUID): IServiceVideoChatAvatar | undefined;

public abstract getTestAvatar(): IServiceVideoChatAvatar;
public abstract stopTesting(): void;

public abstract getVolumeLevel(uid?: IServiceVideoChatUID): number;

Expand Down
4 changes: 4 additions & 0 deletions service-providers/agora-rtc/agora-rtc-electron/src/agora-rtc-electron.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,10 @@ export class AgoraRTCElectron extends IServiceVideoChat {
return this.localAvatar;
}

public stopTesting(): void {
// do nothing
}

public override getVolumeLevel(uid?: IServiceVideoChatUID): number {
return this._volumeLevels.get(uid || "0") || 0;
}
Expand Down
16 changes: 13 additions & 3 deletions service-providers/agora-rtc/agora-rtc-web/src/agora-rtc-web.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,15 @@ export class AgoraRTCWeb extends IServiceVideoChat {

private _testAvatar?: RTCTestAvatar;
public getTestAvatar(): IServiceVideoChatAvatar {
return (this._testAvatar ??= new RTCTestAvatar({ rtc: this }));
this._testAvatar ??= new RTCTestAvatar({ rtc: this });
this._testAvatar.enabled = true;
return this._testAvatar;
}

public stopTesting(): void {
if (this._testAvatar) {
this._testAvatar.enabled = false;
}
}

public getVolumeLevel(uid?: IServiceVideoChatUID): number {
Expand Down Expand Up @@ -506,6 +514,7 @@ export class AgoraRTCWeb extends IServiceVideoChat {
public localCameraTrack?: ICameraVideoTrack;
public createLocalCameraTrack = singleRun(async (): Promise<ICameraVideoTrack> => {
if (!this.localCameraTrack) {
const prevCameraID = this._cameraID;
this.localCameraTrack = await AgoraRTC.createCameraVideoTrack({
encoderConfig: { width: 384, height: 216 },
cameraId: this._cameraID,
Expand All @@ -517,7 +526,7 @@ export class AgoraRTCWeb extends IServiceVideoChat {

// If there is setCameraID() called during the promises above,
// the actually used camera ID may be different, so correct it here.
if (this._cameraID) {
if (this._cameraID && this._cameraID !== prevCameraID) {
this.localCameraTrack.setDevice(this._cameraID);
}
}
Expand All @@ -527,6 +536,7 @@ export class AgoraRTCWeb extends IServiceVideoChat {
public localMicTrack?: IMicrophoneAudioTrack;
public createLocalMicTrack = singleRun(async (): Promise<IMicrophoneAudioTrack> => {
if (!this.localMicTrack) {
const prevMicID = this._micID;
this.localMicTrack = await AgoraRTC.createMicrophoneAudioTrack({
microphoneId: this._micID,
// AEC: acoustic echo cancellation
Expand All @@ -541,7 +551,7 @@ export class AgoraRTCWeb extends IServiceVideoChat {

// If there is setMicID() called during the promises above,
// the actually used microphone ID may be different, so correct it here.
if (this._micID) {
if (this._micID && this._micID !== prevMicID) {
this.localMicTrack.setDevice(this._micID);
}
}
Expand Down
15 changes: 14 additions & 1 deletion service-providers/agora-rtc/agora-rtc-web/src/rtc-test-avatar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ export interface RTCAvatarConfig {
export class RTCTestAvatar implements IServiceVideoChatAvatar {
private static LOW_VOLUME_LEVEL_THRESHOLD = 0.00001;

/** Stop doing anything when it is false */
public enabled = false;

private readonly _rtc: AgoraRTCWeb;
private readonly _sideEffect = new SideEffectManager();

Expand Down Expand Up @@ -55,9 +58,16 @@ export class RTCTestAvatar implements IServiceVideoChatAvatar {
if (shouldMic && !localMicTrack) {
localMicTrack = await this._rtc.createLocalMicTrack();
}
if (!this.enabled) {
return;
}

if (localMicTrack) {
await localMicTrack.setEnabled(shouldMic);
}
if (!this.enabled) {
return;
}

const lowVolumeLevelDisposerID = "local-mic-volume-level";
if (shouldMic) {
Expand Down Expand Up @@ -109,13 +119,16 @@ export class RTCTestAvatar implements IServiceVideoChatAvatar {
let localCameraTrack = this._rtc.localCameraTrack;
if (shouldCamera && !localCameraTrack) {
localCameraTrack = await this._rtc.createLocalCameraTrack();
if (!this.enabled) {
return;
}
if (this._el$.value) {
localCameraTrack.play(this._el$.value, {
mirror: this._mirrorMode$.value,
});
}
}
if (localCameraTrack) {
if (localCameraTrack && !localCameraTrack.enabled) {
await localCameraTrack.setEnabled(shouldCamera);
}
} catch (e) {
Expand Down