VirtualMixerProject

The VirtualMixerProject is a virtual video mixer that can be built through a chainable interface and runs in WebGL. There is a website: VirtualMixerProject.com. There you can find examples and 'channels', which are basically auto-mixed sets of video files. or gifs. Or images. Or solid colors or ...

logo

it comes in a package for use on your website or an npm build for use on your local DMZ. With these tools, you can Build your own video mixer in JavaScript. The application takes a number of sources ( video, gif, whathaveyou ) and allows you to crossfade and mix them.

Mixers and Sources are interchangeable, so the output of a one mixer can serve as a source for another mixer. In this way, a series of layers can be 'stacked' or 'chained' together to build even more elaborate mixers. You can also add effects and interfaces to your mixers and we have support for gamepads en midi devices.

Check more detailed info in the Documentation
Check out this basic example on Codepen: or any from our other examples and demos on Codepen
Be sure to check out our Demos.
All the code is available, clone and build it it here: VirtualMixerProject on github.

Or go ahead and continue with the Quickstart below

Quickstart

So, if you want to use this on your website. Make sure you include the build files. (and in this order)

  https://virtualmixproject.com/javascripts/build/vendor-min.js
  https://virtualmixproject.com/javascripts/build/mixer-min.js

Write your Webpage:

<html>
  <head>
    <script src="https://virtualmixproject.com/javascripts/build/vendor-min.js"></script>
    <script src="https://virtualmixproject.com/javascripts/build/mixer-min.js"></script>  
  </head>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden; 
    }
  </style>
  <body>
    <!-- the only real html element you need -->
    <canvas id="glcanvas"></canvas>    
    <script>

      // set up renderer and video
      var renderer = new GlRenderer();
      var testSource1 = new GifSource(   renderer, { src: 'https://assets.mixkit.co/videos/302/302-720.mp4' } );
      var testSource2 = new VideoSource( renderer, { src: 'https://assets.mixkit.co/videos/348/348-720.mp4' } );

      // this is the actual code for the mixer
      var mixer1 = new Mixer( renderer, { source1: testSource1, source2: testSource2 } );
      var output = new Output( renderer, mixer1 )

      // start the renderer
      renderer.init();
      renderer.render();

      // done!
    </script>
  </body>
</html>

See it all wired up on CodePen.

So here is what happens; the most basic mixer setup is laid out hereunder in ASCII art:

    ____________     ____________   <--- src: somefile.mp4
    | Source 1 |     | Source 2 |   <--- play(), pause(), currentTime(), etc. (html5 interface)
    ------------     ------------   
               \     /
                \   /
                 \ /
              _________   <--- Pod (float)
              | Mixer |   <--- Mixmode (number)
              ---------   <--- Blendmode (number)
                  |
                  |
            ______________
            |   Output   |            
            --------------

This diagram flows from top to bottom. By default the pod (handle) of the mixer is set to 0, so we see Source 1 in our Output.
Set the pod to 1 to show the Source 2. Or set it to any value in between to mix the two sources together.

mixer1.pod(0)    // default shows Source 1
mixer1.pod(1)    // shows Source 2
mixer1.pod(0.5)  // shows both sources at 50%, not that this is darker as both add to only ~75% opacity
mixer1.pod(0.75) // shows Source 1 at ~25% opacity and Source 2 at ~75% opacity ( ~90% total opacity )

// add a function that moves the mixer handle from left to right.
var c = 0;
setInterval( function() {
  c += 0.01
  mixer1.pod ( ( Math.sin(c) * 0.5 ) + 0.5 );
})

See it all wired up on CodePen.
Or check out how it works

Installation

You can also clone it and run on your local computer and network. This gives you a GREAT improvement in performance! if you store your videos locally.

clone the package, defaults to VirtualMixerProject/

  $ git clone git@github.com:Sense-Studios/VirtualMixerProject.git

run the installer

  $ VirtualMixerProject/ npm install

start the app

  $ VirtualMixerProject/  npm start

Go to 127.0.0.1:3000 and enjoy the show!

Check more detailed info in the docs

But Why?!

"Any application that can be written in JavaScript, will eventually be written in JavaScript."
-- Jeff Atwood

Home

VirtualMixerProject

Quickstart

Installation

Further Reading

But Why?!