Skip to content

Commit 07a2a81

Browse files
photonstormphotonstorm
committed
grab and saveToTexture methods now work
1 parent 633af46 commit 07a2a81

1 file changed

Lines changed: 101 additions & 85 deletions

File tree

‎src/gameobjects/video/Video.js‎

Lines changed: 101 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,15 @@ var Video = new Class({
7777
* @property {HTMLVideoElement} video - The HTML Video Element that is added to the document.
7878
*/
7979
this.video = null;
80+
8081
this.videoTexture = null;
82+
8183
this.videoTextureSource = null;
8284

85+
this._key = UUID();
86+
87+
this.snapshot = null;
88+
8389
/**
8490
* @property {boolean} touchLocked - true if this video is currently locked awaiting a touch event. This happens on some mobile devices, such as iOS.
8591
* @default
@@ -170,13 +176,6 @@ var Video = new Class({
170176
*/
171177
this._paused = false;
172178

173-
/**
174-
* @property {boolean} _pending - Internal var tracking play pending.
175-
* @private
176-
* @default
177-
*/
178-
this._pending = false;
179-
180179
/**
181180
* @property {boolean} _pendingChangeSource - Internal var tracking play pending.
182181
* @private
@@ -211,18 +210,9 @@ var Video = new Class({
211210

212211
this._textureState = 0;
213212

214-
// this.setTexture(textureKey);
215213
this.setPosition(x, y);
216-
// this.setSizeToFrame();
217-
// this.setOrigin(0.5, 0.5);
218214
this.initPipeline();
219215

220-
// var ctx = this.texture.context;
221-
// ctx.fillStyle = '#ff0000';
222-
// ctx.fillRect(0, 0, 8, 8);
223-
224-
// this.texture.refresh();
225-
226216
if (key)
227217
{
228218
var _video = scene.sys.cache.video.get(key);
@@ -247,8 +237,6 @@ var Video = new Class({
247237
if (sound)
248238
{
249239
sound.on(SoundEvents.GLOBAL_MUTE, this.globalMute, this);
250-
251-
this.touchLocked = !sound.unlocked;
252240
}
253241
},
254242

@@ -287,9 +275,7 @@ var Video = new Class({
287275
if (noAudio === undefined) { noAudio = false; }
288276
if (playbackRate === undefined) { playbackRate = 1; }
289277

290-
console.log('Video.play - readystate', this.video.readyState);
291-
292-
if (this._pendingChangeSource || (this.touchLocked && this.playWhenUnlocked))
278+
if (this._pendingChangeSource || (this.touchLocked && this.playWhenUnlocked) || this.isPlaying())
293279
{
294280
return this;
295281
}
@@ -336,8 +322,6 @@ var Video = new Class({
336322

337323
if (playPromise !== undefined)
338324
{
339-
console.log('video play promise');
340-
341325
playPromise.then(this.playSuccessHandler.bind(this)).catch(this.playErrorHandler.bind(this));
342326
}
343327
}
@@ -347,19 +331,17 @@ var Video = new Class({
347331

348332
playSuccessHandler: function ()
349333
{
350-
console.log('--->>> playSuccessHandler <<<---');
351-
352-
// this._textureState++;
334+
this.touchLocked = false;
353335
},
354336

355337
playErrorHandler: function (error)
356338
{
357-
console.log('playErrorHandler', error);
358-
359339
this.scene.sys.input.once('pointerdown', this.unlockHandler, this);
360340

361341
this.touchLocked = true;
362342
this.playWhenUnlocked = true;
343+
344+
this.emit('error', error);
363345
},
364346

365347
unlockHandler: function ()
@@ -378,13 +360,10 @@ var Video = new Class({
378360
*/
379361
completeHandler: function ()
380362
{
381-
console.log('------ completeHandler');
382363
},
383364

384365
timeUpdateHandler: function ()
385366
{
386-
console.log('>>> timeUpdateHandler <<<');
387-
388367
this._textureState++;
389368

390369
this.video.removeEventListener('timeupdate', this._callbacks.time, true);
@@ -398,27 +377,23 @@ var Video = new Class({
398377
*/
399378
playHandler: function ()
400379
{
401-
console.log('>>> playHandler <<<');
402-
403380
this._textureState++;
404381

405382
this.video.removeEventListener('playing', this._callbacks.play, true);
406383
},
407384

408385
preUpdate: function ()
409386
{
410-
if (this._textureState === 2)
411-
{
412-
this.updateTexture();
413-
}
414-
415387
if (this._textureState === 3 && this.playing)
416388
{
417389
this.videoTextureSource.update();
418390
}
391+
else if (this._textureState === 2)
392+
{
393+
this.updateTexture();
394+
}
419395
},
420396

421-
422397
/**
423398
* Stops the video playing.
424399
*
@@ -435,15 +410,6 @@ var Video = new Class({
435410
*/
436411
stop: function ()
437412
{
438-
// if (this.game.sound.onMute)
439-
// {
440-
// this.game.sound.onMute.remove(this.setMute, this);
441-
// this.game.sound.onUnMute.remove(this.unsetMute, this);
442-
// }
443-
444-
// this.game.onPause.remove(this.setPause, this);
445-
// this.game.onResume.remove(this.setResume, this);
446-
447413
// Stream or file?
448414

449415
if (this.isStreaming)
@@ -483,17 +449,14 @@ var Video = new Class({
483449
this.videoStream = null;
484450
this.isStreaming = false;
485451
}
486-
else
452+
else if (this.video)
487453
{
488-
this.video.removeEventListener('ended', this._endCallback, true);
489-
this.video.removeEventListener('webkitendfullscreen', this._endCallback, true);
490-
this.video.removeEventListener('playing', this._playCallback, true);
454+
this.video.removeEventListener('ended', this._callbacks.end, true);
455+
this.video.removeEventListener('webkitendfullscreen', this._callbacks.end, true);
456+
this.video.removeEventListener('timeupdate', this._callbacks.time, true);
457+
this.video.removeEventListener('playing', this._callbacks.play, true);
491458

492-
if (this.touchLocked)
493-
{
494-
this._pending = false;
495-
}
496-
else
459+
if (!this.touchLocked)
497460
{
498461
this.video.pause();
499462
}
@@ -566,8 +529,6 @@ var Video = new Class({
566529
*/
567530
checkVideoProgress: function ()
568531
{
569-
console.log('checkVideoProgress');
570-
571532
if (this.video.readyState === 4)
572533
{
573534
this._pendingChangeSource = false;
@@ -604,34 +565,30 @@ var Video = new Class({
604565
if (width === undefined || width === null) { width = this.video.videoWidth; }
605566
if (height === undefined || height === null) { height = this.video.videoHeight; }
606567

607-
console.log('Video.updateTexture called', width, height);
608-
609568
if (!this.videoTexture)
610569
{
611-
console.log('Creating videoTexture');
612-
613-
this.videoTexture = this.scene.sys.textures.create(UUID(), this.video, width, height);
570+
this.videoTexture = this.scene.sys.textures.create(this._key, this.video, width, height);
614571
this.videoTextureSource = this.videoTexture.source[0];
615572
this.videoTexture.add('__BASE', 0, 0, 0, width, height);
573+
574+
this.texture = this.videoTexture;
575+
this.frame = this.videoTexture.get();
576+
577+
this.setSizeToFrame();
578+
this.setOriginFromFrame();
579+
580+
this._textureState = 3;
581+
582+
this.emit('created', this, width, height);
616583
}
617584
else
618585
{
619-
console.log('Assigning videoTexture');
620-
621586
var textureSource = this.videoTextureSource;
622587

623588
textureSource.source = this.video;
624589
textureSource.width = width;
625590
textureSource.height = height;
626591
}
627-
628-
this.texture = this.videoTexture;
629-
this.frame = this.videoTexture.get();
630-
631-
this.setSizeToFrame();
632-
this.setOriginFromFrame();
633-
634-
this._textureState = 3;
635592
},
636593

637594
/**
@@ -838,6 +795,49 @@ var Video = new Class({
838795
return (this.video) ? !(this.video.paused || this.video.ended) : false;
839796
},
840797

798+
/**
799+
* Stores a copy of this Render Texture in the Texture Manager using the given key.
800+
*
801+
* After doing this, any texture based Game Object, such as a Sprite, can use the contents of this
802+
* Render Texture by using the texture key:
803+
*
804+
* ```javascript
805+
* var rt = this.add.renderTexture(0, 0, 128, 128);
806+
*
807+
* // Draw something to the Render Texture
808+
*
809+
* rt.saveTexture('doodle');
810+
*
811+
* this.add.image(400, 300, 'doodle');
812+
* ```
813+
*
814+
* Updating the contents of this Render Texture will automatically update _any_ Game Object
815+
* that is using it as a texture. Calling `saveTexture` again will not save another copy
816+
* of the same texture, it will just rename the key of the existing copy.
817+
*
818+
* By default it will create a single base texture. You can add frames to the texture
819+
* by using the `Texture.add` method. After doing this, you can then allow Game Objects
820+
* to use a specific frame from a Render Texture.
821+
*
822+
* @method Phaser.GameObjects.RenderTexture#saveTexture
823+
* @since 3.12.0
824+
*
825+
* @param {string} key - The unique key to store the texture as within the global Texture Manager.
826+
*
827+
* @return {Phaser.Textures.Texture} The Texture that was saved.
828+
*/
829+
saveTexture: function (key)
830+
{
831+
if (this.videoTexture)
832+
{
833+
this.scene.sys.textures.renameTexture(this._key, key);
834+
}
835+
836+
this._key = key;
837+
838+
return this.videoTexture;
839+
},
840+
841841
/**
842842
* Grabs the current frame from the Video or Video Stream and renders it to the Video.snapshot BitmapData.
843843
*
@@ -857,15 +857,31 @@ var Video = new Class({
857857
if (alpha === undefined) { alpha = 1; }
858858
if (blendMode === undefined) { blendMode = null; }
859859

860+
var source = this.videoTextureSource;
861+
var width = (source) ? source.width : 128;
862+
var height = (source) ? source.height : 128;
863+
864+
if (!this.snapshot)
865+
{
866+
this.snapshot = this.scene.sys.textures.createCanvas(UUID(), width, height);
867+
}
868+
else if (this.snapshot.width !== width || this.snapshot.height !== height)
869+
{
870+
this.snapshot.setSize(width, height);
871+
}
872+
860873
if (clear)
861874
{
862875
this.snapshot.clear();
863876
}
864877

865-
// Set globalAlpha
866-
// Set blendMode
878+
if (source)
879+
{
880+
// Set globalAlpha
881+
// Set blendMode
867882

868-
this.snapshot.draw(0, 0, this.video);
883+
this.snapshot.draw(0, 0, source.image);
884+
}
869885

870886
return this.snapshot;
871887
},
@@ -911,21 +927,21 @@ var Video = new Class({
911927

912928
this.removeVideoElement();
913929

914-
if (this._retryID)
915-
{
916-
window.clearTimeout(this._retryID);
917-
}
918-
919930
var game = this.scene.sys.game.events;
920931

921932
game.off(GameEvents.PAUSE, this.pause, this);
922933
game.off(GameEvents.RESUME, this.resume, this);
923934

924-
var soundEvents = this.scene.sys.sound;
935+
var sound = this.scene.sys.sound;
936+
937+
if (sound)
938+
{
939+
sound.off(SoundEvents.GLOBAL_MUTE, this.globalMute, this);
940+
}
925941

926-
if (soundEvents)
942+
if (this._retryID)
927943
{
928-
soundEvents.off(SoundEvents.GLOBAL_MUTE, this.globalMute, this);
944+
window.clearTimeout(this._retryID);
929945
}
930946
},
931947

0 commit comments

Comments
 (0)