trtc-electron-sdk 9.8.8-beta.13 → 9.8.8-beta.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/liteav/Render/BGRAVideoRenderer/index.js +114 -0
- package/liteav/Render/Canvas3DRGBARenderer/index.js +241 -0
- package/liteav/Render/GlRenderer/index.js +14 -14
- package/liteav/Render/GlRenderer/webgl-utils.js +2 -2
- package/liteav/Render/I420VideoRenderer/index.js +115 -0
- package/liteav/Render/RGBAVideoRenderer/index.js +115 -0
- package/liteav/Render/RGBRenderer/index.js +44 -71
- package/liteav/Render/SoftwareRenderer/index.js +15 -52
- package/liteav/Render/index.d.ts +4 -0
- package/liteav/Render/index.js +9 -1
- package/liteav/Render/util.d.ts +28 -0
- package/liteav/Render/util.js +107 -1
- package/liteav/trtc.d.ts +4 -1
- package/liteav/trtc.js +412 -73
- package/liteav/trtc_define.d.ts +14 -1
- package/liteav/trtc_define.js +7 -0
- package/package.json +1 -1
- package/scripts/download.js +27 -0
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
const EventEmitter = require('events').EventEmitter;
|
|
13
|
+
const isEqual = require('lodash.isequal');
|
|
14
|
+
const { calcVideoStyle } = require('../util');
|
|
15
|
+
/* contentMode
|
|
16
|
+
* - 0: Cropped mode. Uniformly scale the video until it fills the visible boundaries (cropped).
|
|
17
|
+
* One dimension of the video may have clipped contents.
|
|
18
|
+
* - 1: Fit mode. Uniformly scale the video until one of its dimension fits the boundary (zoomed to fit).
|
|
19
|
+
* Areas that are not filled due to the disparity in the aspect ratio will be filled with black.
|
|
20
|
+
*/
|
|
21
|
+
class BGRAVideoRenderer {
|
|
22
|
+
constructor() {
|
|
23
|
+
this.cachedOptions = {};
|
|
24
|
+
this.event = new EventEmitter();
|
|
25
|
+
this.element = null;
|
|
26
|
+
this.video = document.createElement('video');
|
|
27
|
+
this.video.setAttribute('style', 'width: 100%; height: 100%; display: block; margin: 0 auto;');
|
|
28
|
+
this.video.setAttribute('autoplay', 'autoplay');
|
|
29
|
+
this.video.muted = true;
|
|
30
|
+
this.contentMode = 1;
|
|
31
|
+
this.ready = false;
|
|
32
|
+
this.track = new MediaStreamTrackGenerator({ kind: 'video' });
|
|
33
|
+
this.writer = this.track.writable.getWriter();
|
|
34
|
+
}
|
|
35
|
+
getView() {
|
|
36
|
+
return this.element;
|
|
37
|
+
}
|
|
38
|
+
_updateStyle(options = {
|
|
39
|
+
contentWidth: 0,
|
|
40
|
+
contentHeight: 0,
|
|
41
|
+
rotation: 0,
|
|
42
|
+
mirrorView: false,
|
|
43
|
+
contentMode: 0,
|
|
44
|
+
containerWidth: 0,
|
|
45
|
+
containerHeight: 0,
|
|
46
|
+
isNeedRotate: true
|
|
47
|
+
}) {
|
|
48
|
+
if (isEqual(this.cachedOptions, options)) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
this.cachedOptions = Object.assign({}, options);
|
|
52
|
+
const style = calcVideoStyle(options);
|
|
53
|
+
Object.keys(style).forEach(key => {
|
|
54
|
+
this.video.style[key] = style[key];
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
drawFrame(frameData) {
|
|
58
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
59
|
+
if (!this.ready) {
|
|
60
|
+
this.ready = true;
|
|
61
|
+
this.event.emit('ready');
|
|
62
|
+
}
|
|
63
|
+
this._updateStyle({
|
|
64
|
+
rotation: frameData.rotation,
|
|
65
|
+
isNeedRotate: frameData.isNeedRotate,
|
|
66
|
+
contentWidth: frameData.width,
|
|
67
|
+
contentHeight: frameData.height,
|
|
68
|
+
contentMode: this.contentMode,
|
|
69
|
+
mirrorView: false,
|
|
70
|
+
containerWidth: this.element.clientWidth,
|
|
71
|
+
containerHeight: this.element.clientHeight,
|
|
72
|
+
});
|
|
73
|
+
if (global.bgraFrames) {
|
|
74
|
+
global.bgraFrames.push(frameData);
|
|
75
|
+
if (global.bgraFrames.length > 100) {
|
|
76
|
+
global.bgraFrames.shift();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
global.bgraFrames = [frameData];
|
|
81
|
+
}
|
|
82
|
+
try {
|
|
83
|
+
const vf = new VideoFrame(frameData.data, {
|
|
84
|
+
format: 'BGRA',
|
|
85
|
+
codedWidth: frameData.width,
|
|
86
|
+
codedHeight: frameData.height,
|
|
87
|
+
timestamp: frameData.timestamp,
|
|
88
|
+
});
|
|
89
|
+
yield this.writer.write(vf);
|
|
90
|
+
}
|
|
91
|
+
catch (error) {
|
|
92
|
+
console.error('VideoRender.drawImage error:', error);
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
bind(element) {
|
|
97
|
+
this.element = element;
|
|
98
|
+
if (this.element.firstChild) {
|
|
99
|
+
this.element.removeChild(this.element.firstChild);
|
|
100
|
+
}
|
|
101
|
+
this.element.appendChild(this.video);
|
|
102
|
+
this.video.srcObject = new MediaStream([this.track]);
|
|
103
|
+
}
|
|
104
|
+
unbind() {
|
|
105
|
+
if (this.element.firstChild) {
|
|
106
|
+
this.element.removeChild(this.element.firstChild);
|
|
107
|
+
}
|
|
108
|
+
this.element = null;
|
|
109
|
+
}
|
|
110
|
+
setContentMode(mode) {
|
|
111
|
+
this.contentMode = mode;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
exports.default = BGRAVideoRenderer;
|
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const EventEmitter = require('events').EventEmitter;
|
|
4
|
+
const isEqual = require('lodash.isequal');
|
|
5
|
+
const { calcCanvasStyle } = require('../util');
|
|
6
|
+
class Canvas3DRGBARenderer {
|
|
7
|
+
constructor() {
|
|
8
|
+
this.cacheCanvasOpts = {};
|
|
9
|
+
this.event = new EventEmitter();
|
|
10
|
+
this.ready = false;
|
|
11
|
+
this.contentMode = 1;
|
|
12
|
+
this.container = null;
|
|
13
|
+
this.canvas = null;
|
|
14
|
+
this.element = null;
|
|
15
|
+
this.gl = null;
|
|
16
|
+
this.glProgram = null;
|
|
17
|
+
this.vShader = null;
|
|
18
|
+
this.fShader = null;
|
|
19
|
+
this.samplerUniform = null;
|
|
20
|
+
this.texture = null;
|
|
21
|
+
this.vertex = [
|
|
22
|
+
-1, -1, 0,
|
|
23
|
+
1, -1, 0.0,
|
|
24
|
+
1, 1, 0.0,
|
|
25
|
+
-1, 1, 0.0
|
|
26
|
+
];
|
|
27
|
+
this.vertexIndice = [
|
|
28
|
+
0, 1, 2,
|
|
29
|
+
0, 2, 3
|
|
30
|
+
];
|
|
31
|
+
this.triangleTexCoords = [
|
|
32
|
+
0.0, 0.0,
|
|
33
|
+
1.0, 0.0,
|
|
34
|
+
1.0, 1.0,
|
|
35
|
+
0.0, 1.0
|
|
36
|
+
];
|
|
37
|
+
}
|
|
38
|
+
_initGL() {
|
|
39
|
+
try {
|
|
40
|
+
this.gl = this.canvas.getContext('webgl', { alpha: true, premultipliedAlpha: false }); //|| canvas.getContext("experimental-webgl", { antialias: false });
|
|
41
|
+
}
|
|
42
|
+
catch (e) {
|
|
43
|
+
return false;
|
|
44
|
+
}
|
|
45
|
+
if (this.gl) {
|
|
46
|
+
return true;
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
return false;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
_initShaders() {
|
|
53
|
+
const VSHADER_SOURCE = 'attribute vec3 aPos; ' +
|
|
54
|
+
'attribute vec2 aVertexTextureCoord; ' +
|
|
55
|
+
'varying mediump vec2 vTextureCoord; ' +
|
|
56
|
+
'void main(void){ ' +
|
|
57
|
+
' gl_Position = vec4(aPos, 1); ' +
|
|
58
|
+
' vTextureCoord = aVertexTextureCoord;' +
|
|
59
|
+
'}';
|
|
60
|
+
const FSHADER_SOURCE = 'varying mediump vec2 vTextureCoord; ' +
|
|
61
|
+
'uniform sampler2D uSampler; ' +
|
|
62
|
+
'void main(void) { ' +
|
|
63
|
+
' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); ' +
|
|
64
|
+
'}';
|
|
65
|
+
// compile shaders
|
|
66
|
+
const vertexShader = this._makeShader(VSHADER_SOURCE, this.gl.VERTEX_SHADER);
|
|
67
|
+
const fragmentShader = this._makeShader(FSHADER_SOURCE, this.gl.FRAGMENT_SHADER);
|
|
68
|
+
this.vShader = vertexShader;
|
|
69
|
+
this.fShader = fragmentShader;
|
|
70
|
+
if (!vertexShader || !fragmentShader) {
|
|
71
|
+
return false;
|
|
72
|
+
}
|
|
73
|
+
// create program
|
|
74
|
+
this.glProgram = this.gl.createProgram();
|
|
75
|
+
// attach and link shaders to the program
|
|
76
|
+
this.gl.attachShader(this.glProgram, vertexShader);
|
|
77
|
+
this.gl.attachShader(this.glProgram, fragmentShader);
|
|
78
|
+
this.gl.linkProgram(this.glProgram);
|
|
79
|
+
if (!this.gl.getProgramParameter(this.glProgram, this.gl.LINK_STATUS)) {
|
|
80
|
+
console.log('trtc:Unable to initialize the shader program.');
|
|
81
|
+
return false;
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
this.gl.useProgram(this.glProgram);
|
|
85
|
+
return true;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
_makeShader(src, type) {
|
|
89
|
+
//compile the vertex shader
|
|
90
|
+
const shader = this.gl.createShader(type);
|
|
91
|
+
this.gl.shaderSource(shader, src);
|
|
92
|
+
this.gl.compileShader(shader);
|
|
93
|
+
if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
|
|
94
|
+
console.log(`trtc:Error compiling shader: ${this.gl.getShaderInfoLog(shader)}`);
|
|
95
|
+
return null;
|
|
96
|
+
}
|
|
97
|
+
return shader;
|
|
98
|
+
}
|
|
99
|
+
_initUniforms() {
|
|
100
|
+
this.samplerUniform = this.gl.getUniformLocation(this.glProgram, 'uSampler');
|
|
101
|
+
return true;
|
|
102
|
+
}
|
|
103
|
+
_initTexture() {
|
|
104
|
+
this.texture = this.gl.createTexture();
|
|
105
|
+
this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
|
|
106
|
+
// c++ addon 层拷贝数据时翻转,这里不做翻转
|
|
107
|
+
this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, true);
|
|
108
|
+
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
|
|
109
|
+
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
|
|
110
|
+
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
|
|
111
|
+
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
|
|
112
|
+
}
|
|
113
|
+
_initTextureAttr() {
|
|
114
|
+
// vertex data
|
|
115
|
+
const vertexBuffer = this.gl.createBuffer();
|
|
116
|
+
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);
|
|
117
|
+
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(this.vertex), this.gl.STATIC_DRAW);
|
|
118
|
+
// indice data
|
|
119
|
+
const vertexIndiceBuffer = this.gl.createBuffer();
|
|
120
|
+
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, vertexIndiceBuffer);
|
|
121
|
+
this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.vertexIndice), this.gl.STATIC_DRAW);
|
|
122
|
+
// set position attribute
|
|
123
|
+
const aVertexPosition = this.gl.getAttribLocation(this.glProgram, 'aPos');
|
|
124
|
+
this.gl.vertexAttribPointer(aVertexPosition, 3, this.gl.FLOAT, false, 0, 0);
|
|
125
|
+
this.gl.enableVertexAttribArray(aVertexPosition);
|
|
126
|
+
// texture coordinate data
|
|
127
|
+
const trianglesTexCoordBuffer = this.gl.createBuffer();
|
|
128
|
+
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, trianglesTexCoordBuffer);
|
|
129
|
+
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(this.triangleTexCoords), this.gl.STATIC_DRAW);
|
|
130
|
+
// set texture coordinate attribute
|
|
131
|
+
const vertexTexCoordAttribute = this.gl.getAttribLocation(this.glProgram, 'aVertexTextureCoord');
|
|
132
|
+
this.gl.enableVertexAttribArray(vertexTexCoordAttribute);
|
|
133
|
+
this.gl.vertexAttribPointer(vertexTexCoordAttribute, 2, this.gl.FLOAT, false, 0, 0);
|
|
134
|
+
}
|
|
135
|
+
getView() {
|
|
136
|
+
return this.element;
|
|
137
|
+
}
|
|
138
|
+
bind(element) {
|
|
139
|
+
this.element = element;
|
|
140
|
+
const container = document.createElement('div');
|
|
141
|
+
Object.assign(container.style, {
|
|
142
|
+
width: '100%',
|
|
143
|
+
height: '100%',
|
|
144
|
+
display: 'flex',
|
|
145
|
+
justifyContent: 'center',
|
|
146
|
+
alignItems: 'center'
|
|
147
|
+
});
|
|
148
|
+
this.container = container;
|
|
149
|
+
element.appendChild(this.container);
|
|
150
|
+
this.canvas = document.createElement('canvas');
|
|
151
|
+
this.container.appendChild(this.canvas);
|
|
152
|
+
// init webgl & context
|
|
153
|
+
let ret = false;
|
|
154
|
+
do {
|
|
155
|
+
ret = this._initGL();
|
|
156
|
+
if (!ret) {
|
|
157
|
+
console.log('trtc:init WebGL failed');
|
|
158
|
+
break;
|
|
159
|
+
}
|
|
160
|
+
ret = this._initShaders();
|
|
161
|
+
if (!ret) {
|
|
162
|
+
console.log('trtc:init WebGL Shader failed');
|
|
163
|
+
break;
|
|
164
|
+
}
|
|
165
|
+
ret = this._initUniforms();
|
|
166
|
+
if (!ret) {
|
|
167
|
+
console.log('trtc:int WebGL Uniform failed');
|
|
168
|
+
break;
|
|
169
|
+
}
|
|
170
|
+
} while (false);
|
|
171
|
+
if (ret) {
|
|
172
|
+
this._initTextureAttr();
|
|
173
|
+
this._initTexture();
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
unbind() {
|
|
177
|
+
this.texture = null;
|
|
178
|
+
this.samplerUniform = null;
|
|
179
|
+
this.vShader = null;
|
|
180
|
+
this.fShader = null;
|
|
181
|
+
this.glProgram = null;
|
|
182
|
+
this.gl = null;
|
|
183
|
+
this.container && this.container.removeChild(this.canvas);
|
|
184
|
+
this.element && this.element.removeChild(this.container);
|
|
185
|
+
this.container = null;
|
|
186
|
+
this.element = null;
|
|
187
|
+
}
|
|
188
|
+
updateCanvas(options = {
|
|
189
|
+
contentWidth: 0,
|
|
190
|
+
contentHeight: 0,
|
|
191
|
+
rotation: 0,
|
|
192
|
+
mirrorView: false,
|
|
193
|
+
contentMode: 0,
|
|
194
|
+
containerWidth: 0,
|
|
195
|
+
containerHeight: 0,
|
|
196
|
+
isNeedRotate: true
|
|
197
|
+
}) {
|
|
198
|
+
if (isEqual(this.cacheCanvasOpts, options)) {
|
|
199
|
+
return;
|
|
200
|
+
}
|
|
201
|
+
this.cacheCanvasOpts = Object.assign({}, options);
|
|
202
|
+
const { width, height, transform } = calcCanvasStyle(options);
|
|
203
|
+
this.canvas.width = width;
|
|
204
|
+
this.canvas.height = height;
|
|
205
|
+
this.canvas.style.transform = transform;
|
|
206
|
+
}
|
|
207
|
+
drawFrame(imageData) {
|
|
208
|
+
if (!this.ready) {
|
|
209
|
+
this.ready = true;
|
|
210
|
+
this.event.emit('ready');
|
|
211
|
+
}
|
|
212
|
+
const mirror = false;
|
|
213
|
+
const contentWidth = imageData.width;
|
|
214
|
+
const contentHeight = imageData.height;
|
|
215
|
+
const rotation = imageData.rotation;
|
|
216
|
+
const isNeedRotate = imageData.isNeedRotate;
|
|
217
|
+
this.updateCanvas({
|
|
218
|
+
contentWidth,
|
|
219
|
+
contentHeight,
|
|
220
|
+
rotation,
|
|
221
|
+
mirrorView: mirror,
|
|
222
|
+
contentMode: this.contentMode,
|
|
223
|
+
containerWidth: this.container.clientWidth,
|
|
224
|
+
containerHeight: this.container.clientHeight,
|
|
225
|
+
isNeedRotate
|
|
226
|
+
});
|
|
227
|
+
try {
|
|
228
|
+
this.gl.viewport(0, 0, contentWidth, contentHeight);
|
|
229
|
+
this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, contentWidth, contentHeight, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, imageData.data // new Uint8Array(imageData.data)
|
|
230
|
+
);
|
|
231
|
+
this.gl.drawElements(this.gl.TRIANGLES, 6, this.gl.UNSIGNED_SHORT, 0);
|
|
232
|
+
}
|
|
233
|
+
catch (error) {
|
|
234
|
+
console.error('trtc:', error);
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
setContentMode(mode = 0) {
|
|
238
|
+
this.contentMode = mode;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
exports.default = Canvas3DRGBARenderer;
|
|
@@ -48,7 +48,7 @@ const TrtcRender = function () {
|
|
|
48
48
|
gl.getExtension('WEBGL_lose_context').loseContext();
|
|
49
49
|
}
|
|
50
50
|
catch (err) {
|
|
51
|
-
console.warn(err);
|
|
51
|
+
console.warn('trtc:', err);
|
|
52
52
|
}
|
|
53
53
|
program = undefined;
|
|
54
54
|
positionLocation = undefined;
|
|
@@ -69,7 +69,7 @@ const TrtcRender = function () {
|
|
|
69
69
|
that.view && that.view.removeChild(that.container);
|
|
70
70
|
}
|
|
71
71
|
catch (e) {
|
|
72
|
-
console.warn(e);
|
|
72
|
+
console.warn('trtc:', e);
|
|
73
73
|
}
|
|
74
74
|
that.canvas = undefined;
|
|
75
75
|
that.container = undefined;
|
|
@@ -83,7 +83,7 @@ const TrtcRender = function () {
|
|
|
83
83
|
};
|
|
84
84
|
that.renderImage = function (image) {
|
|
85
85
|
if (!gl) {
|
|
86
|
-
console.log('
|
|
86
|
+
console.log('trtc:no gl');
|
|
87
87
|
return;
|
|
88
88
|
}
|
|
89
89
|
if (image.width != that.initWidth
|
|
@@ -93,7 +93,7 @@ const TrtcRender = function () {
|
|
|
93
93
|
const view = that.view;
|
|
94
94
|
that.unbind();
|
|
95
95
|
initCanvas(view, image.mirror, image.width, image.height, image.rotation, image.isNeedRotate, e => {
|
|
96
|
-
console.error(`init canvas ${image.width}*${image.height} rotation ${image.rotation} failed. ${e}`);
|
|
96
|
+
console.error(`trtc:init canvas ${image.width}*${image.height} rotation ${image.rotation} failed. ${e}`);
|
|
97
97
|
});
|
|
98
98
|
}
|
|
99
99
|
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
|
|
@@ -158,9 +158,9 @@ const TrtcRender = function () {
|
|
|
158
158
|
right,
|
|
159
159
|
bottom,
|
|
160
160
|
rotation: rotation,
|
|
161
|
-
yplane:
|
|
162
|
-
uplane:
|
|
163
|
-
vplane:
|
|
161
|
+
yplane: imageData.yUint8Array,
|
|
162
|
+
uplane: imageData.uUint8Array,
|
|
163
|
+
vplane: imageData.vUint8Array,
|
|
164
164
|
isNeedRotate
|
|
165
165
|
});
|
|
166
166
|
const now32 = (Date.now() & 0xffffffff) >>> 0;
|
|
@@ -175,7 +175,7 @@ const TrtcRender = function () {
|
|
|
175
175
|
if (config.getDebugMode()) {
|
|
176
176
|
e = gl.getError();
|
|
177
177
|
if (e != gl.NO_ERROR) {
|
|
178
|
-
console.log('upload y plane ', width, height, yplane.byteLength, ' error', e);
|
|
178
|
+
console.log('trtc:upload y plane ', width, height, yplane.byteLength, ' error', e);
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
181
|
gl.activeTexture(gl.TEXTURE1);
|
|
@@ -184,7 +184,7 @@ const TrtcRender = function () {
|
|
|
184
184
|
if (config.getDebugMode()) {
|
|
185
185
|
e = gl.getError();
|
|
186
186
|
if (e != gl.NO_ERROR) {
|
|
187
|
-
console.log('upload u plane ', width, height, uplane.byteLength, ' error', e);
|
|
187
|
+
console.log('trtc:upload u plane ', width, height, uplane.byteLength, ' error', e);
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
190
|
gl.activeTexture(gl.TEXTURE2);
|
|
@@ -194,7 +194,7 @@ const TrtcRender = function () {
|
|
|
194
194
|
if (config.getDebugMode()) {
|
|
195
195
|
e = gl.getError();
|
|
196
196
|
if (e != gl.NO_ERROR) {
|
|
197
|
-
console.log('upload v plane ', width, height, vplane.byteLength, ' error', e);
|
|
197
|
+
console.log('trtc:upload v plane ', width, height, vplane.byteLength, ' error', e);
|
|
198
198
|
}
|
|
199
199
|
}
|
|
200
200
|
}
|
|
@@ -273,7 +273,7 @@ const TrtcRender = function () {
|
|
|
273
273
|
}) || that.canvas.getContext('experimental-webgl');
|
|
274
274
|
}
|
|
275
275
|
catch (e) {
|
|
276
|
-
console.log(e);
|
|
276
|
+
console.log('trtc:', e);
|
|
277
277
|
}
|
|
278
278
|
if (!gl) {
|
|
279
279
|
gl = undefined;
|
|
@@ -361,9 +361,9 @@ const TrtcRender = function () {
|
|
|
361
361
|
}
|
|
362
362
|
}
|
|
363
363
|
catch (e) {
|
|
364
|
-
console.log(`updateCanvas error ${that.canvas}`);
|
|
365
|
-
console.log(that);
|
|
366
|
-
console.error(e);
|
|
364
|
+
console.log(`trtc:updateCanvas error ${that.canvas}`);
|
|
365
|
+
console.log('trtc:', that);
|
|
366
|
+
console.error('trtc:', e);
|
|
367
367
|
return false;
|
|
368
368
|
}
|
|
369
369
|
return true;
|
|
@@ -51,10 +51,10 @@
|
|
|
51
51
|
function error(msg) {
|
|
52
52
|
if (topWindow.console) {
|
|
53
53
|
if (topWindow.console.error) {
|
|
54
|
-
topWindow.console.error(msg);
|
|
54
|
+
topWindow.console.error('trtc:', msg);
|
|
55
55
|
}
|
|
56
56
|
else if (topWindow.console.log) {
|
|
57
|
-
topWindow.console.log(msg);
|
|
57
|
+
topWindow.console.log('trtc:', msg);
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
const EventEmitter = require('events').EventEmitter;
|
|
13
|
+
const isEqual = require('lodash.isequal');
|
|
14
|
+
const { calcVideoStyle } = require('../util');
|
|
15
|
+
/* contentMode
|
|
16
|
+
* - 0: Cropped mode. Uniformly scale the video until it fills the visible boundaries (cropped).
|
|
17
|
+
* One dimension of the video may have clipped contents.
|
|
18
|
+
* - 1: Fit mode. Uniformly scale the video until one of its dimension fits the boundary (zoomed to fit).
|
|
19
|
+
* Areas that are not filled due to the disparity in the aspect ratio will be filled with black.
|
|
20
|
+
*/
|
|
21
|
+
class I420VideoRenderer {
|
|
22
|
+
constructor() {
|
|
23
|
+
this.cachedOptions = {};
|
|
24
|
+
this.event = new EventEmitter();
|
|
25
|
+
this.element = null;
|
|
26
|
+
this.video = document.createElement('video');
|
|
27
|
+
this.video.setAttribute('style', 'width: 100%; height: 100%; display: block; margin: 0 auto;');
|
|
28
|
+
this.video.setAttribute('autoplay', 'autoplay');
|
|
29
|
+
this.video.muted = true;
|
|
30
|
+
this.contentMode = 1;
|
|
31
|
+
this.ready = false;
|
|
32
|
+
this.track = new MediaStreamTrackGenerator({ kind: 'video' });
|
|
33
|
+
this.writer = this.track.writable.getWriter();
|
|
34
|
+
}
|
|
35
|
+
getView() {
|
|
36
|
+
return this.element;
|
|
37
|
+
}
|
|
38
|
+
_updateStyle(options = {
|
|
39
|
+
contentWidth: 0,
|
|
40
|
+
contentHeight: 0,
|
|
41
|
+
rotation: 0,
|
|
42
|
+
mirrorView: false,
|
|
43
|
+
contentMode: 0,
|
|
44
|
+
containerWidth: 0,
|
|
45
|
+
containerHeight: 0,
|
|
46
|
+
isNeedRotate: true
|
|
47
|
+
}) {
|
|
48
|
+
if (isEqual(this.cachedOptions, options)) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
this.cachedOptions = Object.assign({}, options);
|
|
52
|
+
const style = calcVideoStyle(options);
|
|
53
|
+
Object.keys(style).forEach(key => {
|
|
54
|
+
this.video.style[key] = style[key];
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
drawFrame(frameData) {
|
|
58
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
59
|
+
if (!this.ready) {
|
|
60
|
+
this.ready = true;
|
|
61
|
+
this.event.emit('ready');
|
|
62
|
+
}
|
|
63
|
+
this._updateStyle({
|
|
64
|
+
rotation: frameData.rotation,
|
|
65
|
+
isNeedRotate: frameData.isNeedRotate,
|
|
66
|
+
contentWidth: frameData.width,
|
|
67
|
+
contentHeight: frameData.height,
|
|
68
|
+
contentMode: this.contentMode,
|
|
69
|
+
mirrorView: false,
|
|
70
|
+
containerWidth: this.element.clientWidth,
|
|
71
|
+
containerHeight: this.element.clientHeight,
|
|
72
|
+
});
|
|
73
|
+
if (global.i420Frames) {
|
|
74
|
+
global.i420Frames.push(frameData);
|
|
75
|
+
if (global.i420Frames.length > 100) {
|
|
76
|
+
global.i420Frames.shift();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
global.i420Frames = [frameData];
|
|
81
|
+
}
|
|
82
|
+
try {
|
|
83
|
+
const vf = new VideoFrame(frameData.data, {
|
|
84
|
+
format: 'I420',
|
|
85
|
+
codedWidth: frameData.width,
|
|
86
|
+
codedHeight: frameData.height,
|
|
87
|
+
timestamp: frameData.timestamp,
|
|
88
|
+
});
|
|
89
|
+
yield this.writer.write(vf);
|
|
90
|
+
// console.debug('VideoRender.drawImage write video frame success');
|
|
91
|
+
}
|
|
92
|
+
catch (error) {
|
|
93
|
+
console.error('VideoRender.drawImage error:', error);
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
bind(element) {
|
|
98
|
+
this.element = element;
|
|
99
|
+
if (this.element.firstChild) {
|
|
100
|
+
this.element.removeChild(this.element.firstChild);
|
|
101
|
+
}
|
|
102
|
+
this.element.appendChild(this.video);
|
|
103
|
+
this.video.srcObject = new MediaStream([this.track]);
|
|
104
|
+
}
|
|
105
|
+
unbind() {
|
|
106
|
+
if (this.element.firstChild) {
|
|
107
|
+
this.element.removeChild(this.element.firstChild);
|
|
108
|
+
}
|
|
109
|
+
this.element = null;
|
|
110
|
+
}
|
|
111
|
+
setContentMode(mode) {
|
|
112
|
+
this.contentMode = mode;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
exports.default = I420VideoRenderer;
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
const EventEmitter = require('events').EventEmitter;
|
|
13
|
+
const isEqual = require('lodash.isequal');
|
|
14
|
+
const { calcVideoStyle } = require('../util');
|
|
15
|
+
/* contentMode
|
|
16
|
+
* - 0: Cropped mode. Uniformly scale the video until it fills the visible boundaries (cropped).
|
|
17
|
+
* One dimension of the video may have clipped contents.
|
|
18
|
+
* - 1: Fit mode. Uniformly scale the video until one of its dimension fits the boundary (zoomed to fit).
|
|
19
|
+
* Areas that are not filled due to the disparity in the aspect ratio will be filled with black.
|
|
20
|
+
*/
|
|
21
|
+
class RGBAVideoRenderer {
|
|
22
|
+
constructor() {
|
|
23
|
+
this.cachedOptions = {};
|
|
24
|
+
this.event = new EventEmitter();
|
|
25
|
+
this.element = null;
|
|
26
|
+
this.video = document.createElement('video');
|
|
27
|
+
this.video.setAttribute('style', 'width: 100%; height: 100%; display: block; margin: 0 auto;');
|
|
28
|
+
this.video.setAttribute('autoplay', 'autoplay');
|
|
29
|
+
this.video.muted = true;
|
|
30
|
+
this.contentMode = 1;
|
|
31
|
+
this.ready = false;
|
|
32
|
+
this.track = new MediaStreamTrackGenerator({ kind: 'video' });
|
|
33
|
+
this.writer = this.track.writable.getWriter();
|
|
34
|
+
}
|
|
35
|
+
getView() {
|
|
36
|
+
return this.element;
|
|
37
|
+
}
|
|
38
|
+
_updateStyle(options = {
|
|
39
|
+
contentWidth: 0,
|
|
40
|
+
contentHeight: 0,
|
|
41
|
+
rotation: 0,
|
|
42
|
+
mirrorView: false,
|
|
43
|
+
contentMode: 0,
|
|
44
|
+
containerWidth: 0,
|
|
45
|
+
containerHeight: 0,
|
|
46
|
+
isNeedRotate: true
|
|
47
|
+
}) {
|
|
48
|
+
if (isEqual(this.cachedOptions, options)) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
this.cachedOptions = Object.assign({}, options);
|
|
52
|
+
const style = calcVideoStyle(options);
|
|
53
|
+
Object.keys(style).forEach(key => {
|
|
54
|
+
this.video.style[key] = style[key];
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
drawFrame(frameData) {
|
|
58
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
59
|
+
if (!this.ready) {
|
|
60
|
+
this.ready = true;
|
|
61
|
+
this.event.emit('ready');
|
|
62
|
+
}
|
|
63
|
+
this._updateStyle({
|
|
64
|
+
rotation: frameData.rotation,
|
|
65
|
+
isNeedRotate: frameData.isNeedRotate,
|
|
66
|
+
contentWidth: frameData.width,
|
|
67
|
+
contentHeight: frameData.height,
|
|
68
|
+
contentMode: this.contentMode,
|
|
69
|
+
mirrorView: false,
|
|
70
|
+
containerWidth: this.element.clientWidth,
|
|
71
|
+
containerHeight: this.element.clientHeight,
|
|
72
|
+
});
|
|
73
|
+
if (global.rgbaFrames) {
|
|
74
|
+
global.rgbaFrames.push(frameData);
|
|
75
|
+
if (global.rgbaFrames.length > 100) {
|
|
76
|
+
global.rgbaFrames.shift();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
global.rgbaFrames = [frameData];
|
|
81
|
+
}
|
|
82
|
+
try {
|
|
83
|
+
const vf = new VideoFrame(frameData.data, {
|
|
84
|
+
format: 'RGBA',
|
|
85
|
+
codedWidth: frameData.width,
|
|
86
|
+
codedHeight: frameData.height,
|
|
87
|
+
timestamp: frameData.timestamp,
|
|
88
|
+
});
|
|
89
|
+
yield this.writer.write(vf);
|
|
90
|
+
// console.debug('VideoRender.drawImage write video frame success');
|
|
91
|
+
}
|
|
92
|
+
catch (error) {
|
|
93
|
+
console.error('VideoRender.drawImage error:', error);
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
bind(element) {
|
|
98
|
+
this.element = element;
|
|
99
|
+
if (this.element.firstChild) {
|
|
100
|
+
this.element.removeChild(this.element.firstChild);
|
|
101
|
+
}
|
|
102
|
+
this.element.appendChild(this.video);
|
|
103
|
+
this.video.srcObject = new MediaStream([this.track]);
|
|
104
|
+
}
|
|
105
|
+
unbind() {
|
|
106
|
+
if (this.element.firstChild) {
|
|
107
|
+
this.element.removeChild(this.element.firstChild);
|
|
108
|
+
}
|
|
109
|
+
this.element = null;
|
|
110
|
+
}
|
|
111
|
+
setContentMode(mode) {
|
|
112
|
+
this.contentMode = mode;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
exports.default = RGBAVideoRenderer;
|