trtc-electron-sdk 10.1.8-beta.2 → 10.1.113-beta.2

package/liteav/Render/GlRenderer/index.js

@@ -48,7 +48,7 @@ const TrtcRender = function () {
             gl.getExtension('WEBGL_lose_context').loseContext();
         }
         catch (err) {
-            console.warn('trtc:', err);
+            console.warn(err);
         }
         program = undefined;
         positionLocation = undefined;
@@ -69,7 +69,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 +83,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,7 +93,7 @@ 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}`);
             });
         }
         gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
@@ -158,9 +158,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 +175,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 +184,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 +194,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);
             }
         }
     }
@@ -273,7 +273,7 @@ const TrtcRender = function () {
             }) || that.canvas.getContext('experimental-webgl');
         }
         catch (e) {
-            console.log('trtc:', e);
+            console.log(e);
         }
         if (!gl) {
             gl = undefined;
@@ -361,9 +361,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');
@@ -47,72 +74,47 @@ class Renderer {
         this.yuv = null;
         this.element = null;
         this.canvas = null;
+        this.view = null;
     }
     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;
-    }
-    _adjustImageData(imageData) {
-        const { width, height, yUint8Array, uUint8Array, vUint8Array } = imageData;
-        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({}, imageData), { width: newWidth, height, yUint8Array: newYUint8Array, uUint8Array: newUInt8Array, vUint8Array: newVInt8Array });
+        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)';
         }
-        return imageData;
     }
     drawFrame(imageData) {
         if (!this.ready) {
             this.ready = true;
             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 +127,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

@@ -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,10 +9,6 @@ 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
@@ -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;