trtc-electron-sdk 10.3.112-beta.0 → 10.3.112-beta.7
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 +19 -26
- 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 +6 -2
- package/liteav/Render/index.js +11 -3
- package/liteav/Render/util.d.ts +29 -0
- package/liteav/Render/util.js +111 -1
- package/liteav/trtc.d.ts +151 -82
- package/liteav/trtc.js +852 -214
- package/liteav/trtc_define.d.ts +65 -12
- package/liteav/trtc_define.js +95 -13
- package/package.json +9 -9
- package/liteav/vod_player.d.ts +0 -51
- package/liteav/vod_player.js +0 -167
|
@@ -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;
|
|
@@ -31,8 +31,7 @@ const TrtcRender = function () {
|
|
|
31
31
|
lastImageRotation: 0,
|
|
32
32
|
lastIsNeedRotate: true,
|
|
33
33
|
firstFrameRender: false,
|
|
34
|
-
event: new EventEmitter()
|
|
35
|
-
fallbackCb: null,
|
|
34
|
+
event: new EventEmitter()
|
|
36
35
|
};
|
|
37
36
|
that.getView = function () {
|
|
38
37
|
return that.view;
|
|
@@ -41,16 +40,15 @@ const TrtcRender = function () {
|
|
|
41
40
|
that.setContentMode = function (mode) {
|
|
42
41
|
that.contentMode = mode;
|
|
43
42
|
};
|
|
44
|
-
that.bind = function (view
|
|
45
|
-
that.
|
|
46
|
-
initCanvas(view, that.mirrorView, view.clientWidth, view.clientHeight, that.initRotation, true, console.warn, true);
|
|
43
|
+
that.bind = function (view) {
|
|
44
|
+
initCanvas(view, that.mirrorView, view.clientWidth, view.clientHeight, that.initRotation, true, console.warn);
|
|
47
45
|
};
|
|
48
46
|
that.unbind = function () {
|
|
49
47
|
try {
|
|
50
48
|
gl.getExtension('WEBGL_lose_context').loseContext();
|
|
51
49
|
}
|
|
52
50
|
catch (err) {
|
|
53
|
-
console.warn(err);
|
|
51
|
+
console.warn('trtc:', err);
|
|
54
52
|
}
|
|
55
53
|
program = undefined;
|
|
56
54
|
positionLocation = undefined;
|
|
@@ -71,7 +69,7 @@ const TrtcRender = function () {
|
|
|
71
69
|
that.view && that.view.removeChild(that.container);
|
|
72
70
|
}
|
|
73
71
|
catch (e) {
|
|
74
|
-
console.warn(e);
|
|
72
|
+
console.warn('trtc:', e);
|
|
75
73
|
}
|
|
76
74
|
that.canvas = undefined;
|
|
77
75
|
that.container = undefined;
|
|
@@ -85,7 +83,7 @@ const TrtcRender = function () {
|
|
|
85
83
|
};
|
|
86
84
|
that.renderImage = function (image) {
|
|
87
85
|
if (!gl) {
|
|
88
|
-
console.log('
|
|
86
|
+
console.log('trtc:no gl');
|
|
89
87
|
return;
|
|
90
88
|
}
|
|
91
89
|
if (image.width != that.initWidth
|
|
@@ -95,8 +93,8 @@ const TrtcRender = function () {
|
|
|
95
93
|
const view = that.view;
|
|
96
94
|
that.unbind();
|
|
97
95
|
initCanvas(view, image.mirror, image.width, image.height, image.rotation, image.isNeedRotate, e => {
|
|
98
|
-
console.error(`init canvas ${image.width}*${image.height} rotation ${image.rotation} failed. ${e}`);
|
|
99
|
-
}
|
|
96
|
+
console.error(`trtc:init canvas ${image.width}*${image.height} rotation ${image.rotation} failed. ${e}`);
|
|
97
|
+
});
|
|
100
98
|
}
|
|
101
99
|
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
|
|
102
100
|
const xWidth = image.width + image.left + image.right;
|
|
@@ -160,9 +158,9 @@ const TrtcRender = function () {
|
|
|
160
158
|
right,
|
|
161
159
|
bottom,
|
|
162
160
|
rotation: rotation,
|
|
163
|
-
yplane:
|
|
164
|
-
uplane:
|
|
165
|
-
vplane:
|
|
161
|
+
yplane: imageData.yUint8Array,
|
|
162
|
+
uplane: imageData.uUint8Array,
|
|
163
|
+
vplane: imageData.vUint8Array,
|
|
166
164
|
isNeedRotate
|
|
167
165
|
});
|
|
168
166
|
const now32 = (Date.now() & 0xffffffff) >>> 0;
|
|
@@ -177,7 +175,7 @@ const TrtcRender = function () {
|
|
|
177
175
|
if (config.getDebugMode()) {
|
|
178
176
|
e = gl.getError();
|
|
179
177
|
if (e != gl.NO_ERROR) {
|
|
180
|
-
console.log('upload y plane ', width, height, yplane.byteLength, ' error', e);
|
|
178
|
+
console.log('trtc:upload y plane ', width, height, yplane.byteLength, ' error', e);
|
|
181
179
|
}
|
|
182
180
|
}
|
|
183
181
|
gl.activeTexture(gl.TEXTURE1);
|
|
@@ -186,7 +184,7 @@ const TrtcRender = function () {
|
|
|
186
184
|
if (config.getDebugMode()) {
|
|
187
185
|
e = gl.getError();
|
|
188
186
|
if (e != gl.NO_ERROR) {
|
|
189
|
-
console.log('upload u plane ', width, height, uplane.byteLength, ' error', e);
|
|
187
|
+
console.log('trtc:upload u plane ', width, height, uplane.byteLength, ' error', e);
|
|
190
188
|
}
|
|
191
189
|
}
|
|
192
190
|
gl.activeTexture(gl.TEXTURE2);
|
|
@@ -196,7 +194,7 @@ const TrtcRender = function () {
|
|
|
196
194
|
if (config.getDebugMode()) {
|
|
197
195
|
e = gl.getError();
|
|
198
196
|
if (e != gl.NO_ERROR) {
|
|
199
|
-
console.log('upload v plane ', width, height, vplane.byteLength, ' error', e);
|
|
197
|
+
console.log('trtc:upload v plane ', width, height, vplane.byteLength, ' error', e);
|
|
200
198
|
}
|
|
201
199
|
}
|
|
202
200
|
}
|
|
@@ -241,7 +239,7 @@ const TrtcRender = function () {
|
|
|
241
239
|
+ ' b=y+2.017*u;'
|
|
242
240
|
+ ' gl_FragColor=vec4(r,g,b,1.0);'
|
|
243
241
|
+ '}';
|
|
244
|
-
function initCanvas(view, mirror, width, height, rotation, isNeedRotate, onFailure
|
|
242
|
+
function initCanvas(view, mirror, width, height, rotation, isNeedRotate, onFailure) {
|
|
245
243
|
that.clientWidth = view.clientWidth;
|
|
246
244
|
that.clientHeight = view.clientHeight;
|
|
247
245
|
that.view = view;
|
|
@@ -254,11 +252,6 @@ const TrtcRender = function () {
|
|
|
254
252
|
that.container.style.alignItems = 'center';
|
|
255
253
|
that.view.appendChild(that.container);
|
|
256
254
|
that.canvas = document.createElement('canvas');
|
|
257
|
-
that.canvas.addEventListener('webglcontextlost', function (e) {
|
|
258
|
-
if (!isBind && that.fallbackCb) {
|
|
259
|
-
that.fallbackCb();
|
|
260
|
-
}
|
|
261
|
-
}, { once: true });
|
|
262
255
|
if (isNeedKeepWidthAndHeight(rotation, isNeedRotate)) {
|
|
263
256
|
that.canvas.width = width;
|
|
264
257
|
that.canvas.height = height;
|
|
@@ -280,7 +273,7 @@ const TrtcRender = function () {
|
|
|
280
273
|
}) || that.canvas.getContext('experimental-webgl');
|
|
281
274
|
}
|
|
282
275
|
catch (e) {
|
|
283
|
-
console.log(e);
|
|
276
|
+
console.log('trtc:', e);
|
|
284
277
|
}
|
|
285
278
|
if (!gl) {
|
|
286
279
|
gl = undefined;
|
|
@@ -368,9 +361,9 @@ const TrtcRender = function () {
|
|
|
368
361
|
}
|
|
369
362
|
}
|
|
370
363
|
catch (e) {
|
|
371
|
-
console.log(`updateCanvas error ${that.canvas}`);
|
|
372
|
-
console.log(that);
|
|
373
|
-
console.error(e);
|
|
364
|
+
console.log(`trtc:updateCanvas error ${that.canvas}`);
|
|
365
|
+
console.log('trtc:', that);
|
|
366
|
+
console.error('trtc:', e);
|
|
374
367
|
return false;
|
|
375
368
|
}
|
|
376
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;
|