trtc-electron-sdk 10.3.402 → 10.3.403

package/liteav/Render/I420VideoRenderer/index.js

@@ -70,15 +70,6 @@ class I420VideoRenderer {
                 containerWidth: this.element.clientWidth,
                 containerHeight: this.element.clientHeight,
             });
-            if (global.i420Frames) {
-                global.i420Frames.push(frameData);
-                if (global.i420Frames.length > 100) {
-                    global.i420Frames.shift();
-                }
-            }
-            else {
-                global.i420Frames = [frameData];
-            }
             try {
                 const vf = new VideoFrame(frameData.data, {
                     format: 'I420',

package/liteav/Render/util.js

@@ -128,7 +128,6 @@ function calcVideoStyle(options = {
 exports.calcVideoStyle = calcVideoStyle;
 exports.config = new Config();
 function allocBuffer(length, userId, streamType) {
-    console.debug('trtc:alloc buffer:', length, userId, streamType);
     if (length >= 1) {
         return Buffer.alloc(length);
     }

package/liteav/Renderer/Canvas2DRenderer/index.d.ts

@@ -0,0 +1,24 @@
+import { TRTCVideoFillMode, TRTCVideoPixelFormat } from "../../trtc_define";
+import IRenderer from "../IRenderer";
+import { TFrameData } from "../types";
+declare class Canvas2dRenderer implements IRenderer {
+    private pixelFormat;
+    private viewContainer;
+    private contentMode;
+    private canvas;
+    private viewWrapper;
+    private cacheCanvasOptions;
+    private yuv;
+    constructor(pixelFormat: TRTCVideoPixelFormat, view: HTMLElement);
+    setContentMode(mode?: TRTCVideoFillMode): void;
+    private bind;
+    private unbind;
+    drawFrame(frameData: TFrameData): void;
+    _drawFrameI420(frameData: TFrameData): void;
+    private _drawFrameRGBA;
+    private _drawFrameBGRA;
+    private _updateCanvasStyle;
+    private _correctI420Data;
+    destroy(): void;
+}
+export default Canvas2dRenderer;

package/liteav/Renderer/Canvas2DRenderer/index.js

@@ -0,0 +1,213 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_isequal_1 = __importDefault(require("lodash.isequal"));
+const yuv_canvas_1 = __importDefault(require("yuv-canvas"));
+const yuv_buffer_1 = __importDefault(require("../yuv-buffer"));
+const trtc_define_1 = require("../../trtc_define");
+const util_1 = require("../util");
+class Canvas2dRenderer {
+    constructor(pixelFormat, view) {
+        this.pixelFormat = pixelFormat;
+        this.viewContainer = view;
+        this.contentMode = trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit;
+        const viewWrapper = document.createElement('div');
+        viewWrapper.className = 'trtc-2d';
+        Object.assign(viewWrapper.style, {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
+        });
+        this.viewWrapper = viewWrapper;
+        this.canvas = document.createElement('canvas');
+        this.viewWrapper.appendChild(this.canvas);
+        this.cacheCanvasOptions = {};
+        this.bind(view);
+    }
+    setContentMode(mode = trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit) {
+        this.contentMode = mode;
+    }
+    bind(viewContainer) {
+        this.viewContainer = viewContainer;
+        if (this.viewWrapper) {
+            this.viewContainer.appendChild(this.viewWrapper);
+            if (this.pixelFormat === trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420) {
+                this.yuv = yuv_canvas_1.default.attach(this.canvas, { webGL: false });
+            }
+        }
+    }
+    unbind() {
+        this.viewWrapper && this.viewContainer && this.viewContainer.removeChild(this.viewWrapper);
+        this.viewContainer = null;
+        this.yuv = null;
+    }
+    drawFrame(frameData) {
+        switch (this.pixelFormat) {
+            case trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420:
+                this._drawFrameI420(frameData);
+                break;
+            case trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_RGBA32:
+                this._drawFrameRGBA(frameData);
+                break;
+            case trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_BGRA32:
+                this._drawFrameBGRA(frameData);
+                break;
+            default:
+                console.warn('trtc:Canvas2dRenderer.drawFrame error. Not support video format:', this.pixelFormat);
+        }
+    }
+    _drawFrameI420(frameData) {
+        try {
+            const { data, width, height, timestamp, rotation, isNeedRotate } = frameData;
+            if (width <= 0 || height <= 0) {
+                throw new Error(`wrong video parameter width:${width} or height:${height}`);
+            }
+            const yLength = width * height;
+            const uLength = width * height / 4;
+            const yPlane = new Uint8Array(data.buffer || data, 0, yLength);
+            const uPlane = new Uint8Array(data.buffer || data, yLength, uLength);
+            const vPlane = new Uint8Array(data.buffer || data, yLength + uLength, uLength);
+            const newFrameData = this._correctI420Data({ width, height, yUint8Array: yPlane, uUint8Array: uPlane, vUint8Array: vPlane });
+            const { width: newWidth, yUint8Array, uUint8Array, vUint8Array } = newFrameData;
+            if (this.viewWrapper && this.yuv) {
+                this._updateCanvasStyle({
+                    contentWidth: newWidth,
+                    contentHeight: height,
+                    containerWidth: this.viewWrapper.clientWidth,
+                    containerHeight: this.viewWrapper.clientHeight,
+                    contentMode: this.contentMode,
+                    rotation,
+                    isNeedRotate,
+                    isNeedMirror: false,
+                });
+                const format = yuv_buffer_1.default.format({
+                    width: newWidth,
+                    height,
+                    chromaWidth: newWidth / 2,
+                    chromaHeight: height / 2
+                });
+                const y = yuv_buffer_1.default.lumaPlane(format, yUint8Array);
+                const u = yuv_buffer_1.default.chromaPlane(format, uUint8Array);
+                const v = yuv_buffer_1.default.chromaPlane(format, vUint8Array);
+                const frame = yuv_buffer_1.default.frame(format, y, u, v);
+                this.yuv.drawFrame(frame);
+            }
+            else {
+                throw new Error('renderer container element is null');
+            }
+        }
+        catch (err) {
+            console.error('trtc:Canvas2dRenderer._drawFrameI420 error:', err);
+        }
+    }
+    _drawFrameRGBA(frameData) {
+        try {
+            const { data, width, height, timestamp, rotation, isNeedRotate } = frameData;
+            if (width <= 0 || height <= 0) {
+                throw new Error(`wrong video parameter width:${width} or height:${height}`);
+            }
+            if (this.viewWrapper && this.canvas) {
+                this._updateCanvasStyle({
+                    contentWidth: width,
+                    contentHeight: height,
+                    containerWidth: this.viewWrapper.clientWidth,
+                    containerHeight: this.viewWrapper.clientHeight,
+                    contentMode: this.contentMode,
+                    rotation,
+                    isNeedRotate,
+                    isNeedMirror: false,
+                });
+                const newImage = new ImageData(new Uint8ClampedArray(data.buffer || data), width, height);
+                const tempCanvas = document.createElement('canvas');
+                tempCanvas.width = width;
+                tempCanvas.height = height;
+                const tempCtx = tempCanvas.getContext('2d');
+                if (tempCtx) {
+                    tempCtx.putImageData(newImage, 0, 0);
+                    let ctx = this.canvas.getContext("2d");
+                    if (ctx) {
+                        ctx.drawImage(tempCanvas, 0, 0);
+                    }
+                    else {
+                        throw new Error('draw video to canvas failed');
+                    }
+                }
+                else {
+                    throw new Error('draw video to temp canvas failed');
+                }
+            }
+            else {
+                throw new Error('renderer container element is null');
+            }
+        }
+        catch (err) {
+            console.error('trtc:Canvas2dRenderer._drawFrameRGBA error:', err);
+        }
+    }
+    _drawFrameBGRA(frameData) {
+        this._drawFrameRGBA(Object.assign(Object.assign({}, frameData), { data: (0, util_1.transferBGRA2RGBA)(frameData.data, frameData.width, frameData.height) }));
+    }
+    _updateCanvasStyle(options) {
+        if (this.canvas) {
+            if ((0, lodash_isequal_1.default)(this.cacheCanvasOptions, options)) {
+                return;
+            }
+            this.cacheCanvasOptions = Object.assign({}, options);
+            const { width, height, transform } = (0, util_1.calcCanvasStyle)(options);
+            this.canvas.width = width;
+            this.canvas.height = height;
+            this.canvas.style.transform = transform;
+        }
+        else {
+            throw new Error('canvas element not exist');
+        }
+    }
+    _correctI420Data(data) {
+        const { width, height, yUint8Array, uUint8Array, vUint8Array } = data;
+        const widthBase = 8;
+        const w8Modulo = width % widthBase;
+        if (w8Modulo !== 0) {
+            const newWidth = width - w8Modulo;
+            const newYSize = newWidth * height;
+            const newYArrayBuffer = new ArrayBuffer(newYSize);
+            const newYUint8Array = new Uint8Array(newYArrayBuffer);
+            let oldIndex = -1, newIndex = -1;
+            for (let h = 0; h < height; h += 1) {
+                for (let w = 0; w < newWidth; w += 1) {
+                    oldIndex = width * h + w;
+                    newIndex = newWidth * h + w;
+                    newYUint8Array[newIndex] = yUint8Array[oldIndex];
+                }
+            }
+            const oldChromaWidth = width / 2;
+            const newChromaWidth = newWidth / 2;
+            const chromaHeight = height / 2;
+            const newChromaSize = newChromaWidth * chromaHeight;
+            const newUArrayBuffer = new ArrayBuffer(newChromaSize);
+            const newUInt8Array = new Uint8Array(newUArrayBuffer);
+            const newVArrayBuffer = new ArrayBuffer(newChromaSize);
+            const newVInt8Array = new Uint8Array(newVArrayBuffer);
+            for (let h = 0; h < chromaHeight; h += 1) {
+                for (let w = 0; w < newChromaWidth; w += 1) {
+                    oldIndex = oldChromaWidth * h + w;
+                    newIndex = newChromaWidth * h + w;
+                    newUInt8Array[newIndex] = uUint8Array[oldIndex];
+                    newVInt8Array[newIndex] = vUint8Array[oldIndex];
+                }
+            }
+            return Object.assign(Object.assign({}, data), { width: newWidth, height, yUint8Array: newYUint8Array, uUint8Array: newUInt8Array, vUint8Array: newVInt8Array });
+        }
+        return data;
+    }
+    destroy() {
+        this.unbind();
+        this.viewWrapper = null;
+        this.canvas = null;
+        this.cacheCanvasOptions = null;
+    }
+}
+exports.default = Canvas2dRenderer;

package/liteav/Renderer/Canvas3DRenderer/I420Canvas3DRenderer.d.ts

@@ -0,0 +1,23 @@
+import ICanvas3DRenderer from './ICanvas3DRenderer';
+declare class I420Canvas3DRenderer implements ICanvas3DRenderer {
+    private gl;
+    private glProgram;
+    private positionLocation;
+    private texCoordLocation;
+    private surfaceBuffer;
+    private texCoordBuffer;
+    private yTexture;
+    private uTexture;
+    private vTexture;
+    constructor(canvas: HTMLCanvasElement);
+    draw(data: ArrayBufferView, width: number, height: number): void;
+    destroy(): void;
+    private _initTextures;
+    private _updateTexCoordLocation;
+    private _updatePositionLocation;
+    private _updateYUVTexImage2D;
+    private _deleteTexture;
+    private _deleteBuffer;
+    private _deleteProgram;
+}
+export default I420Canvas3DRenderer;

package/liteav/Renderer/Canvas3DRenderer/I420Canvas3DRenderer.js

@@ -0,0 +1,276 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// import { createProgramFromSources } from './webgl-utils.js';
+const util_1 = require("../util");
+const createProgramFromSources = require('./webgl-utils').createProgramFromSources;
+const vertexShaderSource = 'attribute vec2 a_position;'
+    + 'attribute vec2 a_texCoord;'
+    + 'uniform vec2 u_resolution;'
+    + 'varying vec2 v_texCoord;'
+    + 'void main() {'
+    + 'vec2 zeroToOne = a_position / u_resolution;'
+    + '   vec2 zeroToTwo = zeroToOne * 2.0;'
+    + '   vec2 clipSpace = zeroToTwo - 1.0;'
+    + '   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);'
+    + 'v_texCoord = a_texCoord;'
+    + '}';
+const yuvShaderSource = 'precision mediump float;'
+    + 'uniform sampler2D Ytex;'
+    + 'uniform sampler2D Utex,Vtex;'
+    + 'varying vec2 v_texCoord;'
+    + 'void main(void) {'
+    + '  float nx,ny,r,g,b,y,u,v;'
+    + '  mediump vec4 txl,ux,vx;'
+    + '  nx=v_texCoord[0];'
+    + '  ny=v_texCoord[1];'
+    + '  y=texture2D(Ytex,vec2(nx,ny)).r;'
+    + '  u=texture2D(Utex,vec2(nx,ny)).r;'
+    + '  v=texture2D(Vtex,vec2(nx,ny)).r;'
+    + '  y=1.1643*(y-0.0625);'
+    + '  u=u-0.5;'
+    + '  v=v-0.5;'
+    + '  r=y+1.5958*v;'
+    + '  g=y-0.39173*u-0.81290*v;'
+    + '  b=y+2.017*u;'
+    + '  gl_FragColor=vec4(r,g,b,1.0);'
+    + '}';
+const createGL = function (canvas) {
+    const errMsg = 'Create WebGL context failed';
+    let isSuccess = true;
+    let gl = null;
+    try {
+        gl = canvas.getContext('webgl', { preserveDrawingBuffer: true })
+            || canvas.getContext("experimental-webgl");
+    }
+    catch (err) {
+        console.warn('trtc:createGL error:', err);
+        isSuccess = false;
+    }
+    if (!isSuccess || !gl) {
+        throw new Error(errMsg);
+    }
+    return gl;
+};
+class I420Canvas3DRenderer {
+    constructor(canvas) {
+        this.positionLocation = null;
+        this.texCoordLocation = null;
+        this.surfaceBuffer = null;
+        this.texCoordBuffer = null;
+        this.yTexture = null;
+        this.uTexture = null;
+        this.vTexture = null;
+        try {
+            this.gl = createGL(canvas);
+            this.gl.enable(this.gl.DEPTH_TEST);
+            this.gl.depthFunc(this.gl.LEQUAL);
+            this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+            this.glProgram = createProgramFromSources(this.gl, [vertexShaderSource, yuvShaderSource]);
+            this.gl.useProgram(this.glProgram);
+            this._initTextures();
+            console.debug('trtc:gl created', this.gl, canvas);
+        }
+        catch (err) {
+            console.warn('trtc:I420RenderContextCreator.constructor() failed.', err);
+            throw new Error('create WebGL context failed');
+        }
+    }
+    draw(data, width, height) {
+        try {
+            if (this.gl) {
+                const yLength = width * height;
+                const uLength = width * height / 4;
+                const yPlane = new Uint8Array(data.buffer || data, 0, yLength);
+                const uPlane = new Uint8Array(data.buffer || data, yLength, uLength);
+                const vPlane = new Uint8Array(data.buffer || data, yLength + uLength, uLength);
+                this._updateTexCoordLocation();
+                this._updateYUVTexImage2D(width, height, yPlane, uPlane, vPlane);
+                this._updatePositionLocation(width, height);
+                this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+            }
+            else {
+                throw new Error('WebGL context is null');
+            }
+        }
+        catch (err) {
+            console.warn('trtc:I420Canvas3DRenderer.draw error:', err);
+        }
+    }
+    destroy() {
+        try {
+            if (this.gl) {
+                const glExtension = this.gl.getExtension('WEBGL_lose_context');
+                if (glExtension) {
+                    glExtension.loseContext();
+                }
+                console.debug('trtc:I420Canvas3DRenderer isContextLost:', this.gl.isContextLost());
+            }
+        }
+        catch (err) {
+            console.warn('trtc:I420Canvas3DRenderer.destroy', err);
+        }
+        this._deleteProgram(this.glProgram);
+        this.glProgram = null;
+        this.positionLocation = null;
+        this.texCoordLocation = null;
+        this._deleteTexture(this.yTexture);
+        this._deleteTexture(this.uTexture);
+        this._deleteTexture(this.vTexture);
+        this.yTexture = null;
+        this.uTexture = null;
+        this.vTexture = null;
+        this._deleteBuffer(this.texCoordBuffer);
+        this._deleteBuffer(this.surfaceBuffer);
+        this.texCoordBuffer = null;
+        this.surfaceBuffer = null;
+        this.gl = null;
+    }
+    _initTextures() {
+        if (this.gl && this.glProgram) {
+            this.positionLocation = this.gl.getAttribLocation(this.glProgram, 'a_position');
+            this.texCoordLocation = this.gl.getAttribLocation(this.glProgram, 'a_texCoord');
+            this.surfaceBuffer = this.gl.createBuffer();
+            this.texCoordBuffer = this.gl.createBuffer();
+            this.gl.activeTexture(this.gl.TEXTURE0);
+            this.yTexture = this.gl.createTexture();
+            this.gl.bindTexture(this.gl.TEXTURE_2D, this.yTexture);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+            this.gl.activeTexture(this.gl.TEXTURE1);
+            this.uTexture = this.gl.createTexture();
+            this.gl.bindTexture(this.gl.TEXTURE_2D, this.uTexture);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+            this.gl.activeTexture(this.gl.TEXTURE2);
+            this.vTexture = this.gl.createTexture();
+            this.gl.bindTexture(this.gl.TEXTURE_2D, this.vTexture);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+            this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+            const y = this.gl.getUniformLocation(this.glProgram, 'Ytex');
+            this.gl.uniform1i(y, 0);
+            const u = this.gl.getUniformLocation(this.glProgram, 'Utex');
+            this.gl.uniform1i(u, 1);
+            const v = this.gl.getUniformLocation(this.glProgram, 'Vtex');
+            this.gl.uniform1i(v, 2);
+        }
+    }
+    _updateTexCoordLocation() {
+        if (this.gl && this.texCoordLocation !== null) {
+            // Update texCoord location
+            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
+            this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([
+                0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1
+            ]), this.gl.STATIC_DRAW);
+            this.gl.enableVertexAttribArray(this.texCoordLocation);
+            this.gl.vertexAttribPointer(this.texCoordLocation, 2, this.gl.FLOAT, false, 0, 0);
+        }
+    }
+    _updatePositionLocation(width, height) {
+        if (this.gl && this.positionLocation !== null && this.glProgram) {
+            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.surfaceBuffer);
+            this.gl.enableVertexAttribArray(this.positionLocation);
+            this.gl.vertexAttribPointer(this.positionLocation, 2, this.gl.FLOAT, false, 0, 0);
+            const p1 = { x: 0, y: 0 };
+            const p2 = { x: width, y: 0 };
+            const p3 = { x: width, y: height };
+            const p4 = { x: 0, y: height };
+            let pp1 = p1, pp2 = p2, pp3 = p3, pp4 = p4;
+            // if (isNeedRotate) {
+            //     switch (rotation) {
+            //         case 0:
+            //             break;
+            //         case 90:
+            //             pp1 = p2;
+            //             pp2 = p3;
+            //             pp3 = p4;
+            //             pp4 = p1;
+            //             break;
+            //         case 180:
+            //             pp1 = p3;
+            //             pp2 = p4;
+            //             pp3 = p1;
+            //             pp4 = p2;
+            //             break;
+            //         case 270:
+            //             pp1 = p4;
+            //             pp2 = p1;
+            //             pp3 = p2;
+            //             pp4 = p3;
+            //             break;
+            //         default:
+            //     }
+            // }
+            this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([
+                pp1.x,
+                pp1.y,
+                pp2.x,
+                pp2.y,
+                pp4.x,
+                pp4.y,
+                pp4.x,
+                pp4.y,
+                pp2.x,
+                pp2.y,
+                pp3.x,
+                pp3.y
+            ]), this.gl.STATIC_DRAW);
+            const resolutionLocation = this.gl.getUniformLocation(this.glProgram, 'u_resolution');
+            this.gl.uniform2f(resolutionLocation, width, height);
+        }
+    }
+    _updateYUVTexImage2D(width, height, yplane, uplane, vplane) {
+        if (this.gl) {
+            let e;
+            this.gl.activeTexture(this.gl.TEXTURE0);
+            this.gl.bindTexture(this.gl.TEXTURE_2D, this.yTexture);
+            this.gl.pixelStorei(this.gl.UNPACK_ALIGNMENT, 1);
+            this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, width, height, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, yplane);
+            if (util_1.config.getDebugMode()) {
+                e = this.gl.getError();
+                if (e != this.gl.NO_ERROR) {
+                    console.log('trtc:upload y plane ', width, height, yplane.byteLength, ' error', e);
+                }
+            }
+            this.gl.activeTexture(this.gl.TEXTURE1);
+            this.gl.bindTexture(this.gl.TEXTURE_2D, this.uTexture);
+            this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, width / 2, height / 2, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, uplane);
+            if (util_1.config.getDebugMode()) {
+                e = this.gl.getError();
+                if (e != this.gl.NO_ERROR) {
+                    console.log('trtc:upload u plane ', width, height, uplane.byteLength, '  error', e);
+                }
+            }
+            this.gl.activeTexture(this.gl.TEXTURE2);
+            this.gl.bindTexture(this.gl.TEXTURE_2D, this.vTexture);
+            this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, width / 2, height / 2, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, vplane);
+            if (util_1.config.getDebugMode()) {
+                e = this.gl.getError();
+                if (e != this.gl.NO_ERROR) {
+                    console.log('trtc:upload v plane ', width, height, vplane.byteLength, '  error', e);
+                }
+            }
+        }
+    }
+    _deleteTexture(texture) {
+        if (texture && this.gl) {
+            this.gl.deleteTexture(texture);
+        }
+    }
+    _deleteBuffer(buffer) {
+        if (buffer && this.gl) {
+            this.gl.deleteBuffer(buffer);
+        }
+    }
+    _deleteProgram(program) {
+        if (program && this.gl) {
+            this.gl.deleteProgram(program);
+        }
+    }
+}
+exports.default = I420Canvas3DRenderer;

package/liteav/Renderer/Canvas3DRenderer/ICanvas3DRenderer.d.ts

@@ -0,0 +1,4 @@
+export default interface ICanvas3DRenderer {
+    draw(data: ArrayBufferView, width: number, height: number): void;
+    destroy(): void;
+}

package/liteav/Renderer/Canvas3DRenderer/ICanvas3DRenderer.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/liteav/Renderer/Canvas3DRenderer/RGBACanvas3DRenderer.d.ts

@@ -0,0 +1,8 @@
+import ICanvas3DRenderer from "./ICanvas3DRenderer";
+declare class RGBACanvas3DRenderer implements ICanvas3DRenderer {
+    private gl;
+    constructor(canvas: HTMLCanvasElement);
+    draw(data: ArrayBufferView, width: number, height: number): void;
+    destroy(): void;
+}
+export default RGBACanvas3DRenderer;