trtc-electron-sdk 10.3.8-beta.9 → 10.3.112-beta.0

package/liteav/Render/GlRenderer/index.js

@@ -31,7 +31,8 @@ const TrtcRender = function () {
         lastImageRotation: 0,
         lastIsNeedRotate: true,
         firstFrameRender: false,
-        event: new EventEmitter()
+        event: new EventEmitter(),
+        fallbackCb: null,
     };
     that.getView = function () {
         return that.view;
@@ -40,15 +41,16 @@ const TrtcRender = function () {
     that.setContentMode = function (mode) {
         that.contentMode = mode;
     };
-    that.bind = function (view) {
-        initCanvas(view, that.mirrorView, view.clientWidth, view.clientHeight, that.initRotation, true, console.warn);
+    that.bind = function (view, fallbackCb) {
+        that.fallbackCb = fallbackCb;
+        initCanvas(view, that.mirrorView, view.clientWidth, view.clientHeight, that.initRotation, true, console.warn, true);
     };
     that.unbind = function () {
         try {
             gl.getExtension('WEBGL_lose_context').loseContext();
         }
         catch (err) {
-            console.warn('trtc:', err);
+            console.warn(err);
         }
         program = undefined;
         positionLocation = undefined;
@@ -69,7 +71,7 @@ const TrtcRender = function () {
             that.view && that.view.removeChild(that.container);
         }
         catch (e) {
-            console.warn('trtc:', e);
+            console.warn(e);
         }
         that.canvas = undefined;
         that.container = undefined;
@@ -83,7 +85,7 @@ const TrtcRender = function () {
     };
     that.renderImage = function (image) {
         if (!gl) {
-            console.log('trtc:no gl');
+            console.log('!gl');
             return;
         }
         if (image.width != that.initWidth
@@ -93,8 +95,8 @@ const TrtcRender = function () {
             const view = that.view;
             that.unbind();
             initCanvas(view, image.mirror, image.width, image.height, image.rotation, image.isNeedRotate, e => {
-                console.error(`trtc:init canvas ${image.width}*${image.height} rotation ${image.rotation} failed. ${e}`);
-            });
+                console.error(`init canvas ${image.width}*${image.height} rotation ${image.rotation} failed. ${e}`);
+            }, false);
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
         const xWidth = image.width + image.left + image.right;
@@ -158,9 +160,9 @@ const TrtcRender = function () {
             right,
             bottom,
             rotation: rotation,
-            yplane: imageData.yUint8Array,
-            uplane: imageData.uUint8Array,
-            vplane: imageData.vUint8Array,
+            yplane: new Uint8Array(imageData.yUint8Array),
+            uplane: new Uint8Array(imageData.uUint8Array),
+            vplane: new Uint8Array(imageData.vUint8Array),
             isNeedRotate
         });
         const now32 = (Date.now() & 0xffffffff) >>> 0;
@@ -175,7 +177,7 @@ const TrtcRender = function () {
         if (config.getDebugMode()) {
             e = gl.getError();
             if (e != gl.NO_ERROR) {
-                console.log('trtc:upload y plane ', width, height, yplane.byteLength, ' error', e);
+                console.log('upload y plane ', width, height, yplane.byteLength, ' error', e);
             }
         }
         gl.activeTexture(gl.TEXTURE1);
@@ -184,7 +186,7 @@ const TrtcRender = function () {
         if (config.getDebugMode()) {
             e = gl.getError();
             if (e != gl.NO_ERROR) {
-                console.log('trtc:upload u plane ', width, height, uplane.byteLength, '  error', e);
+                console.log('upload u plane ', width, height, uplane.byteLength, '  error', e);
             }
         }
         gl.activeTexture(gl.TEXTURE2);
@@ -194,7 +196,7 @@ const TrtcRender = function () {
         if (config.getDebugMode()) {
             e = gl.getError();
             if (e != gl.NO_ERROR) {
-                console.log('trtc:upload v plane ', width, height, vplane.byteLength, '  error', e);
+                console.log('upload v plane ', width, height, vplane.byteLength, '  error', e);
             }
         }
     }
@@ -239,7 +241,7 @@ const TrtcRender = function () {
         + '  b=y+2.017*u;'
         + '  gl_FragColor=vec4(r,g,b,1.0);'
         + '}';
-    function initCanvas(view, mirror, width, height, rotation, isNeedRotate, onFailure) {
+    function initCanvas(view, mirror, width, height, rotation, isNeedRotate, onFailure, isBind) {
         that.clientWidth = view.clientWidth;
         that.clientHeight = view.clientHeight;
         that.view = view;
@@ -252,6 +254,11 @@ const TrtcRender = function () {
         that.container.style.alignItems = 'center';
         that.view.appendChild(that.container);
         that.canvas = document.createElement('canvas');
+        that.canvas.addEventListener('webglcontextlost', function (e) {
+            if (!isBind && that.fallbackCb) {
+                that.fallbackCb();
+            }
+        }, { once: true });
         if (isNeedKeepWidthAndHeight(rotation, isNeedRotate)) {
             that.canvas.width = width;
             that.canvas.height = height;
@@ -273,7 +280,7 @@ const TrtcRender = function () {
             }) || that.canvas.getContext('experimental-webgl');
         }
         catch (e) {
-            console.log('trtc:', e);
+            console.log(e);
         }
         if (!gl) {
             gl = undefined;
@@ -361,9 +368,9 @@ const TrtcRender = function () {
             }
         }
         catch (e) {
-            console.log(`trtc:updateCanvas error ${that.canvas}`);
-            console.log('trtc:', that);
-            console.error('trtc:', e);
+            console.log(`updateCanvas error ${that.canvas}`);
+            console.log(that);
+            console.error(e);
             return false;
         }
         return true;

package/liteav/Render/GlRenderer/webgl-utils.js

@@ -51,10 +51,10 @@
     function error(msg) {
         if (topWindow.console) {
             if (topWindow.console.error) {
-                topWindow.console.error('trtc:', msg);
+                topWindow.console.error(msg);
             }
             else if (topWindow.console.log) {
-                topWindow.console.log('trtc:', msg);
+                topWindow.console.log(msg);
             }
         }
     }

package/liteav/Render/RGBRenderer/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const EventEmitter = require('events').EventEmitter;
 const isEqual = require('lodash.isequal');
-const { calcCanvasStyle } = require('../util');
+const { isNeedKeepWidthAndHeight } = 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
@@ -21,6 +21,33 @@ class RGBRenderer {
     getView() {
         return this.element;
     }
+    _calcZoom(vertical = false, contentMode = 0, width, height, clientWidth, clientHeight) {
+        let localRatio = clientWidth / clientHeight;
+        let tempRatio = width / height;
+        if (isNaN(localRatio) || isNaN(tempRatio)) {
+            return 1;
+        }
+        if (!contentMode) {
+            if (vertical) {
+                return localRatio > tempRatio ?
+                    clientHeight / height : clientWidth / width;
+            }
+            else {
+                return localRatio < tempRatio ?
+                    clientHeight / height : clientWidth / width;
+            }
+        }
+        else {
+            if (vertical) {
+                return localRatio < tempRatio ?
+                    clientHeight / height : clientWidth / width;
+            }
+            else {
+                return localRatio > tempRatio ?
+                    clientHeight / height : clientWidth / width;
+            }
+        }
+    }
     bind(element) {
         this.element = element;
         let container = document.createElement('div');
@@ -46,64 +73,64 @@ class RGBRenderer {
     refreshCanvas() {
     }
     updateCanvas(options = {
-        contentWidth: 0,
-        contentHeight: 0,
+        width: 0,
+        height: 0,
         rotation: 0,
         mirrorView: false,
         contentMode: 0,
-        containerWidth: 0,
-        containerHeight: 0,
+        clientWidth: 0,
+        clientHeight: 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;
+        if ([0, 90, 180, 270].indexOf(options.rotation) === -1) {
+            throw new Error('Invalid value for rotation. Only support 0, 90, 180, 270');
+        }
+        const isKeepWidthHeight = isNeedKeepWidthAndHeight(options.rotation, options.isNeedRotate);
+        if (isKeepWidthHeight) {
+            this.canvas.width = options.width;
+            this.canvas.height = options.height;
+        }
+        else {
+            this.canvas.height = options.width;
+            this.canvas.width = options.height;
+        }
+        this.canvas.style.zoom = this._calcZoom(!isKeepWidthHeight, options.contentMode, options.width, options.height, options.clientWidth, options.clientHeight);
+        if (options.mirrorView) {
+            this.canvas.style.transform = 'rotateY(180deg)';
+        }
     }
     drawFrame(imageData) {
         if (!this.ready) {
             this.ready = true;
             this.event.emit('ready');
         }
-        try {
-            let mirror = false;
-            let contentWidth = imageData.width;
-            let contentHeight = imageData.height;
-            const isNeedRotate = imageData.isNeedRotate;
-            let left = 0;
-            let top = 0;
-            let right = 0;
-            let bottom = 0;
-            let rotation = imageData.rotation;
-            let ts = imageData.timestamp;
-            let width = contentWidth + left + right;
-            let height = contentHeight + top + bottom;
-            this.updateCanvas({
-                contentWidth: width,
-                contentHeight: height,
-                rotation,
-                mirrorView: mirror,
-                contentMode: this.contentMode,
-                containerWidth: this.container.clientWidth,
-                containerHeight: this.container.clientHeight,
-                isNeedRotate
-            });
-            let newImage = new ImageData(new Uint8ClampedArray(imageData.data.buffer || imageData.data), width, height);
-            const tempCanvas = document.createElement('canvas');
-            tempCanvas.width = imageData.width;
-            tempCanvas.height = imageData.height;
-            const tempCtx = tempCanvas.getContext('2d');
-            tempCtx.putImageData(newImage, 0, 0);
-            let ctx = this.canvas.getContext("2d");
-            ctx.drawImage(tempCanvas, 0, 0);
-        }
-        catch (error) {
-            console.error('trtc:RGBRenderer.drawFrame error:', error);
-        }
+        let mirror = 0;
+        let contentWidth = imageData.width;
+        let contentHeight = imageData.height;
+        const isNeedRotate = imageData.isNeedRotate;
+        let left = 0;
+        let top = 0;
+        let right = 0;
+        let bottom = 0;
+        let rotation = imageData.rotation;
+        let ts = imageData.timestamp;
+        let width = contentWidth + left + right;
+        let height = contentHeight + top + bottom;
+        this.updateCanvas({
+            width, height, rotation,
+            mirrorView: mirror,
+            contentMode: this.contentMode,
+            clientWidth: this.container.clientWidth,
+            clientHeight: this.container.clientHeight,
+            isNeedRotate
+        });
+        let ctx = this.canvas.getContext("2d");
+        let tmpimage = new ImageData(imageData.data, width, height);
+        ctx.putImageData(tmpimage, 0, 0);
     }
     setContentMode(mode = 0) {
         this.contentMode = mode;

package/liteav/Render/SoftwareRenderer/index.js

@@ -4,7 +4,7 @@ const EventEmitter = require('events').EventEmitter;
 const isEqual = require('lodash.isequal');
 const YUVBuffer = require('yuv-buffer');
 const YUVCanvas = require('yuv-canvas');
-const { calcCanvasStyle } = require('../util');
+const { isNeedKeepWidthAndHeight } = 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.
@@ -25,6 +25,33 @@ class Renderer {
     getView() {
         return this.element;
     }
+    _calcZoom(vertical = false, contentMode = 0, width, height, clientWidth, clientHeight) {
+        const localRatio = clientWidth / clientHeight;
+        const tempRatio = width / height;
+        if (isNaN(localRatio) || isNaN(tempRatio)) {
+            return 1;
+        }
+        if (!contentMode) {
+            if (vertical) {
+                return localRatio > tempRatio
+                    ? clientHeight / height : clientWidth / width;
+            }
+            else {
+                return localRatio < tempRatio
+                    ? clientHeight / height : clientWidth / width;
+            }
+        }
+        else {
+            if (vertical) {
+                return localRatio < tempRatio
+                    ? clientHeight / height : clientWidth / width;
+            }
+            else {
+                return localRatio > tempRatio
+                    ? clientHeight / height : clientWidth / width;
+            }
+        }
+    }
     bind(element) {
         this.element = element;
         const container = document.createElement('div');
@@ -51,23 +78,35 @@ class Renderer {
     refreshCanvas() {
     }
     updateCanvas(options = {
-        contentWidth: 0,
-        contentHeight: 0,
+        width: 0,
+        height: 0,
         rotation: 0,
         mirrorView: false,
         contentMode: 0,
-        containerWidth: 0,
-        containerHeight: 0,
+        clientWidth: 0,
+        clientHeight: 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;
+        if ([0, 90, 180, 270].indexOf(options.rotation) === -1) {
+            throw new Error('Invalid value for rotation. Only support 0, 90, 180, 270');
+        }
+        const isKeepWidthHeight = isNeedKeepWidthAndHeight(options.rotation, options.isNeedRotate);
+        if (isNeedKeepWidthAndHeight(options.rotation, options.isNeedRotate)) {
+            this.canvas.width = options.width;
+            this.canvas.height = options.height;
+        }
+        else {
+            this.canvas.height = options.width;
+            this.canvas.width = options.height;
+        }
+        this.canvas.style.zoom = this._calcZoom(!isKeepWidthHeight, options.contentMode, options.width, options.height, options.clientWidth, options.clientHeight);
+        if (options.mirrorView) {
+            this.canvas.style.transform = 'rotateY(180deg)';
+        }
     }
     _adjustImageData(imageData) {
         const { width, height, yUint8Array, uUint8Array, vUint8Array } = imageData;
@@ -112,7 +151,7 @@ class Renderer {
             this.event.emit('ready');
         }
         imageData = this._adjustImageData(imageData);
-        const mirror = false;
+        const mirror = 0;
         const contentWidth = imageData.width;
         const contentHeight = imageData.height;
         const left = 0;
@@ -125,13 +164,11 @@ class Renderer {
         const width = contentWidth + left + right;
         const height = contentHeight + top + bottom;
         this.updateCanvas({
-            contentWidth: width,
-            contentHeight: height,
-            rotation,
+            width, height, rotation,
             mirrorView: mirror,
             contentMode: this.contentMode,
-            containerWidth: this.container.clientWidth,
-            containerHeight: this.container.clientHeight,
+            clientWidth: this.container.clientWidth,
+            clientHeight: this.container.clientHeight,
             isNeedRotate
         });
         const format = YUVBuffer.format({

package/liteav/Render/index.d.ts

@@ -2,7 +2,7 @@
 import { EventEmitter } from 'events';
 export interface IRenderer {
     event: EventEmitter;
-    bind(element: Element): void;
+    bind(element: Element, fallbackCb?: () => void): void;
     unbind(): void;
     drawFrame(imageData: {
         header: any;
@@ -18,7 +18,7 @@ declare class GlRenderer implements IRenderer {
     self: any;
     event: EventEmitter;
     constructor();
-    bind(element: Element): void;
+    bind(element: Element, fallbackCb?: () => void): void;
     unbind(): void;
     drawFrame(imageData: {
         header: any;
@@ -50,9 +50,5 @@ declare const _default: {
     GlRenderer: typeof GlRenderer;
     SoftwareRenderer: any;
     RGBRenderer: any;
-    I420VideoRenderer: any;
-    BGRAVideoRenderer: any;
-    RGBAVideoRenderer: any;
-    Canvas3DRGBARenderer: any;
 };
 export default _default;

package/liteav/Render/index.js

@@ -9,18 +9,14 @@ const GlRenderer_1 = __importDefault(require("./GlRenderer"));
 const SoftwareRenderer_1 = __importDefault(require("./SoftwareRenderer"));
 // @ts-ignore
 const RGBRenderer_1 = __importDefault(require("./RGBRenderer"));
-const I420VideoRenderer_1 = __importDefault(require("./I420VideoRenderer"));
-const BGRAVideoRenderer_1 = __importDefault(require("./BGRAVideoRenderer"));
-const RGBAVideoRenderer_1 = __importDefault(require("./RGBAVideoRenderer"));
-const Canvas3DRGBARenderer_1 = __importDefault(require("./Canvas3DRGBARenderer"));
 class GlRenderer {
     constructor() {
         // @ts-ignore
         this.self = GlRenderer_1.default.apply(this);
         this.event = this.self.event;
     }
-    bind(element) {
-        return this.self.bind(element);
+    bind(element, fallbackCb) {
+        return this.self.bind(element, fallbackCb);
     }
     unbind() {
         return this.self.unbind();
@@ -55,9 +51,5 @@ exports.default = {
     CustomRenderer,
     GlRenderer,
     SoftwareRenderer: SoftwareRenderer_1.default,
-    RGBRenderer: RGBRenderer_1.default,
-    I420VideoRenderer: I420VideoRenderer_1.default,
-    BGRAVideoRenderer: BGRAVideoRenderer_1.default,
-    RGBAVideoRenderer: RGBAVideoRenderer_1.default,
-    Canvas3DRGBARenderer: Canvas3DRGBARenderer_1.default,
+    RGBRenderer: RGBRenderer_1.default
 };

package/liteav/Render/util.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="node" />
-import { TRTCVideoStreamType } from "../trtc_define";
 /**
  * 配置对象, 可用来打开 debug 模式
  *
@@ -17,30 +15,4 @@ export declare class Config {
     getDebugMode(): boolean;
 }
 export declare function isNeedKeepWidthAndHeight(rotation: number, isNeedRotate: boolean): boolean;
-export declare function calcScaleRate(vertical: boolean, contentMode: number, contentWidth: number, contentHeight: number, containerWidth: number, containerHeight: number): number;
-export declare function calcCanvasStyle(options?: {
-    contentWidth: number;
-    contentHeight: number;
-    rotation: number;
-    mirrorView: boolean;
-    contentMode: number;
-    containerWidth: number;
-    containerHeight: number;
-    isNeedRotate: boolean;
-}): {
-    [x: string]: any;
-};
-export declare function calcVideoStyle(options?: {
-    contentWidth: number;
-    contentHeight: number;
-    rotation: number;
-    mirrorView: boolean;
-    contentMode: number;
-    containerWidth: number;
-    containerHeight: number;
-    isNeedRotate: boolean;
-}): {
-    [x: string]: any;
-};
 export declare const config: Config;
-export declare function allocBuffer(length: number, userId?: string, streamType?: TRTCVideoStreamType): Buffer;

package/liteav/Render/util.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.allocBuffer = exports.config = exports.calcVideoStyle = exports.calcCanvasStyle = exports.calcScaleRate = exports.isNeedKeepWidthAndHeight = exports.Config = void 0;
+exports.config = exports.isNeedKeepWidthAndHeight = exports.Config = void 0;
 /**
  * 配置对象, 可用来打开 debug 模式
  *
@@ -28,110 +28,4 @@ function isNeedKeepWidthAndHeight(rotation, isNeedRotate) {
     return rotation === 0 || rotation === 180 || !isNeedRotate;
 }
 exports.isNeedKeepWidthAndHeight = isNeedKeepWidthAndHeight;
-function calcScaleRate(vertical = false, contentMode = 0, contentWidth, contentHeight, containerWidth, containerHeight) {
-    const containerRatio = containerWidth / containerHeight;
-    const contentRatio = contentWidth / contentHeight;
-    if (isNaN(containerRatio) || isNaN(contentRatio)) {
-        return 1;
-    }
-    if (!contentMode) {
-        if (vertical) {
-            return containerRatio > contentRatio
-                ? containerHeight / contentHeight : containerWidth / contentWidth;
-        }
-        else {
-            return containerRatio < contentRatio
-                ? containerHeight / contentHeight : containerWidth / contentWidth;
-        }
-    }
-    else {
-        if (vertical) {
-            return containerRatio < contentRatio
-                ? containerHeight / contentHeight : containerWidth / contentWidth;
-        }
-        else {
-            return containerRatio > contentRatio
-                ? containerHeight / contentHeight : containerWidth / contentWidth;
-        }
-    }
-}
-exports.calcScaleRate = calcScaleRate;
-function calcCanvasStyle(options = {
-    contentWidth: 0,
-    contentHeight: 0,
-    rotation: 0,
-    mirrorView: false,
-    contentMode: 0,
-    containerWidth: 0,
-    containerHeight: 0,
-    isNeedRotate: true
-}) {
-    if ([0, 90, 180, 270].indexOf(options.rotation) === -1) {
-        throw new Error('Invalid value for rotation. Only support 0, 90, 180, 270');
-    }
-    const style = {
-        width: 0,
-        height: 0,
-        transform: ''
-    };
-    const isKeepWidthHeight = isNeedKeepWidthAndHeight(options.rotation, options.isNeedRotate);
-    if (isNeedKeepWidthAndHeight(options.rotation, options.isNeedRotate)) {
-        style.width = options.contentWidth;
-        style.height = options.contentHeight;
-    }
-    else {
-        style.height = options.contentWidth;
-        style.width = options.contentHeight;
-    }
-    const scale = calcScaleRate(!isKeepWidthHeight, options.contentMode, style.width, style.height, options.containerWidth, options.containerHeight);
-    style.transform = `scale(${scale})`;
-    if (options.mirrorView) {
-        style.transform = `${style.transform} rotateY(180deg)`;
-    }
-    return style;
-}
-exports.calcCanvasStyle = calcCanvasStyle;
-function calcVideoStyle(options = {
-    contentWidth: 0,
-    contentHeight: 0,
-    rotation: 0,
-    mirrorView: false,
-    contentMode: 0,
-    containerWidth: 0,
-    containerHeight: 0,
-    isNeedRotate: true
-}) {
-    if ([0, 90, 180, 270].indexOf(options.rotation) === -1) {
-        throw new Error('Invalid value for rotation. Only support 0, 90, 180, 270');
-    }
-    let width = 0;
-    let height = 0;
-    const isKeepWidthHeight = isNeedKeepWidthAndHeight(options.rotation, options.isNeedRotate);
-    if (isNeedKeepWidthAndHeight(options.rotation, options.isNeedRotate)) {
-        width = options.contentWidth;
-        height = options.contentHeight;
-    }
-    else {
-        height = options.contentWidth;
-        width = options.contentHeight;
-    }
-    const scale = calcScaleRate(!isKeepWidthHeight, options.contentMode, width, height, options.containerWidth, options.containerHeight);
-    const style = {
-        width: `${width * scale}px`,
-        height: `${height * scale}px`,
-    };
-    if (options.mirrorView) {
-        style.transform = 'rotateY(180deg)';
-    }
-    return style;
-}
-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);
-    }
-    return null;
-}
-exports.allocBuffer = allocBuffer;