trtc-electron-sdk 11.7.603-alpha.3 → 11.7.603

package/liteav/LocalMediaTranscoder/index.d.ts

@@ -402,9 +402,9 @@ declare class TRTCLocalMediaTranscoder extends EventEmitter {
     removeImageSource(path: string): void;
     /**
      * 设置本地混流转码视频预览节点
-     * @param el {HTMLElement | null} - 如果传入的是 HTML 元素，必须是块元素；传入 null 时，会停止视频预览
+     * @param view {HTMLElement | null} - 如果传入的是 HTML 元素，必须是块元素；传入 null 时，会停止视频预览
      */
-    setMixedVideoRenderView(el: HTMLElement | null): void;
+    setMixedVideoRenderView(view: HTMLElement | null): void;
     private setMixedVideoFrameRenderCallback;
     private unsetMixedVideoFrameRenderCallback;
     private setEventCallback;

package/liteav/LocalMediaTranscoder/index.js

@@ -1,9 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRTCLocalMediaTranscodingSourceType = exports.TRTCLocalMediaTranscodingEvents = exports.TRTCLocalMediaTranscodingError = void 0;
 const events_1 = require("events");
 const trtc_define_1 = require("../trtc_define");
 const Renderer_1 = require("../Renderer");
+const logger_1 = __importDefault(require("../logger"));
 /**
  * @description 本地媒体流混流转码错误码
  * @enum {Number}
@@ -397,7 +401,7 @@ class TRTCLocalMediaTranscoder extends events_1.EventEmitter {
             this.container = null;
         }
         catch (error) {
-            console.warn('trtc: TRTCLocalMediaTranscoder.destroy error', error);
+            logger_1.default.warn('TRTCLocalMediaTranscoder.destroy error', error);
         }
     }
     // 帧率、码率在 JS 层为数值，可能被设置为负数，底层要求为无符号整数，此处做检验并将负值设置为零
@@ -516,11 +520,11 @@ class TRTCLocalMediaTranscoder extends events_1.EventEmitter {
     }
     /**
      * 设置本地混流转码视频预览节点
-     * @param el {HTMLElement | null} - 如果传入的是 HTML 元素，必须是块元素；传入 null 时，会停止视频预览
+     * @param view {HTMLElement | null} - 如果传入的是 HTML 元素，必须是块元素；传入 null 时，会停止视频预览
      */
-    setMixedVideoRenderView(el) {
-        if (el && el instanceof HTMLElement) {
-            if (this.container === el) {
+    setMixedVideoRenderView(view) {
+        if (view && view instanceof HTMLElement) {
+            if (this.container === view) {
                 return; // 重复在同一个 HTML 节点内渲染，不用处理，直接退出
             }
             else if (this.renderer) {
@@ -528,13 +532,25 @@ class TRTCLocalMediaTranscoder extends events_1.EventEmitter {
                 this.renderer.destroy();
                 this.renderer = null;
                 // 重新记录渲染的 HTML 节点并创建渲染器 
-                this.container = el;
-                this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container);
+                this.container = view;
+                this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container, {
+                    type: Renderer_1.RenderType.Video,
+                    onContextLost: () => {
+                        this.container = view;
+                        this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container, { type: Renderer_1.RenderType.Canvas2D });
+                    },
+                });
             }
             else {
                 // 第一次设置渲染的 HTML 节点，并创建渲染器，设置渲染回调
-                this.container = el;
-                this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container);
+                this.container = view;
+                this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container, {
+                    type: Renderer_1.RenderType.Video,
+                    onContextLost: () => {
+                        this.container = view;
+                        this.renderer = (0, Renderer_1.createRenderer)(this.pixelFormat, this.container, { type: Renderer_1.RenderType.Canvas2D });
+                    },
+                });
                 this.setMixedVideoFrameRenderCallback();
             }
         }

package/liteav/Render/BGRAVideoRenderer/index.js

@@ -0,0 +1,114 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const EventEmitter = require('events').EventEmitter;
+const isEqual = require('lodash.isequal');
+const { calcVideoStyle } = require('../util');
+/* contentMode
+* - 0: Cropped mode. Uniformly scale the video until it fills the visible boundaries (cropped).
+* One dimension of the video may have clipped contents.
+* - 1: Fit mode. Uniformly scale the video until one of its dimension fits the boundary (zoomed to fit).
+* Areas that are not filled due to the disparity in the aspect ratio will be filled with black.
+*/
+class BGRAVideoRenderer {
+    constructor() {
+        this.cachedOptions = {};
+        this.event = new EventEmitter();
+        this.element = null;
+        this.video = document.createElement('video');
+        this.video.setAttribute('style', 'width: 100%; height: 100%; display: block; margin: 0 auto;');
+        this.video.setAttribute('autoplay', 'autoplay');
+        this.video.muted = true;
+        this.contentMode = 1;
+        this.ready = false;
+        this.track = new MediaStreamTrackGenerator({ kind: 'video' });
+        this.writer = this.track.writable.getWriter();
+    }
+    getView() {
+        return this.element;
+    }
+    _updateStyle(options = {
+        contentWidth: 0,
+        contentHeight: 0,
+        rotation: 0,
+        mirrorView: false,
+        contentMode: 0,
+        containerWidth: 0,
+        containerHeight: 0,
+        isNeedRotate: true
+    }) {
+        if (isEqual(this.cachedOptions, options)) {
+            return;
+        }
+        this.cachedOptions = Object.assign({}, options);
+        const style = calcVideoStyle(options);
+        Object.keys(style).forEach(key => {
+            this.video.style[key] = style[key];
+        });
+    }
+    drawFrame(frameData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.ready) {
+                this.ready = true;
+                this.event.emit('ready');
+            }
+            this._updateStyle({
+                rotation: frameData.rotation,
+                isNeedRotate: frameData.isNeedRotate,
+                contentWidth: frameData.width,
+                contentHeight: frameData.height,
+                contentMode: this.contentMode,
+                mirrorView: false,
+                containerWidth: this.element.clientWidth,
+                containerHeight: this.element.clientHeight,
+            });
+            if (global.bgraFrames) {
+                global.bgraFrames.push(frameData);
+                if (global.bgraFrames.length > 100) {
+                    global.bgraFrames.shift();
+                }
+            }
+            else {
+                global.bgraFrames = [frameData];
+            }
+            try {
+                const vf = new VideoFrame(frameData.data, {
+                    format: 'BGRA',
+                    codedWidth: frameData.width,
+                    codedHeight: frameData.height,
+                    timestamp: frameData.timestamp,
+                });
+                yield this.writer.write(vf);
+            }
+            catch (error) {
+                console.error('VideoRender.drawImage error:', error);
+            }
+        });
+    }
+    bind(element) {
+        this.element = element;
+        if (this.element.firstChild) {
+            this.element.removeChild(this.element.firstChild);
+        }
+        this.element.appendChild(this.video);
+        this.video.srcObject = new MediaStream([this.track]);
+    }
+    unbind() {
+        if (this.element.firstChild) {
+            this.element.removeChild(this.element.firstChild);
+        }
+        this.element = null;
+    }
+    setContentMode(mode) {
+        this.contentMode = mode;
+    }
+}
+exports.default = BGRAVideoRenderer;

package/liteav/Render/Canvas3DRGBARenderer/index.js

@@ -0,0 +1,241 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const EventEmitter = require('events').EventEmitter;
+const isEqual = require('lodash.isequal');
+const { calcCanvasStyle } = require('../util');
+class Canvas3DRGBARenderer {
+    constructor() {
+        this.cacheCanvasOpts = {};
+        this.event = new EventEmitter();
+        this.ready = false;
+        this.contentMode = 1;
+        this.container = null;
+        this.canvas = null;
+        this.element = null;
+        this.gl = null;
+        this.glProgram = null;
+        this.vShader = null;
+        this.fShader = null;
+        this.samplerUniform = null;
+        this.texture = null;
+        this.vertex = [
+            -1, -1, 0,
+            1, -1, 0.0,
+            1, 1, 0.0,
+            -1, 1, 0.0
+        ];
+        this.vertexIndice = [
+            0, 1, 2,
+            0, 2, 3
+        ];
+        this.triangleTexCoords = [
+            0.0, 0.0,
+            1.0, 0.0,
+            1.0, 1.0,
+            0.0, 1.0
+        ];
+    }
+    _initGL() {
+        try {
+            this.gl = this.canvas.getContext('webgl', { alpha: true, premultipliedAlpha: false }); //|| canvas.getContext("experimental-webgl", { antialias: false });
+        }
+        catch (e) {
+            return false;
+        }
+        if (this.gl) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    _initShaders() {
+        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 = this._makeShader(VSHADER_SOURCE, this.gl.VERTEX_SHADER);
+        const fragmentShader = this._makeShader(FSHADER_SOURCE, this.gl.FRAGMENT_SHADER);
+        this.vShader = vertexShader;
+        this.fShader = fragmentShader;
+        if (!vertexShader || !fragmentShader) {
+            return false;
+        }
+        // create program
+        this.glProgram = this.gl.createProgram();
+        // attach and link shaders to the program
+        this.gl.attachShader(this.glProgram, vertexShader);
+        this.gl.attachShader(this.glProgram, fragmentShader);
+        this.gl.linkProgram(this.glProgram);
+        if (!this.gl.getProgramParameter(this.glProgram, this.gl.LINK_STATUS)) {
+            console.log('trtc:Unable to initialize the shader program.');
+            return false;
+        }
+        else {
+            this.gl.useProgram(this.glProgram);
+            return true;
+        }
+    }
+    _makeShader(src, type) {
+        //compile the vertex shader
+        const shader = this.gl.createShader(type);
+        this.gl.shaderSource(shader, src);
+        this.gl.compileShader(shader);
+        if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+            console.log(`trtc:Error compiling shader: ${this.gl.getShaderInfoLog(shader)}`);
+            return null;
+        }
+        return shader;
+    }
+    _initUniforms() {
+        this.samplerUniform = this.gl.getUniformLocation(this.glProgram, 'uSampler');
+        return true;
+    }
+    _initTexture() {
+        this.texture = this.gl.createTexture();
+        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+        // c++ addon 层拷贝数据时翻转,这里不做翻转
+        this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, true);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+        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);
+    }
+    _initTextureAttr() {
+        // vertex data
+        const vertexBuffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(this.vertex), this.gl.STATIC_DRAW);
+        // indice data
+        const vertexIndiceBuffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, vertexIndiceBuffer);
+        this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.vertexIndice), this.gl.STATIC_DRAW);
+        // set position attribute
+        const aVertexPosition = this.gl.getAttribLocation(this.glProgram, 'aPos');
+        this.gl.vertexAttribPointer(aVertexPosition, 3, this.gl.FLOAT, false, 0, 0);
+        this.gl.enableVertexAttribArray(aVertexPosition);
+        // texture coordinate data
+        const trianglesTexCoordBuffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, trianglesTexCoordBuffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(this.triangleTexCoords), this.gl.STATIC_DRAW);
+        // set texture coordinate attribute
+        const vertexTexCoordAttribute = this.gl.getAttribLocation(this.glProgram, 'aVertexTextureCoord');
+        this.gl.enableVertexAttribArray(vertexTexCoordAttribute);
+        this.gl.vertexAttribPointer(vertexTexCoordAttribute, 2, this.gl.FLOAT, false, 0, 0);
+    }
+    getView() {
+        return this.element;
+    }
+    bind(element) {
+        this.element = element;
+        const container = document.createElement('div');
+        Object.assign(container.style, {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
+        });
+        this.container = container;
+        element.appendChild(this.container);
+        this.canvas = document.createElement('canvas');
+        this.container.appendChild(this.canvas);
+        // init webgl & context
+        let ret = false;
+        do {
+            ret = this._initGL();
+            if (!ret) {
+                console.log('trtc:init WebGL failed');
+                break;
+            }
+            ret = this._initShaders();
+            if (!ret) {
+                console.log('trtc:init WebGL Shader failed');
+                break;
+            }
+            ret = this._initUniforms();
+            if (!ret) {
+                console.log('trtc:int WebGL Uniform failed');
+                break;
+            }
+        } while (false);
+        if (ret) {
+            this._initTextureAttr();
+            this._initTexture();
+        }
+    }
+    unbind() {
+        this.texture = null;
+        this.samplerUniform = null;
+        this.vShader = null;
+        this.fShader = null;
+        this.glProgram = null;
+        this.gl = null;
+        this.container && this.container.removeChild(this.canvas);
+        this.element && this.element.removeChild(this.container);
+        this.container = null;
+        this.element = null;
+    }
+    updateCanvas(options = {
+        contentWidth: 0,
+        contentHeight: 0,
+        rotation: 0,
+        mirrorView: false,
+        contentMode: 0,
+        containerWidth: 0,
+        containerHeight: 0,
+        isNeedRotate: true
+    }) {
+        if (isEqual(this.cacheCanvasOpts, options)) {
+            return;
+        }
+        this.cacheCanvasOpts = Object.assign({}, options);
+        const { width, height, transform } = calcCanvasStyle(options);
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.canvas.style.transform = transform;
+    }
+    drawFrame(imageData) {
+        if (!this.ready) {
+            this.ready = true;
+            this.event.emit('ready');
+        }
+        const mirror = false;
+        const contentWidth = imageData.width;
+        const contentHeight = imageData.height;
+        const rotation = imageData.rotation;
+        const isNeedRotate = imageData.isNeedRotate;
+        this.updateCanvas({
+            contentWidth,
+            contentHeight,
+            rotation,
+            mirrorView: mirror,
+            contentMode: this.contentMode,
+            containerWidth: this.container.clientWidth,
+            containerHeight: this.container.clientHeight,
+            isNeedRotate
+        });
+        try {
+            this.gl.viewport(0, 0, contentWidth, contentHeight);
+            this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, contentWidth, contentHeight, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, imageData.data // new Uint8Array(imageData.data)
+            );
+            this.gl.drawElements(this.gl.TRIANGLES, 6, this.gl.UNSIGNED_SHORT, 0);
+        }
+        catch (error) {
+            console.error('trtc:', error);
+        }
+    }
+    setContentMode(mode = 0) {
+        this.contentMode = mode;
+    }
+}
+exports.default = Canvas3DRGBARenderer;