trtc-electron-sdk 9.7.113-beta.2 → 9.8.8-alpha.3

package/liteav/Render/BGRAVideoRenderer/index.js

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

package/liteav/Render/Canvas3DRGBARenderer/index.js

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

package/liteav/Render/GlRenderer/index.js

@@ -158,9 +158,9 @@ const TrtcRender = function () {
             right,
             bottom,
             rotation: rotation,
-            yplane: new Uint8Array(imageData.yUint8Array),
-            uplane: new Uint8Array(imageData.uUint8Array),
-            vplane: new Uint8Array(imageData.vUint8Array),
+            yplane: imageData.yUint8Array,
+            uplane: imageData.uUint8Array,
+            vplane: imageData.vUint8Array,
             isNeedRotate
         });
         const now32 = (Date.now() & 0xffffffff) >>> 0;

package/liteav/Render/H264VideoRenderer/index.js

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

package/liteav/Render/I420VideoRenderer/index.js

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