|
96 | 96 | this.renderingMode = '3d'; |
97 | 97 | this.overlay = true; |
98 | 98 | if (Array.isArray(this.videoParameters)) { |
99 | | - this.videoParameters = smartTimeProcessor(this.interval, this.videoParameters, ['yaw', 'pitch', 'roll', 'x', 'y', 'z', 'extent']); |
| 99 | + this.videoParameters = smartTimeProcessor(this.interval, this.videoParameters, ['yaw', 'pitch', 'roll', 'x', 'y', 'z', 'extent']); |
100 | 100 | const timeArr = this.videoParameters.map((item) => { |
101 | 101 | return item.time; |
102 | 102 | }) |
|
271 | 271 | let canvas = document.createElement('canvas'); |
272 | 272 | let { clipMat, dst1 } = this._updateMask(canvas, that.timeParams[0].realHeight, that.timeParams[0].ratio); |
273 | 273 | let count = 0; |
| 274 | + const videoEle = this.video.tech().el(); |
| 275 | + let current = 0; |
| 276 | + if (this.videoParameters.length > 1) { |
| 277 | + const updateCanvas = (now, metadata) => { |
| 278 | + current = metadata.mediaTime; |
| 279 | + videoEle.requestVideoFrameCallback(updateCanvas); |
| 280 | + }; |
| 281 | + |
| 282 | + videoEle.requestVideoFrameCallback(updateCanvas); |
| 283 | + } |
274 | 284 | map.addSource(this.layerId, { |
275 | 285 | type: 'video', |
276 | 286 | urls: [url], |
277 | 287 | drawImageCallback(frame) { |
278 | | - const current = that.video.currentTime(); |
279 | 288 | if (that.videoParameters.length > 1) { |
| 289 | + current = that.video.currentTime(); |
280 | 290 | let res = that.finder.findNearest(current); |
281 | 291 | if (res) { |
282 | 292 | count = res.value; |
283 | 293 | } |
284 | | - } |
285 | | - if (that.videoParameters.length > 1 && count) { |
286 | | - let curData = that.timeParams[count]; |
287 | | - count = 0; |
288 | | - if (curData) { |
289 | | - that.dsize = curData.dsize; |
290 | | - dstTri = curData.dstTri; |
291 | | - result = curData.result; |
292 | | - setTimeout(() => { |
293 | | - that.map.getSource(that.layerId).setCoordinates([ |
294 | | - [result[0], result[3]], |
295 | | - [result[2], result[3]], |
296 | | - [result[2], result[1]], |
297 | | - [result[0], result[1]] |
298 | | - ]) |
299 | | - }, 0); |
| 294 | + |
| 295 | + if (count) { |
| 296 | + let curData = that.timeParams[count]; |
| 297 | + count = 0; |
| 298 | + if (curData) { |
| 299 | + that.dsize = curData.dsize; |
| 300 | + dstTri = curData.dstTri; |
| 301 | + result = curData.result; |
| 302 | + setTimeout(() => { |
| 303 | + that.map.getSource(that.layerId).setCoordinates([ |
| 304 | + [result[0], result[3]], |
| 305 | + [result[2], result[3]], |
| 306 | + [result[2], result[1]], |
| 307 | + [result[0], result[1]] |
| 308 | + ]) |
| 309 | + }, 0); |
| 310 | + } |
300 | 311 | } |
301 | 312 | } |
302 | 313 | let src = that.cv.matFromImageData(frame); |
|
0 commit comments