agora-electron-sdk 4.2.6 → 4.3.0-dev.1

package/js/Renderer/WebGLRenderer/index.js

@@ -16,7 +16,6 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebGLRenderer = void 0;
-var AgoraMediaBase_1 = require("../../Private/AgoraMediaBase");
 var Utils_1 = require("../../Utils");
 var IRenderer_1 = require("../IRenderer");
 var createProgramFromSources = require('./webgl-utils').createProgramFromSources;
@@ -56,26 +55,17 @@ var WebGLRenderer = /** @class */ (function (_super) {
     __extends(WebGLRenderer, _super);
     function WebGLRenderer(fallback) {
         var _this = _super.call(this) || this;
-        _this.initWidth = 0;
-        _this.initHeight = 0;
-        _this.initRotation = 0;
-        _this.clientWidth = 0;
-        _this.clientHeight = 0;
-        _this.lastImageWidth = 0;
-        _this.lastImageHeight = 0;
-        _this.lastImageRotation = 0;
-        _this.videoBuffer = {};
         _this.handleContextLost = function (event) {
             var _a;
             event.preventDefault();
-            console.warn('webglcontextlost', event);
+            (0, Utils_1.logWarn)('webglcontextlost', event);
             _this.releaseTextures();
             (_a = _this.fallback) === null || _a === void 0 ? void 0 : _a.call(null, _this, new Error('Browser not support! No WebGL detected.'));
         };
         _this.handleContextRestored = function (event) {
             var _a;
             event.preventDefault();
-            console.warn('webglcontextrestored', event);
+            (0, Utils_1.logWarn)('webglcontextrestored', event);
             // Setup GLSL program
             _this.program = createProgramFromSources(_this.gl, [
                 vertexShaderSource,
@@ -94,130 +84,109 @@ var WebGLRenderer = /** @class */ (function (_super) {
         return _this;
     }
     WebGLRenderer.prototype.bind = function (view) {
-        var _a, _b;
+        var _this = this;
+        var _a, _b, _c, _d;
         _super.prototype.bind.call(this, view);
-        var ResizeObserver = window.ResizeObserver;
-        if (ResizeObserver) {
-            this.observer = new ResizeObserver(this.refreshCanvas);
-            this.observer.observe(view);
-        }
-        // context list after toggle resolution on electron 12.0.6
         (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.addEventListener('webglcontextlost', this.handleContextLost, false);
         (_b = this.canvas) === null || _b === void 0 ? void 0 : _b.addEventListener('webglcontextrestored', this.handleContextRestored, false);
+        var getContext = function (contextNames) {
+            var _a;
+            if (contextNames === void 0) { contextNames = ['webgl2', 'webgl', 'experimental-webgl']; }
+            for (var i = 0; i < contextNames.length; i++) {
+                var contextName = contextNames[i];
+                var context = (_a = _this.canvas) === null || _a === void 0 ? void 0 : _a.getContext(contextName, {
+                    depth: true,
+                    stencil: true,
+                    alpha: false,
+                    antialias: false,
+                    premultipliedAlpha: true,
+                    preserveDrawingBuffer: true,
+                    powerPreference: 'default',
+                    failIfMajorPerformanceCaveat: false,
+                });
+                if (context) {
+                    return context;
+                }
+            }
+            return null;
+        };
+        (_c = this.gl) !== null && _c !== void 0 ? _c : (this.gl = getContext());
+        if (!this.gl) {
+            (_d = this.fallback) === null || _d === void 0 ? void 0 : _d.call(null, this, new Error('Browser not support! No WebGL detected.'));
+            return;
+        }
+        // Set clear color to black, fully opaque
+        this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
+        // Enable depth testing
+        this.gl.enable(this.gl.DEPTH_TEST);
+        // Near things obscure far things
+        this.gl.depthFunc(this.gl.LEQUAL);
+        // Clear the color as well as the depth buffer.
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT |
+            this.gl.DEPTH_BUFFER_BIT |
+            this.gl.STENCIL_BUFFER_BIT);
+        // Setup GLSL program
+        this.program = createProgramFromSources(this.gl, [
+            vertexShaderSource,
+            yuvShaderSource,
+        ]);
+        this.gl.useProgram(this.program);
+        this.initTextures();
     };
     WebGLRenderer.prototype.unbind = function () {
-        var _a, _b, _c, _d;
-        if (this.parentElement) {
-            (_a = this.observer) === null || _a === void 0 ? void 0 : _a.unobserve(this.parentElement);
-        }
-        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
-        this.observer = undefined;
-        (_c = this.canvas) === null || _c === void 0 ? void 0 : _c.removeEventListener('webglcontextlost', this.handleContextLost, false);
-        (_d = this.canvas) === null || _d === void 0 ? void 0 : _d.removeEventListener('webglcontextrestored', this.handleContextRestored, false);
+        var _a, _b;
+        (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.removeEventListener('webglcontextlost', this.handleContextLost, false);
+        (_b = this.canvas) === null || _b === void 0 ? void 0 : _b.removeEventListener('webglcontextrestored', this.handleContextRestored, false);
         this.releaseTextures();
         this.gl = undefined;
         _super.prototype.unbind.call(this);
     };
-    WebGLRenderer.prototype.drawFrame = function (videoFrame) {
-        var _a;
-        var error;
-        try {
-            this.renderImage({
-                width: videoFrame.width,
-                height: videoFrame.height,
-                left: 0,
-                top: 0,
-                right: videoFrame.yStride - videoFrame.width,
-                bottom: 0,
-                rotation: videoFrame.rotation || 0,
-                yplane: videoFrame.yBuffer,
-                uplane: videoFrame.uBuffer,
-                vplane: videoFrame.vBuffer,
-            });
-        }
-        catch (err) {
-            error = err;
-        }
-        if (!this.gl || error) {
-            (_a = this.fallback) === null || _a === void 0 ? void 0 : _a.call(null, this, new Error('webgl lost or webgl initialize failed'));
-            return;
-        }
-    };
-    WebGLRenderer.prototype.refreshCanvas = function () {
-        if (this.lastImageWidth) {
-            this.updateViewZoomLevel(this.lastImageRotation, this.lastImageWidth, this.lastImageHeight);
-        }
-    };
-    WebGLRenderer.prototype.renderImage = function (image) {
-        // Rotation, width, height, left, top, right, bottom, yplane, uplane, vplane
-        if (image.width != this.initWidth ||
-            image.height != this.initHeight ||
-            image.rotation != this.initRotation) {
-            var view = this.parentElement;
-            this.unbind();
-            this.initCanvas(view, image.width, image.height, image.rotation);
-        }
-        if (!this.gl || !this.program) {
+    WebGLRenderer.prototype.drawFrame = function (_a) {
+        var width = _a.width, height = _a.height, yStride = _a.yStride, uStride = _a.uStride, vStride = _a.vStride, yBuffer = _a.yBuffer, uBuffer = _a.uBuffer, vBuffer = _a.vBuffer, rotation = _a.rotation;
+        this.rotateCanvas({ width: width, height: height, rotation: rotation });
+        this.updateRenderMode();
+        if (!this.gl || !this.program)
             return;
-        }
+        var left = 0, top = 0, right = yStride - width, bottom = 0;
         this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
-        var xWidth = image.width + image.left + image.right;
-        var xHeight = image.height + image.top + image.bottom;
+        var xWidth = width + left + right;
+        var xHeight = height + top + bottom;
         this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([
-            image.left / xWidth,
-            image.bottom / xHeight,
-            1 - image.right / xWidth,
-            image.bottom / xHeight,
-            image.left / xWidth,
-            1 - image.top / xHeight,
-            image.left / xWidth,
-            1 - image.top / xHeight,
-            1 - image.right / xWidth,
-            image.bottom / xHeight,
-            1 - image.right / xWidth,
-            1 - image.top / xHeight,
+            left / xWidth,
+            bottom / xHeight,
+            1 - right / xWidth,
+            bottom / xHeight,
+            left / xWidth,
+            1 - top / xHeight,
+            left / xWidth,
+            1 - top / xHeight,
+            1 - right / xWidth,
+            bottom / xHeight,
+            1 - right / xWidth,
+            1 - top / xHeight,
         ]), this.gl.STATIC_DRAW);
         this.gl.enableVertexAttribArray(this.texCoordLocation);
         this.gl.vertexAttribPointer(this.texCoordLocation, 2, this.gl.FLOAT, false, 0, 0);
-        this.uploadYuv(xWidth, xHeight, image.yplane, image.uplane, image.vplane);
-        this.updateCanvas(image.rotation, image.width, image.height);
-        this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
-    };
-    WebGLRenderer.prototype.uploadYuv = function (width, height, yplane, uplane, vplane) {
-        if (!this.gl || !this.yTexture || !this.uTexture || !this.vTexture) {
-            return;
-        }
         this.gl.pixelStorei(this.gl.UNPACK_ALIGNMENT, 1);
         this.gl.activeTexture(this.gl.TEXTURE0);
         this.gl.bindTexture(this.gl.TEXTURE_2D, this.yTexture);
-        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, width, height, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, yplane);
+        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, 
+        // Should use xWidth instead of width here (yStide)
+        xWidth, height, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, yBuffer);
         this.gl.activeTexture(this.gl.TEXTURE1);
         this.gl.bindTexture(this.gl.TEXTURE_2D, this.uTexture);
-        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, width / 2, height / 2, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, uplane);
+        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, uStride, height / 2, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, uBuffer);
         this.gl.activeTexture(this.gl.TEXTURE2);
         this.gl.bindTexture(this.gl.TEXTURE_2D, this.vTexture);
-        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, width / 2, height / 2, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, vplane);
+        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, vStride, height / 2, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, vBuffer);
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
     };
-    WebGLRenderer.prototype.updateCanvas = function (rotation, width, height) {
-        // if (this.canvasUpdated) {
-        //   return;
-        // }
-        if (width || height) {
-            this.lastImageWidth = width;
-            this.lastImageHeight = height;
-            this.lastImageRotation = rotation;
-        }
-        else {
-            width = this.lastImageWidth;
-            height = this.lastImageHeight;
-            rotation = this.lastImageRotation;
-        }
-        if (!this.updateViewZoomLevel(rotation, width, height)) {
-            return;
-        }
-        if (!this.gl) {
+    WebGLRenderer.prototype.rotateCanvas = function (_a) {
+        var width = _a.width, height = _a.height, rotation = _a.rotation;
+        _super.prototype.rotateCanvas.call(this, { width: width, height: height, rotation: rotation });
+        if (!this.gl)
             return;
-        }
+        this.gl.viewport(0, 0, width, height);
         this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.surfaceBuffer);
         this.gl.enableVertexAttribArray(this.positionLocation);
         this.gl.vertexAttribPointer(this.positionLocation, 2, this.gl.FLOAT, false, 0, 0);
@@ -271,127 +240,6 @@ var WebGLRenderer = /** @class */ (function (_super) {
         var resolutionLocation = this.gl.getUniformLocation(this.program, 'u_resolution');
         this.gl.uniform2f(resolutionLocation, width, height);
     };
-    WebGLRenderer.prototype.updateViewZoomLevel = function (rotation, width, height) {
-        if (!this.parentElement || !this.canvas) {
-            return;
-        }
-        this.clientWidth = this.parentElement.clientWidth;
-        this.clientHeight = this.parentElement.clientHeight;
-        try {
-            if (this.contentMode === AgoraMediaBase_1.RenderModeType.RenderModeHidden) {
-                // Cover
-                if (rotation === 0 || rotation === 180) {
-                    if (this.clientWidth / this.clientHeight > width / height) {
-                        this.canvas.style.transform = "scale(".concat(this.clientWidth / width, ")");
-                    }
-                    else {
-                        this.canvas.style.transform = "scale(".concat(this.clientHeight / height, ")");
-                    }
-                }
-                else {
-                    // 90, 270
-                    if (this.clientHeight / this.clientWidth > width / height) {
-                        this.canvas.style.transform = "scale(".concat(this.clientHeight / width, ")");
-                    }
-                    else {
-                        this.canvas.style.transform = "scale(".concat(this.clientWidth / height, ")");
-                    }
-                }
-                // Contain
-            }
-            else if (rotation === 0 || rotation === 180) {
-                if (this.clientWidth / this.clientHeight > width / height) {
-                    this.canvas.style.transform = "scale(".concat(this.clientHeight / height, ")");
-                }
-                else {
-                    this.canvas.style.transform = "scale(".concat(this.clientWidth / width, ")");
-                }
-            }
-            else {
-                // 90, 270
-                if (this.clientHeight / this.clientWidth > width / height) {
-                    this.canvas.style.transform = "scale(".concat(this.clientWidth / height, ")");
-                }
-                else {
-                    this.canvas.style.transform = "scale(".concat(this.clientHeight / width, ")");
-                }
-            }
-        }
-        catch (e) {
-            (0, Utils_1.logError)('webgl updateViewZoomLevel', e);
-            return false;
-        }
-        return true;
-    };
-    WebGLRenderer.prototype.initCanvas = function (view, width, height, rotation) {
-        var _this = this;
-        var _a, _b;
-        this.clientWidth = view.clientWidth;
-        this.clientHeight = view.clientHeight;
-        this.bind(view);
-        if (this.canvas) {
-            if (rotation == 0 || rotation == 180) {
-                this.canvas.width = width;
-                this.canvas.height = height;
-            }
-            else {
-                this.canvas.width = height;
-                this.canvas.height = width;
-            }
-        }
-        this.initWidth = width;
-        this.initHeight = height;
-        this.initRotation = rotation;
-        try {
-            var getContext = function (contextNames) {
-                var _a;
-                if (contextNames === void 0) { contextNames = ['webgl2', 'webgl', 'experimental-webgl']; }
-                for (var i = 0; i < contextNames.length; i++) {
-                    var contextName = contextNames[i];
-                    var context = (_a = _this.canvas) === null || _a === void 0 ? void 0 : _a.getContext(contextName, {
-                        depth: true,
-                        stencil: true,
-                        alpha: false,
-                        antialias: false,
-                        premultipliedAlpha: true,
-                        preserveDrawingBuffer: false,
-                        powerPreference: 'default',
-                        failIfMajorPerformanceCaveat: true,
-                    });
-                    if (context) {
-                        return context;
-                    }
-                }
-                return null;
-            };
-            // Try to grab the standard context. If it fails, fallback to experimental.
-            (_a = this.gl) !== null && _a !== void 0 ? _a : (this.gl = getContext());
-        }
-        catch (e) {
-            (0, Utils_1.logWarn)('webgl create happen some warming', this.gl, this.canvas);
-        }
-        if (!this.gl) {
-            (_b = this.fallback) === null || _b === void 0 ? void 0 : _b.call(null, this, new Error('Browser not support! No WebGL detected.'));
-            return;
-        }
-        // Set clear color to black, fully opaque
-        this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
-        // Enable depth testing
-        this.gl.enable(this.gl.DEPTH_TEST);
-        // Near things obscure far things
-        this.gl.depthFunc(this.gl.LEQUAL);
-        // Clear the color as well as the depth buffer.
-        this.gl.clear(this.gl.COLOR_BUFFER_BIT |
-            this.gl.DEPTH_BUFFER_BIT |
-            this.gl.STENCIL_BUFFER_BIT);
-        // Setup GLSL program
-        this.program = createProgramFromSources(this.gl, [
-            vertexShaderSource,
-            yuvShaderSource,
-        ]);
-        this.gl.useProgram(this.program);
-        this.initTextures();
-    };
     WebGLRenderer.prototype.initTextures = function () {
         var _this = this;
         if (!this.gl)
@@ -407,7 +255,7 @@ var WebGLRenderer = /** @class */ (function (_super) {
             _this.gl.activeTexture(textureIndex);
             var texture = _this.gl.createTexture();
             _this.gl.bindTexture(_this.gl.TEXTURE_2D, texture);
-            // Set the parameters so we can render any size image.
+            // Set the parameters so we can render any size
             _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);
             _this.gl.texParameteri(_this.gl.TEXTURE_2D, _this.gl.TEXTURE_MIN_FILTER, _this.gl.NEAREST);

package/js/Renderer/YUVCanvasRenderer/index.js

@@ -14,171 +14,51 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.YUVCanvasRenderer = void 0;
-var lodash_isequal_1 = __importDefault(require("lodash.isequal"));
-var AgoraMediaBase_1 = require("../../Private/AgoraMediaBase");
 var IRenderer_1 = require("../IRenderer");
 var YUVBuffer = require('yuv-buffer');
 var YUVCanvas = require('yuv-canvas');
 var YUVCanvasRenderer = /** @class */ (function (_super) {
     __extends(YUVCanvasRenderer, _super);
     function YUVCanvasRenderer() {
-        var _this = _super.call(this) || this;
-        _this._videoFrame = {
-            rotation: 0,
-            width: 0,
-            height: 0,
-            yStride: 0,
-            yBuffer: new Uint8Array(0),
-            uBuffer: new Uint8Array(0),
-            vBuffer: new Uint8Array(0),
-        };
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     YUVCanvasRenderer.prototype.bind = function (element) {
         _super.prototype.bind.call(this, element);
-        this._yuvCanvasSink = YUVCanvas.attach(this.canvas, {
+        this.frameSink = YUVCanvas.attach(this.canvas, {
             webGL: false,
         });
     };
-    YUVCanvasRenderer.prototype.unbind = function () {
-        var _a, _b;
-        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();
-        }
-        _super.prototype.unbind.call(this);
-    };
-    YUVCanvasRenderer.prototype.drawFrame = function (frame) {
-        if (!this.container || !this._yuvCanvasSink) {
+    YUVCanvasRenderer.prototype.drawFrame = function (_a) {
+        var width = _a.width, height = _a.height, yStride = _a.yStride, uStride = _a.uStride, vStride = _a.vStride, yBuffer = _a.yBuffer, uBuffer = _a.uBuffer, vBuffer = _a.vBuffer, rotation = _a.rotation;
+        this.rotateCanvas({ width: width, height: height, rotation: rotation });
+        this.updateRenderMode();
+        if (!this.frameSink)
             return;
-        }
-        var frameWidth = frame.width;
-        var 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;
-        var options = {
-            frameWidth: frameWidth,
-            frameHeight: frameHeight,
-            rotation: frame.rotation ? frame.rotation : 0,
-            contentMode: this.contentMode,
-            clientWidth: this.container.clientWidth,
-            clientHeight: this.container.clientHeight,
-        };
-        this.updateCanvas(options);
-        var format = YUVBuffer.format({
-            width: frameWidth,
-            height: frameHeight,
-            chromaWidth: frameWidth / 2,
-            chromaHeight: frameHeight / 2,
-            cropLeft: frame.yStride - frameWidth,
-        });
-        var yuvBufferFrame = YUVBuffer.frame(format, {
-            bytes: this._videoFrame.yBuffer,
-            stride: frame.yStride,
+        this.frameSink.drawFrame(YUVBuffer.frame(YUVBuffer.format({
+            width: width,
+            height: height,
+            chromaWidth: width / 2,
+            chromaHeight: height / 2,
+            cropLeft: yStride - width,
+        }), {
+            bytes: yBuffer,
+            stride: yStride,
         }, {
-            bytes: this._videoFrame.uBuffer,
-            stride: frame.yStride / 2,
+            bytes: uBuffer,
+            stride: uStride,
         }, {
-            bytes: this._videoFrame.vBuffer,
-            stride: frame.yStride / 2,
-        });
-        this._yuvCanvasSink.drawFrame(yuvBufferFrame);
+            bytes: vBuffer,
+            stride: vStride,
+        }));
     };
-    YUVCanvasRenderer.prototype.refreshCanvas = function () {
-        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);
-        }
-    };
-    YUVCanvasRenderer.prototype.updateCanvas = function (options) {
-        if (options === void 0) { options = {
-            frameWidth: 0,
-            frameHeight: 0,
-            rotation: 0,
-            contentMode: AgoraMediaBase_1.RenderModeType.RenderModeHidden,
-            clientWidth: 0,
-            clientHeight: 0,
-        }; }
-        if (this._cacheCanvasOptions) {
-            if ((0, lodash_isequal_1.default)(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');
-            }
-            var transformItems = [];
-            transformItems.push("rotateZ(".concat(options.rotation, "deg)"));
-            var scale = this.zoom(options.rotation === 90 || options.rotation === 270, options.contentMode, options.frameWidth, options.frameHeight, options.clientWidth, options.clientHeight);
-            this.canvas.style.transform = "scale(".concat(scale.toString(), ")");
-            if (transformItems.length > 0) {
-                this.canvas.style.transform += " ".concat(transformItems.join(' '));
-            }
-        }
-    };
-    YUVCanvasRenderer.prototype.zoom = function (vertical, contentMode, width, height, clientWidth, clientHeight) {
-        if (contentMode === void 0) { contentMode = AgoraMediaBase_1.RenderModeType.RenderModeFit; }
-        var localRatio = clientWidth / clientHeight;
-        var 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;
-            }
-        }
+    YUVCanvasRenderer.prototype.rotateCanvas = function (_a) {
+        var width = _a.width, height = _a.height, rotation = _a.rotation;
+        _super.prototype.rotateCanvas.call(this, { width: width, height: height, rotation: rotation });
+        if (!this.canvas)
+            return;
+        this.canvas.style.transform += " rotateZ(".concat(rotation, "deg)");
     };
     return YUVCanvasRenderer;
 }(IRenderer_1.IRenderer));

package/js/Types.js

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