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

package/src/render/WebGLRenderer.ts

@@ -1,150 +0,0 @@
-export class WebGLRenderer {
-    private canvas: HTMLCanvasElement | OffscreenCanvas | null = null;
-    private ctx: WebGLRenderingContext | WebGL2RenderingContext | null = null;
-    private program: WebGLProgram | null = null;
-    private texture: WebGLTexture | null = null;
-    private vertexBuffer: WebGLBuffer | null = null;
-
-    static vertexShaderSource = `
-        attribute vec2 xy;
-        varying highp vec2 uv;
-        void main(void) {
-          gl_Position = vec4(xy, 0.0, 1.0);
-          uv = vec2((1.0 + xy.x) / 2.0, (1.0 - xy.y) / 2.0);
-        }
-    `;
-
-    static fragmentShaderSource = `
-        varying highp vec2 uv;
-        uniform sampler2D texture;
-        void main(void) {
-          gl_FragColor = texture2D(texture, uv);
-        }
-    `;
-
-    constructor(type: "webgl" | "webgl2", canvas: HTMLCanvasElement | OffscreenCanvas) {
-        this.canvas = canvas;
-        const gl = canvas.getContext(type) as
-            | WebGLRenderingContext
-            | WebGL2RenderingContext
-            | null;
-        if (!gl) throw new Error("Failed to get WebGL context");
-        this.ctx = gl;
-
-        // ===== 编译 & 链接程序 =====
-        const program = this.createProgram(gl);
-        gl.useProgram(program);
-        this.program = program;
-
-        // ===== 顶点缓冲 =====
-        const vertexBuffer = gl.createBuffer()!;
-        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-        gl.bufferData(
-            gl.ARRAY_BUFFER,
-            new Float32Array([
-                -1.0, -1.0,
-                -1.0, +1.0,
-                +1.0, +1.0,
-                +1.0, -1.0
-            ]),
-            gl.STATIC_DRAW
-        );
-        const xyLocation = gl.getAttribLocation(program, "xy");
-        gl.vertexAttribPointer(xyLocation, 2, gl.FLOAT, false, 0, 0);
-        gl.enableVertexAttribArray(xyLocation);
-        this.vertexBuffer = vertexBuffer;
-
-        // ===== 创建纹理 =====
-        const texture = gl.createTexture()!;
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        this.texture = texture;
-    }
-
-    private createProgram(gl: WebGLRenderingContext | WebGL2RenderingContext): WebGLProgram {
-        const vertexShader = gl.createShader(gl.VERTEX_SHADER)!;
-        gl.shaderSource(vertexShader, WebGLRenderer.vertexShaderSource);
-        gl.compileShader(vertexShader);
-        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
-            throw new Error(gl.getShaderInfoLog(vertexShader) || "Vertex shader error");
-        }
-
-        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)!;
-        gl.shaderSource(fragmentShader, WebGLRenderer.fragmentShaderSource);
-        gl.compileShader(fragmentShader);
-        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
-            throw new Error(gl.getShaderInfoLog(fragmentShader) || "Fragment shader error");
-        }
-
-        const program = gl.createProgram()!;
-        gl.attachShader(program, vertexShader);
-        gl.attachShader(program, fragmentShader);
-        gl.linkProgram(program);
-        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-            throw new Error(gl.getProgramInfoLog(program) || "Program link error");
-        }
-
-        // 删除 shader，释放显存
-        gl.deleteShader(vertexShader);
-        gl.deleteShader(fragmentShader);
-
-        return program;
-    }
-
-    render(frame: VideoFrame) {
-        if (!this.ctx || !this.canvas || !this.texture) return;
-        const gl = this.ctx;
-
-        // 调整 canvas 尺寸
-        this.canvas.width = frame.displayWidth;
-        this.canvas.height = frame.displayHeight;
-
-        // 上传纹理
-        gl.bindTexture(gl.TEXTURE_2D, this.texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, frame);
-        frame.close();
-
-        // viewport
-        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-
-        // 清屏并绘制
-        gl.clearColor(0, 0, 0, 1);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
-    }
-
-    /** 清空画布，但不销毁资源 */
-    clear() {
-        if (!this.ctx) return;
-        const gl = this.ctx;
-        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-        gl.clearColor(0, 0, 0, 1);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-    }
-
-    /** 销毁 WebGLRenderer，释放所有资源 */
-    destroy() {
-        if (!this.ctx) return;
-        const gl = this.ctx;
-
-        if (this.texture) {
-            gl.deleteTexture(this.texture);
-            this.texture = null;
-        }
-        if (this.vertexBuffer) {
-            gl.deleteBuffer(this.vertexBuffer);
-            this.vertexBuffer = null;
-        }
-        if (this.program) {
-            gl.deleteProgram(this.program);
-            this.program = null;
-        }
-
-        // 清空 canvas 引用
-        this.canvas = null;
-        this.ctx = null;
-    }
-}

package/src/render/WebGPURenderer.ts

@@ -1,194 +0,0 @@
-export class WebGPURenderer {
-    private canvas: HTMLCanvasElement | OffscreenCanvas;
-    private ctx: GPUCanvasContext | null = null;
-
-    private started: Promise<void>;
-
-    private format: GPUTextureFormat | null = null;
-    private device: GPUDevice | null = null;
-    private pipeline: GPURenderPipeline | null = null;
-    private sampler!: GPUSampler;
-
-    // ------------------------------
-    // WGSL Shader
-    // ------------------------------
-    static vertexShaderSource = `
-    struct VertexOutput {
-      @builtin(position) Position: vec4<f32>,
-      @location(0) uv: vec2<f32>,
-    }
-
-    @vertex
-    fn vert_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
-      var pos = array<vec2<f32>, 6>(
-        vec2<f32>( 1.0,  1.0),
-        vec2<f32>( 1.0, -1.0),
-        vec2<f32>(-1.0, -1.0),
-        vec2<f32>( 1.0,  1.0),
-        vec2<f32>(-1.0, -1.0),
-        vec2<f32>(-1.0,  1.0)
-      );
-
-      var uv = array<vec2<f32>, 6>(
-        vec2<f32>(1.0, 0.0),
-        vec2<f32>(1.0, 1.0),
-        vec2<f32>(0.0, 1.0),
-        vec2<f32>(1.0, 0.0),
-        vec2<f32>(0.0, 1.0),
-        vec2<f32>(0.0, 0.0)
-      );
-
-      var output : VertexOutput;
-      output.Position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
-      output.uv = uv[VertexIndex];
-      return output;
-    }
-  `;
-
-    static fragmentShaderSource = `
-    @group(0) @binding(1) var mySampler: sampler;
-    @group(0) @binding(2) var myTexture: texture_external;
-    
-    @fragment
-    fn frag_main(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
-      return textureSampleBaseClampToEdge(myTexture, mySampler, uv);
-    }
-  `;
-
-    constructor(canvas: HTMLCanvasElement | OffscreenCanvas) {
-        this.canvas = canvas;
-        this.started = this.start();
-    }
-
-    // -------------------------------------
-    // WebGPU 初始化
-    // -------------------------------------
-    async start() {
-        const adapter: GPUAdapter | null = await navigator.gpu.requestAdapter();
-        if (!adapter) throw new Error("WebGPU adapter not found");
-
-        this.device = await adapter.requestDevice();
-        this.format = navigator.gpu.getPreferredCanvasFormat();
-
-        this.ctx = this.canvas.getContext("webgpu") as GPUCanvasContext;
-        this.ctx.configure({
-            device: this.device,
-            format: this.format,
-            alphaMode: "opaque",
-        });
-
-        this.pipeline = this.device.createRenderPipeline({
-            layout: "auto",
-            vertex: {
-                module: this.device.createShaderModule({
-                    code: WebGPURenderer.vertexShaderSource,
-                }),
-                entryPoint: "vert_main",
-                buffers: [] // 必须添加
-            },
-            fragment: {
-                module: this.device.createShaderModule({
-                    code: WebGPURenderer.fragmentShaderSource,
-                }),
-                entryPoint: "frag_main",
-                targets: [{ format: this.format }],
-            },
-            primitive: { topology: "triangle-list" },
-        });
-
-        this.sampler = this.device.createSampler({});
-    }
-
-    // frame 类型兼容：HTMLVideoElement 或 VideoFrame 或 CanvasImageSource
-    async render(frame: VideoFrame | HTMLVideoElement | HTMLCanvasElement | HTMLImageElement) {
-        await this.started;
-
-        if (!this.device || !this.ctx || !this.pipeline)
-            throw new Error("WebGPURenderer not initialized");
-
-        // 如果是 VideoFrame 才有 displayWidth/Height
-        const width =
-            (frame as VideoFrame).displayWidth ??
-            (frame as HTMLVideoElement).videoWidth ??
-            (frame as HTMLImageElement).naturalWidth ??
-            this.canvas.width;
-
-        const height =
-            (frame as VideoFrame).displayHeight ??
-            (frame as HTMLVideoElement).videoHeight ??
-            (frame as HTMLImageElement).naturalHeight ??
-            this.canvas.height;
-
-        this.canvas.width = width;
-        this.canvas.height = height;
-
-        const externalTexture = this.device.importExternalTexture({
-            source: frame as any, // WebGPU spec 接受 CanvasImageSource/VideoFrame
-        });
-
-        const bindGroup = this.device.createBindGroup({
-            layout: this.pipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 1, resource: this.sampler },
-                { binding: 2, resource: externalTexture },
-            ],
-        });
-
-        const encoder = this.device.createCommandEncoder();
-        const view = this.ctx.getCurrentTexture().createView();
-
-        const pass = encoder.beginRenderPass({
-            colorAttachments: [
-                {
-                    view,
-                    clearValue: [1, 0, 0, 1],
-                    loadOp: "clear",
-                    storeOp: "store",
-                },
-            ],
-        });
-
-        pass.setPipeline(this.pipeline);
-        pass.setBindGroup(0, bindGroup);
-        pass.draw(6);
-        pass.end();
-
-        this.device.queue.submit([encoder.finish()]);
-
-        // VideoFrame 需要 close()，HTMLVideoElement 不需要
-        if (frame instanceof VideoFrame) frame.close();
-    }
-
-    /** 清空画布 */
-    async clear() {
-        await this.started;
-        if (!this.device || !this.ctx || !this.pipeline) return;
-
-        const encoder = this.device.createCommandEncoder();
-        const view = this.ctx.getCurrentTexture().createView();
-
-        const pass = encoder.beginRenderPass({
-            colorAttachments: [
-                {
-                    view,
-                    clearValue: [0, 0, 0, 1], // 清屏黑色
-                    loadOp: "clear",
-                    storeOp: "store",
-                },
-            ],
-        });
-
-        pass.end();
-        this.device.queue.submit([encoder.finish()]);
-    }
-
-    /** 销毁 WebGPURenderer，释放所有 GPU 资源 */
-    destroy() {
-        // WebGPU 没有显式 destroy pipeline/texture 的统一接口
-        // 手动释放引用，便于 GC 回收
-        this.pipeline = null;
-        this.ctx = null;
-        this.device = null;
-        this.started = Promise.resolve();
-    }
-}

package/src/types/index.ts

@@ -1,15 +0,0 @@
-export interface RenderingCapabilities {
-    webgpu: boolean
-    webgl2: boolean
-    webgl1: boolean
-    canvas2d: boolean
-    best: RendererType
-}
-
-export type RendererType = 'webgpu' | 'webgl2' | 'webgl1' | 'canvas2d' | 'none'
-
-export interface DecoderSupportResult {
-    supported: boolean;        // 是否可解码
-    hardware: boolean;         // 是否是硬件解码
-    software: boolean; // 是否是软件解码
-}