Source: videoHandler.js

  1. var THREE = require('three');
  2. /**
  3. * Provide basic functionality to display video as texture.
  4. * VideoTexture is used for creating and updating a video projected onto a Three.js texture
  5. *
  6. * @class
  7. * @param {Object} containerIn - Container to create the renderer on.
  8. * @author Alan Wu
  9. * @return {VideoHandler}
  10. */
  11. exports.VideoHandler = function(srcIn) {
  12. var _this = this;
  13. this.video = undefined;
  14. this.videoTexture = undefined;
  15. var src = srcIn;
  16. var lastTime = 0;
  17. var lastUpdate = 0;
  18. var frameRate = 30;
  19. var videoPlaneLoadedFlag = false;
  20. var lastPlayPos = 0;
  21. var currentPlayPos = 0;
  22. var bufferingDetected = false;
  23. var checkBuffering = function(delta, playAnimation) {
  24. currentPlayPos = _this.video.currentTime;
  25. // checking offset should be at most the check interval
  26. // but allow for some margin
  27. var offset = delta - 0.02;
  28. // if no buffering is currently detected,
  29. // and the position does not seem to increase
  30. // and the _this.video isn't manually paused...
  31. if (!bufferingDetected && (currentPlayPos < (lastPlayPos + offset)) &&
  32. !_this.video.paused) {
  33. bufferingDetected = true;
  34. }
  35. // if we were buffering but the _this.video has advanced,
  36. // then there is no buffering
  37. if (bufferingDetected && (currentPlayPos > (lastPlayPos + offset)) &&
  38. !_this.video.paused) {
  39. bufferingDetected = false;
  40. }
  41. lastPlayPos = currentPlayPos;
  42. }
  43. var initialise = function(){
  44. if (document) {
  45. _this.video = document.createElement( 'video' );
  46. _this.video.crossOrigin = "anonymous";
  47. _this.video.src = src;
  48. _this.video.load();
  49. _this.video.loop = true;
  50. }
  51. }
  52. this.setMorphTime = function(time, duration){
  53. var actualTime = time / duration * _this.video.duration;
  54. _this.video.currentTime = actualTime;
  55. }
  56. // videoPlaneLoaded connects the video to the video texture once it has loaded
  57. this.getVideoDuration = function() {
  58. return _this.video.duration;
  59. }
  60. this.createCanvasVideoTexture = function(){
  61. _this.videoTexture = new THREE.VideoTexture( _this.video );
  62. _this.videoTexture.minFilter = THREE.LinearFilter;
  63. _this.videoTexture.magFilter = THREE.LinearFilter;
  64. _this.videoTexture.format = THREE.RGBFormat;
  65. _this.video.currentTime = 0;
  66. return _this.videoTexture;
  67. }
  68. this.getCurrentTime = function(duration) {
  69. if (_this.video)
  70. return duration * (_this.video.currentTime / _this.video.duration);
  71. else
  72. return 0;
  73. }
  74. this.isReadyToPlay = function(){
  75. // video.readyState 3 means we have data to load for the current time and foreseeable future
  76. if (_this.video && _this.video.readyState >= 3){
  77. return true;
  78. }
  79. return false;
  80. }
  81. //this should be handle by scene... check the sync at
  82. initialise();
  83. }