Add WebGPU renderer (#648)

This commit is contained in:
redphx
2025-02-02 21:37:21 +07:00
parent 39ecef976c
commit fd665b6fcd
31 changed files with 1428 additions and 841 deletions

View File

@@ -4,6 +4,7 @@ import { StreamPref } from "@/enums/pref-keys";
import { StreamVideoProcessing, StreamPlayerType } from "@/enums/pref-values";
import { getStreamPref, setStreamPref } from "@/utils/pref-utils";
import { SettingsManager } from "../settings-manager";
import type { StreamPlayerOptions } from "@/types/stream";
export function onChangeVideoPlayerType() {
const playerType = getStreamPref(StreamPref.VIDEO_PLAYER_TYPE);
@@ -21,9 +22,7 @@ export function onChangeVideoPlayerType() {
const $optCas = $videoProcessing.querySelector<HTMLOptionElement>(`option[value=${StreamVideoProcessing.CAS}]`);
if (playerType === StreamPlayerType.WEBGL2) {
$optCas && ($optCas.disabled = false);
} else {
if (playerType === StreamPlayerType.VIDEO) {
// Only allow USM when player type is Video
$videoProcessing.value = StreamVideoProcessing.USM;
setStreamPref(StreamPref.VIDEO_PROCESSING, StreamVideoProcessing.USM, 'direct');
@@ -33,6 +32,8 @@ export function onChangeVideoPlayerType() {
if (UserAgent.isSafari()) {
isDisabled = true;
}
} else {
$optCas && ($optCas.disabled = false);
}
$videoProcessing.disabled = isDisabled;
@@ -40,24 +41,22 @@ export function onChangeVideoPlayerType() {
// Hide Power Preference setting if renderer isn't WebGL2
$videoPowerPreference.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
$videoMaxFps.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
$videoMaxFps.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType === StreamPlayerType.VIDEO);
}
export function limitVideoPlayerFps(targetFps: number) {
const streamPlayer = STATES.currentStream.streamPlayer;
streamPlayer?.getWebGL2Player()?.setTargetFps(targetFps);
const streamPlayer = STATES.currentStream.streamPlayerManager;
streamPlayer?.getCanvasPlayer()?.setTargetFps(targetFps);
}
export function updateVideoPlayer() {
const streamPlayer = STATES.currentStream.streamPlayer;
if (!streamPlayer) {
const streamPlayerManager = STATES.currentStream.streamPlayerManager;
if (!streamPlayerManager) {
return;
}
limitVideoPlayerFps(getStreamPref(StreamPref.VIDEO_MAX_FPS));
const options = {
processing: getStreamPref(StreamPref.VIDEO_PROCESSING),
sharpness: getStreamPref(StreamPref.VIDEO_SHARPNESS),
@@ -66,9 +65,15 @@ export function updateVideoPlayer() {
brightness: getStreamPref(StreamPref.VIDEO_BRIGHTNESS),
} satisfies StreamPlayerOptions;
streamPlayer.setPlayerType(getStreamPref(StreamPref.VIDEO_PLAYER_TYPE));
streamPlayer.updateOptions(options);
streamPlayer.refreshPlayer();
streamPlayerManager.switchPlayerType(getStreamPref(StreamPref.VIDEO_PLAYER_TYPE));
limitVideoPlayerFps(getStreamPref(StreamPref.VIDEO_MAX_FPS));
streamPlayerManager.updateOptions(options);
streamPlayerManager.refreshPlayer();
}
window.addEventListener('resize', updateVideoPlayer);
function resizeVideoPlayer() {
const streamPlayerManager = STATES.currentStream.streamPlayerManager;
streamPlayerManager?.resizePlayer();
}
window.addEventListener('resize', resizeVideoPlayer);