trtc-electron-sdk 10.3.402 → 10.3.403

package/liteav/Renderer/Canvas3DRenderer/RGBACanvas3DRenderer.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vertex = [
+    -1, -1, 0,
+    1, -1, 0.0,
+    1, 1, 0.0,
+    -1, 1, 0.0
+];
+const vertexIndice = [
+    0, 1, 2,
+    0, 2, 3
+];
+const triangleTexCoords = [
+    0.0, 0.0,
+    1.0, 0.0,
+    1.0, 1.0,
+    0.0, 1.0
+];
+const createGL = function (canvas) {
+    const errMsg = 'Create WebGL context failed';
+    let isSuccess = true;
+    let gl = null;
+    try {
+        gl = canvas.getContext('webgl', { alpha: true, premultipliedAlpha: false })
+            || canvas.getContext("experimental-webgl", { alpha: true, premultipliedAlpha: false });
+    }
+    catch (err) {
+        console.warn('trtc:createGL error:', err);
+        isSuccess = false;
+    }
+    if (!isSuccess || !gl) {
+        throw new Error(errMsg);
+    }
+    return gl;
+};
+const createShader = function (gl, shaderSource, shaderType) {
+    //compile the vertex shader
+    const shader = gl.createShader(shaderType);
+    if (shader) {
+        gl.shaderSource(shader, shaderSource);
+        gl.compileShader(shader);
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            throw new Error(`Compile shader failed: ${gl.getShaderInfoLog(shader)}`);
+        }
+        return shader;
+    }
+    else {
+        throw new Error('create Shader failed');
+    }
+};
+const initShaders = function (gl) {
+    const VSHADER_SOURCE = 'attribute vec3 aPos;                    ' +
+        'attribute vec2 aVertexTextureCoord;     ' +
+        'varying mediump vec2 vTextureCoord;       ' +
+        'void main(void){                        ' +
+        '    gl_Position = vec4(aPos, 1);        ' +
+        '    vTextureCoord = aVertexTextureCoord;' +
+        '}';
+    const FSHADER_SOURCE = 'varying mediump vec2 vTextureCoord;                                               ' +
+        'uniform sampler2D uSampler;                                                     ' +
+        'void main(void) {                                                               ' +
+        '    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); ' +
+        '}';
+    // compile shaders
+    const vertexShader = createShader(gl, VSHADER_SOURCE, gl.VERTEX_SHADER);
+    const fragmentShader = createShader(gl, FSHADER_SOURCE, gl.FRAGMENT_SHADER);
+    const vShader = vertexShader;
+    const fShader = fragmentShader;
+    if (!vertexShader || !fragmentShader) {
+        throw new Error('initialize shader failed');
+    }
+    // create program
+    const glProgram = gl.createProgram();
+    if (glProgram) {
+        // attach and link shaders to the program
+        gl.attachShader(glProgram, vertexShader);
+        gl.attachShader(glProgram, fragmentShader);
+        gl.linkProgram(glProgram);
+        if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
+            throw new Error('initialize shader program failed');
+        }
+        else {
+            gl.useProgram(glProgram);
+            return {
+                vShader,
+                fShader,
+                glProgram,
+            };
+        }
+    }
+    else {
+        throw new Error('create shader program failed');
+    }
+};
+const initUniforms = function (gl, glProgram) {
+    return gl.getUniformLocation(glProgram, 'uSampler');
+};
+const initTexture = function (gl) {
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    // c++ addon 层拷贝数据时翻转,这里不做翻转
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    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);
+};
+const initTextureAttr = function (gl, glProgram) {
+    // vertex data
+    const vertexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertex), gl.STATIC_DRAW);
+    // indice data
+    const vertexIndiceBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndiceBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(vertexIndice), gl.STATIC_DRAW);
+    // set position attribute
+    const aVertexPosition = gl.getAttribLocation(glProgram, 'aPos');
+    gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
+    gl.enableVertexAttribArray(aVertexPosition);
+    // texture coordinate data
+    const trianglesTexCoordBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, trianglesTexCoordBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleTexCoords), gl.STATIC_DRAW);
+    // set texture coordinate attribute
+    const vertexTexCoordAttribute = gl.getAttribLocation(glProgram, 'aVertexTextureCoord');
+    gl.enableVertexAttribArray(vertexTexCoordAttribute);
+    gl.vertexAttribPointer(vertexTexCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+};
+class RGBACanvas3DRenderer {
+    constructor(canvas) {
+        try {
+            this.gl = createGL(canvas);
+            const { vShader, fShader, glProgram } = initShaders(this.gl);
+            const samplerUniform = initUniforms(this.gl, glProgram);
+            initTextureAttr(this.gl, glProgram);
+            initTexture(this.gl);
+        }
+        catch (err) {
+            console.warn('trtc:RGBARenderContextCreator.create() failed.', err);
+            throw new Error('create WebGL context failed');
+        }
+    }
+    draw(data, width, height) {
+        try {
+            if (this.gl) {
+                this.gl.viewport(0, 0, width, height);
+                this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, width, height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, data);
+                this.gl.drawElements(this.gl.TRIANGLES, 6, this.gl.UNSIGNED_SHORT, 0);
+            }
+            else {
+                throw new Error('WebGL context is null');
+            }
+        }
+        catch (err) {
+            console.warn('trtc:RGBACanvas3DRenderer.draw error:', err);
+        }
+    }
+    destroy() {
+        this.gl = null;
+    }
+}
+exports.default = RGBACanvas3DRenderer;

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

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

package/liteav/Renderer/Canvas3DRenderer/index.js

@@ -0,0 +1,201 @@
+"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 trtc_define_1 = require("../../trtc_define");
+const util_1 = require("../util");
+const RGBACanvas3DRenderer_1 = __importDefault(require("./RGBACanvas3DRenderer"));
+const I420Canvas3DRenderer_1 = __importDefault(require("./I420Canvas3DRenderer"));
+const UP_LIMIT_COUNT = 16;
+let currentCreatedCount = 0;
+class Canvas3dRenderer {
+    constructor(pixelFormat, view) {
+        this.i420Width = 0;
+        this.i420Height = 0;
+        this.i420Rotation = 0;
+        if (currentCreatedCount < UP_LIMIT_COUNT) {
+            currentCreatedCount = currentCreatedCount + 1;
+            console.log('trtc: currentCreatedCount=', currentCreatedCount);
+        }
+        else {
+            throw new Error('trtc: WebGL context reach up limit');
+        }
+        this.pixelFormat = pixelFormat;
+        this.viewContainer = view;
+        this.contentMode = trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit;
+        const viewWrapper = document.createElement('div');
+        viewWrapper.className = 'trtc-webgl';
+        Object.assign(viewWrapper.style, {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
+        });
+        this.viewWrapper = viewWrapper;
+        this.canvas = null;
+        this.cacheCanvasOptions = {};
+        this.canvas3DRenderer = null;
+        this.bind(view);
+    }
+    _createCanvas3DRenderer() {
+        if (this.canvas) {
+            try {
+                if (this.pixelFormat === trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_RGBA32 || this.pixelFormat === trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_BGRA32) {
+                    return new RGBACanvas3DRenderer_1.default(this.canvas);
+                }
+                else if (this.pixelFormat === trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420) {
+                    return new I420Canvas3DRenderer_1.default(this.canvas);
+                }
+                else {
+                    throw new Error(`pixel format '${this.pixelFormat}' not supported`);
+                }
+            }
+            catch (err) {
+                console.warn('trtc:create WebGL context failed.', err);
+                throw new Error('create and initialize WebGL context failed');
+            }
+        }
+        return null;
+    }
+    setContentMode(mode) {
+        this.contentMode = mode;
+    }
+    bind(viewContainer) {
+        this.viewContainer = viewContainer;
+        if (this.viewWrapper && this.viewContainer) {
+            this.canvas = document.createElement('canvas');
+            this.viewWrapper.appendChild(this.canvas);
+            this.viewContainer.appendChild(this.viewWrapper);
+            // I420 WebGL 渲染有些特殊，视频宽高发生变化时，需要重新创建 canvas
+            if (this.pixelFormat === trtc_define_1.TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420) {
+                // 初始化时，i420Width 和 i420Height 为 0，所以不会创建渲染器
+                if (this.i420Width || this.i420Height) {
+                    this.canvas.width = this.i420Width;
+                    this.canvas.height = this.i420Height;
+                    this.canvas3DRenderer = this._createCanvas3DRenderer();
+                }
+            }
+            else {
+                this.canvas3DRenderer = this._createCanvas3DRenderer();
+            }
+        }
+    }
+    unbind() {
+        var _a;
+        (_a = this.canvas3DRenderer) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.canvas3DRenderer = null;
+        this.canvas && this.viewWrapper && this.viewWrapper.removeChild(this.canvas);
+        this.canvas = null;
+        this.viewWrapper && this.viewContainer && this.viewContainer.removeChild(this.viewWrapper);
+        this.viewContainer = 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) {
+        var _a, _b, _c;
+        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}`);
+            }
+            // I420 WebGL 渲染有些特殊，视频宽高发生变化时，需要重新创建 canvas
+            if (width !== this.i420Width || height !== this.i420Height || rotation !== this.i420Rotation) {
+                const tempViewContainer = this.viewContainer;
+                this.unbind();
+                this.i420Width = width;
+                this.i420Height = height;
+                this.i420Rotation = rotation;
+                this.bind(tempViewContainer);
+            }
+            if (this.viewWrapper && this.canvas3DRenderer) {
+                this._updateCanvasStyle({
+                    contentWidth: width,
+                    contentHeight: height,
+                    containerWidth: (_a = this.viewWrapper) === null || _a === void 0 ? void 0 : _a.clientWidth,
+                    containerHeight: (_b = this.viewWrapper) === null || _b === void 0 ? void 0 : _b.clientHeight,
+                    contentMode: this.contentMode,
+                    rotation,
+                    isNeedMirror: false,
+                    isNeedRotate,
+                });
+                (_c = this.canvas3DRenderer) === null || _c === void 0 ? void 0 : _c.draw(data, width, height);
+            }
+            else {
+                throw new Error('renderer container element is null');
+            }
+        }
+        catch (err) {
+            console.error('trtc:Canvas3dRenderer._drawFrameI420 error:', err);
+        }
+    }
+    _drawFrameRGBA(frameData) {
+        var _a, _b;
+        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.canvas3DRenderer) {
+                this._updateCanvasStyle({
+                    contentWidth: width,
+                    contentHeight: height,
+                    containerWidth: (_a = this.viewWrapper) === null || _a === void 0 ? void 0 : _a.clientWidth,
+                    containerHeight: (_b = this.viewWrapper) === null || _b === void 0 ? void 0 : _b.clientHeight,
+                    contentMode: this.contentMode,
+                    rotation,
+                    isNeedMirror: false,
+                    isNeedRotate,
+                });
+                this.canvas3DRenderer.draw(data, width, height);
+            }
+            else {
+                throw new Error('renderer container element is null');
+            }
+        }
+        catch (err) {
+            console.error('trtc:Canvas3dRenderer._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');
+        }
+    }
+    destroy() {
+        if (this.viewWrapper) {
+            this.unbind();
+            this.viewWrapper = null;
+            currentCreatedCount--;
+        }
+    }
+}
+exports.default = Canvas3dRenderer;