Cesar Mendivil
8b458a3ddf
- Add Next.js app structure with base configs, linting, and formatting - Implement LiveKit Meet page, types, and utility functions - Add Docker, Compose, and deployment scripts for backend and token server - Provide E2E and smoke test scaffolding with Puppeteer and Playwright helpers - Include CSS modules and global styles for UI - Add postMessage and studio integration utilities - Update package.json with dependencies and scripts for development and testing
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import {
|
|
Room,
|
|
ParticipantEvent,
|
|
RoomEvent,
|
|
RemoteTrack,
|
|
RemoteTrackPublication,
|
|
VideoQuality,
|
|
LocalVideoTrack,
|
|
isVideoTrack,
|
|
} from 'livekit-client';
|
|
import * as React from 'react';
|
|
|
|
export type LowCPUOptimizerOptions = {
|
|
reducePublisherVideoQuality: boolean;
|
|
reduceSubscriberVideoQuality: boolean;
|
|
disableVideoProcessing: boolean;
|
|
};
|
|
|
|
const defaultOptions: LowCPUOptimizerOptions = {
|
|
reducePublisherVideoQuality: true,
|
|
reduceSubscriberVideoQuality: true,
|
|
disableVideoProcessing: false,
|
|
} as const;
|
|
|
|
/**
|
|
* This hook ensures that on devices with low CPU, the performance is optimised when needed.
|
|
* This is done by primarily reducing the video quality to low when the CPU is constrained.
|
|
*/
|
|
export function useLowCPUOptimizer(room: Room, options: Partial<LowCPUOptimizerOptions> = {}) {
|
|
const [lowPowerMode, setLowPowerMode] = React.useState(false);
|
|
const opts = React.useMemo(() => ({ ...defaultOptions, ...options }), [options]);
|
|
React.useEffect(() => {
|
|
const handleCpuConstrained = async (track: LocalVideoTrack) => {
|
|
setLowPowerMode(true);
|
|
console.warn('Local track CPU constrained', track);
|
|
if (opts.reducePublisherVideoQuality) {
|
|
track.prioritizePerformance();
|
|
}
|
|
if (opts.disableVideoProcessing && isVideoTrack(track)) {
|
|
track.stopProcessor();
|
|
}
|
|
if (opts.reduceSubscriberVideoQuality) {
|
|
room.remoteParticipants.forEach((participant) => {
|
|
participant.videoTrackPublications.forEach((publication) => {
|
|
publication.setVideoQuality(VideoQuality.LOW);
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
room.localParticipant.on(ParticipantEvent.LocalTrackCpuConstrained, handleCpuConstrained);
|
|
return () => {
|
|
room.localParticipant.off(ParticipantEvent.LocalTrackCpuConstrained, handleCpuConstrained);
|
|
};
|
|
}, [room, opts.reducePublisherVideoQuality, opts.reduceSubscriberVideoQuality]);
|
|
|
|
React.useEffect(() => {
|
|
const lowerQuality = (_: RemoteTrack, publication: RemoteTrackPublication) => {
|
|
publication.setVideoQuality(VideoQuality.LOW);
|
|
};
|
|
if (lowPowerMode && opts.reduceSubscriberVideoQuality) {
|
|
room.on(RoomEvent.TrackSubscribed, lowerQuality);
|
|
}
|
|
|
|
return () => {
|
|
room.off(RoomEvent.TrackSubscribed, lowerQuality);
|
|
};
|
|
}, [lowPowerMode, room, opts.reduceSubscriberVideoQuality]);
|
|
|
|
return lowPowerMode;
|
|
}
|