agora-electron-sdk 4.1.1-rc.1 → 4.2.0-dev.13

package/js/Renderer/YUVCanvasRenderer/index.js

@@ -1,185 +1,195 @@
-"use strict";
-/*
- * @Author: zhangtao@agora.io
- * @Date: 2021-04-28 13:34:48
- * @Last Modified by: zhangtao@agora.io
- * @Last Modified time: 2021-05-19 15:59:03
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.YUVCanvasRenderer = void 0;
-const YUVBuffer = require('yuv-buffer');
-const YUVCanvas = require('yuv-canvas');
-const isEqual = require('lodash.isequal');
-const AgoraMediaBase_1 = require("../../Private/AgoraMediaBase");
-const IRenderer_1 = require("../IRenderer");
-class YUVCanvasRenderer extends IRenderer_1.IRenderer {
-    constructor() {
-        super();
-        this._videoFrame = {
-            rotation: 0,
-            width: 0,
-            height: 0,
-            yBuffer: new Uint8Array(0),
-            uBuffer: new Uint8Array(0),
-            vBuffer: new Uint8Array(0),
-            videoSourceType: -1,
-        };
-    }
-    bind(element) {
-        super.bind(element);
-        let container = document.createElement('div');
-        Object.assign(container.style, {
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            overflow: 'hidden',
-        });
-        this._container = container;
-        this.parentElement.appendChild(this._container);
-        this.canvas = document.createElement('canvas');
-        this._container.appendChild(this.canvas);
-        this._yuvCanvasSink = YUVCanvas.attach(this.canvas, {
-            webGL: false,
-        });
-    }
-    unbind() {
-        var _a, _b;
-        if (this._container) {
-            this._container.replaceChildren();
-            this._container = undefined;
-        }
-        if (this.parentElement) {
-            this.parentElement.replaceChildren();
-            this.parentElement = undefined;
-        }
-        if (this.canvas) {
-            this.canvas = undefined;
-        }
-        if (this._yuvCanvasSink && ((_a = this._yuvCanvasSink) === null || _a === void 0 ? void 0 : _a.loseContext)) {
-            (_b = this._yuvCanvasSink) === null || _b === void 0 ? void 0 : _b.loseContext();
-        }
-    }
-    zoom(vertical, contentMode = AgoraMediaBase_1.RenderModeType.RenderModeFit, width, height, clientWidth, clientHeight) {
-        let localRatio = clientWidth / clientHeight;
-        let tempRatio = width / height;
-        if (isNaN(localRatio) || isNaN(tempRatio)) {
-            return 1;
-        }
-        if (contentMode === AgoraMediaBase_1.RenderModeType.RenderModeHidden) {
-            if (vertical) {
-                return clientHeight / clientWidth < width / height
-                    ? clientWidth / height
-                    : clientHeight / width;
-            }
-            else {
-                return clientWidth / clientHeight > width / height
-                    ? clientWidth / width
-                    : clientHeight / height;
-            }
-        }
-        else {
-            if (vertical) {
-                return clientHeight / clientWidth < width / height
-                    ? clientHeight / width
-                    : clientWidth / height;
-            }
-            else {
-                return clientWidth / clientHeight > width / height
-                    ? clientHeight / height
-                    : clientWidth / width;
-            }
-        }
-    }
-    updateCanvas(options = {
-        frameWidth: 0,
-        frameHeight: 0,
-        rotation: 0,
-        contentMode: 0,
-        clientWidth: 0,
-        clientHeight: 0,
-    }) {
-        if (this._cacheCanvasOptions) {
-            if (isEqual(this._cacheCanvasOptions, options)) {
-                return;
-            }
-        }
-        this._cacheCanvasOptions = Object.assign({}, options);
-        if (this.canvas) {
-            if (options.rotation === 0 || options.rotation === 180) {
-                this.canvas.width = options.frameWidth;
-                this.canvas.height = options.frameHeight;
-                Object.assign(this.canvas.style, {
-                    'width': options.frameWidth + 'px',
-                    'height': options.frameHeight + 'px',
-                    'object-fit': 'cover',
-                });
-            }
-            else if (options.rotation === 90 || options.rotation === 270) {
-                this.canvas.height = options.frameWidth;
-                this.canvas.width = options.frameHeight;
-            }
-            else {
-                throw new Error('Invalid value for rotation. Only support 0, 90, 180, 270');
-            }
-            let transformItems = [];
-            transformItems.push(`rotateZ(${options.rotation}deg)`);
-            let scale = this.zoom(options.rotation === 90 || options.rotation === 270, options.contentMode, options.frameWidth, options.frameHeight, options.clientWidth, options.clientHeight);
-            // @ts-ignore
-            this.canvas.style.zoom = scale.toString();
-            if (transformItems.length > 0) {
-                let transform = `${transformItems.join(' ')}`;
-                this.canvas.style.transform = transform;
-            }
-        }
-    }
-    drawFrame(frame) {
-        if (!this._container || !this._yuvCanvasSink) {
-            return;
-        }
-        let frameWidth = frame.width;
-        let frameHeight = frame.height;
-        if (this._videoFrame.width === 0 ||
-            this._videoFrame.height === 0 ||
-            this._videoFrame.width != frame.width ||
-            this._videoFrame.height != frame.height) {
-            this._videoFrame.yBuffer = new Uint8Array(frameWidth * frameHeight);
-            this._videoFrame.uBuffer = new Uint8Array((frameWidth * frameHeight) / 4);
-            this._videoFrame.vBuffer = new Uint8Array((frameWidth * frameHeight) / 4);
-        }
-        this._videoFrame.yBuffer.set(frame.yBuffer);
-        this._videoFrame.uBuffer.set(frame.uBuffer);
-        this._videoFrame.vBuffer.set(frame.vBuffer);
-        this._videoFrame.width = frame.width;
-        this._videoFrame.height = frame.height;
-        this._videoFrame.rotation = frame.rotation;
-        let options = {
-            frameWidth: frame.width,
-            frameHeight: frame.height,
-            rotation: frame.rotation ? frame.rotation : 0,
-            contentMode: this.contentMode,
-            clientWidth: this._container.clientWidth,
-            clientHeight: this._container.clientHeight,
-        };
-        this.updateCanvas(options);
-        let format = YUVBuffer.format({
-            width: frameWidth,
-            height: frameHeight,
-            chromaWidth: frameWidth / 2,
-            chromaHeight: frameHeight / 2,
-        });
-        let y = YUVBuffer.lumaPlane(format, this._videoFrame.yBuffer);
-        let u = YUVBuffer.chromaPlane(format, this._videoFrame.uBuffer);
-        let v = YUVBuffer.chromaPlane(format, this._videoFrame.vBuffer);
-        let yuvBufferFrame = YUVBuffer.frame(format, y, u, v);
-        this._yuvCanvasSink.drawFrame(yuvBufferFrame);
-    }
-    refreshCanvas() {
-        if (this._cacheCanvasOptions) {
-            this.zoom(this._cacheCanvasOptions.rotation === 90 ||
-                this._cacheCanvasOptions.rotation === 270, this._cacheCanvasOptions.contentMode, this._cacheCanvasOptions.frameWidth, this._cacheCanvasOptions.frameHeight, this._cacheCanvasOptions.clientWidth, this._cacheCanvasOptions.clientHeight);
-        }
-    }
-}
-exports.YUVCanvasRenderer = YUVCanvasRenderer;
+"use strict";
+/*
+ * @Author: zhangtao@agora.io
+ * @Date: 2021-04-28 13:34:48
+ * @Last Modified by: zhangtao@agora.io
+ * @Last Modified time: 2021-05-19 15:59:03
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YUVCanvasRenderer = void 0;
+const AgoraMediaBase_1 = require("../../Private/AgoraMediaBase");
+const IRenderer_1 = require("../IRenderer");
+const isEqual = require('lodash.isequal');
+const YUVBuffer = require('yuv-buffer');
+const YUVCanvas = require('yuv-canvas');
+class YUVCanvasRenderer extends IRenderer_1.IRenderer {
+    _cacheCanvasOptions;
+    _yuvCanvasSink;
+    _container;
+    _videoFrame;
+    constructor() {
+        super();
+        this._videoFrame = {
+            rotation: 0,
+            width: 0,
+            height: 0,
+            yStride: 0,
+            yBuffer: new Uint8Array(0),
+            uBuffer: new Uint8Array(0),
+            vBuffer: new Uint8Array(0),
+            videoSourceType: -1,
+        };
+    }
+    bind(element) {
+        super.bind(element);
+        let container = document.createElement('div');
+        Object.assign(container.style, {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            overflow: 'hidden',
+        });
+        this._container = container;
+        this.parentElement.appendChild(this._container);
+        this.canvas = document.createElement('canvas');
+        this._container.appendChild(this.canvas);
+        this._yuvCanvasSink = YUVCanvas.attach(this.canvas, {
+            webGL: false,
+        });
+    }
+    unbind() {
+        if (this._container) {
+            this._container.replaceChildren();
+            this._container = undefined;
+        }
+        if (this.parentElement) {
+            this.parentElement.replaceChildren();
+            this.parentElement = undefined;
+        }
+        if (this.canvas) {
+            this.canvas = undefined;
+        }
+        if (this._yuvCanvasSink && this._yuvCanvasSink?.loseContext) {
+            this._yuvCanvasSink?.loseContext();
+        }
+    }
+    zoom(vertical, contentMode = AgoraMediaBase_1.RenderModeType.RenderModeFit, width, height, clientWidth, clientHeight) {
+        let localRatio = clientWidth / clientHeight;
+        let tempRatio = width / height;
+        if (isNaN(localRatio) || isNaN(tempRatio)) {
+            return 1;
+        }
+        if (contentMode === AgoraMediaBase_1.RenderModeType.RenderModeHidden) {
+            if (vertical) {
+                return clientHeight / clientWidth < width / height
+                    ? clientWidth / height
+                    : clientHeight / width;
+            }
+            else {
+                return clientWidth / clientHeight > width / height
+                    ? clientWidth / width
+                    : clientHeight / height;
+            }
+        }
+        else {
+            if (vertical) {
+                return clientHeight / clientWidth < width / height
+                    ? clientHeight / width
+                    : clientWidth / height;
+            }
+            else {
+                return clientWidth / clientHeight > width / height
+                    ? clientHeight / height
+                    : clientWidth / width;
+            }
+        }
+    }
+    updateCanvas(options = {
+        frameWidth: 0,
+        frameHeight: 0,
+        rotation: 0,
+        contentMode: 0,
+        clientWidth: 0,
+        clientHeight: 0,
+    }) {
+        if (this._cacheCanvasOptions) {
+            if (isEqual(this._cacheCanvasOptions, options)) {
+                return;
+            }
+        }
+        this._cacheCanvasOptions = Object.assign({}, options);
+        if (this.canvas) {
+            if (options.rotation === 0 || options.rotation === 180) {
+                this.canvas.width = options.frameWidth;
+                this.canvas.height = options.frameHeight;
+                Object.assign(this.canvas.style, {
+                    'width': options.frameWidth + 'px',
+                    'height': options.frameHeight + 'px',
+                    'object-fit': 'cover',
+                });
+            }
+            else if (options.rotation === 90 || options.rotation === 270) {
+                this.canvas.height = options.frameWidth;
+                this.canvas.width = options.frameHeight;
+            }
+            else {
+                throw new Error('Invalid value for rotation. Only support 0, 90, 180, 270');
+            }
+            let transformItems = [];
+            transformItems.push(`rotateZ(${options.rotation}deg)`);
+            let scale = this.zoom(options.rotation === 90 || options.rotation === 270, options.contentMode, options.frameWidth, options.frameHeight, options.clientWidth, options.clientHeight);
+            this.canvas.style.transform = `scale(${scale.toString()})`;
+            if (transformItems.length > 0) {
+                this.canvas.style.transform = `${transformItems.join(' ')}`;
+            }
+        }
+    }
+    drawFrame(frame) {
+        if (!this._container || !this._yuvCanvasSink) {
+            return;
+        }
+        let frameWidth = frame.width;
+        let frameHeight = frame.height;
+        if (this._videoFrame.yStride === 0 ||
+            this._videoFrame.height === 0 ||
+            this._videoFrame.yStride != frame.yStride ||
+            this._videoFrame.height != frame.height) {
+            this._videoFrame.yBuffer = new Uint8Array(frame.yStride * frameHeight);
+            this._videoFrame.uBuffer = new Uint8Array((frame.yStride * frameHeight) / 4);
+            this._videoFrame.vBuffer = new Uint8Array((frame.yStride * frameHeight) / 4);
+        }
+        this._videoFrame.yBuffer.set(frame.yBuffer);
+        this._videoFrame.uBuffer.set(frame.uBuffer);
+        this._videoFrame.vBuffer.set(frame.vBuffer);
+        this._videoFrame.width = frame.width;
+        this._videoFrame.height = frame.height;
+        this._videoFrame.yStride = frame.yStride;
+        this._videoFrame.rotation = frame.rotation;
+        let options = {
+            frameWidth,
+            frameHeight,
+            rotation: frame.rotation ? frame.rotation : 0,
+            contentMode: this.contentMode,
+            clientWidth: this._container.clientWidth,
+            clientHeight: this._container.clientHeight,
+        };
+        this.updateCanvas(options);
+        let format = YUVBuffer.format({
+            width: frameWidth,
+            height: frameHeight,
+            chromaWidth: frameWidth / 2,
+            chromaHeight: frameHeight / 2,
+            cropLeft: frame.yStride - frameWidth,
+        });
+        let yuvBufferFrame = YUVBuffer.frame(format, {
+            bytes: this._videoFrame.yBuffer,
+            stride: frame.yStride,
+        }, {
+            bytes: this._videoFrame.uBuffer,
+            stride: frame.yStride / 2,
+        }, {
+            bytes: this._videoFrame.vBuffer,
+            stride: frame.yStride / 2,
+        });
+        this._yuvCanvasSink.drawFrame(yuvBufferFrame);
+    }
+    refreshCanvas() {
+        if (this._cacheCanvasOptions) {
+            this.zoom(this._cacheCanvasOptions.rotation === 90 ||
+                this._cacheCanvasOptions.rotation === 270, this._cacheCanvasOptions.contentMode, this._cacheCanvasOptions.frameWidth, this._cacheCanvasOptions.frameHeight, this._cacheCanvasOptions.clientWidth, this._cacheCanvasOptions.clientHeight);
+        }
+    }
+}
+exports.YUVCanvasRenderer = YUVCanvasRenderer;

package/js/Renderer/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./IRenderer"), exports);
+__exportStar(require("./IRendererManager"), exports);

package/js/Types.js

@@ -1,29 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CallBackModule = exports.RENDER_MODE = void 0;
-/**
- * @ignore
- */
-var RENDER_MODE;
-(function (RENDER_MODE) {
-    /**
-     * @ignore
-     */
-    RENDER_MODE[RENDER_MODE["WEBGL"] = 1] = "WEBGL";
-    /**
-     * @ignore
-     */
-    RENDER_MODE[RENDER_MODE["SOFTWARE"] = 2] = "SOFTWARE";
-})(RENDER_MODE = exports.RENDER_MODE || (exports.RENDER_MODE = {}));
-/**
- * @ignore
- */
-var CallBackModule;
-(function (CallBackModule) {
-    /**
-     * @ignore
-     */
-    CallBackModule[CallBackModule["RTC"] = 0] = "RTC";
-    CallBackModule[CallBackModule["MPK"] = 1] = "MPK";
-    CallBackModule[CallBackModule["OBSERVER"] = 2] = "OBSERVER";
-})(CallBackModule = exports.CallBackModule || (exports.CallBackModule = {}));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RENDER_MODE = void 0;
+/**
+ * @ignore
+ */
+var RENDER_MODE;
+(function (RENDER_MODE) {
+    /**
+     * @ignore
+     */
+    RENDER_MODE[RENDER_MODE["WEBGL"] = 1] = "WEBGL";
+    /**
+     * @ignore
+     */
+    RENDER_MODE[RENDER_MODE["SOFTWARE"] = 2] = "SOFTWARE";
+})(RENDER_MODE = exports.RENDER_MODE || (exports.RENDER_MODE = {}));