Creating a simple video controller

In this recipe we'll learn how to create a simple video controller using the built-in GUI functionalities of Cinder.

We'll control movie playback, if the movie loops or not, the speed rate, volume, and the position.

Getting ready

You must have Apple's QuickTime installed and a movie file in a format compatible with QuickTime.

To learn how to load and display a movie please refer to the previous recipe Loading and displaying Video.

How to do it…

We will create a simple interface using Cinder params classes to control a video.

  1. Include the necessary files to work with Cinder params (QuickTime and OpenGl) by adding the following at the top of the source file:
    #include "cinder/gl/gl.h"
#include "cinder/gl/Texture.h"
#include "cinder/qtime/QuickTime.h"
#include "cinder/params/Params.h"
#include "cinder/Utilities.h"
  2. Add the using statements before the application's class declaration to simplify calling Cinder commands as shown in the following code lines:
    using namespace ci;
using namespace ci::app;
using namespace ci::gl;
  3. Declare a ci::qtime::MovieGl, ci::gl::Texture, and a ci::params::InterfaceGl object to play, render, and control the video respectively. Add the following to your class declaration:
    Texture mMovieTexture;
qtime::MovieGl mMovie;
params::InterfaceGl mParams;
  4. Select a video file by opening an open file dialog and use that path to initialize our mMovie. The following code should go in the setup method:
    try{
fs::path path = getOpenFilePath();
mMovie = qtime::MovieGl( path );
}catch( … ){
  console() << "could not open video file" <<std::endl;
}
  5. We'll also need some variables to store the values which we'll manipulate. Each controllable parameter of the video will have two variables to represent the current and the previous value of that parameter. Now declare the following variables:
    float mMoviePosition, mPrevMoviePosition;
float mMovieRate, mPrevMovieRate;
float mMovieVolume, mPrevMovieVolume;
bool mMoviePlay, mPrevMoviePlay;
bool mMovieLoop, mPrevMovieLoop;
  6. Set the default values in the setup method:
    mMoviePosition = 0.0f;
mPrevMoviePosition = mMoviePosition;
mMovieRate = 1.0f;
mPrevMovieRate = mMovieRate;
mMoviePlay = false;
mPrevMoviePlay = mMoviePlay;
mMovieLoop = false;
mPrevMovieLoop = mMovieLoop;
mMovieVolume = 1.0f;
mPrevMovieVolume = mMovieVolume;
  7. Now let's initialize mParams and add a control for each of the previously defined variables and set the max, min, and step values when necessary. The following code must go in the setup method:
    mParams = params::InterfaceGl( "Movie Controller", Vec2i( 200, 300 ) ); 
if( mMovie ){
string max = ci::toString( mMovie.getDuration() );
mParams.addParam( "Position", &mMoviePosition, "min=0.0 max=" + max + " step=0.5" );

mParams.addParam( "Rate", &mMovieRate, "step=0.01" );

mParams.addParam( "Play/Pause", &mMoviePlay );

mParams.addParam( "Loop", &mMovieLoop );

mParams.addParam( "Volume", &mMovieVolume, "min=0.0 max=1.0 step=0.01" );
}
  8. In the update method we'll check if the movie was valid and compare each of the parameters to their previous state to see if they changed. If it did, we'll update mMovie and set the parameter to the new value. The following code lines go in the update method:
    if( mMovie ){

if( mMoviePosition != mPrevMoviePosition ){
mPrevMoviePosition = mMoviePosition;
mMovie.seekToTime( mMoviePosition );
        } else {
mMoviePosition = mMovie.getCurrentTime();
mPrevMoviePosition = mMoviePosition;
        }
if( mMovieRate != mPrevMovieRate ){
mPrevMovieRate = mMovieRate;
mMovie.setRate( mMovieRate );
        }
if( mMoviePlay != mPrevMoviePlay ){
mPrevMoviePlay = mMoviePlay;
if( mMoviePlay ){
mMovie.play();
            } else {
mMovie.stop();
            }
        }
if( mMovieLoop != mPrevMovieLoop ){
mPrevMovieLoop = mMovieLoop;
mMovie.setLoop( mMovieLoop );
        }
if( mMovieVolume != mPrevMovieVolume ){
mPrevMovieVolume = mMovieVolume;
mMovie.setVolume( mMovieVolume );
        }
    }
  9. In the update method it is also necessary to get a handle to the movie texture and copy it to our previously declared mMovieTexture. In the update method we write:
    if( mMovie ){
mMovieTexture = mMovie.getTexture();
}
  10. All that is left is to draw our content. In the draw method we'll clear the background with black. We'll check the validity of mMovieTexture and draw it in a rectangle that fits on the window. We also call the draw command of mParams to draw the controls on top of the video:
    gl::clear( Color( 0, 0, 0 ) ); 

if( mMovieTexture ){
Rectf rect = Rectf( mMovieTexture.getBounds() ).getCenteredFit( getWindowBounds(), true );
gl::draw( mMovieTexture, rect );
    }

mParams.draw();
  11. Draw it and you'll see the application's window with a black background along with the controls. Change the various parameters in the parameters menu and you'll see it affecting the video:
    How to do it…

How it works…

We created a ci::params::InterfaceGl object and added a control for each of the parameters we wanted to manipulate.

We created a variable for each of the parameters we want to manipulate and a variable to store their previous value. In the update we checked to see if these values differ, which will only happen when the user has changed their value using the mParams menu.

When the parameter changes we change the mMovie parameter with the value the user has set.

Some parameters must be kept in a specific range. The movie position is set in seconds from 0 to the maximum duration of the video in seconds. The volume must be a value between 0 and 1, 0 meaning no audio and 1 being the maximum volume.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.135.187.210