ezuikit-js 0.5.5-beta.2 → 0.5.5-beta.3

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.
Files changed (2) hide show
  1. package/ezuikit.js +1467 -1467
  2. package/package.json +1 -1
package/ezuikit.js CHANGED
@@ -22995,827 +22995,827 @@ var defaultTheme = {
22995
22995
  footer: footer
22996
22996
  };
22997
22997
 
22998
- var TimeLine$1 = function (jsPlugin) {
22999
- this.jsPlugin = jsPlugin;
23000
- var status = {
23001
- isMouseDown: false, // 鼠标是否按下
23002
- isOver: false, // 鼠标是否悬浮在进度条上
23003
- mousePosition: null,
23004
- oldTime: null,
23005
- nowTime: null,
23006
- moved: null,
23007
- hoverTime: '2018-12-07 12:00:00',
23008
- hoverLeft: 0,
23009
- timeTipShow: false,
23010
- randomNum: 123,
23011
- timeWidthTbls: [60, 1800, 3600, 86400, 259200], // 时间宽度单位（秒）
23012
- timeUnits: [
23013
- '范围: 1分钟; 单位: 秒',
23014
- '范围: 30分钟; 单位: 分钟',
23015
- '范围: 1小时; 单位: 分钟',
23016
- '范围: 1天; 单位: 小时',
23017
- '范围: 3天; 单位: 小时'
23018
- ], // 时间单位
23019
- drawPen: null,
23020
- timeSection: [],
23021
- canvasWidth: null,
23022
- canvasHeight: null,
23023
- timeTips: null
23024
- };
23025
- // Object.keys(status).forEach(element => {
23026
- // this[element] = status[element];
23027
- // });
23028
- var _this = this;
23029
- Object.keys(status).forEach(function(element){
23030
- _this[element] = status[element];
23031
- });
23032
- this.options = {
23033
- width: this.canvasWidth,
23034
- height: 48,
23035
- time: new Date().getTime(), //new Date("2019-10-31 00:00:00"),//
23036
- timeSection: [],
23037
- timeWidth: 0 // 0-3
23038
- };
23039
- TimeLine$1.prototype.subTime = function (time) {
23040
- if (time < 10) {
23041
- return '0' + time;
23042
- } else {
23043
- return time;
23044
- }
23045
- };
23046
- TimeLine$1.prototype.tranTime = function(time) {
23047
- var stringTime = time;
23048
- if (time) {
23049
- var newDate = new Date(time);
23050
- stringTime =
23051
- newDate.getFullYear() +
23052
- '/' +
23053
- (newDate.getMonth() + 1) +
23054
- '/' +
23055
- newDate.getDate() +
23056
- ' ' +
23057
- this.subTime(newDate.getHours()) +
23058
- ':' +
23059
- this.subTime(newDate.getMinutes()) +
23060
- ':' +
23061
- this.subTime(newDate.getSeconds());
23062
- }
23063
- return stringTime;
23064
- };
23065
- TimeLine$1.prototype.init = function (params) {
23066
- // document.getElementsByTagName("html")[0].addEventListener("mouseup", this.mouseUpFn(e,params.));
23067
- if(params.width) {
23068
- document.getElementById(params.id).setAttribute("width", parseInt(params.width,10) + 'px');
23069
- }
23070
- var that = this;
23071
- var opts = this.options;
23072
- that.randomNum = (Math.random() + '').split('.').join('');
23073
- that.timeWidthTblIndex = opts.timeWidth; // 当前使用时间宽度索引
23074
-
23075
- // 12-10
23076
- //that.drawPanal = this.$refs.drawPanal;
23077
- var canvas = document.querySelector(`#${this.jsPlugin.id}-canvas`);
23078
- that.drawPen = canvas.getContext('2d');
23079
- that.nowTime = opts.time || Date.now(); // 当前时间点
23080
- that.timeSection = opts.timeSection || []; // 时间段记录区间
23081
- that.canvasWidth = canvas.offsetWidth;
23082
- that.canvasHeight = canvas.offsetHeight;
23083
- that.updata(); // 展示进度条
23084
- // 事件监听
23085
- document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mousemove', function(e){
23086
- if(that.options.readOnly){
23087
- return;
23088
- }
23089
- that.mousemove(e);
23090
- });
23091
- document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseover',function(e){
23092
- if(that.options.readOnly){
23093
- return;
23094
- }
23095
- that.mouseover(e);
23096
- });
23097
- document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseleave',function(e){
23098
- if(that.options.readOnly){
23099
- return;
23100
- }
23101
- that.mouseleave(e);
23102
- });
23103
- document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mousedown',function(e){
23104
- if(that.options.readOnly){
23105
- return;
23106
- }
23107
- that.mousedown(e);
23108
- });
23109
- document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseup',function(e){
23110
- if(that.options.readOnly){
23111
- return;
23112
- }
23113
- //debugger
23114
- var callback = params.onChange;
23115
- that.mouseUpFn(e,callback);
23116
- });
23117
- };
23118
- TimeLine$1.prototype.mousemove = function (e) {
23119
- // console.log("鼠标移动",e)
23120
- if (this.isMouseDown && this.isOver) {
23121
- var mouseOffset = this.mousePosition - e.pageX;
23122
- // fix点击引起mousemove的问题
23123
- if (mouseOffset === 0) {
23124
- return;
23125
- }
23126
- var timeOffsetUnit = 0;
23127
- switch(this.timeWidth){
23128
- case 60:
23129
- timeOffsetUnit = 1 / 10;
23130
- break;
23131
- case 1800:
23132
- timeOffsetUnit = 1 / 20 * 60;
23133
- break;
23134
- case 3600:
23135
- timeOffsetUnit = 1 / 20 * 60;
23136
- break;
23137
- case 86400:
23138
- //timeOffset =
23139
- timeOffsetUnit = 1 / 30 * 60 * 60;
23140
- break;
23141
- }
23142
- var currentTime = new Date(this.oldTime).getTime() +(mouseOffset * timeOffsetUnit * 1000);
23143
- //console.log("rurrentTime",this.oldTime,mouseOffset,currentTime,new Date(currentTime))
23144
- //console.log("currentTime", new Date(currentTime))
23145
- // var currentTime =
23146
- // this.oldTime +
23147
- // (mouseOffset / this.canvasWidth) *
23148
- // this.timeWidth *
23149
- // 1000;
23150
- // console.log("currentTime",new Date(this.oldTime), new Date(currentTime))
23151
- this.updata({ time: currentTime });
23152
- this.moved = true;
23153
- } else {
23154
- // 12-10
23155
- //var { left, top } = this.$utils.getOffset(this.$refs.drawPanal);
23156
-
23157
- var left = parseInt(document.getElementById(`${this.jsPlugin.id}-canvas-container`).offsetLeft,10);
23158
- //12 -10
23159
- this.mousePosition = e.pageX - left;
23160
- this.updata(); // 更新画面
23161
- }
23162
- };
23163
- TimeLine$1.prototype.mousedown = function (e) {
23164
- this.isMouseDown = true;
23165
- this.mousePosition = e.pageX;
23166
- this.oldTime = this.nowTime;
23167
- // this.$emit('drag', true);
23168
- };
23169
- TimeLine$1.prototype.mouseover = function (e) {
23170
- this.isOver = true;
23171
- };
23172
- TimeLine$1.prototype.mouseleave = function (e) {
23173
- this.isOver = false;
23174
- this.isMouseDown = false;
23175
- this.updata();
23176
- };
23177
- TimeLine$1.prototype.changeSize = function (timeWidth) {
23178
- console.log("changeSize",timeWidth);
23179
- // if (w) {
23180
- // this.options.width = w;
23181
- // this.canvasWidth = w;
23182
- // }
23183
- // if (h) {
23184
- // this.options.height = h;
23185
- // this.canvasHeight = h;
23186
- // }
23187
- // console.log("tehis.optiosn",this.options)
23188
- this.options.timeWidth = timeWidth;
23189
- this.updata({timeWidth: timeWidth});
23190
- // this.$nextTick(() => {
23191
- // this.updata();
23192
- // });
23193
- };
23194
- TimeLine$1.prototype.mouseUpFn = function (e,callback) {
23195
- if (this.isMouseDown) {
23196
- this.isMouseDown = false;
23197
- if (this.moved) {
23198
- this.moved = false;
23199
- //12 -10
23200
- // this.$emit('change', [
23201
- // parseInt(this.nowTime),
23202
- // parseInt(this.oldTime)
23203
- // ]);
23204
- this.updata({ time: this.nowTime });
23205
- this.oldTime = this.nowTime;
23206
- callback(this.nowTime);
23207
- }
23208
- }
23209
- };
23210
- TimeLine$1.prototype.readOnly = function (data) {
23211
- console.log("更改为只读");
23212
- this.options.readOnly = true;
23213
- document.getElementById(`${this.jsPlugin.id}-canvas`).style.cursor = "not-allowed";
23214
- };
23215
- TimeLine$1.prototype.unReadOnly = function (data) {
23216
- console.log("更改为只读");
23217
- this.options.readOnly = false;
23218
- document.getElementById(`${this.jsPlugin.id}-canvas`).style.cursor = "pointer";
23219
- };
23220
- TimeLine$1.prototype.run = function (data) {
23221
- if (!this.isMouseDown) {
23222
- this.updata(data);
23223
- }
23224
- };
23225
- TimeLine$1.prototype.getTime = function (data) {
23226
- console.log("this",this);
23227
- console.log("当前时间",new Date(this.nowTime));
23228
- };
23229
- TimeLine$1.prototype.updata = function (data) {
23230
- var that = this;
23231
- data = data || {};
23232
- that.nowTime = data.time || that.nowTime;
23233
- that.timeSection = data.timeSection || that.timeSection;
23234
- that.timeWidthTblIndex = data.timeWidth || that.timeWidthTblIndex;
23235
- that.timeWidth = that.timeWidthTbls[data.timeWidth || that.timeWidthTblIndex];
23236
- that.timeUnit = that.timeUnits[data.timeWidth || that.timeWidthTblIndex];
23237
- if (data.timeWidth === 0) {
23238
- that.timeWidthTblIndex = 0;
23239
- that.timeWidth = that.timeWidthTbls[0];
23240
- that.timeUnit = that.timeUnits[0];
23241
- }
23242
- that.drawPen.fillStyle = '#000000';
23243
- that.drawPen.fillRect(0, 0, that.canvasWidth, that.canvasHeight);
23244
- that.drawScale(); // 画刻度
23245
- that.drawRecord(); // 画录像区间
23246
- that.drawOtherMsg(); // 画录像的其他信息
23247
- // 12-10
23248
- //that.$emit('update-time', that.nowTime);
23249
- document.getElementById(`${this.jsPlugin.id}-canvas-container`).style.width = this.options.width + 'px';
23250
- document.getElementById(`${this.jsPlugin.id}-canvas`).style.width = this.options.width + 'px';
23251
- document.getElementById(`${this.jsPlugin.id}-canvas-container`).style.height = this.options.height + 'px';
23252
- document.getElementById(`${this.jsPlugin.id}-canvas`).style.height = this.options.height + 'px';
23253
- };
23254
- TimeLine$1.prototype.drawSolidLine = function (startX, startY, endX, endY, lineWidth, color) {
23255
- this.drawPen.save();
23256
- this.drawPen.strokeStyle = color;
23257
- this.drawPen.lineWidth = lineWidth;
23258
- this.drawPen.beginPath();
23259
- this.drawPen.moveTo(startX, startY);
23260
- this.drawPen.lineTo(endX, endY);
23261
- this.drawPen.stroke();
23262
- this.drawPen.restore();
23263
- };
23264
- TimeLine$1.prototype.drawString = function (text, x, y, aling, color) {
23265
- this.drawPen.font = '12px serif';
23266
- this.drawPen.fillStyle = '#ffffff';
23267
- this.drawPen.textAlign = aling || 'left';
23268
- this.drawPen.fillText(text, x, y + 10);
23269
- };
23270
- TimeLine$1.prototype.drawScale = function () {
23271
- // console.log("drawScale",new Date(this.nowTime))
23272
- var that = this;
23273
- var lineColor = 'rgba(255,255,255)';
23274
- //that.nowTime = new Date("2019-12-31 01:50:00")
23275
- var startDate = new Date(that.nowTime); // 开始时间
23276
- var startYears = startDate.getFullYear(); // 起始的秒数
23277
- var starSecond = startDate.getSeconds(); // 起始的秒数
23278
- var starMin = startDate.getMinutes(); // 起始的分钟数
23279
- var startHours = startDate.getHours(); // 起始的小时
23280
- var startDay = startDate.getDate(); // 起始的日期
23281
- //console.log("startDay",startDay)
23282
- var OffsetLeft = starMin * 60 + starSecond; // 偏移量
23283
- // debugger;
23284
- var curScale = 0; // 计算时间点
23285
- switch (that.timeWidth) {
23286
- case 60: {
23287
- // debugger
23288
- var dotNum = parseInt(that.canvasWidth / 10); // 每10像素一个点
23289
- startDate.setSeconds(startDate.getSeconds() - parseInt(dotNum /2,10)); // 从现在时间的一半开始画起
23290
- startDay = startDate.getDate();
23291
- startHours = startDate.getHours();
23292
- starMin = startDate.getMinutes();
23293
- starSecond = startDate.getSeconds();
23294
- // console.log("domNum",dotNum);
23295
- // console.log("starSecond",starSecond)
23296
- for (var i = 0; i < dotNum; i++) {
23297
- // debugger;
23298
- // debugger;
23299
- // console.log("starSecond",starSecond,curScale)
23300
- curScale = starSecond + i;
23301
- startDate.setSeconds(curScale);
23302
- // debugger;
23303
- //debugger;
23304
- // console.log("startDate",startDate,curScale)
23305
- // 每一个整10秒画一次线和文字
23306
- if (curScale % 10 === 0) {
23307
- that.drawSolidLine(
23308
- (i * that.canvasWidth) / dotNum,
23309
- 8,
23310
- (i * that.canvasWidth) / dotNum ,
23311
- (that.canvasHeight / 5) + 8,
23312
- 1,
23313
- lineColor
23314
- );
23315
- var timeString =
23316
- this.subTime(startDate.getHours()) +
23317
- ':' +
23318
- this.subTime(startDate.getMinutes()) +
23319
- ':' +
23320
- this.subTime(startDate.getSeconds());
23321
- that.drawString(
23322
- timeString,
23323
- (i * that.canvasWidth) / dotNum,
23324
- (that.canvasHeight / 5) * 2.5,
23325
- 'center',
23326
- 'rgba(255,255,255,0.3)'
23327
- );
23328
- // console.log("timeString",timeString)
23329
- } else {
23330
- // console.log("画短线",(i * that.canvasWidth) / 60,0,(i * that.canvasWidth) / 60,(that.canvasHeight / 5) * 0.5,1)
23331
- // 只画一次线
23332
- that.drawSolidLine(
23333
- (i * that.canvasWidth) / dotNum,
23334
- 8,
23335
- (i * that.canvasWidth) / dotNum,
23336
- (that.canvasHeight / 5) * 0.5 + 8,
23337
- 1,
23338
- lineColor
23339
- );
23340
- }
23341
- /**
23342
- * 偏移距离超过60，setSeconds会每次累加1到分钟，因此绘图完成后需要复原到当前分钟，再次计算偏移
23343
- */
23344
- startDate.setDate(startDay);
23345
- startDate.setHours(startHours);
23346
- startDate.setMinutes(starMin);
23347
- }
23348
- // for (var i = 0; i < 60; i++) {
23349
- // curScale = starSecond + i;
23350
- // if (curScale > 60) {
23351
- // curScale = curScale - 60;
23352
- // }
23353
- // startDate.setSeconds(curScale);
23354
- // // 每一个整10秒画一次线和文字
23355
- // if (curScale % 10 === 0) {
23356
- // that.drawSolidLine(
23357
- // (i * that.canvasWidth) / 60,
23358
- // 0,
23359
- // (i * that.canvasWidth) / 60,
23360
- // (that.canvasHeight / 5) * 1.5,
23361
- // 1,
23362
- // lineColor
23363
- // );
23364
- // var timeString =
23365
- // this.subTime(startDate.getHours()) +
23366
- // ':' +
23367
- // this.subTime(startDate.getMinutes()) +
23368
- // ':' +
23369
- // this.subTime(startDate.getSeconds());
23370
- // that.drawString(
23371
- // timeString,
23372
- // (i * that.canvasWidth) / 60,
23373
- // (that.canvasHeight / 5) * 2.5,
23374
- // 'center',
23375
- // 'rgba(255,255,255,0.3)'
23376
- // );
23377
- // } else {
23378
- // // 只画一次线
23379
- // that.drawSolidLine(
23380
- // (i * that.canvasWidth) / 60,
23381
- // 0,
23382
- // (i * that.canvasWidth) / 60,
23383
- // (that.canvasHeight / 5) * 0.5,
23384
- // 1,
23385
- // lineColor
23386
- // );
23387
- // }
23388
- // }
23389
- break;
23390
- }
23391
- case 1800: {
23392
- // 30分钟
23393
- var dotNum = parseInt(that.canvasWidth / 20); // 每10像素一个点
23394
- startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2,10));
23395
- // starSecond = startDate.getSeconds();
23396
- startHours = startDate.getHours();
23397
- starMin = startDate.getMinutes();
23398
- //console.log("dotNum",dotNum,starMin)
23399
- for (var i = 0; i <= dotNum; i++) {
23400
- curScale = starMin + i;
23401
- //console.log("curScale",curScale)
23402
- // if (curScale > 60) {
23403
- // curScale = curScale - 60;
23404
- // }
23405
- startDate.setMinutes(curScale);
23406
- if (curScale % 5 === 0) {
23407
- that.drawSolidLine(
23408
- (i * that.canvasWidth) / dotNum,
23409
- 8,
23410
- (i * that.canvasWidth) / dotNum,
23411
- (that.canvasHeight / 5) * 1.5 + 8,
23412
- 1,
23413
- lineColor
23414
- );
23415
-
23416
- var timeString =
23417
- this.subTime(startDate.getHours()) +
23418
- ':' +
23419
- this.subTime(startDate.getMinutes());
23420
- that.drawString(
23421
- timeString,
23422
- (i * that.canvasWidth) / dotNum,
23423
- (that.canvasHeight / 5) * 2.5,
23424
- 'center',
23425
- 'rgba(255,255,255,0.3)'
23426
- );
23427
- } else {
23428
- // console.log("画短线",((i - starMin) * that.canvasWidth) / dotNum)
23429
- that.drawSolidLine(
23430
- (i * that.canvasWidth) / dotNum,
23431
- 8,
23432
- (i * that.canvasWidth) / dotNum,
23433
- (that.canvasHeight / 5) * 0.5 + 8,
23434
- 1,
23435
- lineColor
23436
- );
23437
- }
23438
- startDate.setHours(startHours);
23439
- // startDate.setMinutes(starMin);
23440
- }
23441
- // for (var i = 0; i <= 30; i++) {
23442
- // curScale = starMin + i;
23443
- // if (curScale > 60) {
23444
- // curScale = curScale - 60;
23445
- // }
23446
- // startDate.setMinutes(curScale);
23447
- // if (curScale % 5 === 0) {
23448
- // that.drawSolidLine(
23449
- // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
23450
- // 0,
23451
- // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
23452
- // (that.canvasHeight / 5) * 1.5,
23453
- // 1,
23454
- // lineColor
23455
- // );
23456
-
23457
- // var timeString =
23458
- // this.subTime(startDate.getHours()) +
23459
- // ':' +
23460
- // this.subTime(startDate.getMinutes());
23461
- // that.drawString(
23462
- // timeString,
23463
- // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
23464
- // (that.canvasHeight / 5) * 2.5,
23465
- // 'center',
23466
- // 'rgba(255,255,255,0.3)'
23467
- // );
23468
- // } else {
23469
- // that.drawSolidLine(
23470
- // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
23471
- // 0,
23472
- // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
23473
- // (that.canvasHeight / 5) * 0.5,
23474
- // 1,
23475
- // lineColor
23476
- // );
23477
- // }
23478
- // }
23479
- break;
23480
- }
23481
- case 3600: {
23482
- // 60分钟
23483
- var dotNum = parseInt(that.canvasWidth / 20); // 每10像素一个点
23484
- startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2,10));
23485
- startHours = startDate.getHours();
23486
- starMin = startDate.getMinutes();
23487
- for (var i = 0; i <= dotNum; i++) {
23488
- curScale = starMin + i;
23489
- // if (curScale > 60) {
23490
- // curScale = curScale - 60;
23491
- // }
23492
- startDate.setMinutes(curScale);
23493
- if (curScale % 10 === 0) {
23494
- that.drawSolidLine(
23495
- ((i ) * that.canvasWidth) / dotNum,
23496
- 8,
23497
- ((i ) * that.canvasWidth) / dotNum,
23498
- (that.canvasHeight / 5) * 1.5 + 8,
23499
- 1,
23500
- lineColor
23501
- );
23502
-
23503
- var timeString =
23504
- this.subTime(startDate.getHours()) +
23505
- ':' +
23506
- this.subTime(startDate.getMinutes());
23507
- that.drawString(
23508
- timeString,
23509
- ((i ) * that.canvasWidth) / dotNum,
23510
- (that.canvasHeight / 5) * 2.5,
23511
- 'center',
23512
- 'rgba(255,255,255,0.3)'
23513
- );
23514
- } else {
23515
- that.drawSolidLine(
23516
- ((i) * that.canvasWidth) / dotNum,
23517
- 8,
23518
- ((i) * that.canvasWidth) / dotNum,
23519
- (that.canvasHeight / 5) * 0.5 + 8,
23520
- 1,
23521
- lineColor
23522
- );
23523
- }
23524
- startDate.setHours(startHours);
23525
- }
23526
- break;
23527
- }
23528
- case 86400: {
23529
- var dotNum = parseInt(that.canvasWidth / 30); // 每10像素一个点
23530
- // 1天，24小时
23531
- //console.log("dotNum",dotNum);
23532
- //startDate.setDate(startDay - parseInt(dotNum / 2,10));
23533
- startDate.setHours(startDate.getHours() - parseInt(dotNum / 2,10));
23534
- // console.log("startDat111e",startDate);
23535
-
23536
- // debugger;
23537
- starSecond = startDate.getSeconds();
23538
- starMin = startDate.getMinutes();
23539
- startHours = startDate.getHours();
23540
- startDay = startDate.getDate();
23541
- startYears = startDate.getFullYear();
23542
- for (var i = 0; i <= dotNum; i++) {
23543
- curScale = startHours + i;
23544
- // if (curScale >= 24) {
23545
- // curScale = curScale - 24;
23546
- // }
23547
- startDate.setHours(curScale);
23548
- var timeString;
23549
- // 不等于24的时候，画短线
23550
- //console.log("curScale",curScale)
23551
- if (curScale % 24 !=0) {
23552
- // console.log("curScale",curScale)
23553
- timeString = this.subTime(startDate.getHours()) + ":00";
23554
- // timeString = startDate.toLocaleDateString();
23555
- // debugger
23556
- that.drawSolidLine(
23557
- ((i ) * that.canvasWidth) /
23558
- dotNum,
23559
- 8,
23560
- ((i ) * that.canvasWidth) /
23561
- dotNum,
23562
- (that.canvasHeight / 5) * 0.5 + 8,
23563
- 1,
23564
- lineColor
23565
- );
23566
- } else {
23567
- // debugger;
23568
- // console.log("画图")
23569
- // 不等于24的时候，画长线
23570
- timeString = startDate.toLocaleDateString();
23571
- // console.log("startDatestartDate",startDate,i)
23572
- // debugger;
23573
- that.drawSolidLine(
23574
- ((i ) * that.canvasWidth) /
23575
- dotNum,
23576
- 8,
23577
- ((i) * that.canvasWidth) /
23578
- dotNum,
23579
- (that.canvasHeight / 5) * 1 + 8,
23580
- 1,
23581
- lineColor
23582
- );
23583
- }
23584
- // 每2个小时一个时间文字
23585
- if (curScale % 2 === 0) {
23586
- that.drawString(
23587
- timeString,
23588
- ((i) * that.canvasWidth) /
23589
- dotNum,
23590
- (that.canvasHeight / 5) * 2,
23591
- 'center',
23592
- 'rgba(255,255,255,0.3)'
23593
- );
23594
- }
23595
- // console.log("startDay",startDay)
23596
- // startDate.setDate(startDay);
23597
- startDate.setFullYear(startYears);
23598
- startDate.setDate(startDay);
23599
- startDate.setHours(startHours);
23600
- // startDate.setTime(that.nowTime);
23601
- // console.log("haha21",startDay,that.nowTime)
23602
- // console.log("haha",startDate)
23603
- }
23604
- break;
23605
- }
23606
- case 259200: {
23607
- // 3天
23608
- startDate.setHours(startDate.getHours() - 36);
23609
- starSecond = startDate.getSeconds();
23610
- starMin = startDate.getMinutes();
23611
- startHours = startDate.getHours();
23612
- OffsetLeft = starMin * 60 + starSecond;
23613
- for (var i = 0; i <= 72; i++) {
23614
- curScale = startHours + i;
23615
- if (curScale >= 24) {
23616
- curScale = curScale % 24;
23617
- }
23618
- if (curScale === 0) {
23619
- startDate.setHours(24);
23620
- } else {
23621
- startDate.setHours(curScale);
23622
- }
23623
-
23624
- var timeString = this.subTime(startDate.getHours());
23625
-
23626
- if (curScale % 3 === 0) {
23627
- // 每3天一个时间文字和刻度
23628
- if (!curScale) {
23629
- timeString = startDate.toLocaleDateString();
23630
- }
23631
- that.drawString(
23632
- timeString,
23633
- ((i * 3600 - OffsetLeft) * that.canvasWidth) /
23634
- 259200,
23635
- (that.canvasHeight / 5) * 2.5,
23636
- 'center',
23637
- 'rgba(255,255,255,0.3)'
23638
- );
23639
-
23640
- that.drawSolidLine(
23641
- ((i * 3600 - OffsetLeft) * that.canvasWidth) /
23642
- 259200,
23643
- 0,
23644
- ((i * 3600 - OffsetLeft) * that.canvasWidth) /
23645
- 259200,
23646
- (that.canvasHeight / 5) * 1,
23647
- 1,
23648
- lineColor
23649
- );
23650
- } else {
23651
- that.drawSolidLine(
23652
- ((i * 3600 - OffsetLeft) * that.canvasWidth) /
23653
- 259200,
23654
- 0,
23655
- ((i * 3600 - OffsetLeft) * that.canvasWidth) /
23656
- 259200,
23657
- (that.canvasHeight / 5) * 0.5,
23658
- 1,
23659
- lineColor
23660
- );
23661
- }
23662
- }
23663
- break;
23664
- }
23665
- }
23666
- };
23667
- TimeLine$1.prototype.getRecord = function (timeArr,startTime,endTime) {
23668
- console.log("timeArr,startTime,endTime",timeArr,startTime,endTime);
23669
- // if(timeArr.length > 0 && startTime) {
23670
- // if(timeArr[0].startTime < startTime) {
23671
- // timeArr[0].startTime = startTime;
23672
- // }
23673
- // }
23674
- // if(timeArr.length > 0 && endTime) {
23675
- // if(timeArr[timeArr.length-1].endTime > endTime) {
23676
- // timeArr[timeArr.length-1].endTime = endTime;
23677
- // }
23678
- // }
23679
- this.timeSection = timeArr;
23680
- this.drawRecord();
23681
- };
23682
- TimeLine$1.prototype.drawRecord = function () {
23683
- var timeArr = this.timeSection || [];
23684
- var that = this;
23685
- var drawPen = that.drawPen;
23686
-
23687
- // var startDate = new Date(that.nowTime);
23688
- // var timeScale = that.canvasWidth / that.timeWidth;
23689
-
23690
- // 根据时间查找当前位置
23691
- for(var i =0;i<timeArr.length;i++){
23692
- //console.log("timeArr[i]",timeArr[i],findPosition(timeArr[i].startTime),findPosition(timeArr[i].endTime))
23693
- var startPosition = findPosition(timeArr[i].startTime);
23694
- var endPosition = findPosition(timeArr[i].endTime);
23695
- drawPen.fillStyle = '#1890ff80';
23696
- drawPen.fillRect(
23697
- startPosition,
23698
- 0,
23699
- endPosition-startPosition,
23700
- 48
23701
- );
23702
- }
23703
-
23704
- function findPosition(time){
23705
- var scale = 10;
23706
- switch(that.timeWidth){
23707
- case 60:
23708
- scale = 10;
23709
- break;
23710
- case 1800:
23711
- scale = 20 / 60;
23712
- break;
23713
- case 3600:
23714
- scale = 20 / 60;
23715
- break;
23716
- case 86400:
23717
- scale = 20 / 60 /60;
23718
- break;
23719
- }
23720
- var nowTimePostion = that.canvasWidth/2; //总宽度一半
23721
- var position = nowTimePostion + (time - that.nowTime) / 1000 * scale;
23722
- if(position > that.canvasWidth){
23723
- position = that.canvasWidth;
23724
- }
23725
- if(position <=0){
23726
- position = 0;
23727
- }
23728
- return position;
23729
- }
23730
- // switch (that.timeWidth) {
23731
- // case 60: {
23732
- // startDate.setSeconds(startDate.getSeconds() - 30);
23733
- // break;
23734
- // }
23735
- // case 1800: {
23736
- // startDate.setMinutes(startDate.getMinutes() - 15);
23737
- // break;
23738
- // }
23739
- // case 3600: {
23740
- // startDate.setMinutes(startDate.getMinutes() - 30);
23741
- // break;
23742
- // }
23743
- // case 86400: {
23744
- // startDate.setHours(startDate.getHours() - 12);
23745
- // break;
23746
- // }
23747
- // case 259200: {
23748
- // startDate.setHours(startDate.getHours() - 36);
23749
- // break;
23750
- // }
23751
- // }
23752
- // that.timeSection.forEach(function (item, i) {
23753
- // // 蓝色片段条
23754
- // drawPen.fillStyle = '#4E6FAE';
23755
- // var x = ((item.time[0] - startDate.getTime()) * timeScale) / 1000;
23756
- // var w = ((item.time[1] - item.time[0]) * timeScale) / 1000;
23757
- // drawPen.fillRect(
23758
- // x,
23759
- // (that.canvasHeight / 5) * 3,
23760
- // w,
23761
- // (that.canvasHeight / 5) * 1.5
23762
- // );
23763
- // });
23764
- };
23765
- TimeLine$1.prototype.drawOtherMsg = function () {
23766
- // 画中心线阴影
23767
- // this.drawPen.shadowColor = '#1890FF';
23768
- // this.drawPen.shadowOffsetX = 0;
23769
- // this.drawPen.shadowOffsetY = 0;
23770
- // this.drawPen.shadowBlur = 10;
23771
- // // 绘制中心线上方的三角形
23772
- // this.drawPen.beginPath();
23773
- // this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, 0);
23774
- // this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, 0);
23775
- // this.drawPen.lineTo(this.canvasWidth / 2, 4.5);
23776
- // this.drawPen.fillStyle = '#fff';
23777
- // this.drawPen.closePath();
23778
- // this.drawPen.fill();
23779
-
23780
- // // 绘制中心线下方的三角形
23781
- // this.drawPen.beginPath();
23782
- // this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, this.canvasHeight);
23783
- // this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, this.canvasHeight);
23784
- // this.drawPen.lineTo(this.canvasWidth / 2, this.canvasHeight - 4.5);
23785
- // this.drawPen.fillStyle = '#fff';
23786
- // this.drawPen.closePath();
23787
- // this.drawPen.fill();
23788
-
23789
- // 画中心线
23790
- this.drawSolidLine(
23791
- this.canvasWidth / 2,
23792
- 0,
23793
- this.canvasWidth / 2,
23794
- this.canvasHeight,
23795
- 2,
23796
- '#1890FF'
23797
- );
23798
-
23799
- this.drawPen.shadowBlur = 0;
23800
-
23801
- if (this.isOver && !this.isMouseDown) {
23802
- this.mouseTime =
23803
- (this.mousePosition / this.canvasWidth) *
23804
- this.timeWidth *
23805
- 1000 +
23806
- this.nowTime -
23807
- (this.timeWidth / 2) * 1000; // 鼠标的悬浮点对应的时间
23808
-
23809
- this.mouseString = this.tranTime(this.mouseTime); // 鼠标悬浮点显示的文字
23810
- this.hoverTime = this.mouseString;
23811
- this.hoverLeft = this.mousePosition - 60;
23812
- this.timeTipShow = true;
23813
-
23814
- } else {
23815
- this.timeTipShow = false;
23816
- }
23817
- };
23818
-
22998
+ var TimeLine$1 = function (jsPlugin) {
22999
+ this.jsPlugin = jsPlugin;
23000
+ var status = {
23001
+ isMouseDown: false, // 鼠标是否按下
23002
+ isOver: false, // 鼠标是否悬浮在进度条上
23003
+ mousePosition: null,
23004
+ oldTime: null,
23005
+ nowTime: null,
23006
+ moved: null,
23007
+ hoverTime: '2018-12-07 12:00:00',
23008
+ hoverLeft: 0,
23009
+ timeTipShow: false,
23010
+ randomNum: 123,
23011
+ timeWidthTbls: [60, 1800, 3600, 86400, 259200], // 时间宽度单位（秒）
23012
+ timeUnits: [
23013
+ '范围: 1分钟; 单位: 秒',
23014
+ '范围: 30分钟; 单位: 分钟',
23015
+ '范围: 1小时; 单位: 分钟',
23016
+ '范围: 1天; 单位: 小时',
23017
+ '范围: 3天; 单位: 小时'
23018
+ ], // 时间单位
23019
+ drawPen: null,
23020
+ timeSection: [],
23021
+ canvasWidth: null,
23022
+ canvasHeight: null,
23023
+ timeTips: null
23024
+ };
23025
+ // Object.keys(status).forEach(element => {
23026
+ // this[element] = status[element];
23027
+ // });
23028
+ var _this = this;
23029
+ Object.keys(status).forEach(function(element){
23030
+ _this[element] = status[element];
23031
+ });
23032
+ this.options = {
23033
+ width: this.canvasWidth,
23034
+ height: 48,
23035
+ time: new Date().getTime(), //new Date("2019-10-31 00:00:00"),//
23036
+ timeSection: [],
23037
+ timeWidth: 0 // 0-3
23038
+ };
23039
+ TimeLine$1.prototype.subTime = function (time) {
23040
+ if (time < 10) {
23041
+ return '0' + time;
23042
+ } else {
23043
+ return time;
23044
+ }
23045
+ };
23046
+ TimeLine$1.prototype.tranTime = function(time) {
23047
+ var stringTime = time;
23048
+ if (time) {
23049
+ var newDate = new Date(time);
23050
+ stringTime =
23051
+ newDate.getFullYear() +
23052
+ '/' +
23053
+ (newDate.getMonth() + 1) +
23054
+ '/' +
23055
+ newDate.getDate() +
23056
+ ' ' +
23057
+ this.subTime(newDate.getHours()) +
23058
+ ':' +
23059
+ this.subTime(newDate.getMinutes()) +
23060
+ ':' +
23061
+ this.subTime(newDate.getSeconds());
23062
+ }
23063
+ return stringTime;
23064
+ };
23065
+ TimeLine$1.prototype.init = function (params) {
23066
+ // document.getElementsByTagName("html")[0].addEventListener("mouseup", this.mouseUpFn(e,params.));
23067
+ if(params.width) {
23068
+ document.getElementById(params.id).setAttribute("width", parseInt(params.width,10) + 'px');
23069
+ }
23070
+ var that = this;
23071
+ var opts = this.options;
23072
+ that.randomNum = (Math.random() + '').split('.').join('');
23073
+ that.timeWidthTblIndex = opts.timeWidth; // 当前使用时间宽度索引
23074
+
23075
+ // 12-10
23076
+ //that.drawPanal = this.$refs.drawPanal;
23077
+ var canvas = document.querySelector(`#${this.jsPlugin.id}-canvas`);
23078
+ that.drawPen = canvas.getContext('2d');
23079
+ that.nowTime = opts.time || Date.now(); // 当前时间点
23080
+ that.timeSection = opts.timeSection || []; // 时间段记录区间
23081
+ that.canvasWidth = canvas.offsetWidth;
23082
+ that.canvasHeight = canvas.offsetHeight;
23083
+ that.updata(); // 展示进度条
23084
+ // 事件监听
23085
+ document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mousemove', function(e){
23086
+ if(that.options.readOnly){
23087
+ return;
23088
+ }
23089
+ that.mousemove(e);
23090
+ });
23091
+ document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseover',function(e){
23092
+ if(that.options.readOnly){
23093
+ return;
23094
+ }
23095
+ that.mouseover(e);
23096
+ });
23097
+ document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseleave',function(e){
23098
+ if(that.options.readOnly){
23099
+ return;
23100
+ }
23101
+ that.mouseleave(e);
23102
+ });
23103
+ document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mousedown',function(e){
23104
+ if(that.options.readOnly){
23105
+ return;
23106
+ }
23107
+ that.mousedown(e);
23108
+ });
23109
+ document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseup',function(e){
23110
+ if(that.options.readOnly){
23111
+ return;
23112
+ }
23113
+ //debugger
23114
+ var callback = params.onChange;
23115
+ that.mouseUpFn(e,callback);
23116
+ });
23117
+ };
23118
+ TimeLine$1.prototype.mousemove = function (e) {
23119
+ // console.log("鼠标移动",e)
23120
+ if (this.isMouseDown && this.isOver) {
23121
+ var mouseOffset = this.mousePosition - e.pageX;
23122
+ // fix点击引起mousemove的问题
23123
+ if (mouseOffset === 0) {
23124
+ return;
23125
+ }
23126
+ var timeOffsetUnit = 0;
23127
+ switch(this.timeWidth){
23128
+ case 60:
23129
+ timeOffsetUnit = 1 / 10;
23130
+ break;
23131
+ case 1800:
23132
+ timeOffsetUnit = 1 / 20 * 60;
23133
+ break;
23134
+ case 3600:
23135
+ timeOffsetUnit = 1 / 20 * 60;
23136
+ break;
23137
+ case 86400:
23138
+ //timeOffset =
23139
+ timeOffsetUnit = 1 / 30 * 60 * 60;
23140
+ break;
23141
+ }
23142
+ var currentTime = new Date(this.oldTime).getTime() +(mouseOffset * timeOffsetUnit * 1000);
23143
+ //console.log("rurrentTime",this.oldTime,mouseOffset,currentTime,new Date(currentTime))
23144
+ //console.log("currentTime", new Date(currentTime))
23145
+ // var currentTime =
23146
+ // this.oldTime +
23147
+ // (mouseOffset / this.canvasWidth) *
23148
+ // this.timeWidth *
23149
+ // 1000;
23150
+ // console.log("currentTime",new Date(this.oldTime), new Date(currentTime))
23151
+ this.updata({ time: currentTime });
23152
+ this.moved = true;
23153
+ } else {
23154
+ // 12-10
23155
+ //var { left, top } = this.$utils.getOffset(this.$refs.drawPanal);
23156
+
23157
+ var left = parseInt(document.getElementById(`${this.jsPlugin.id}-canvas-container`).offsetLeft,10);
23158
+ //12 -10
23159
+ this.mousePosition = e.pageX - left;
23160
+ this.updata(); // 更新画面
23161
+ }
23162
+ };
23163
+ TimeLine$1.prototype.mousedown = function (e) {
23164
+ this.isMouseDown = true;
23165
+ this.mousePosition = e.pageX;
23166
+ this.oldTime = this.nowTime;
23167
+ // this.$emit('drag', true);
23168
+ };
23169
+ TimeLine$1.prototype.mouseover = function (e) {
23170
+ this.isOver = true;
23171
+ };
23172
+ TimeLine$1.prototype.mouseleave = function (e) {
23173
+ this.isOver = false;
23174
+ this.isMouseDown = false;
23175
+ this.updata();
23176
+ };
23177
+ TimeLine$1.prototype.changeSize = function (timeWidth) {
23178
+ console.log("changeSize",timeWidth);
23179
+ // if (w) {
23180
+ // this.options.width = w;
23181
+ // this.canvasWidth = w;
23182
+ // }
23183
+ // if (h) {
23184
+ // this.options.height = h;
23185
+ // this.canvasHeight = h;
23186
+ // }
23187
+ // console.log("tehis.optiosn",this.options)
23188
+ this.options.timeWidth = timeWidth;
23189
+ this.updata({timeWidth: timeWidth});
23190
+ // this.$nextTick(() => {
23191
+ // this.updata();
23192
+ // });
23193
+ };
23194
+ TimeLine$1.prototype.mouseUpFn = function (e,callback) {
23195
+ if (this.isMouseDown) {
23196
+ this.isMouseDown = false;
23197
+ if (this.moved) {
23198
+ this.moved = false;
23199
+ //12 -10
23200
+ // this.$emit('change', [
23201
+ // parseInt(this.nowTime),
23202
+ // parseInt(this.oldTime)
23203
+ // ]);
23204
+ this.updata({ time: this.nowTime });
23205
+ this.oldTime = this.nowTime;
23206
+ callback(this.nowTime);
23207
+ }
23208
+ }
23209
+ };
23210
+ TimeLine$1.prototype.readOnly = function (data) {
23211
+ console.log("更改为只读");
23212
+ this.options.readOnly = true;
23213
+ document.getElementById(`${this.jsPlugin.id}-canvas`).style.cursor = "not-allowed";
23214
+ };
23215
+ TimeLine$1.prototype.unReadOnly = function (data) {
23216
+ console.log("更改为只读");
23217
+ this.options.readOnly = false;
23218
+ document.getElementById(`${this.jsPlugin.id}-canvas`).style.cursor = "pointer";
23219
+ };
23220
+ TimeLine$1.prototype.run = function (data) {
23221
+ if (!this.isMouseDown) {
23222
+ this.updata(data);
23223
+ }
23224
+ };
23225
+ TimeLine$1.prototype.getTime = function (data) {
23226
+ console.log("this",this);
23227
+ console.log("当前时间",new Date(this.nowTime));
23228
+ };
23229
+ TimeLine$1.prototype.updata = function (data) {
23230
+ var that = this;
23231
+ data = data || {};
23232
+ that.nowTime = data.time || that.nowTime;
23233
+ that.timeSection = data.timeSection || that.timeSection;
23234
+ that.timeWidthTblIndex = data.timeWidth || that.timeWidthTblIndex;
23235
+ that.timeWidth = that.timeWidthTbls[data.timeWidth || that.timeWidthTblIndex];
23236
+ that.timeUnit = that.timeUnits[data.timeWidth || that.timeWidthTblIndex];
23237
+ if (data.timeWidth === 0) {
23238
+ that.timeWidthTblIndex = 0;
23239
+ that.timeWidth = that.timeWidthTbls[0];
23240
+ that.timeUnit = that.timeUnits[0];
23241
+ }
23242
+ that.drawPen.fillStyle = '#000000';
23243
+ that.drawPen.fillRect(0, 0, that.canvasWidth, that.canvasHeight);
23244
+ that.drawScale(); // 画刻度
23245
+ that.drawRecord(); // 画录像区间
23246
+ that.drawOtherMsg(); // 画录像的其他信息
23247
+ // 12-10
23248
+ //that.$emit('update-time', that.nowTime);
23249
+ document.getElementById(`${this.jsPlugin.id}-canvas-container`).style.width = this.options.width + 'px';
23250
+ document.getElementById(`${this.jsPlugin.id}-canvas`).style.width = this.options.width + 'px';
23251
+ document.getElementById(`${this.jsPlugin.id}-canvas-container`).style.height = this.options.height + 'px';
23252
+ document.getElementById(`${this.jsPlugin.id}-canvas`).style.height = this.options.height + 'px';
23253
+ };
23254
+ TimeLine$1.prototype.drawSolidLine = function (startX, startY, endX, endY, lineWidth, color) {
23255
+ this.drawPen.save();
23256
+ this.drawPen.strokeStyle = color;
23257
+ this.drawPen.lineWidth = lineWidth;
23258
+ this.drawPen.beginPath();
23259
+ this.drawPen.moveTo(startX, startY);
23260
+ this.drawPen.lineTo(endX, endY);
23261
+ this.drawPen.stroke();
23262
+ this.drawPen.restore();
23263
+ };
23264
+ TimeLine$1.prototype.drawString = function (text, x, y, aling, color) {
23265
+ this.drawPen.font = '12px serif';
23266
+ this.drawPen.fillStyle = '#ffffff';
23267
+ this.drawPen.textAlign = aling || 'left';
23268
+ this.drawPen.fillText(text, x, y + 10);
23269
+ };
23270
+ TimeLine$1.prototype.drawScale = function () {
23271
+ // console.log("drawScale",new Date(this.nowTime))
23272
+ var that = this;
23273
+ var lineColor = 'rgba(255,255,255)';
23274
+ //that.nowTime = new Date("2019-12-31 01:50:00")
23275
+ var startDate = new Date(that.nowTime); // 开始时间
23276
+ var startYears = startDate.getFullYear(); // 起始的秒数
23277
+ var starSecond = startDate.getSeconds(); // 起始的秒数
23278
+ var starMin = startDate.getMinutes(); // 起始的分钟数
23279
+ var startHours = startDate.getHours(); // 起始的小时
23280
+ var startDay = startDate.getDate(); // 起始的日期
23281
+ //console.log("startDay",startDay)
23282
+ var OffsetLeft = starMin * 60 + starSecond; // 偏移量
23283
+ // debugger;
23284
+ var curScale = 0; // 计算时间点
23285
+ switch (that.timeWidth) {
23286
+ case 60: {
23287
+ // debugger
23288
+ var dotNum = parseInt(that.canvasWidth / 10); // 每10像素一个点
23289
+ startDate.setSeconds(startDate.getSeconds() - parseInt(dotNum /2,10)); // 从现在时间的一半开始画起
23290
+ startDay = startDate.getDate();
23291
+ startHours = startDate.getHours();
23292
+ starMin = startDate.getMinutes();
23293
+ starSecond = startDate.getSeconds();
23294
+ // console.log("domNum",dotNum);
23295
+ // console.log("starSecond",starSecond)
23296
+ for (var i = 0; i < dotNum; i++) {
23297
+ // debugger;
23298
+ // debugger;
23299
+ // console.log("starSecond",starSecond,curScale)
23300
+ curScale = starSecond + i;
23301
+ startDate.setSeconds(curScale);
23302
+ // debugger;
23303
+ //debugger;
23304
+ // console.log("startDate",startDate,curScale)
23305
+ // 每一个整10秒画一次线和文字
23306
+ if (curScale % 10 === 0) {
23307
+ that.drawSolidLine(
23308
+ (i * that.canvasWidth) / dotNum,
23309
+ 8,
23310
+ (i * that.canvasWidth) / dotNum ,
23311
+ (that.canvasHeight / 5) + 8,
23312
+ 1,
23313
+ lineColor
23314
+ );
23315
+ var timeString =
23316
+ this.subTime(startDate.getHours()) +
23317
+ ':' +
23318
+ this.subTime(startDate.getMinutes()) +
23319
+ ':' +
23320
+ this.subTime(startDate.getSeconds());
23321
+ that.drawString(
23322
+ timeString,
23323
+ (i * that.canvasWidth) / dotNum,
23324
+ (that.canvasHeight / 5) * 2.5,
23325
+ 'center',
23326
+ 'rgba(255,255,255,0.3)'
23327
+ );
23328
+ // console.log("timeString",timeString)
23329
+ } else {
23330
+ // console.log("画短线",(i * that.canvasWidth) / 60,0,(i * that.canvasWidth) / 60,(that.canvasHeight / 5) * 0.5,1)
23331
+ // 只画一次线
23332
+ that.drawSolidLine(
23333
+ (i * that.canvasWidth) / dotNum,
23334
+ 8,
23335
+ (i * that.canvasWidth) / dotNum,
23336
+ (that.canvasHeight / 5) * 0.5 + 8,
23337
+ 1,
23338
+ lineColor
23339
+ );
23340
+ }
23341
+ /**
23342
+ * 偏移距离超过60，setSeconds会每次累加1到分钟，因此绘图完成后需要复原到当前分钟，再次计算偏移
23343
+ */
23344
+ startDate.setDate(startDay);
23345
+ startDate.setHours(startHours);
23346
+ startDate.setMinutes(starMin);
23347
+ }
23348
+ // for (var i = 0; i < 60; i++) {
23349
+ // curScale = starSecond + i;
23350
+ // if (curScale > 60) {
23351
+ // curScale = curScale - 60;
23352
+ // }
23353
+ // startDate.setSeconds(curScale);
23354
+ // // 每一个整10秒画一次线和文字
23355
+ // if (curScale % 10 === 0) {
23356
+ // that.drawSolidLine(
23357
+ // (i * that.canvasWidth) / 60,
23358
+ // 0,
23359
+ // (i * that.canvasWidth) / 60,
23360
+ // (that.canvasHeight / 5) * 1.5,
23361
+ // 1,
23362
+ // lineColor
23363
+ // );
23364
+ // var timeString =
23365
+ // this.subTime(startDate.getHours()) +
23366
+ // ':' +
23367
+ // this.subTime(startDate.getMinutes()) +
23368
+ // ':' +
23369
+ // this.subTime(startDate.getSeconds());
23370
+ // that.drawString(
23371
+ // timeString,
23372
+ // (i * that.canvasWidth) / 60,
23373
+ // (that.canvasHeight / 5) * 2.5,
23374
+ // 'center',
23375
+ // 'rgba(255,255,255,0.3)'
23376
+ // );
23377
+ // } else {
23378
+ // // 只画一次线
23379
+ // that.drawSolidLine(
23380
+ // (i * that.canvasWidth) / 60,
23381
+ // 0,
23382
+ // (i * that.canvasWidth) / 60,
23383
+ // (that.canvasHeight / 5) * 0.5,
23384
+ // 1,
23385
+ // lineColor
23386
+ // );
23387
+ // }
23388
+ // }
23389
+ break;
23390
+ }
23391
+ case 1800: {
23392
+ // 30分钟
23393
+ var dotNum = parseInt(that.canvasWidth / 20); // 每10像素一个点
23394
+ startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2,10));
23395
+ // starSecond = startDate.getSeconds();
23396
+ startHours = startDate.getHours();
23397
+ starMin = startDate.getMinutes();
23398
+ //console.log("dotNum",dotNum,starMin)
23399
+ for (var i = 0; i <= dotNum; i++) {
23400
+ curScale = starMin + i;
23401
+ //console.log("curScale",curScale)
23402
+ // if (curScale > 60) {
23403
+ // curScale = curScale - 60;
23404
+ // }
23405
+ startDate.setMinutes(curScale);
23406
+ if (curScale % 5 === 0) {
23407
+ that.drawSolidLine(
23408
+ (i * that.canvasWidth) / dotNum,
23409
+ 8,
23410
+ (i * that.canvasWidth) / dotNum,
23411
+ (that.canvasHeight / 5) * 1.5 + 8,
23412
+ 1,
23413
+ lineColor
23414
+ );
23415
+
23416
+ var timeString =
23417
+ this.subTime(startDate.getHours()) +
23418
+ ':' +
23419
+ this.subTime(startDate.getMinutes());
23420
+ that.drawString(
23421
+ timeString,
23422
+ (i * that.canvasWidth) / dotNum,
23423
+ (that.canvasHeight / 5) * 2.5,
23424
+ 'center',
23425
+ 'rgba(255,255,255,0.3)'
23426
+ );
23427
+ } else {
23428
+ // console.log("画短线",((i - starMin) * that.canvasWidth) / dotNum)
23429
+ that.drawSolidLine(
23430
+ (i * that.canvasWidth) / dotNum,
23431
+ 8,
23432
+ (i * that.canvasWidth) / dotNum,
23433
+ (that.canvasHeight / 5) * 0.5 + 8,
23434
+ 1,
23435
+ lineColor
23436
+ );
23437
+ }
23438
+ startDate.setHours(startHours);
23439
+ // startDate.setMinutes(starMin);
23440
+ }
23441
+ // for (var i = 0; i <= 30; i++) {
23442
+ // curScale = starMin + i;
23443
+ // if (curScale > 60) {
23444
+ // curScale = curScale - 60;
23445
+ // }
23446
+ // startDate.setMinutes(curScale);
23447
+ // if (curScale % 5 === 0) {
23448
+ // that.drawSolidLine(
23449
+ // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
23450
+ // 0,
23451
+ // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
23452
+ // (that.canvasHeight / 5) * 1.5,
23453
+ // 1,
23454
+ // lineColor
23455
+ // );
23456
+
23457
+ // var timeString =
23458
+ // this.subTime(startDate.getHours()) +
23459
+ // ':' +
23460
+ // this.subTime(startDate.getMinutes());
23461
+ // that.drawString(
23462
+ // timeString,
23463
+ // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
23464
+ // (that.canvasHeight / 5) * 2.5,
23465
+ // 'center',
23466
+ // 'rgba(255,255,255,0.3)'
23467
+ // );
23468
+ // } else {
23469
+ // that.drawSolidLine(
23470
+ // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
23471
+ // 0,
23472
+ // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
23473
+ // (that.canvasHeight / 5) * 0.5,
23474
+ // 1,
23475
+ // lineColor
23476
+ // );
23477
+ // }
23478
+ // }
23479
+ break;
23480
+ }
23481
+ case 3600: {
23482
+ // 60分钟
23483
+ var dotNum = parseInt(that.canvasWidth / 20); // 每10像素一个点
23484
+ startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2,10));
23485
+ startHours = startDate.getHours();
23486
+ starMin = startDate.getMinutes();
23487
+ for (var i = 0; i <= dotNum; i++) {
23488
+ curScale = starMin + i;
23489
+ // if (curScale > 60) {
23490
+ // curScale = curScale - 60;
23491
+ // }
23492
+ startDate.setMinutes(curScale);
23493
+ if (curScale % 10 === 0) {
23494
+ that.drawSolidLine(
23495
+ ((i ) * that.canvasWidth) / dotNum,
23496
+ 8,
23497
+ ((i ) * that.canvasWidth) / dotNum,
23498
+ (that.canvasHeight / 5) * 1.5 + 8,
23499
+ 1,
23500
+ lineColor
23501
+ );
23502
+
23503
+ var timeString =
23504
+ this.subTime(startDate.getHours()) +
23505
+ ':' +
23506
+ this.subTime(startDate.getMinutes());
23507
+ that.drawString(
23508
+ timeString,
23509
+ ((i ) * that.canvasWidth) / dotNum,
23510
+ (that.canvasHeight / 5) * 2.5,
23511
+ 'center',
23512
+ 'rgba(255,255,255,0.3)'
23513
+ );
23514
+ } else {
23515
+ that.drawSolidLine(
23516
+ ((i) * that.canvasWidth) / dotNum,
23517
+ 8,
23518
+ ((i) * that.canvasWidth) / dotNum,
23519
+ (that.canvasHeight / 5) * 0.5 + 8,
23520
+ 1,
23521
+ lineColor
23522
+ );
23523
+ }
23524
+ startDate.setHours(startHours);
23525
+ }
23526
+ break;
23527
+ }
23528
+ case 86400: {
23529
+ var dotNum = parseInt(that.canvasWidth / 30); // 每10像素一个点
23530
+ // 1天，24小时
23531
+ //console.log("dotNum",dotNum);
23532
+ //startDate.setDate(startDay - parseInt(dotNum / 2,10));
23533
+ startDate.setHours(startDate.getHours() - parseInt(dotNum / 2,10));
23534
+ // console.log("startDat111e",startDate);
23535
+
23536
+ // debugger;
23537
+ starSecond = startDate.getSeconds();
23538
+ starMin = startDate.getMinutes();
23539
+ startHours = startDate.getHours();
23540
+ startDay = startDate.getDate();
23541
+ startYears = startDate.getFullYear();
23542
+ for (var i = 0; i <= dotNum; i++) {
23543
+ curScale = startHours + i;
23544
+ // if (curScale >= 24) {
23545
+ // curScale = curScale - 24;
23546
+ // }
23547
+ startDate.setHours(curScale);
23548
+ var timeString;
23549
+ // 不等于24的时候，画短线
23550
+ //console.log("curScale",curScale)
23551
+ if (curScale % 24 !=0) {
23552
+ // console.log("curScale",curScale)
23553
+ timeString = this.subTime(startDate.getHours()) + ":00";
23554
+ // timeString = startDate.toLocaleDateString();
23555
+ // debugger
23556
+ that.drawSolidLine(
23557
+ ((i ) * that.canvasWidth) /
23558
+ dotNum,
23559
+ 8,
23560
+ ((i ) * that.canvasWidth) /
23561
+ dotNum,
23562
+ (that.canvasHeight / 5) * 0.5 + 8,
23563
+ 1,
23564
+ lineColor
23565
+ );
23566
+ } else {
23567
+ // debugger;
23568
+ // console.log("画图")
23569
+ // 不等于24的时候，画长线
23570
+ timeString = startDate.toLocaleDateString();
23571
+ // console.log("startDatestartDate",startDate,i)
23572
+ // debugger;
23573
+ that.drawSolidLine(
23574
+ ((i ) * that.canvasWidth) /
23575
+ dotNum,
23576
+ 8,
23577
+ ((i) * that.canvasWidth) /
23578
+ dotNum,
23579
+ (that.canvasHeight / 5) * 1 + 8,
23580
+ 1,
23581
+ lineColor
23582
+ );
23583
+ }
23584
+ // 每2个小时一个时间文字
23585
+ if (curScale % 2 === 0) {
23586
+ that.drawString(
23587
+ timeString,
23588
+ ((i) * that.canvasWidth) /
23589
+ dotNum,
23590
+ (that.canvasHeight / 5) * 2,
23591
+ 'center',
23592
+ 'rgba(255,255,255,0.3)'
23593
+ );
23594
+ }
23595
+ // console.log("startDay",startDay)
23596
+ // startDate.setDate(startDay);
23597
+ startDate.setFullYear(startYears);
23598
+ startDate.setDate(startDay);
23599
+ startDate.setHours(startHours);
23600
+ // startDate.setTime(that.nowTime);
23601
+ // console.log("haha21",startDay,that.nowTime)
23602
+ // console.log("haha",startDate)
23603
+ }
23604
+ break;
23605
+ }
23606
+ case 259200: {
23607
+ // 3天
23608
+ startDate.setHours(startDate.getHours() - 36);
23609
+ starSecond = startDate.getSeconds();
23610
+ starMin = startDate.getMinutes();
23611
+ startHours = startDate.getHours();
23612
+ OffsetLeft = starMin * 60 + starSecond;
23613
+ for (var i = 0; i <= 72; i++) {
23614
+ curScale = startHours + i;
23615
+ if (curScale >= 24) {
23616
+ curScale = curScale % 24;
23617
+ }
23618
+ if (curScale === 0) {
23619
+ startDate.setHours(24);
23620
+ } else {
23621
+ startDate.setHours(curScale);
23622
+ }
23623
+
23624
+ var timeString = this.subTime(startDate.getHours());
23625
+
23626
+ if (curScale % 3 === 0) {
23627
+ // 每3天一个时间文字和刻度
23628
+ if (!curScale) {
23629
+ timeString = startDate.toLocaleDateString();
23630
+ }
23631
+ that.drawString(
23632
+ timeString,
23633
+ ((i * 3600 - OffsetLeft) * that.canvasWidth) /
23634
+ 259200,
23635
+ (that.canvasHeight / 5) * 2.5,
23636
+ 'center',
23637
+ 'rgba(255,255,255,0.3)'
23638
+ );
23639
+
23640
+ that.drawSolidLine(
23641
+ ((i * 3600 - OffsetLeft) * that.canvasWidth) /
23642
+ 259200,
23643
+ 0,
23644
+ ((i * 3600 - OffsetLeft) * that.canvasWidth) /
23645
+ 259200,
23646
+ (that.canvasHeight / 5) * 1,
23647
+ 1,
23648
+ lineColor
23649
+ );
23650
+ } else {
23651
+ that.drawSolidLine(
23652
+ ((i * 3600 - OffsetLeft) * that.canvasWidth) /
23653
+ 259200,
23654
+ 0,
23655
+ ((i * 3600 - OffsetLeft) * that.canvasWidth) /
23656
+ 259200,
23657
+ (that.canvasHeight / 5) * 0.5,
23658
+ 1,
23659
+ lineColor
23660
+ );
23661
+ }
23662
+ }
23663
+ break;
23664
+ }
23665
+ }
23666
+ };
23667
+ TimeLine$1.prototype.getRecord = function (timeArr,startTime,endTime) {
23668
+ console.log("timeArr,startTime,endTime",timeArr,startTime,endTime);
23669
+ // if(timeArr.length > 0 && startTime) {
23670
+ // if(timeArr[0].startTime < startTime) {
23671
+ // timeArr[0].startTime = startTime;
23672
+ // }
23673
+ // }
23674
+ // if(timeArr.length > 0 && endTime) {
23675
+ // if(timeArr[timeArr.length-1].endTime > endTime) {
23676
+ // timeArr[timeArr.length-1].endTime = endTime;
23677
+ // }
23678
+ // }
23679
+ this.timeSection = timeArr;
23680
+ this.drawRecord();
23681
+ };
23682
+ TimeLine$1.prototype.drawRecord = function () {
23683
+ var timeArr = this.timeSection || [];
23684
+ var that = this;
23685
+ var drawPen = that.drawPen;
23686
+
23687
+ // var startDate = new Date(that.nowTime);
23688
+ // var timeScale = that.canvasWidth / that.timeWidth;
23689
+
23690
+ // 根据时间查找当前位置
23691
+ for(var i =0;i<timeArr.length;i++){
23692
+ //console.log("timeArr[i]",timeArr[i],findPosition(timeArr[i].startTime),findPosition(timeArr[i].endTime))
23693
+ var startPosition = findPosition(timeArr[i].startTime);
23694
+ var endPosition = findPosition(timeArr[i].endTime);
23695
+ drawPen.fillStyle = '#1890ff80';
23696
+ drawPen.fillRect(
23697
+ startPosition,
23698
+ 0,
23699
+ endPosition-startPosition,
23700
+ 48
23701
+ );
23702
+ }
23703
+
23704
+ function findPosition(time){
23705
+ var scale = 10;
23706
+ switch(that.timeWidth){
23707
+ case 60:
23708
+ scale = 10;
23709
+ break;
23710
+ case 1800:
23711
+ scale = 20 / 60;
23712
+ break;
23713
+ case 3600:
23714
+ scale = 20 / 60;
23715
+ break;
23716
+ case 86400:
23717
+ scale = 20 / 60 /60;
23718
+ break;
23719
+ }
23720
+ var nowTimePostion = that.canvasWidth/2; //总宽度一半
23721
+ var position = nowTimePostion + (time - that.nowTime) / 1000 * scale;
23722
+ if(position > that.canvasWidth){
23723
+ position = that.canvasWidth;
23724
+ }
23725
+ if(position <=0){
23726
+ position = 0;
23727
+ }
23728
+ return position;
23729
+ }
23730
+ // switch (that.timeWidth) {
23731
+ // case 60: {
23732
+ // startDate.setSeconds(startDate.getSeconds() - 30);
23733
+ // break;
23734
+ // }
23735
+ // case 1800: {
23736
+ // startDate.setMinutes(startDate.getMinutes() - 15);
23737
+ // break;
23738
+ // }
23739
+ // case 3600: {
23740
+ // startDate.setMinutes(startDate.getMinutes() - 30);
23741
+ // break;
23742
+ // }
23743
+ // case 86400: {
23744
+ // startDate.setHours(startDate.getHours() - 12);
23745
+ // break;
23746
+ // }
23747
+ // case 259200: {
23748
+ // startDate.setHours(startDate.getHours() - 36);
23749
+ // break;
23750
+ // }
23751
+ // }
23752
+ // that.timeSection.forEach(function (item, i) {
23753
+ // // 蓝色片段条
23754
+ // drawPen.fillStyle = '#4E6FAE';
23755
+ // var x = ((item.time[0] - startDate.getTime()) * timeScale) / 1000;
23756
+ // var w = ((item.time[1] - item.time[0]) * timeScale) / 1000;
23757
+ // drawPen.fillRect(
23758
+ // x,
23759
+ // (that.canvasHeight / 5) * 3,
23760
+ // w,
23761
+ // (that.canvasHeight / 5) * 1.5
23762
+ // );
23763
+ // });
23764
+ };
23765
+ TimeLine$1.prototype.drawOtherMsg = function () {
23766
+ // 画中心线阴影
23767
+ // this.drawPen.shadowColor = '#1890FF';
23768
+ // this.drawPen.shadowOffsetX = 0;
23769
+ // this.drawPen.shadowOffsetY = 0;
23770
+ // this.drawPen.shadowBlur = 10;
23771
+ // // 绘制中心线上方的三角形
23772
+ // this.drawPen.beginPath();
23773
+ // this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, 0);
23774
+ // this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, 0);
23775
+ // this.drawPen.lineTo(this.canvasWidth / 2, 4.5);
23776
+ // this.drawPen.fillStyle = '#fff';
23777
+ // this.drawPen.closePath();
23778
+ // this.drawPen.fill();
23779
+
23780
+ // // 绘制中心线下方的三角形
23781
+ // this.drawPen.beginPath();
23782
+ // this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, this.canvasHeight);
23783
+ // this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, this.canvasHeight);
23784
+ // this.drawPen.lineTo(this.canvasWidth / 2, this.canvasHeight - 4.5);
23785
+ // this.drawPen.fillStyle = '#fff';
23786
+ // this.drawPen.closePath();
23787
+ // this.drawPen.fill();
23788
+
23789
+ // 画中心线
23790
+ this.drawSolidLine(
23791
+ this.canvasWidth / 2,
23792
+ 0,
23793
+ this.canvasWidth / 2,
23794
+ this.canvasHeight,
23795
+ 2,
23796
+ '#1890FF'
23797
+ );
23798
+
23799
+ this.drawPen.shadowBlur = 0;
23800
+
23801
+ if (this.isOver && !this.isMouseDown) {
23802
+ this.mouseTime =
23803
+ (this.mousePosition / this.canvasWidth) *
23804
+ this.timeWidth *
23805
+ 1000 +
23806
+ this.nowTime -
23807
+ (this.timeWidth / 2) * 1000; // 鼠标的悬浮点对应的时间
23808
+
23809
+ this.mouseString = this.tranTime(this.mouseTime); // 鼠标悬浮点显示的文字
23810
+ this.hoverTime = this.mouseString;
23811
+ this.hoverLeft = this.mousePosition - 60;
23812
+ this.timeTipShow = true;
23813
+
23814
+ } else {
23815
+ this.timeTipShow = false;
23816
+ }
23817
+ };
23818
+
23819
23819
  };
23820
23820
 
23821
23821
  class Rec {
@@ -34075,258 +34075,258 @@ function Janus$1(gatewayCallbacks) {
34075
34075
  }
34076
34076
  }window.Janus = Janus$1;
34077
34077
 
34078
- // We make use of this 'server' variable to provide the address of the
34079
-
34080
- var janus = null;
34081
- var tts = null;
34082
- var opaqueId = "tts-"+Janus.randomString(12);
34083
-
34084
- var spinner = null;
34085
- Janus = window.Janus;
34086
-
34087
- // Initialize the library (all console debuggers enabled)
34088
- Janus.init({debug: "all", callback: function() {
34089
- window.stopTalk = function (){
34090
- janus.destroy();
34091
- };
34092
- // debugger;
34093
- window.startTalk = function() {
34094
- // Make sure the browser supports WebRTC
34095
- if(!Janus.isWebrtcSupported()) {
34096
- bootbox.alert("No WebRTC support... ");
34097
- return;
34098
- }
34099
-
34100
- // if($('#tts_url').val().length == 0){
34101
- // bootbox.alert("Please input tts url... ");
34102
- // return;
34103
- // }
34104
-
34105
- // $(this).attr('disabled', true).unbind('click');
34106
-
34107
- // Create session
34108
- janus = new Janus(
34109
- {
34110
- server: window.EZUIKit.opt.rtcUrl,
34111
- // No "iceServers" is provided, meaning janus.js will use a default STUN server
34112
- // Here are some examples of how an iceServers field may look like to support TURN
34113
- // iceServers: [{urls: "turn:yourturnserver.com:3478", username: "janususer", credential: "januspwd"}],
34114
- // iceServers: [{urls: "turn:yourturnserver.com:443?transport=tcp", username: "janususer", credential: "januspwd"}],
34115
- // iceServers: [{urls: "turns:yourturnserver.com:443?transport=tcp", username: "janususer", credential: "januspwd"}],
34116
- // Should the Janus API require authentication, you can specify either the API secret or user token here too
34117
- // token: "mytoken",
34118
- // or
34119
- // apisecret: "serversecret",
34120
- success: function() {
34121
- // Attach to tts plugin
34122
- janus.attach(
34123
- {
34124
- plugin: "rtcgw.plugin.tts",
34125
- opaqueId: opaqueId,
34126
- success: function(pluginHandle) {
34127
- // $('#details').remove();
34128
- tts = pluginHandle;
34129
- Janus.log("Plugin attached! (" + tts.getPlugin() + ", id=" + tts.getId() + ")");
34130
- // Negotiate WebRTC
34131
- //var url = "tts://61.130.6.23:8664/talk://D13781761:0:1:cas.ys7.com:6500?97fbd2a75fa94b7682c994d3d1fac8ca:ut.5porslgu79e9r7ca48z32k8abgl3rp58-77bhb6i7xr-1kmumtg-jkhy7pvfr:0:3"
34132
-
34133
-
34134
- //var url = "tts://10.86.15.209:8664/talk://D13781761:0:1:cas.ys7.com:6500?32db2578ba7c4a84be22ecc0bcd0f8db:ut.5lqpkhim5m7cdk2y5w60g7hm9vd7i3v0-3d2pwhxe2t-11wx2ge-sh4yazbll:0:3"
34135
- //var url = "tts://10.86.15.209:8664/talk://D13781761:0:1:cas.ys7.com:6500"
34136
- //test12.ys.com
34137
- //var url = "tts://10.86.15.209:8664/talk://D08197169:0:1:cas.ys7.com:6500"
34138
- //test10.ys.com
34139
- //var url = "tts://10.86.29.210:8664/talk://D08197169:0:1:cas.ys7.com:6500"
34140
- var url = window.EZUIKit.opt.talkLink;
34141
- console.log("ttsUlr",url);
34142
- var body = { "request": "start", "url": url, "codec": "opus", "dir": "sendrecv", "audio_debug": 1};
34143
- //tts.send({"message": body});
34144
- Janus.debug("Trying a createOffer too (audio/video sendrecv)");
34145
- tts.createOffer(
34146
- {
34147
- // No media provided: by default, it's sendrecv for audio and video
34148
- media: { audio: true, video: false, data: false }, // Audio only
34149
- // If you want to test simulcasting (Chrome and Firefox only), then
34150
- // pass a ?simulcast=true when opening this demo page: it will turn
34151
- // the following 'simulcast' property to pass to janus.js to true
34152
- simulcast: false,
34153
- simulcast2: false,
34154
- success: function(jsep) {
34155
- Janus.debug("Got SDP!");
34156
- Janus.debug(jsep);
34157
- tts.send({"message": body, "jsep": jsep});
34158
- if(typeof window.EZUIKit.handleTalkSuccess !== 'undefined'){
34159
- window.EZUIKit.handleTalkSuccess();
34160
- }
34161
- },
34162
- error: function(error) {
34163
- Janus.error("WebRTC error:", error);
34164
- // bootbox.alert("WebRTC error... " + JSON.stringify(error));
34165
- if(typeof window.EZUIKit.handleTalkError !== 'undefined'){
34166
- window.EZUIKit.handleTalkError(error);
34167
- }
34168
- }
34169
- });
34170
- // $('#start').removeAttr('disabled').html("Stop")
34171
- // .click(function() {
34172
- // $(this).attr('disabled', true);
34173
- // janus.destroy();
34174
- // });
34175
- },
34176
- error: function(error) {
34177
- console.error(" -- Error attaching plugin...", error);
34178
- bootbox.alert("Error attaching plugin... " + error);
34179
- if(window.EZUIKit.handleTalkError !== 'undefined'){
34180
- window.EZUIKit.handleTalkError(error);
34181
- }
34182
- },
34183
- consentDialog: function(on) {
34184
- Janus.debug("Consent dialog should be " + (on ? "on" : "off") + " now");
34185
- },
34186
- iceState: function(state) {
34187
- Janus.log("ICE state changed to " + state);
34188
- },
34189
- mediaState: function(medium, on) {
34190
- Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
34191
- },
34192
- webrtcState: function(on) {
34193
- Janus.log("Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now");
34194
- // $("#audioleft").parent().unblock();
34195
- },
34196
- slowLink: function(uplink, lost) {
34197
- Janus.warn("Janus reports problems " + (uplink ? "sending" : "receiving") +
34198
- " packets on this PeerConnection (" + lost + " lost packets)");
34199
- },
34200
- onmessage: function(msg, jsep) {
34201
- Janus.debug(" ::: Got a message :::");
34202
- Janus.debug(msg);
34203
- if(jsep !== undefined && jsep !== null) {
34204
- Janus.debug("Handling SDP as well...");
34205
- Janus.debug(jsep);
34206
- tts.handleRemoteJsep({jsep: jsep});
34207
- }
34208
- var result = msg["result"];
34209
- if(result !== null && result !== undefined) {
34210
- if(result === "done") {
34211
- // The plugin closed
34212
- bootbox.alert("The TTS Test is over");
34213
- if(spinner !== null && spinner !== undefined)
34214
- spinner.stop();
34215
- spinner = null;
34216
- // $('#myaudio').remove();
34217
- //$('#waitingvideo').remove();
34218
- // $('#peeraudio').remove();
34219
- return;
34220
- }
34221
-
34222
- if(result === "msg"){
34223
- if(typeof window.EZUIKit.handleTalkMessage !== 'undefined'){
34224
- window.EZUIKit.handleTalkMessage(msg);
34225
- }
34226
- }
34227
- // Any loss?
34228
- var status = result["status"];
34229
- if(status === "slow_link") {
34230
- //~ var bitrate = result["bitrate"];
34231
- //~ toastr.warning("The bitrate has been cut to " + (bitrate/1000) + "kbps", "Packet loss?", {timeOut: 2000});
34232
- toastr.warning("Janus apparently missed many packets we sent, maybe we should reduce the bitrate", "Packet loss?", {timeOut: 2000});
34233
- }
34234
- }
34235
- },
34236
- onlocalstream: function(stream) {
34237
- Janus.debug(" ::: Got a local stream :::");
34238
- Janus.debug(stream);
34239
-
34240
- // if($('#myaudio').length === 0) {
34241
- // $('#audios').removeClass('hide').show();
34242
- // $('#audioleft').append('<audio id="myaudio" autoplay controls muted>Your browser does not support audio tag</audio>');
34243
- // }
34244
- Janus.attachMediaStream(document.getElementById("myaudio"), stream);
34245
- //$("#myaudio").get(0).muted = "muted";
34246
- if(tts.webrtcStuff.pc.iceConnectionState !== "completed" &&
34247
- tts.webrtcStuff.pc.iceConnectionState !== "connected") {
34248
- // $("#audioleft").parent().block({
34249
- // message: '<b>Publishing...</b>',
34250
- // css: {
34251
- // border: 'none',
34252
- // backgroundColor: 'transparent',
34253
- // color: 'white'
34254
- // }
34255
- // });
34256
- // No remote video yet
34257
- //$('#audioright').append('<video class="rounded centered" id="waitingvideo" width=320 height=240 />');
34258
- if(spinner == null) {
34259
- document.getElementById('audioright');
34260
- //spinner = new Spinner({top:100}).spin(target);
34261
- } else {
34262
- spinner.spin();
34263
- }
34264
- }
34265
- var audioTracks = stream.getAudioTracks();
34266
- if(audioTracks === null || audioTracks === undefined || audioTracks.length === 0) ;
34267
- },
34268
- onremotestream: function(stream) {
34269
- Janus.debug(" ::: Got a remote stream :::");
34270
- Janus.debug(stream);
34271
- // if($('#peeraudio').length === 0) {
34272
- // $('#audios').removeClass('hide').show();
34273
- // // $('#audioright').append('<audio id="peeraudio" autoplay controls>Your browser does not support audio tag</audio>');
34274
- // // Show the video, hide the spinner and show the resolution when we get a playing event
34275
- // var audio = $('<audio id="peeraudio" autoplay controls playsinline preload="preload" loop="true"></audio>');
34276
- // audio = audio.get(0);
34277
- // audio.setAttribute("id", 'peeraudio');
34278
- // audio.setAttribute("preload","preload");
34279
- // // 自动播放解决苹果不兼容autoplay属性
34280
- // audio.setAttribute("loop",true);
34281
- // $('#audioright').append(audio);
34282
- // $("#peeraudio").bind("playing", function () {
34283
- // //$('#waitingvideo').remove();
34284
- // $('#peeraudio').removeClass('hide').show();
34285
- // if(spinner !== null && spinner !== undefined)
34286
- // spinner.stop();
34287
- // spinner = null;
34288
- // });
34289
- // }
34290
- Janus.attachMediaStream(document.getElementById("peeraudio"), stream);
34291
- var audioTracks = stream.getAudioTracks();
34292
- if(audioTracks === null || audioTracks === undefined || audioTracks.length === 0) ; else {
34293
- // $('#peeraudio').removeClass('hide').show();
34294
- document.getElementById('peeraudio').play();
34295
- }
34296
- },
34297
- ondataopen: function(data) {
34298
- Janus.log("The DataChannel is available!");
34299
- },
34300
- ondata: function(data) {
34301
- Janus.debug("We got data from the DataChannel! " + data);
34302
- },
34303
- oncleanup: function() {
34304
- Janus.log(" ::: Got a cleanup notification :::");
34305
- if(spinner !== null && spinner !== undefined)
34306
- spinner.stop();
34307
- spinner = null;
34308
- // $('#myaudio').remove();
34309
- // //$('#waitingvideo').remove();
34310
- // $("#audioleft").parent().unblock();
34311
- // $('#peeraudio').remove();
34312
- }
34313
- });
34314
- },
34315
- error: function(error) {
34316
- Janus.error(error);
34317
- if(window.EZUIKit.handleTalkError !== 'undefined'){
34318
- window.EZUIKit.handleTalkError(error);
34319
- }
34320
- },
34321
- destroyed: function() {
34322
- // window.location.reload();
34323
- }
34324
- });
34325
- };
34326
-
34327
- }});
34328
-
34329
- window.janus = janus;
34078
+ // We make use of this 'server' variable to provide the address of the
34079
+
34080
+ var janus = null;
34081
+ var tts = null;
34082
+ var opaqueId = "tts-"+Janus.randomString(12);
34083
+
34084
+ var spinner = null;
34085
+ Janus = window.Janus;
34086
+
34087
+ // Initialize the library (all console debuggers enabled)
34088
+ Janus.init({debug: "all", callback: function() {
34089
+ window.stopTalk = function (){
34090
+ janus.destroy();
34091
+ };
34092
+ // debugger;
34093
+ window.startTalk = function() {
34094
+ // Make sure the browser supports WebRTC
34095
+ if(!Janus.isWebrtcSupported()) {
34096
+ bootbox.alert("No WebRTC support... ");
34097
+ return;
34098
+ }
34099
+
34100
+ // if($('#tts_url').val().length == 0){
34101
+ // bootbox.alert("Please input tts url... ");
34102
+ // return;
34103
+ // }
34104
+
34105
+ // $(this).attr('disabled', true).unbind('click');
34106
+
34107
+ // Create session
34108
+ janus = new Janus(
34109
+ {
34110
+ server: window.EZUIKit.opt.rtcUrl,
34111
+ // No "iceServers" is provided, meaning janus.js will use a default STUN server
34112
+ // Here are some examples of how an iceServers field may look like to support TURN
34113
+ // iceServers: [{urls: "turn:yourturnserver.com:3478", username: "janususer", credential: "januspwd"}],
34114
+ // iceServers: [{urls: "turn:yourturnserver.com:443?transport=tcp", username: "janususer", credential: "januspwd"}],
34115
+ // iceServers: [{urls: "turns:yourturnserver.com:443?transport=tcp", username: "janususer", credential: "januspwd"}],
34116
+ // Should the Janus API require authentication, you can specify either the API secret or user token here too
34117
+ // token: "mytoken",
34118
+ // or
34119
+ // apisecret: "serversecret",
34120
+ success: function() {
34121
+ // Attach to tts plugin
34122
+ janus.attach(
34123
+ {
34124
+ plugin: "rtcgw.plugin.tts",
34125
+ opaqueId: opaqueId,
34126
+ success: function(pluginHandle) {
34127
+ // $('#details').remove();
34128
+ tts = pluginHandle;
34129
+ Janus.log("Plugin attached! (" + tts.getPlugin() + ", id=" + tts.getId() + ")");
34130
+ // Negotiate WebRTC
34131
+ //var url = "tts://61.130.6.23:8664/talk://D13781761:0:1:cas.ys7.com:6500?97fbd2a75fa94b7682c994d3d1fac8ca:ut.5porslgu79e9r7ca48z32k8abgl3rp58-77bhb6i7xr-1kmumtg-jkhy7pvfr:0:3"
34132
+
34133
+
34134
+ //var url = "tts://10.86.15.209:8664/talk://D13781761:0:1:cas.ys7.com:6500?32db2578ba7c4a84be22ecc0bcd0f8db:ut.5lqpkhim5m7cdk2y5w60g7hm9vd7i3v0-3d2pwhxe2t-11wx2ge-sh4yazbll:0:3"
34135
+ //var url = "tts://10.86.15.209:8664/talk://D13781761:0:1:cas.ys7.com:6500"
34136
+ //test12.ys.com
34137
+ //var url = "tts://10.86.15.209:8664/talk://D08197169:0:1:cas.ys7.com:6500"
34138
+ //test10.ys.com
34139
+ //var url = "tts://10.86.29.210:8664/talk://D08197169:0:1:cas.ys7.com:6500"
34140
+ var url = window.EZUIKit.opt.talkLink;
34141
+ console.log("ttsUlr",url);
34142
+ var body = { "request": "start", "url": url, "codec": "opus", "dir": "sendrecv", "audio_debug": 1};
34143
+ //tts.send({"message": body});
34144
+ Janus.debug("Trying a createOffer too (audio/video sendrecv)");
34145
+ tts.createOffer(
34146
+ {
34147
+ // No media provided: by default, it's sendrecv for audio and video
34148
+ media: { audio: true, video: false, data: false }, // Audio only
34149
+ // If you want to test simulcasting (Chrome and Firefox only), then
34150
+ // pass a ?simulcast=true when opening this demo page: it will turn
34151
+ // the following 'simulcast' property to pass to janus.js to true
34152
+ simulcast: false,
34153
+ simulcast2: false,
34154
+ success: function(jsep) {
34155
+ Janus.debug("Got SDP!");
34156
+ Janus.debug(jsep);
34157
+ tts.send({"message": body, "jsep": jsep});
34158
+ if(typeof window.EZUIKit.handleTalkSuccess !== 'undefined'){
34159
+ window.EZUIKit.handleTalkSuccess();
34160
+ }
34161
+ },
34162
+ error: function(error) {
34163
+ Janus.error("WebRTC error:", error);
34164
+ // bootbox.alert("WebRTC error... " + JSON.stringify(error));
34165
+ if(typeof window.EZUIKit.handleTalkError !== 'undefined'){
34166
+ window.EZUIKit.handleTalkError(error);
34167
+ }
34168
+ }
34169
+ });
34170
+ // $('#start').removeAttr('disabled').html("Stop")
34171
+ // .click(function() {
34172
+ // $(this).attr('disabled', true);
34173
+ // janus.destroy();
34174
+ // });
34175
+ },
34176
+ error: function(error) {
34177
+ console.error(" -- Error attaching plugin...", error);
34178
+ bootbox.alert("Error attaching plugin... " + error);
34179
+ if(window.EZUIKit.handleTalkError !== 'undefined'){
34180
+ window.EZUIKit.handleTalkError(error);
34181
+ }
34182
+ },
34183
+ consentDialog: function(on) {
34184
+ Janus.debug("Consent dialog should be " + (on ? "on" : "off") + " now");
34185
+ },
34186
+ iceState: function(state) {
34187
+ Janus.log("ICE state changed to " + state);
34188
+ },
34189
+ mediaState: function(medium, on) {
34190
+ Janus.log("Janus " + (on ? "started" : "stopped") + " receiving our " + medium);
34191
+ },
34192
+ webrtcState: function(on) {
34193
+ Janus.log("Janus says our WebRTC PeerConnection is " + (on ? "up" : "down") + " now");
34194
+ // $("#audioleft").parent().unblock();
34195
+ },
34196
+ slowLink: function(uplink, lost) {
34197
+ Janus.warn("Janus reports problems " + (uplink ? "sending" : "receiving") +
34198
+ " packets on this PeerConnection (" + lost + " lost packets)");
34199
+ },
34200
+ onmessage: function(msg, jsep) {
34201
+ Janus.debug(" ::: Got a message :::");
34202
+ Janus.debug(msg);
34203
+ if(jsep !== undefined && jsep !== null) {
34204
+ Janus.debug("Handling SDP as well...");
34205
+ Janus.debug(jsep);
34206
+ tts.handleRemoteJsep({jsep: jsep});
34207
+ }
34208
+ var result = msg["result"];
34209
+ if(result !== null && result !== undefined) {
34210
+ if(result === "done") {
34211
+ // The plugin closed
34212
+ bootbox.alert("The TTS Test is over");
34213
+ if(spinner !== null && spinner !== undefined)
34214
+ spinner.stop();
34215
+ spinner = null;
34216
+ // $('#myaudio').remove();
34217
+ //$('#waitingvideo').remove();
34218
+ // $('#peeraudio').remove();
34219
+ return;
34220
+ }
34221
+
34222
+ if(result === "msg"){
34223
+ if(typeof window.EZUIKit.handleTalkMessage !== 'undefined'){
34224
+ window.EZUIKit.handleTalkMessage(msg);
34225
+ }
34226
+ }
34227
+ // Any loss?
34228
+ var status = result["status"];
34229
+ if(status === "slow_link") {
34230
+ //~ var bitrate = result["bitrate"];
34231
+ //~ toastr.warning("The bitrate has been cut to " + (bitrate/1000) + "kbps", "Packet loss?", {timeOut: 2000});
34232
+ toastr.warning("Janus apparently missed many packets we sent, maybe we should reduce the bitrate", "Packet loss?", {timeOut: 2000});
34233
+ }
34234
+ }
34235
+ },
34236
+ onlocalstream: function(stream) {
34237
+ Janus.debug(" ::: Got a local stream :::");
34238
+ Janus.debug(stream);
34239
+
34240
+ // if($('#myaudio').length === 0) {
34241
+ // $('#audios').removeClass('hide').show();
34242
+ // $('#audioleft').append('<audio id="myaudio" autoplay controls muted>Your browser does not support audio tag</audio>');
34243
+ // }
34244
+ Janus.attachMediaStream(document.getElementById("myaudio"), stream);
34245
+ //$("#myaudio").get(0).muted = "muted";
34246
+ if(tts.webrtcStuff.pc.iceConnectionState !== "completed" &&
34247
+ tts.webrtcStuff.pc.iceConnectionState !== "connected") {
34248
+ // $("#audioleft").parent().block({
34249
+ // message: '<b>Publishing...</b>',
34250
+ // css: {
34251
+ // border: 'none',
34252
+ // backgroundColor: 'transparent',
34253
+ // color: 'white'
34254
+ // }
34255
+ // });
34256
+ // No remote video yet
34257
+ //$('#audioright').append('<video class="rounded centered" id="waitingvideo" width=320 height=240 />');
34258
+ if(spinner == null) {
34259
+ document.getElementById('audioright');
34260
+ //spinner = new Spinner({top:100}).spin(target);
34261
+ } else {
34262
+ spinner.spin();
34263
+ }
34264
+ }
34265
+ var audioTracks = stream.getAudioTracks();
34266
+ if(audioTracks === null || audioTracks === undefined || audioTracks.length === 0) ;
34267
+ },
34268
+ onremotestream: function(stream) {
34269
+ Janus.debug(" ::: Got a remote stream :::");
34270
+ Janus.debug(stream);
34271
+ // if($('#peeraudio').length === 0) {
34272
+ // $('#audios').removeClass('hide').show();
34273
+ // // $('#audioright').append('<audio id="peeraudio" autoplay controls>Your browser does not support audio tag</audio>');
34274
+ // // Show the video, hide the spinner and show the resolution when we get a playing event
34275
+ // var audio = $('<audio id="peeraudio" autoplay controls playsinline preload="preload" loop="true"></audio>');
34276
+ // audio = audio.get(0);
34277
+ // audio.setAttribute("id", 'peeraudio');
34278
+ // audio.setAttribute("preload","preload");
34279
+ // // 自动播放解决苹果不兼容autoplay属性
34280
+ // audio.setAttribute("loop",true);
34281
+ // $('#audioright').append(audio);
34282
+ // $("#peeraudio").bind("playing", function () {
34283
+ // //$('#waitingvideo').remove();
34284
+ // $('#peeraudio').removeClass('hide').show();
34285
+ // if(spinner !== null && spinner !== undefined)
34286
+ // spinner.stop();
34287
+ // spinner = null;
34288
+ // });
34289
+ // }
34290
+ Janus.attachMediaStream(document.getElementById("peeraudio"), stream);
34291
+ var audioTracks = stream.getAudioTracks();
34292
+ if(audioTracks === null || audioTracks === undefined || audioTracks.length === 0) ; else {
34293
+ // $('#peeraudio').removeClass('hide').show();
34294
+ document.getElementById('peeraudio').play();
34295
+ }
34296
+ },
34297
+ ondataopen: function(data) {
34298
+ Janus.log("The DataChannel is available!");
34299
+ },
34300
+ ondata: function(data) {
34301
+ Janus.debug("We got data from the DataChannel! " + data);
34302
+ },
34303
+ oncleanup: function() {
34304
+ Janus.log(" ::: Got a cleanup notification :::");
34305
+ if(spinner !== null && spinner !== undefined)
34306
+ spinner.stop();
34307
+ spinner = null;
34308
+ // $('#myaudio').remove();
34309
+ // //$('#waitingvideo').remove();
34310
+ // $("#audioleft").parent().unblock();
34311
+ // $('#peeraudio').remove();
34312
+ }
34313
+ });
34314
+ },
34315
+ error: function(error) {
34316
+ Janus.error(error);
34317
+ if(window.EZUIKit.handleTalkError !== 'undefined'){
34318
+ window.EZUIKit.handleTalkError(error);
34319
+ }
34320
+ },
34321
+ destroyed: function() {
34322
+ // window.location.reload();
34323
+ }
34324
+ });
34325
+ };
34326
+
34327
+ }});
34328
+
34329
+ window.janus = janus;
34330
34330
  window.tts = tts;
34331
34331
 
34332
34332
  class Talk {
@@ -38041,399 +38041,399 @@ window.AudioRenderer = AudioRenderer;
38041
38041
  return AudioRenderer;
38042
38042
  })();
38043
38043
 
38044
- //顶点着色器
38045
- //attribute修饰符用于声明由浏览器（javascript）传输给顶点着色器的变量值；
38046
- // vertexPos即我们定义的顶点坐标；
38047
- // gl_Position是一个内建的传出变量。
38048
- var vertexYUVShader = [
38049
- 'attribute vec4 vertexPos;',
38050
- 'attribute vec2 texturePos;',
38051
- 'varying vec2 textureCoord;',
38052
-
38053
- 'void main()',
38054
- '{',
38055
- 'gl_Position = vertexPos;',
38056
- 'textureCoord = texturePos;',
38057
- '}'
38058
- ].join('\n');
38059
- //像素着色器(yuv->rgb)
38060
- var fragmentYUVShader = [
38061
- 'precision highp float;',
38062
- 'varying highp vec2 textureCoord;',
38063
- 'uniform sampler2D ySampler;',
38064
- 'uniform sampler2D uSampler;',
38065
- 'uniform sampler2D vSampler;',
38066
- 'const mat4 YUV2RGB = mat4',
38067
- '(',
38068
- '1.1643828125, 0, 1.59602734375, -.87078515625,',
38069
- '1.1643828125, -.39176171875, -.81296875, .52959375,',
38070
- '1.1643828125, 2.017234375, 0, -1.081390625,',
38071
- '0, 0, 0, 1',
38072
- ');',
38073
-
38074
- 'void main(void) {',
38075
- 'highp float y = texture2D(ySampler, textureCoord).r;',
38076
- 'highp float u = texture2D(uSampler, textureCoord).r;',
38077
- 'highp float v = texture2D(vSampler, textureCoord).r;',
38078
- 'gl_FragColor = vec4(y, u, v, 1) * YUV2RGB;',
38079
- '}'
38080
- ].join('\n');
38081
-
38082
- (function (root, factory) {
38083
- // root.SuperRender = factory();
38084
- window.SuperRender = factory();
38085
- }(undefined, function () {
38086
-
38087
- function RenderManager(canvas) {
38088
-
38089
- this.canvasElement = document.getElementById(canvas);
38090
-
38091
- this.initContextGL();
38092
-
38093
- if(this.contextGL) {
38094
- this.YUVProgram = this.initProgram(vertexYUVShader, fragmentYUVShader);
38095
- this.initBuffers();
38096
- this.initTextures();
38097
- }
38098
- }
38099
- /**
38100
- * 初始化WebGL上下文
38101
- */
38102
- RenderManager.prototype.initContextGL = function() {
38103
-
38104
- var canvas = this.canvasElement;
38105
-
38106
- var gl = null;
38107
-
38108
- try {
38109
- gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
38110
- } catch (e) {
38111
- gl = null;
38112
- }
38113
-
38114
- if(!gl || typeof gl.getParameter !== "function") {
38115
- gl = null;
38116
- }
38117
-
38118
- this.contextGL = gl;
38119
-
38120
- console.log("WebGL1.0");
38121
- };
38122
-
38123
- /**
38124
- * 初始化着色器程序
38125
- * @param vertexShaderScript 顶点着色器脚本
38126
- * @param fragmentShaderScript 片段着色器脚本
38127
- */
38128
- RenderManager.prototype.initProgram = function(vertexShaderScript, fragmentShaderScript) {
38129
-
38130
- var gl = this.contextGL;
38131
-
38132
- var vertexShader = gl.createShader(gl.VERTEX_SHADER); //创建定点着色器
38133
- gl.shaderSource(vertexShader, vertexShaderScript);
38134
- gl.compileShader(vertexShader);
38135
- if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
38136
- console.log('Vertex shader failed to compile: ' + gl.getShaderInfoLog(vertexShader));
38137
- }
38138
-
38139
- var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
38140
- gl.shaderSource(fragmentShader, fragmentShaderScript);
38141
- gl.compileShader(fragmentShader);
38142
- if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
38143
- console.log('Fragment shader failed to compile: ' + gl.getShaderInfoLog(fragmentShader));
38144
- }
38145
-
38146
- var program = gl.createProgram();
38147
- gl.attachShader(program, vertexShader);
38148
- gl.attachShader(program, fragmentShader);
38149
- gl.linkProgram(program);
38150
- if(!gl.getProgramParameter(program, gl.LINK_STATUS)) {
38151
- console.log('Program failed to compile: ' + gl.getProgramInfoLog(program));
38152
- }
38153
-
38154
- gl.deleteShader(vertexShader);
38155
- gl.deleteShader(fragmentShader);
38156
-
38157
- return program;
38158
- };
38159
-
38160
- /**
38161
- * 初始化数据缓存
38162
- */
38163
- RenderManager.prototype.initBuffers = function() {
38164
-
38165
- var gl = this.contextGL;
38166
-
38167
- var vertexPosBuffer = gl.createBuffer();
38168
- gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
38169
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), gl.STATIC_DRAW);
38170
- gl.bindBuffer(gl.ARRAY_BUFFER, null);
38171
-
38172
- var texturePosBuffer = gl.createBuffer();
38173
- gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
38174
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]), gl.DYNAMIC_DRAW);
38175
- gl.bindBuffer(gl.ARRAY_BUFFER, null);
38176
-
38177
- this.vertexPosBuffer = vertexPosBuffer;
38178
- this.texturePosBuffer = texturePosBuffer;
38179
- };
38180
-
38181
- /**
38182
- * 创建纹理
38183
- */
38184
- RenderManager.prototype.initTexture = function() {
38185
-
38186
- var gl = this.contextGL;
38187
-
38188
- var textureRef = gl.createTexture();
38189
- gl.bindTexture(gl.TEXTURE_2D, textureRef);
38190
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
38191
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
38192
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
38193
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
38194
- gl.bindTexture(gl.TEXTURE_2D, null);
38195
-
38196
- return textureRef;
38197
- };
38198
-
38199
- /**
38200
- * 初始化YUV纹理
38201
- */
38202
- RenderManager.prototype.initTextures = function() {
38203
-
38204
- var gl = this.contextGL;
38205
-
38206
- var program = this.YUVProgram;
38207
- gl.useProgram(program);
38208
-
38209
- var yTextureRef = this.initTexture();
38210
- var ySamplerRef = gl.getUniformLocation(program, 'ySampler');
38211
- gl.uniform1i(ySamplerRef, 0);
38212
- this.yTextureRef = yTextureRef;
38213
-
38214
- var uTextureRef = this.initTexture();
38215
- var uSamplerRef = gl.getUniformLocation(program, 'uSampler');
38216
- gl.uniform1i(uSamplerRef, 1);
38217
- this.uTextureRef = uTextureRef;
38218
-
38219
- var vTextureRef = this.initTexture();
38220
- var vSamplerRef = gl.getUniformLocation(program, 'vSampler');
38221
- gl.uniform1i(vSamplerRef, 2);
38222
- this.vTextureRef = vTextureRef;
38223
-
38224
- gl.useProgram(null);
38225
- };
38226
-
38227
- /**
38228
- * 显示帧数据
38229
- * @param nWidth 宽度
38230
- * @param nHeight 高度
38231
- * @param nHeight 帧数据
38232
- */
38233
- RenderManager.prototype.SR_DisplayFrameData = function(nWidth, nHeight, pData,dWidth,dHeight) {
38234
-
38235
- if(nWidth <= 0 || nHeight <= 0)
38236
- {
38237
- return;
38238
- }
38239
-
38240
- var gl = this.contextGL;
38241
-
38242
- if(null == pData)
38243
- {
38244
- gl.clearColor(0.0, 0.0, 0.0, 0.0);
38245
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
38246
- return;
38247
- }
38248
-
38249
- var canvas = this.canvasElement;
38250
-
38251
- this.nWindowWidth = canvas.width;
38252
- this.nWindowHeight = canvas.height;
38253
-
38254
- var nWindowWidth = this.nWindowWidth;
38255
- var nWindowHeight = this.nWindowHeight;
38256
-
38257
- gl.clearColor(0.8, 0.8, 1.0, 1.0);
38258
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
38259
-
38260
- gl.viewport(0, 0, nWindowWidth, nWindowHeight);
38261
-
38262
- this.updateFrameData(nWidth, nHeight, pData,dWidth,dHeight);
38263
-
38264
- var program = this.YUVProgram;
38265
- gl.useProgram(program);
38266
-
38267
- var vertexPosBuffer = this.vertexPosBuffer;
38268
- gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
38269
- var vertexPosRef = gl.getAttribLocation(program, 'vertexPos');
38270
- gl.enableVertexAttribArray(vertexPosRef);
38271
- gl.vertexAttribPointer(vertexPosRef, 2, gl.FLOAT, false, 0, 0);
38272
- gl.bindBuffer(gl.ARRAY_BUFFER, null);
38273
-
38274
- var texturePosBuffer = this.texturePosBuffer;
38275
- gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
38276
- var texturePosRef = gl.getAttribLocation(program, 'texturePos');
38277
- gl.enableVertexAttribArray(texturePosRef);
38278
- gl.vertexAttribPointer(texturePosRef, 2, gl.FLOAT, false, 0, 0);
38279
- gl.bindBuffer(gl.ARRAY_BUFFER, null);
38280
-
38281
- gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
38282
-
38283
- gl.disableVertexAttribArray(vertexPosRef);
38284
- gl.disableVertexAttribArray(texturePosRef);
38285
-
38286
- gl.useProgram(null);
38287
- };
38288
-
38289
- /**
38290
- * 上传YUV数据到纹理
38291
- * @param nWidth 宽度
38292
- * @param nHeight 高度
38293
- * @param nHeight 帧数据
38294
- */
38295
- RenderManager.prototype.updateFrameData = function(width, height, data,dWidth,dHeight) {
38296
-
38297
- var gl = this.contextGL;
38298
-
38299
- var yTextureRef = this.yTextureRef;
38300
- var uTextureRef = this.uTextureRef;
38301
- var vTextureRef = this.vTextureRef;
38302
-
38303
- var i420Data = data;
38304
- // debugger;
38305
- if(width == dWidth && height == dHeight)
38306
- {
38307
- var yDataLength = width * height;
38308
- var yData = i420Data.subarray(0, yDataLength);
38309
- gl.activeTexture(gl.TEXTURE0);
38310
- gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
38311
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width, height, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, yData);
38312
-
38313
- var cbDataLength = width/2 * height/2;
38314
- var cbData = i420Data.subarray(width*height, width*height + cbDataLength);
38315
- gl.activeTexture(gl.TEXTURE1);
38316
- gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
38317
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width/2, height/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, cbData);
38318
-
38319
- var crDataLength = cbDataLength;
38320
- var crData = i420Data.subarray(width*height + width*height/4, width*height + width*height/4 + crDataLength);
38321
- gl.activeTexture(gl.TEXTURE2);
38322
- gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
38323
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width/2, height/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, crData);
38324
-
38325
- }
38326
- else
38327
- {
38328
- // //裁剪宽
38329
- var yDataLength = dWidth * dHeight;
38330
- var yData=new Uint8Array(yDataLength) ;
38331
- for(var i=0;i<dHeight;i++)
38332
- {
38333
- //var ySonData=new Uint8Array(dWidth) ;
38334
- var ySonData = i420Data.subarray(i*width, i*width+dWidth);
38335
- for (var j = 0; j < dWidth; j++) {
38336
- yData[i*dWidth + j] = ySonData[j];
38337
- }
38338
- }
38339
- gl.activeTexture(gl.TEXTURE0);
38340
- gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
38341
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth, dHeight, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, yData);
38342
- yData=null;
38343
- ySonData=null;
38344
-
38345
- var cbDataLength = dWidth/2 * dHeight/2;
38346
- var cbData =new Uint8Array(cbDataLength);
38347
- //var cbSonData=new Uint8Array(dWidth/2) ;
38348
- for(var i=0;i<dHeight/2;i++)
38349
- {
38350
- var cbSonData = i420Data.subarray(width*height+i*width/2, width*height+i*width/2+dWidth/2);
38351
- for (var j = 0; j < dWidth/2; j++) {
38352
- cbData[i*dWidth/2 + j] = cbSonData[j];
38353
- }
38354
- }
38355
- gl.activeTexture(gl.TEXTURE1);
38356
- gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
38357
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth/2, dHeight/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, cbData);
38358
- cbData=null;
38359
- cbSonData=null;
38360
-
38361
- var crDataLength = cbDataLength;
38362
- var crData = new Uint8Array(crDataLength);
38363
- for(var i=0;i<dHeight/2;i++)
38364
- {
38365
- var crSonData = i420Data.subarray(width*height*5/4+i*width/2, width*height*5/4+i*width/2+dWidth/2);
38366
- for (var j = 0; j < dWidth/2; j++) {
38367
- crData[i*dWidth/2 + j] = crSonData[j];
38368
- }
38369
- }
38370
- gl.activeTexture(gl.TEXTURE2);
38371
- gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
38372
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth/2, dHeight/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, crData);
38373
- crData=null;
38374
- crSonData=null;
38375
- }
38376
-
38377
- };
38378
-
38379
- /**
38380
- * 设置显示区域
38381
- * @param stDisplayRect 显示区域
38382
- */
38383
- RenderManager.prototype.SR_SetDisplayRect = function(stDisplayRect) {
38384
-
38385
- var gl = this.contextGL;
38386
-
38387
- var nWindowWidth = this.nWindowWidth;
38388
- var nWindowHeight = this.nWindowHeight;
38389
-
38390
- var texturePosValues = null;
38391
-
38392
- if(stDisplayRect && nWindowWidth > 0 && nWindowHeight > 0) {
38393
- var fLeft = stDisplayRect.left / nWindowWidth;
38394
- var fTop = stDisplayRect.top / nWindowHeight;
38395
- var fRight = stDisplayRect.right / nWindowWidth;
38396
- var fBottom = stDisplayRect.bottom / nWindowHeight;
38397
-
38398
- texturePosValues = new Float32Array([fRight, fTop, fLeft, fTop, fRight, fBottom, fLeft, fBottom]);
38399
- }
38400
- else {
38401
- texturePosValues = new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]);
38402
- }
38403
-
38404
- var texturePosBuffer = this.texturePosBuffer;
38405
-
38406
- gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
38407
- gl.bufferSubData(gl.ARRAY_BUFFER, 0, texturePosValues);
38408
- gl.bindBuffer(gl.ARRAY_BUFFER, null);
38409
- };
38410
-
38411
- /**
38412
- * 释放显示资源
38413
- */
38414
- RenderManager.prototype.SR_Destroy = function() {
38415
-
38416
- var gl = this.contextGL;
38417
-
38418
- var YUVProgram = this.YUVProgram;
38419
- gl.deleteProgram(YUVProgram);
38420
-
38421
- var vertexPosBuffer = this.vertexPosBuffer;
38422
- var texturePosBuffer = this.texturePosBuffer;
38423
-
38424
- gl.deleteBuffer(vertexPosBuffer);
38425
- gl.deleteBuffer(texturePosBuffer);
38426
-
38427
- var yTextureRef = this.yTextureRef;
38428
- var uTextureRef = this.uTextureRef;
38429
- var vTextureRef = this.vTextureRef;
38430
- gl.deleteTexture(yTextureRef);
38431
- gl.deleteTexture(uTextureRef);
38432
- gl.deleteTexture(vTextureRef);
38433
- };
38434
-
38435
- return RenderManager;
38436
-
38044
+ //顶点着色器
38045
+ //attribute修饰符用于声明由浏览器（javascript）传输给顶点着色器的变量值；
38046
+ // vertexPos即我们定义的顶点坐标；
38047
+ // gl_Position是一个内建的传出变量。
38048
+ var vertexYUVShader = [
38049
+ 'attribute vec4 vertexPos;',
38050
+ 'attribute vec2 texturePos;',
38051
+ 'varying vec2 textureCoord;',
38052
+
38053
+ 'void main()',
38054
+ '{',
38055
+ 'gl_Position = vertexPos;',
38056
+ 'textureCoord = texturePos;',
38057
+ '}'
38058
+ ].join('\n');
38059
+ //像素着色器(yuv->rgb)
38060
+ var fragmentYUVShader = [
38061
+ 'precision highp float;',
38062
+ 'varying highp vec2 textureCoord;',
38063
+ 'uniform sampler2D ySampler;',
38064
+ 'uniform sampler2D uSampler;',
38065
+ 'uniform sampler2D vSampler;',
38066
+ 'const mat4 YUV2RGB = mat4',
38067
+ '(',
38068
+ '1.1643828125, 0, 1.59602734375, -.87078515625,',
38069
+ '1.1643828125, -.39176171875, -.81296875, .52959375,',
38070
+ '1.1643828125, 2.017234375, 0, -1.081390625,',
38071
+ '0, 0, 0, 1',
38072
+ ');',
38073
+
38074
+ 'void main(void) {',
38075
+ 'highp float y = texture2D(ySampler, textureCoord).r;',
38076
+ 'highp float u = texture2D(uSampler, textureCoord).r;',
38077
+ 'highp float v = texture2D(vSampler, textureCoord).r;',
38078
+ 'gl_FragColor = vec4(y, u, v, 1) * YUV2RGB;',
38079
+ '}'
38080
+ ].join('\n');
38081
+
38082
+ (function (root, factory) {
38083
+ // root.SuperRender = factory();
38084
+ window.SuperRender = factory();
38085
+ }(undefined, function () {
38086
+
38087
+ function RenderManager(canvas) {
38088
+
38089
+ this.canvasElement = document.getElementById(canvas);
38090
+
38091
+ this.initContextGL();
38092
+
38093
+ if(this.contextGL) {
38094
+ this.YUVProgram = this.initProgram(vertexYUVShader, fragmentYUVShader);
38095
+ this.initBuffers();
38096
+ this.initTextures();
38097
+ }
38098
+ }
38099
+ /**
38100
+ * 初始化WebGL上下文
38101
+ */
38102
+ RenderManager.prototype.initContextGL = function() {
38103
+
38104
+ var canvas = this.canvasElement;
38105
+
38106
+ var gl = null;
38107
+
38108
+ try {
38109
+ gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
38110
+ } catch (e) {
38111
+ gl = null;
38112
+ }
38113
+
38114
+ if(!gl || typeof gl.getParameter !== "function") {
38115
+ gl = null;
38116
+ }
38117
+
38118
+ this.contextGL = gl;
38119
+
38120
+ console.log("WebGL1.0");
38121
+ };
38122
+
38123
+ /**
38124
+ * 初始化着色器程序
38125
+ * @param vertexShaderScript 顶点着色器脚本
38126
+ * @param fragmentShaderScript 片段着色器脚本
38127
+ */
38128
+ RenderManager.prototype.initProgram = function(vertexShaderScript, fragmentShaderScript) {
38129
+
38130
+ var gl = this.contextGL;
38131
+
38132
+ var vertexShader = gl.createShader(gl.VERTEX_SHADER); //创建定点着色器
38133
+ gl.shaderSource(vertexShader, vertexShaderScript);
38134
+ gl.compileShader(vertexShader);
38135
+ if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
38136
+ console.log('Vertex shader failed to compile: ' + gl.getShaderInfoLog(vertexShader));
38137
+ }
38138
+
38139
+ var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
38140
+ gl.shaderSource(fragmentShader, fragmentShaderScript);
38141
+ gl.compileShader(fragmentShader);
38142
+ if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
38143
+ console.log('Fragment shader failed to compile: ' + gl.getShaderInfoLog(fragmentShader));
38144
+ }
38145
+
38146
+ var program = gl.createProgram();
38147
+ gl.attachShader(program, vertexShader);
38148
+ gl.attachShader(program, fragmentShader);
38149
+ gl.linkProgram(program);
38150
+ if(!gl.getProgramParameter(program, gl.LINK_STATUS)) {
38151
+ console.log('Program failed to compile: ' + gl.getProgramInfoLog(program));
38152
+ }
38153
+
38154
+ gl.deleteShader(vertexShader);
38155
+ gl.deleteShader(fragmentShader);
38156
+
38157
+ return program;
38158
+ };
38159
+
38160
+ /**
38161
+ * 初始化数据缓存
38162
+ */
38163
+ RenderManager.prototype.initBuffers = function() {
38164
+
38165
+ var gl = this.contextGL;
38166
+
38167
+ var vertexPosBuffer = gl.createBuffer();
38168
+ gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
38169
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), gl.STATIC_DRAW);
38170
+ gl.bindBuffer(gl.ARRAY_BUFFER, null);
38171
+
38172
+ var texturePosBuffer = gl.createBuffer();
38173
+ gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
38174
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]), gl.DYNAMIC_DRAW);
38175
+ gl.bindBuffer(gl.ARRAY_BUFFER, null);
38176
+
38177
+ this.vertexPosBuffer = vertexPosBuffer;
38178
+ this.texturePosBuffer = texturePosBuffer;
38179
+ };
38180
+
38181
+ /**
38182
+ * 创建纹理
38183
+ */
38184
+ RenderManager.prototype.initTexture = function() {
38185
+
38186
+ var gl = this.contextGL;
38187
+
38188
+ var textureRef = gl.createTexture();
38189
+ gl.bindTexture(gl.TEXTURE_2D, textureRef);
38190
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
38191
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
38192
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
38193
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
38194
+ gl.bindTexture(gl.TEXTURE_2D, null);
38195
+
38196
+ return textureRef;
38197
+ };
38198
+
38199
+ /**
38200
+ * 初始化YUV纹理
38201
+ */
38202
+ RenderManager.prototype.initTextures = function() {
38203
+
38204
+ var gl = this.contextGL;
38205
+
38206
+ var program = this.YUVProgram;
38207
+ gl.useProgram(program);
38208
+
38209
+ var yTextureRef = this.initTexture();
38210
+ var ySamplerRef = gl.getUniformLocation(program, 'ySampler');
38211
+ gl.uniform1i(ySamplerRef, 0);
38212
+ this.yTextureRef = yTextureRef;
38213
+
38214
+ var uTextureRef = this.initTexture();
38215
+ var uSamplerRef = gl.getUniformLocation(program, 'uSampler');
38216
+ gl.uniform1i(uSamplerRef, 1);
38217
+ this.uTextureRef = uTextureRef;
38218
+
38219
+ var vTextureRef = this.initTexture();
38220
+ var vSamplerRef = gl.getUniformLocation(program, 'vSampler');
38221
+ gl.uniform1i(vSamplerRef, 2);
38222
+ this.vTextureRef = vTextureRef;
38223
+
38224
+ gl.useProgram(null);
38225
+ };
38226
+
38227
+ /**
38228
+ * 显示帧数据
38229
+ * @param nWidth 宽度
38230
+ * @param nHeight 高度
38231
+ * @param nHeight 帧数据
38232
+ */
38233
+ RenderManager.prototype.SR_DisplayFrameData = function(nWidth, nHeight, pData,dWidth,dHeight) {
38234
+
38235
+ if(nWidth <= 0 || nHeight <= 0)
38236
+ {
38237
+ return;
38238
+ }
38239
+
38240
+ var gl = this.contextGL;
38241
+
38242
+ if(null == pData)
38243
+ {
38244
+ gl.clearColor(0.0, 0.0, 0.0, 0.0);
38245
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
38246
+ return;
38247
+ }
38248
+
38249
+ var canvas = this.canvasElement;
38250
+
38251
+ this.nWindowWidth = canvas.width;
38252
+ this.nWindowHeight = canvas.height;
38253
+
38254
+ var nWindowWidth = this.nWindowWidth;
38255
+ var nWindowHeight = this.nWindowHeight;
38256
+
38257
+ gl.clearColor(0.8, 0.8, 1.0, 1.0);
38258
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
38259
+
38260
+ gl.viewport(0, 0, nWindowWidth, nWindowHeight);
38261
+
38262
+ this.updateFrameData(nWidth, nHeight, pData,dWidth,dHeight);
38263
+
38264
+ var program = this.YUVProgram;
38265
+ gl.useProgram(program);
38266
+
38267
+ var vertexPosBuffer = this.vertexPosBuffer;
38268
+ gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
38269
+ var vertexPosRef = gl.getAttribLocation(program, 'vertexPos');
38270
+ gl.enableVertexAttribArray(vertexPosRef);
38271
+ gl.vertexAttribPointer(vertexPosRef, 2, gl.FLOAT, false, 0, 0);
38272
+ gl.bindBuffer(gl.ARRAY_BUFFER, null);
38273
+
38274
+ var texturePosBuffer = this.texturePosBuffer;
38275
+ gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
38276
+ var texturePosRef = gl.getAttribLocation(program, 'texturePos');
38277
+ gl.enableVertexAttribArray(texturePosRef);
38278
+ gl.vertexAttribPointer(texturePosRef, 2, gl.FLOAT, false, 0, 0);
38279
+ gl.bindBuffer(gl.ARRAY_BUFFER, null);
38280
+
38281
+ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
38282
+
38283
+ gl.disableVertexAttribArray(vertexPosRef);
38284
+ gl.disableVertexAttribArray(texturePosRef);
38285
+
38286
+ gl.useProgram(null);
38287
+ };
38288
+
38289
+ /**
38290
+ * 上传YUV数据到纹理
38291
+ * @param nWidth 宽度
38292
+ * @param nHeight 高度
38293
+ * @param nHeight 帧数据
38294
+ */
38295
+ RenderManager.prototype.updateFrameData = function(width, height, data,dWidth,dHeight) {
38296
+
38297
+ var gl = this.contextGL;
38298
+
38299
+ var yTextureRef = this.yTextureRef;
38300
+ var uTextureRef = this.uTextureRef;
38301
+ var vTextureRef = this.vTextureRef;
38302
+
38303
+ var i420Data = data;
38304
+ // debugger;
38305
+ if(width == dWidth && height == dHeight)
38306
+ {
38307
+ var yDataLength = width * height;
38308
+ var yData = i420Data.subarray(0, yDataLength);
38309
+ gl.activeTexture(gl.TEXTURE0);
38310
+ gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
38311
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width, height, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, yData);
38312
+
38313
+ var cbDataLength = width/2 * height/2;
38314
+ var cbData = i420Data.subarray(width*height, width*height + cbDataLength);
38315
+ gl.activeTexture(gl.TEXTURE1);
38316
+ gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
38317
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width/2, height/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, cbData);
38318
+
38319
+ var crDataLength = cbDataLength;
38320
+ var crData = i420Data.subarray(width*height + width*height/4, width*height + width*height/4 + crDataLength);
38321
+ gl.activeTexture(gl.TEXTURE2);
38322
+ gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
38323
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width/2, height/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, crData);
38324
+
38325
+ }
38326
+ else
38327
+ {
38328
+ // //裁剪宽
38329
+ var yDataLength = dWidth * dHeight;
38330
+ var yData=new Uint8Array(yDataLength) ;
38331
+ for(var i=0;i<dHeight;i++)
38332
+ {
38333
+ //var ySonData=new Uint8Array(dWidth) ;
38334
+ var ySonData = i420Data.subarray(i*width, i*width+dWidth);
38335
+ for (var j = 0; j < dWidth; j++) {
38336
+ yData[i*dWidth + j] = ySonData[j];
38337
+ }
38338
+ }
38339
+ gl.activeTexture(gl.TEXTURE0);
38340
+ gl.bindTexture(gl.TEXTURE_2D, yTextureRef);
38341
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth, dHeight, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, yData);
38342
+ yData=null;
38343
+ ySonData=null;
38344
+
38345
+ var cbDataLength = dWidth/2 * dHeight/2;
38346
+ var cbData =new Uint8Array(cbDataLength);
38347
+ //var cbSonData=new Uint8Array(dWidth/2) ;
38348
+ for(var i=0;i<dHeight/2;i++)
38349
+ {
38350
+ var cbSonData = i420Data.subarray(width*height+i*width/2, width*height+i*width/2+dWidth/2);
38351
+ for (var j = 0; j < dWidth/2; j++) {
38352
+ cbData[i*dWidth/2 + j] = cbSonData[j];
38353
+ }
38354
+ }
38355
+ gl.activeTexture(gl.TEXTURE1);
38356
+ gl.bindTexture(gl.TEXTURE_2D, uTextureRef);
38357
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth/2, dHeight/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, cbData);
38358
+ cbData=null;
38359
+ cbSonData=null;
38360
+
38361
+ var crDataLength = cbDataLength;
38362
+ var crData = new Uint8Array(crDataLength);
38363
+ for(var i=0;i<dHeight/2;i++)
38364
+ {
38365
+ var crSonData = i420Data.subarray(width*height*5/4+i*width/2, width*height*5/4+i*width/2+dWidth/2);
38366
+ for (var j = 0; j < dWidth/2; j++) {
38367
+ crData[i*dWidth/2 + j] = crSonData[j];
38368
+ }
38369
+ }
38370
+ gl.activeTexture(gl.TEXTURE2);
38371
+ gl.bindTexture(gl.TEXTURE_2D, vTextureRef);
38372
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, dWidth/2, dHeight/2, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, crData);
38373
+ crData=null;
38374
+ crSonData=null;
38375
+ }
38376
+
38377
+ };
38378
+
38379
+ /**
38380
+ * 设置显示区域
38381
+ * @param stDisplayRect 显示区域
38382
+ */
38383
+ RenderManager.prototype.SR_SetDisplayRect = function(stDisplayRect) {
38384
+
38385
+ var gl = this.contextGL;
38386
+
38387
+ var nWindowWidth = this.nWindowWidth;
38388
+ var nWindowHeight = this.nWindowHeight;
38389
+
38390
+ var texturePosValues = null;
38391
+
38392
+ if(stDisplayRect && nWindowWidth > 0 && nWindowHeight > 0) {
38393
+ var fLeft = stDisplayRect.left / nWindowWidth;
38394
+ var fTop = stDisplayRect.top / nWindowHeight;
38395
+ var fRight = stDisplayRect.right / nWindowWidth;
38396
+ var fBottom = stDisplayRect.bottom / nWindowHeight;
38397
+
38398
+ texturePosValues = new Float32Array([fRight, fTop, fLeft, fTop, fRight, fBottom, fLeft, fBottom]);
38399
+ }
38400
+ else {
38401
+ texturePosValues = new Float32Array([1, 0, 0, 0, 1, 1, 0, 1]);
38402
+ }
38403
+
38404
+ var texturePosBuffer = this.texturePosBuffer;
38405
+
38406
+ gl.bindBuffer(gl.ARRAY_BUFFER, texturePosBuffer);
38407
+ gl.bufferSubData(gl.ARRAY_BUFFER, 0, texturePosValues);
38408
+ gl.bindBuffer(gl.ARRAY_BUFFER, null);
38409
+ };
38410
+
38411
+ /**
38412
+ * 释放显示资源
38413
+ */
38414
+ RenderManager.prototype.SR_Destroy = function() {
38415
+
38416
+ var gl = this.contextGL;
38417
+
38418
+ var YUVProgram = this.YUVProgram;
38419
+ gl.deleteProgram(YUVProgram);
38420
+
38421
+ var vertexPosBuffer = this.vertexPosBuffer;
38422
+ var texturePosBuffer = this.texturePosBuffer;
38423
+
38424
+ gl.deleteBuffer(vertexPosBuffer);
38425
+ gl.deleteBuffer(texturePosBuffer);
38426
+
38427
+ var yTextureRef = this.yTextureRef;
38428
+ var uTextureRef = this.uTextureRef;
38429
+ var vTextureRef = this.vTextureRef;
38430
+ gl.deleteTexture(yTextureRef);
38431
+ gl.deleteTexture(uTextureRef);
38432
+ gl.deleteTexture(vTextureRef);
38433
+ };
38434
+
38435
+ return RenderManager;
38436
+
38437
38437
  }));
38438
38438
 
38439
38439
  /* eslint-disable valid-jsdoc */
@@ -38597,7 +38597,6 @@ class EZUIKitPlayer {
38597
38597
  initEZUIKitPlayer(params) {
38598
38598
  const { id, width = 600, height = 400 } = params;
38599
38599
  if (!document.getElementById(`${id}-wrap`)) {
38600
- document.getElementById(id).style = `display:inline-block;width:${width}px;height:${height}px;`;
38601
38600
  var wapDom = document.createElement("div");
38602
38601
  wapDom.id = `${id}-wrap`;
38603
38602
  wapDom.style = `display:inline-block;width:${width}px;position:relative;`;
@@ -38605,6 +38604,7 @@ class EZUIKitPlayer {
38605
38604
  document.getElementById(id).parentNode.removeChild(document.getElementById(id));
38606
38605
  // wapDom.appendChild(document.getElementById(id));
38607
38606
  wapDom.innerHTML = `<div id=${id}></div>`;
38607
+ document.getElementById(id).style = `display:inline-block;width:${width}px;height:${height}px;`;
38608
38608
  document.getElementById(id).style.verticalAlign = "top";
38609
38609
  }
38610
38610
  const initDecoder = (resolve, reject) => {