yeyinly/MoonTVPlus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

anime4k超分使用自管理的 WebGPU 渲染器兼容firefox

Browse Source
This commit is contained in:
mtvpls
2026-08-02 00:00:53 +08:00
parent 2c8941edf9
commit e170a6ca51
2 changed files with 318 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/play/page.tsx
+19 -186
View File
@@ -7,6 +7,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
import { isAnimeCategoryText } from '@/lib/anime-keyword-expr';
import { createAnime4KRenderer } from '@/lib/anime4k';
import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
import {
clearDanmakuCacheByTitle,
@@ -3913,7 +3914,6 @@ function PlayPageClient() {
const initAnime4K = async () => {
if (!artPlayerRef.current?.video) return;
let frameRequestId: number | null = null; // 在外层声明，以便错误处理中使用
let outputCanvas: HTMLCanvasElement | null = null; // 在外层声明，以便错误处理中清理
try {
@@ -3948,29 +3948,18 @@ function PlayPageClient() {
throw new Error('无法获取视频尺寸');
}
// 检查视频是否正在播放
console.log('视频播放状态:', {
paused: video.paused,
ended: video.ended,
readyState: video.readyState,
currentTime: video.currentTime,
});
// 检测是否为Firefox
const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
console.log('浏览器检测:', isFirefox ? 'Firefox' : 'Chrome/Edge/其他');
// 使用用户选择的超分倍数
const scale = anime4kScaleRef.current;
// 创建输出canvas（显示给用户的）
outputCanvas = document.createElement('canvas');
const container = artPlayerRef.current.template.$video.parentElement;
// 使用用户选择的超分倍数
const scale = anime4kScaleRef.current;
outputCanvas.width = Math.floor(video.videoWidth * scale); // 确保是整数
outputCanvas.width = Math.floor(video.videoWidth * scale); // 确保是整数
outputCanvas.height = Math.floor(video.videoHeight * scale);
// 验证outputCanvas尺寸
console.log('outputCanvas尺寸:', outputCanvas.width, 'x', outputCanvas.height);
console.log('输出Canvas尺寸:', outputCanvas.width, 'x', outputCanvas.height);
if (!outputCanvas.width || !outputCanvas.height ||
!isFinite(outputCanvas.width) || !isFinite(outputCanvas.height)) {
throw new Error(`outputCanvas尺寸无效: ${outputCanvas.width}x${outputCanvas.height}, scale: ${scale}`);
@@ -3987,77 +3976,16 @@ function PlayPageClient() {
// 确保canvas背景透明，避免Firefox中的渲染问题
outputCanvas.style.backgroundColor = 'transparent';
// Firefox兼容性处理：创建中间canvas
let sourceCanvas: HTMLCanvasElement | null = null;
let sourceCtx: CanvasRenderingContext2D | null = null;
if (isFirefox) {
// Firefox的WebGPU不支持直接使用HTMLVideoElement
// 使用标准HTMLCanvasElement（更好的兼容性）
sourceCanvas = document.createElement('canvas');
// 获取视频尺寸并记录
const videoW = video.videoWidth;
const videoH = video.videoHeight;
console.log('Firefox：准备创建canvas - 视频尺寸:', videoW, 'x', videoH);
// 设置canvas尺寸
const canvasW = Math.floor(videoW);
const canvasH = Math.floor(videoH);
console.log('Firefox：计算后的canvas尺寸:', canvasW, 'x', canvasH);
sourceCanvas.width = canvasW;
sourceCanvas.height = canvasH;
// 立即验证赋值结果
console.log('Firefox：Canvas创建后立即检查:');
console.log(' - sourceCanvas.width:', sourceCanvas.width);
console.log(' - sourceCanvas.height:', sourceCanvas.height);
console.log(' - 赋值是否成功:', sourceCanvas.width === canvasW && sourceCanvas.height === canvasH);
// 验证sourceCanvas尺寸
if (!sourceCanvas.width || !sourceCanvas.height ||
!isFinite(sourceCanvas.width) || !isFinite(sourceCanvas.height)) {
throw new Error(`sourceCanvas尺寸无效: ${sourceCanvas.width}x${sourceCanvas.height}`);
}
if (sourceCanvas.width !== canvasW || sourceCanvas.height !== canvasH) {
throw new Error(`sourceCanvas尺寸赋值异常: 期望 ${canvasW}x${canvasH}, 实际 ${sourceCanvas.width}x${sourceCanvas.height}`);
}
sourceCtx = sourceCanvas.getContext('2d', {
willReadFrequently: true,
alpha: false // 禁用alpha通道，提高性能
});
if (!sourceCtx) {
throw new Error('无法创建2D上下文');
}
// 先绘制一帧到canvas，确保有内容
if (video.readyState >= video.HAVE_CURRENT_DATA) {
sourceCtx.drawImage(video, 0, 0, sourceCanvas.width, sourceCanvas.height);
console.log('Firefox：已绘制初始帧到sourceCanvas');
}
console.log('Firefox检测：使用HTMLCanvasElement中转方案');
}
// 在outputCanvas上监听点击事件，触发播放器的暂停/播放切换
const handleCanvasClick = () => {
outputCanvas.addEventListener('click', () => {
if (artPlayerRef.current) {
artPlayerRef.current.toggle();
}
};
outputCanvas.addEventListener('click', handleCanvasClick);
// 在outputCanvas上监听双击事件，触发全屏切换
const handleCanvasDblClick = () => {
});
outputCanvas.addEventListener('dblclick', () => {
if (artPlayerRef.current) {
artPlayerRef.current.fullscreen = !artPlayerRef.current.fullscreen;
}
};
outputCanvas.addEventListener('dblclick', handleCanvasDblClick);
});
// 隐藏原始video元素（使用opacity而不是display:none以保持视频解码）
// Firefox在display:none时可能会停止视频解码，导致黑屏
@@ -4069,20 +3997,8 @@ function PlayPageClient() {
// 插入outputCanvas到容器
container.insertBefore(outputCanvas, video);
// Firefox兼容性：创建视频帧捕获循环
if (isFirefox && sourceCtx && sourceCanvas) {
const captureVideoFrame = () => {
if (sourceCtx && sourceCanvas && video.readyState >= video.HAVE_CURRENT_DATA) {
sourceCtx.drawImage(video, 0, 0, sourceCanvas.width, sourceCanvas.height);
}
frameRequestId = requestAnimationFrame(captureVideoFrame);
};
captureVideoFrame();
console.log('Firefox：视频帧捕获循环已启动');
}
// 动态导入 anime4k-webgpu 及对应的模式
const { render: anime4kRender, ModeA, ModeB, ModeC, ModeAA, ModeBB, ModeCA } = await import('anime4k-webgpu');
const { ModeA, ModeB, ModeC, ModeAA, ModeBB, ModeCA } = await import('anime4k-webgpu');
let ModeClass: any;
const modeName = anime4kModeRef.current;
@@ -4110,66 +4026,23 @@ function PlayPageClient() {
ModeClass = ModeA;
}
// 使用anime4k-webgpu的render函数
// Firefox使用sourceCanvas，其他浏览器直接使用video
const renderConfig: any = {
video: isFirefox ? sourceCanvas : video, // Firefox使用canvas中转，其他浏览器直接使用video
canvas: outputCanvas,
pipelineBuilder: (device: GPUDevice, inputTexture: GPUTexture) => {
if (!outputCanvas) {
throw new Error('outputCanvas is null in pipelineBuilder');
}
const mode = new ModeClass({
device,
inputTexture,
nativeDimensions: {
width: Math.floor(video.videoWidth), // 确保是整数
height: Math.floor(video.videoHeight),
},
targetDimensions: {
width: Math.floor(outputCanvas.width), // 确保是整数
height: Math.floor(outputCanvas.height),
},
});
return [mode];
},
};
// 使用自管理的 WebGPU 渲染器。内部自动处理各浏览器的帧源差异：
// 直接从 <video> 拷贝（Chrome/Edge），或退回 createImageBitmap 中转（Firefox）。
console.log('开始初始化Anime4K渲染器...');
console.log('输入源:', isFirefox ? 'HTMLCanvasElement (Firefox兼容)' : 'video (原生)');
console.log('视频尺寸:', video.videoWidth, 'x', video.videoHeight);
console.log('输出Canvas尺寸:', outputCanvas.width, 'x', outputCanvas.height);
console.log('nativeDimensions:', Math.floor(video.videoWidth), 'x', Math.floor(video.videoHeight));
console.log('targetDimensions:', Math.floor(outputCanvas.width), 'x', Math.floor(outputCanvas.height));
// Firefox调试：检查sourceCanvas状态
if (isFirefox && sourceCanvas) {
console.log('sourceCanvas详细信息:');
console.log(' - width:', sourceCanvas.width, 'height:', sourceCanvas.height);
console.log(' - clientWidth:', sourceCanvas.clientWidth, 'clientHeight:', sourceCanvas.clientHeight);
console.log(' - offsetWidth:', sourceCanvas.offsetWidth, 'offsetHeight:', sourceCanvas.offsetHeight);
// 尝试读取一个像素，确认canvas有内容
if (sourceCtx) {
try {
const imageData = sourceCtx.getImageData(0, 0, 1, 1);
console.log(' - 像素数据可读:', imageData.data.length > 0);
} catch (err) {
console.error(' - 无法读取像素数据:', err);
}
}
}
const controller = await anime4kRender(renderConfig);
const controller = await createAnime4KRenderer({
video,
canvas: outputCanvas,
scale,
pipelineClass: ModeClass,
});
console.log('Anime4K渲染器初始化成功');
anime4kRef.current = {
controller,
canvas: outputCanvas,
sourceCanvas: isFirefox ? sourceCanvas : null,
frameRequestId: isFirefox ? frameRequestId : null,
handleCanvasClick,
handleCanvasDblClick,
};
syncAnime4KCanvasFlip();
@@ -4183,11 +4056,6 @@ function PlayPageClient() {
artPlayerRef.current.notice.show = '超分启用失败：' + (err instanceof Error ? err.message : '未知错误');
}
// 停止帧捕获循环
if (frameRequestId) {
cancelAnimationFrame(frameRequestId);
}
// 移除outputCanvas（如果已创建）
if (outputCanvas && outputCanvas.parentNode) {
outputCanvas.parentNode.removeChild(outputCanvas);
@@ -4207,49 +4075,14 @@ function PlayPageClient() {
const cleanupAnime4K = async () => {
if (anime4kRef.current) {
try {
// 停止帧捕获循环（仅Firefox）
if (anime4kRef.current.frameRequestId) {
cancelAnimationFrame(anime4kRef.current.frameRequestId);
console.log('Firefox：帧捕获循环已停止');
}
// 停止渲染循环
// 停止渲染循环并释放 WebGPU 资源
anime4kRef.current.controller?.stop?.();
// 移除canvas事件监听器
if (anime4kRef.current.canvas) {
if (anime4kRef.current.handleCanvasClick) {
anime4kRef.current.canvas.removeEventListener('click', anime4kRef.current.handleCanvasClick);
}
if (anime4kRef.current.handleCanvasDblClick) {
anime4kRef.current.canvas.removeEventListener('dblclick', anime4kRef.current.handleCanvasDblClick);
}
}
// 移除canvas
if (anime4kRef.current.canvas && anime4kRef.current.canvas.parentNode) {
anime4kRef.current.canvas.parentNode.removeChild(anime4kRef.current.canvas);
}
// 清理sourceCanvas（仅Firefox）
if (anime4kRef.current.sourceCanvas) {
if (anime4kRef.current.sourceCanvas instanceof OffscreenCanvas) {
// OffscreenCanvas的清理
const ctx = anime4kRef.current.sourceCanvas.getContext('2d');
if (ctx) {
ctx.clearRect(0, 0, anime4kRef.current.sourceCanvas.width, anime4kRef.current.sourceCanvas.height);
}
console.log('Firefox：OffscreenCanvas已清理');
} else {
// HTMLCanvasElement的清理
const ctx = anime4kRef.current.sourceCanvas.getContext('2d');
if (ctx) {
ctx.clearRect(0, 0, anime4kRef.current.sourceCanvas.width, anime4kRef.current.sourceCanvas.height);
}
console.log('Firefox：HTMLCanvasElement已清理');
}
}
anime4kRef.current = null;
// 恢复原始video显示