Source: nodes/vvvv.nodes.html5.js

// VVVV.js -- Visual Web Client Programming
// (c) 2011 Matthias Zauner
// VVVV.js is freely distributable under the MIT license.
// Additional authors of sub components are mentioned at the specific code locations.

/**
 * The HTML5Texture Pin Type
 * @mixin
 * @property {String} typeName "HTML5Texture"
 * @property {Boolean} reset_on_disconnect true
 * @property {Function} defaultValue function returning "Empty Texture"
 */
VVVV.PinTypes.HTML5Texture = {
  typeName: "HTML5Texture",
  reset_on_disconnect: true,
  defaultValue: function() {
    return "Empty Texture";
  }
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 NODE: FileTexture (Canvas VVVVjs)
 Author(s): Matthias Zauner
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

VVVV.Nodes.FileTextureCanvas = function(id, graph) {
  this.constructor(id, "FileTexture (HTML5 VVVVjs)", graph);
  
  this.meta = {
    authors: ['Matthias Zauner'],
    original_authors: [],
    credits: [],
    compatibility_issues: []
  };
  
  this.auto_evaluate = true;
  
  var filenameIn = this.addInputPin('Filename', [], VVVV.PinTypes.String);
  
  var textureOut = this.addOutputPin('Texture Out', [], VVVV.PinTypes.HTML5Texture);
  var widthOut = this.addOutputPin('Width', [0], VVVV.PinTypes.Value);
  var heightOut = this.addOutputPin('Height', [0], VVVV.PinTypes.Value);
  var runningOut = this.addOutputPin('Up and Running', [0], VVVV.PinTypes.Value);
  
  var images = [];
  var textureLoaded = false;
  
  this.evaluate = function() {
  
    var maxSpreadSize = this.getMaxInputSliceCount();
    
    if (filenameIn.pinIsChanged()) { 
      for (var i=0; i<maxSpreadSize; i++) {
        var filename = VVVV.Helpers.prepareFilePath(filenameIn.getValue(i), this.parentPatch);
        if (filename.indexOf('http://')===0 && VVVV.ImageProxyPrefix!==undefined)
          filename = VVVV.ImageProxyPrefix+encodeURI(filename);
        if (images[i]==undefined || images[i].origSrc!=filename) {
          images[i] = new Image();
          images[i].loaded = false;
          images[i].origSrc = filename;
          var that = this;
          var img = images[i];
          images[i].onload = (function(j) {
            return function() {
              images[j].loaded = true;
              textureLoaded = true;
            }
          })(i);
          images[i].src = filename;
          runningOut.setValue(i, 0);
          textureOut.setValue(i, images[i]);
        }
      }
      images.length = maxSpreadSize;
      textureOut.setSliceCount(maxSpreadSize);
      widthOut.setSliceCount(maxSpreadSize);
      heightOut.setSliceCount(maxSpreadSize);
      runningOut.setSliceCount(maxSpreadSize);
    }
    
    if (textureLoaded) {
      for (var i=0; i<maxSpreadSize; i++) {
        textureOut.setValue(i, images[i]);
        widthOut.setValue(i, images[i].width);
        heightOut.setValue(i, images[i].height);
        runningOut.setValue(i, images[i].loaded ? 1:0);
      }
      textureLoaded = false;
    }
    
  }
}
VVVV.Nodes.FileTextureCanvas.prototype = new VVVV.Core.Node();

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 NODE: FileStream (Canvas VVVVjs)
 Author(s): Matthias Zauner
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

VVVV.Nodes.FileStreamCanvas = function(id, graph) {
  this.constructor(id, "FileStream (HTML5 VVVVjs)", graph);
  
  this.meta = {
    authors: ['Matthias Zauner'],
    original_authors: [],
    credits: [],
    compatibility_issues: []
  };
  
  this.auto_evaluate = true;
  
  var networkStates = [ 'NETWORK_EMPTY', 'NETWORK_IDLE', 'NETWORK_LOADING', 'NETWORK_NO_SOURCE' ];
  var readyStates = [ 'HAVE_NOTHING', 'HAVE_METADATA', 'HAVE_FUTURE_DATA', 'HAVE_ENOUGH_DATA', 'HAVE_CURRENT_DATA' ];
  
  var playIn = this.addInputPin('Play', [1], VVVV.PinTypes.Value);
  var loopIn = this.addInputPin('Loop', [0], VVVV.PinTypes.Value);
  var startTimeIn = this.addInputPin('Start Time', [0.0], VVVV.PinTypes.Value);
  var endTimeIn = this.addInputPin('End Time', [-1.0], VVVV.PinTypes.Value);
  var doSeekIn = this.addInputPin('Do Seek', [0], VVVV.PinTypes.Value);
  var seekPosIn = this.addInputPin('Seek Position', [0.0], VVVV.PinTypes.Value);
  var filenameIn = this.addInputPin('Filename', ['http://html5doctor.com/demos/video-canvas-magic/video.ogg'], VVVV.PinTypes.String);
  
  var videoOut = this.addOutputPin('Video', [], this);
  var audioOut = this.addOutputPin('Audio', [], this);               // this might be just the same output as the video out for now, since there's no audio tag support yet.
  var durationOut = this.addOutputPin('Duration', [0.0], VVVV.PinTypes.Value);
  var positionOut = this.addOutputPin('Position', [0.0], VVVV.PinTypes.Value);
  var widthOut = this.addOutputPin('Video Width', [0.0], VVVV.PinTypes.Value);
  var heightOut = this.addOutputPin('Video Height', [0.0], VVVV.PinTypes.Value);
  var networkStatusOut = this.addOutputPin('Network Status', [''], VVVV.PinTypes.String);
  var readyStatusOut = this.addOutputPin('Ready Status', [''], VVVV.PinTypes.String);
  
  var videos = [];
  
  this.evaluate = function() {
  
    var maxSpreadSize = this.getMaxInputSliceCount();
    
    if (filenameIn.pinIsChanged()) { 
      for (var i=0; i<maxSpreadSize; i++) {
        filename = VVVV.Helpers.prepareFilePath(filenameIn.getValue(i), this.parentPatch);
        if (videos[i]==undefined) {
          var $video = $('<video style="display:none"><source src="" type=video/ogg></video>');
          $('body').append($video);
          videos[i] = $video[0];
          videos[i].volume = 0;
          var updateStatus = (function(j) {
            return function() {
              
            }
          })(i);
          videos[i].onprogress = updateStatus;
          videos[i].oncanplay = updateStatus;
          videos[i].oncanplaythrough = updateStatus;
        }
        if (filename!=videos[i].currentSrc) {
          $(videos[i]).find('source').first().attr('src', filename);
          videos[i].load();
          if (playIn.getValue(i)>0.5)
            videos[i].play();
          else
            videos[i].pause();
          
          videos[i].loaded = true;
          videoOut.setValue(i, videos[i]);
          audioOut.setValue(i, videos[i]);
        }
      }
    }
    
    if (playIn.pinIsChanged()) {
      for (var i=0; i<maxSpreadSize; i++) {
        if (playIn.getValue(i)>0.5)
          videos[i].play();
        else
          videos[i].pause();
      }
    }
    
    if (doSeekIn.pinIsChanged()) {
      for (var i=0; i<maxSpreadSize; i++) {
        if (videos[i%videos.length].loaded && doSeekIn.getValue(i)>=.5) {
          videos[i%videos.length].currentTime = parseFloat(seekPosIn.getValue(i));
          if (playIn.getValue(i)>.5)
            videos[i].play();
        }
      }
    }
    
    for (var i=0; i<maxSpreadSize; i++) {
      if (!videos[i].paused) {
        videoOut.setValue(i, videos[i]);
        audioOut.setValue(i, videos[i]);
        if (durationOut.getValue(i)!=videos[i].duration)
          durationOut.setValue(i, videos[i].duration);
        positionOut.setValue(i, videos[i].currentTime);
        var endTime = parseFloat(endTimeIn.getValue(i));
        var startTime = parseFloat(startTimeIn.getValue(i));
        if (videos[i].currentTime<startTime)
          videos[i].currentTime = startTime;
        if (videos[i].currentTime>=videos[i].duration || (endTime>=0 && videos[i].currentTime>=endTime)) {
          if (loopIn.getValue(i)>=.5)
            videos[i].currentTime = startTime;
          else
            videos[i].pause();
        }
      }
      if (videos[i].videoWidth!=widthOut.getValue(i) || videos[i].videoHeight!=heightOut.getValue(i)) {
        widthOut.setValue(i, videos[i].videoWidth);
        heightOut.setValue(i, videos[i].videoHeight);
      }
      if (networkStatusOut.getValue(i)!=networkStates[videos[i].networkState])
        networkStatusOut.setValue(i, networkStates[videos[i].networkState]);
      if (readyStatusOut.getValue(i)!=readyStates[videos[i].readyState])
        readyStatusOut.setValue(i, readyStates[videos[i].readyState]);
    }
    
    videoOut.setSliceCount(maxSpreadSize);
    audioOut.setSliceCount(maxSpreadSize);
    
  }
}
VVVV.Nodes.FileStreamCanvas.prototype = new VVVV.Core.Node();



/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 NODE: AudioOut (HTML5 VVVVjs)
 Author(s): Matthias Zauner
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

VVVV.Nodes.AudioOutHTML5 = function(id, graph) {
  this.constructor(id, "AudioOut (HTML5 VVVVjs)", graph);
  
  this.meta = {
    authors: ['Matthias Zauner'],
    original_authors: [],
    credits: [],
    compatibility_issues: []
  };
  
  var audioIn = this.addInputPin('Audio', [], this);
  var volumeIn = this.addInputPin('Volume', [0.5], VVVV.PinTypes.Value);
  
  this.evaluate = function() {
  
    var maxSpreadSize = this.getMaxInputSliceCount();
    
    if (volumeIn.pinIsChanged()) {
      for (var i=0; i<maxSpreadSize; i++) {
        audioIn.getValue(i).volume = Math.max(0.0, Math.min(1.0, parseFloat(volumeIn.getValue(i))));
      }
    }
    
  }
}
VVVV.Nodes.AudioOutHTML5.prototype = new VVVV.Core.Node();