yjz-web-sdk 1.0.10 → 1.0.11-beta.1

package/src/util/WasmUtil.ts

@@ -1,291 +0,0 @@
-import { AVCodecID } from "@libmedia/avutil";
-import { base64 } from '@libmedia/common'
-import wasmUrl from '../assets/wasm/h264-simd.wasm?url'
-import atoWasmUrl from '../assets/wasm/h264-atomic.wasm?url'
-import {DecoderSupportResult, RendererType, RenderingCapabilities} from "../types";
-
-const supportAtomic = WebAssembly.validate(base64.base64ToUint8Array('AGFzbQEAAAABBgFgAX8BfwISAQNlbnYGbWVtb3J5AgMBgIACAwIBAAcJAQVsb2FkOAAACgoBCAAgAP4SAAAL'))
-const supportSimd = WebAssembly.validate(base64.base64ToUint8Array('AGFzbQEAAAABBQFgAAF7AhIBA2VudgZtZW1vcnkCAwGAgAIDAgEACgoBCABBAP0ABAAL'))
-
-
-export function getWasm(codecId?: AVCodecID): string {
-    switch (codecId) {
-        // H264
-        case AVCodecID.AV_CODEC_ID_H264:
-            if(supportSimd){
-                return wasmUrl
-            } else if(supportAtomic){
-                return atoWasmUrl
-            } else {
-                return ''
-            }
-        default:
-            return ''
-    }
-}
-
-// 定义视频编码类型枚举
-export enum VideoCodecType {
-    H264 = 'h264',
-    H265 = 'h265',
-    VP8 = 'vp8',
-    VP9 = 'vp9',
-    AV1 = 'av1',
-}
-
-// 对应 WebCodecs codec 字符串
-const CodecStringMap: Record<VideoCodecType, string> = {
-    [VideoCodecType.H264]: 'avc1.42E01E',        // baseline profile
-    [VideoCodecType.H265]: 'hvc1.1.6.L93.B0',   // HEVC main profile
-    [VideoCodecType.VP8]: 'vp8',
-    [VideoCodecType.VP9]: 'vp09.00.10.08',
-    [VideoCodecType.AV1]: 'av01.0.04M.08',
-};
-
-
-export async function checkDecoderSupport(codec: VideoCodecType): Promise<DecoderSupportResult> {
-    if (typeof VideoDecoder === 'undefined' || !VideoDecoder.isConfigSupported) {
-        return { supported: false, hardware: false, software: false };
-    }
-
-    const baseConfig = {
-        codec: CodecStringMap[codec],
-        codedWidth: 720,
-        codedHeight: 1280
-    };
-
-    let supported = false;
-    let hardware = false;
-    let software = false;
-
-    // 基础能力检测
-    try {
-        const basic = await VideoDecoder.isConfigSupported(baseConfig as any);
-        supported = basic.supported === true;
-    } catch {}
-
-    if (!supported) {
-        return { supported: false, hardware: false, software: false };
-    }
-
-    // 测试硬件解码
-    try {
-        const hard = await VideoDecoder.isConfigSupported({
-            ...baseConfig,
-            hardwareAcceleration: "prefer-hardware",
-        } as any);
-
-        if (hard.supported) {
-            hardware = true;
-        }
-    } catch {}
-
-    // 测试软件解码
-    try {
-        const soft = await VideoDecoder.isConfigSupported({
-            ...baseConfig,
-            hardwareAcceleration: "prefer-software",
-        } as any);
-
-        if (soft.supported) {
-            software = true;
-        }
-    } catch {}
-
-    // Safari fallback（支持 HEVC 但不返回 hardware/software）
-    if (!hardware && !software) {
-        const isSafari =
-            /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-        if (isSafari) {
-            software = true;
-        }
-    }
-
-    return { supported, hardware, software };
-}
-
-
-
-// 检查 VideoEncoder 支持
-export async function isEncoderSupported(codec: VideoCodecType): Promise<boolean> {
-    if (typeof VideoEncoder === 'undefined' || !VideoEncoder.isConfigSupported) return false;
-
-    try {
-        const support = await (VideoEncoder as any).isConfigSupported({
-            codec: CodecStringMap[codec],
-            width: 640,
-            height: 480,
-        });
-        return support.supported;
-    } catch {
-        return false;
-    }
-}
-
-/**
- * 是否为移动端（基本所有移动端 WebGPU 都不稳定，直接禁用）
- */
-const isMobileDevice = (): boolean => {
-    if (typeof navigator === 'undefined') return true
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS|OPiOS/i.test(
-        navigator.userAgent
-    )
-}
-
-/* ==================== 1. WebGPU ==================== */
-let _webgpuChecked = false
-let _webgpuSupported = false
-
-export const isWebGPUSupported = async (): Promise<boolean> => {
-    // 已经检测过直接返回缓存
-    if (_webgpuChecked) return _webgpuSupported
-
-    // 移动端直接否
-    if (isMobileDevice()) {
-        _webgpuSupported = false
-        _webgpuChecked = true
-        return false
-    }
-
-    // 基础 API 检查
-    if (!('gpu' in navigator) || typeof navigator.gpu?.requestAdapter !== 'function') {
-        _webgpuSupported = false
-        _webgpuChecked = true
-        return false
-    }
-
-    try {
-        // 真正尝试获取 adapter —— 这是唯一 100% 可靠的方式
-        const adapter = await navigator.gpu.requestAdapter()
-        _webgpuSupported = !!adapter
-    } catch (e) {
-        // 任何异常（驱动黑名单、权限、Secure Context 等）都视为不支持
-        console.warn('[WebGPU] detection failed:', e)
-        _webgpuSupported = false
-    } finally {
-        _webgpuChecked = true
-    }
-
-    return _webgpuSupported
-}
-
-/* ==================== 2. WebGL2 ==================== */
-let _webgl2Checked = false
-let _webgl2Supported = false
-
-export const isWebGL2Supported = (canvas?: HTMLCanvasElement): boolean => {
-    if (_webgl2Checked) return _webgl2Supported
-
-    const testCanvas = canvas ?? document.createElement('canvas')
-
-    // 某些浏览器即使有 WebGL2，也会在隐私模式/低电量模式下返回 null
-    const contextNames: string[] = ['webgl2', 'experimental-webgl2']
-    let gl: WebGL2RenderingContext | null = null
-
-    for (const name of contextNames) {
-        try {
-            gl = testCanvas.getContext(name) as WebGL2RenderingContext | null
-            if (gl) break
-        } catch (_) {
-            // ignore
-        }
-    }
-
-    _webgl2Supported = !!gl
-    _webgl2Checked = true
-    return _webgl2Supported
-}
-
-/* ==================== 3. WebGL1 ==================== */
-let _webgl1Checked = false
-let _webgl1Supported = false
-
-export const isWebGL1Supported = (canvas?: HTMLCanvasElement): boolean => {
-    if (_webgl1Checked) return _webgl1Supported
-
-    const testCanvas = canvas ?? document.createElement('canvas')
-
-    // 兼容老的 experimental-webgl
-    const contextNames: string[] = [
-        'webgl',
-        'experimental-webgl',
-        'webkit-3d',
-        'moz-webgl',
-    ]
-
-    let gl: WebGLRenderingContext | null = null
-    for (const name of contextNames) {
-        try {
-            gl = testCanvas.getContext(name) as WebGLRenderingContext | null
-            if (gl) break
-        } catch (_) {}
-    }
-
-    // 额外检查：某些浏览器会返回 context 但实际被禁用（返回黑色画面）
-    if (gl) {
-        const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
-        if (debugInfo) {
-            const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
-            if (renderer && /llvmpipe|software/i.test(renderer)) {
-                // 软件渲染器，通常性能极差，建议当做不支持
-                gl = null
-            }
-        }
-    }
-
-    _webgl1Supported = !!gl
-    _webgl1Checked = true
-    return _webgl1Supported
-}
-
-/* ==================== 4. Canvas 2D ==================== */
-let _canvas2dChecked = false
-let _canvas2dSupported = false
-
-export const isCanvas2DSupported = (canvas?: HTMLCanvasElement): boolean => {
-    if (_canvas2dChecked) return _canvas2dSupported
-
-    const testCanvas = canvas ?? document.createElement('canvas')
-    let ctx: CanvasRenderingContext2D | null = null
-
-    try {
-        ctx = testCanvas.getContext('2d', {
-            // 防止某些极端隐私模式下返回 null
-            alpha: true,
-            desynchronized: false,
-        })
-    } catch (_) {
-        ctx = null
-    }
-
-    // 极少数浏览器会返回 ctx 但实际被禁用
-    if (ctx && typeof ctx.fillRect === 'function') {
-        _canvas2dSupported = true
-    } else {
-        _canvas2dSupported = false
-    }
-
-    _canvas2dChecked = true
-    return _canvas2dSupported
-}
-
-/* ==================== 统一检测入口（推荐在程序启动时调用一次）=================== */
-export const detectRenderingCapabilities = async (): Promise<RenderingCapabilities> => {
-    const [webgpu, webgl2, webgl1, canvas2d] = await Promise.all([
-        isWebGPUSupported(),
-        Promise.resolve(isWebGL2Supported()),
-        Promise.resolve(isWebGL1Supported()),
-        Promise.resolve(isCanvas2DSupported()),
-    ]);
-
-    // 按优先级选择最佳渲染方式
-    const best: RendererType =
-        (webgpu && 'webgpu') ||
-        (webgl2 && 'webgl2') ||
-        (webgl1 && 'webgl1') ||
-        (canvas2d && 'canvas2d') ||
-        'none';
-
-    return { webgpu, webgl2, webgl1, canvas2d, best };
-}
-

package/src/worker/worker.ts

@@ -1,292 +0,0 @@
-import { WebVideoDecoder, WasmVideoDecoder } from "@libmedia/avcodec";
-import {
-    addAVPacketData,
-    AVCodecID,
-    AVCodecParameters,
-    avMalloc, AVPacket, AVPacketFlags,
-    compileResource, createAVPacket, destroyAVFrame, destroyAVPacket
-} from "@libmedia/avutil";
-import { WebGLRenderer } from "../render/WebGLRenderer";
-import { WebGPURenderer } from "../render/WebGPURenderer";
-import { Canvas2DRenderer } from "../render/Canvas2DRenderer";
-import { RenderMode, WebGLDefault8Render, WebGPUDefault8Render } from "@libmedia/avrender";
-import { memcpyFromUint8Array } from "@libmedia/cheap";
-import { RendererType } from "../types";
-import { getWasm } from "../util/WasmUtil";
-
-interface WorkerState {
-    supportH265: boolean;
-    isHardware: boolean;
-    isSoftware: boolean;
-    decoderReady: boolean;
-    webDecoder: WebVideoDecoder | null;
-    wasmDecoder: WasmVideoDecoder | null;
-    avPacket: pointer<AVPacket> | null;
-    webRenderer: WebGLRenderer | WebGPURenderer | Canvas2DRenderer | null;
-    wasmRenderer: WebGLDefault8Render | WebGPUDefault8Render | null;
-    renderType: RenderMode | null;
-}
-
-const state: WorkerState = {
-    supportH265: false,
-    isHardware: false,
-    isSoftware: false,
-    decoderReady: false,
-    webDecoder: null,
-    wasmDecoder: null,
-    avPacket: null,
-    webRenderer: null,
-    wasmRenderer: null,
-    renderType: null
-};
-
-// -------- pendingFrames 队列管理 --------
-const MAX_PENDING_FRAMES = 100;
-const PENDING_FRAMES_TIMEOUT = 5000; // 5 秒
-const pendingFrames: any[] = [];
-let pendingFramesTimer: number | null = null;
-
-function startPendingFramesTimer() {
-    if (pendingFramesTimer) return;
-    pendingFramesTimer = setTimeout(() => {
-        pendingFrames.length = 0;
-        pendingFramesTimer = null;
-        console.warn("[Worker] pendingFrames cleared due to timeout");
-    }, PENDING_FRAMES_TIMEOUT);
-}
-
-function resetPendingFramesTimer() {
-    if (pendingFramesTimer) {
-        clearTimeout(pendingFramesTimer);
-        pendingFramesTimer = null;
-    }
-}
-
-function enqueueFrame(frame: any) {
-    if (pendingFrames.length >= MAX_PENDING_FRAMES) pendingFrames.shift(); // 丢弃最老帧
-    pendingFrames.push(frame);
-    startPendingFramesTimer();
-}
-
-function flushPendingFrames() {
-    resetPendingFramesTimer();
-    while (pendingFrames.length) {
-        handleDecode(pendingFrames.shift());
-    }
-}
-
-function clearPendingFrames() {
-    pendingFrames.length = 0;
-    resetPendingFramesTimer();
-}
-
-// -------- 初始化解码器 --------
-async function initWasmDecoder() {
-    if (state.wasmDecoder) return;
-    const codecpar = make<AVCodecParameters>();
-    codecpar.codecId = AVCodecID.AV_CODEC_ID_H264;
-
-    state.wasmDecoder = new WasmVideoDecoder({
-        resource: await compileResource(getWasm(codecpar.codecId), true),
-        onReceiveAVFrame: frame => {
-            state.wasmRenderer?.render(frame);
-            destroyAVFrame(frame);
-        }
-    });
-
-    const ret = await state.wasmDecoder.open(addressof(codecpar));
-    if (ret) {
-        state.decoderReady = false;
-        clearPendingFrames();
-        self.postMessage({ type: 'decoderError', error: 'WasmDecoder初始化失败' });
-    } else {
-        console.log('初始化成功 WasmVideoDecoder');
-        state.decoderReady = true;
-        flushPendingFrames();
-    }
-}
-
-async function initWebDecoder(isHardware: boolean) {
-    if (state.webDecoder) return;
-    const codecpar = make<AVCodecParameters>();
-    codecpar.codecId = AVCodecID.AV_CODEC_ID_H264;
-
-    state.webDecoder = new WebVideoDecoder({
-        codec: 'avc1.42E01E',
-        onReceiveVideoFrame: frame => state.webRenderer?.render(frame),
-        onError: error => console.error(`[WebDecoder] decode error: ${error}`),
-        enableHardwareAcceleration: isHardware,
-        optimizeForLatency: true,
-    });
-
-    const ret = await state.webDecoder.open(addressof(codecpar));
-    if (ret) {
-        state.decoderReady = false;
-        clearPendingFrames();
-        self.postMessage({ type: 'decoderError', error: 'WebDecoder初始化失败' });
-    } else {
-        console.log('初始化成功 WebVideoDecoder');
-        state.decoderReady = true;
-        self.postMessage({ type: 'initSuccess' });
-        flushPendingFrames();
-    }
-}
-
-// -------- 初始化渲染器 --------
-function initWebRenderer(canvas: OffscreenCanvas, renderType: RendererType) {
-    if (state.webRenderer) return;
-    try {
-        switch (renderType) {
-            case 'webgpu':
-                state.webRenderer = new WebGPURenderer(canvas);
-                break
-            case 'webgl2':
-                state.webRenderer = new WebGLRenderer('webgl2', canvas);
-                break;
-            case 'webgl1':
-                state.webRenderer = new WebGLRenderer('webgl', canvas);
-                break;
-            case 'canvas2d':
-                state.webRenderer = new Canvas2DRenderer(canvas);
-                break;
-            default:
-                throw new Error(`Unsupported render type: ${renderType}`);
-        }
-    } catch (err) {
-        self.postMessage({ type: 'rendererError', error: 'webRenderer初始化失败' });
-    }
-}
-
-async function initWasmRender(canvas: OffscreenCanvas, pixelRatio: number, renderType: RendererType) {
-    if (state.wasmRenderer) return;
-    try {
-        switch (renderType) {
-            case 'webgpu':
-                state.wasmRenderer = new WebGPUDefault8Render(canvas, { renderMode: RenderMode.FIT, devicePixelRatio: 1 });
-                break
-            case 'webgl2':
-            case 'webgl1':
-                state.wasmRenderer = new WebGLDefault8Render(canvas, { renderMode: RenderMode.FIT, devicePixelRatio: 1 });
-                break;
-            default:
-                throw new Error(`Unsupported WASM render type: ${renderType}`);
-        }
-        await state.wasmRenderer.init();
-        state.wasmRenderer.viewport(canvas.width, canvas.height);
-    } catch (err) {
-        self.postMessage({ type: 'rendererError', error: 'wasmRenderer初始化失败' });
-    }
-}
-
-// -------- 清理函数 --------
-function clearCanvas(renderer: any) {
-    if (!renderer) return;
-    if ('clear' in renderer) {
-        renderer.clear();
-    } else if (renderer.canvas) {
-        const ctx = renderer.canvas.getContext('2d') as OffscreenCanvasRenderingContext2D | null;
-        ctx?.clearRect(0, 0, renderer.canvas.width, renderer.canvas.height);
-    }
-}
-
-function clearRender() {
-    if (state.avPacket) {
-        destroyAVPacket(state.avPacket);
-        state.avPacket = createAVPacket();
-    }
-    clearCanvas(state.webRenderer);
-    clearCanvas(state.wasmRenderer);
-}
-
-async function stopDecoding() {
-    clearRender();
-    if (state.avPacket) {
-        destroyAVPacket(state.avPacket);
-        state.avPacket = null;
-    }
-    state.webRenderer?.destroy?.();
-    state.webRenderer = null;
-    state.wasmRenderer?.destroy?.();
-    state.wasmRenderer = null;
-
-    if (state.webDecoder) {
-        await state.webDecoder.flush();
-        state.webDecoder.close();
-        state.webDecoder = null;
-    }
-    if (state.wasmDecoder) {
-        await state.wasmDecoder.flush();
-        state.wasmDecoder.close();
-        state.wasmDecoder = null;
-    }
-    state.decoderReady = false;
-    clearPendingFrames();
-    self.close();
-}
-
-// -------- 统一解码函数 --------
-async function handleDecode(frame: any) {
-    if (!state.decoderReady || !state.avPacket) {
-        enqueueFrame(frame);
-        return;
-    }
-
-    resetPendingFramesTimer();
-
-    const dataP: pointer<uint8> = avMalloc(frame.data.length);
-    memcpyFromUint8Array(dataP, frame.data.length, frame.data);
-    addAVPacketData(state.avPacket, dataP, frame.data.length);
-    state.avPacket.dts = state.avPacket.pts = BigInt(Math.round(performance.now() * 1000));
-    if (frame.label === 'key') state.avPacket.flags |= AVPacketFlags.AV_PKT_FLAG_KEY;
-    let ret
-    if (state.supportH265 && (state.isHardware || state.isSoftware)) {
-        ret = state.webDecoder?.decode(state.avPacket);
-        if(ret){
-            console.log(`webDecoder decode===>fail ${ret}`)
-        }else{
-            console.log(`webDecoder decode===>success ${ret}`)
-        }
-    } else {
-        ret = state.wasmDecoder?.decode(state.avPacket);
-        if(ret){
-            console.log(`wasmDecoder decode===>fail ${ret}`)
-        }else{
-            console.log(`wasmDecoder decode===>success ${ret}`)
-        }
-    }
-}
-
-// -------- Worker 消息处理 --------
-self.onmessage = async (e: MessageEvent) => {
-    const { type, ...data } = e.data;
-    switch (type) {
-        case 'init':
-            state.supportH265 = data.supportH265;
-            state.isHardware = data.isHardware;
-            state.avPacket = createAVPacket();
-
-            if (state.supportH265 && (state.isHardware || state.isSoftware)) {
-                await initWebDecoder(state.isHardware);
-                initWebRenderer(data.canvas, data.renderType);
-            } else {
-                await initWasmDecoder();
-                await initWasmRender(data.canvas, data.pixelRatio, data.renderType);
-            }
-            break;
-
-        case 'decode':
-            await handleDecode(data);
-            break;
-
-        case 'stopDecode':
-            await stopDecoding();
-            break;
-
-        case 'clearRender':
-            clearRender();
-            break;
-
-        default:
-            console.warn("[Worker] Unknown message type:", type);
-    }
-};