Web Video

Inspiration

Class examples

Basic example
Scrub video
Interactive video
Webcam (On NAS this only works in Firefox :/)
Composite

Scrub video

var player = document.querySelector('video');

var mouseX = 0;
var videoDuration = 0;
var width = window.innerWidth;

document.addEventListener('mousemove', function(event) {
	mouseX = event.offsetX;
});

function scrub() {
	player.currentTime = ( mouseX / width ) * videoDuration;
	window.requestAnimationFrame(scrub);
}

player.addEventListener('loadedmetadata', function(){
	videoDuration = player.duration;
	window.requestAnimationFrame(scrub);
});

Interactive video

var player = document.querySelector('video');

player.addEventListener('click', function(event) {
	if (event.offsetX > this.offsetWidth/2) {
		console.log("You clicked on the right side of the screen!");
		player.src = "lion.mp4";
	} else {
		console.log("You clicked on the left side of the screen!");
		player.src = "bird.mp4";
	}
});

Running a local server

The next two examples require running a local server, because Chrome requires loading requests for things like the computer camera to come from the same server as the file requesting access.

Open Terminal

$ cd ~/Desktop/class-comm/
$ python -m SimpleHTTPServer

That's it! Navitate to localhost:8000

Make sure to close the server before you quit Terminal! Use Vc to stop server.

To run multiple servers:

$ python -m SimpleHTTPServer 8001

~/ is the shortcut to your User folder on the Mac. From here you can add Desktop, Documents, Downloads, etc. to the file path.
cd stands for "change directory", which means open the folder at that path. cd .. will go back one parent directory.

If you hate knowing where things are on your computer, you can drag and drop:

Windows instructions

Open Command Prompt

> cd C:\Users\yourname\Documents\commlab\projectfolder
> python -m http.server

To detect the version of Python:

> python -V

If no version, download here: https://www.python.org/downloads/windows/

If you have Python version 2, use the Mac command: python -m SimpleHTTPServer

Quick tutorial

Webcam

var webcam = document.querySelector('#webcam');

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
	 
if (navigator.getUserMedia) { 
	console.log(navigator);      
    navigator.getUserMedia({video: true}, videoHandler, videoError);
}

function videoHandler(stream) {
	webcam.src = window.URL.createObjectURL(stream);
}
function videoError(error) {
	console.log(error);
}

Mirror video with CSS

#webcam {
	transform: rotateY(180deg);
	-webkit-transform:rotateY(180deg); /* Safari and Chrome */
	-moz-transform:rotateY(180deg); /* Firefox */
}

Capture video to canvas

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var capture = document.querySelector('#capture');

canvas.width = webcam.offsetWidth;
canvas.height = webcam.offsetHeight;

capture.addEventListener('click', function() {
	context.save();
	context.translate(canvas.width, 0);
	context.scale(-1,1);
	context.drawImage(webcam, 0, 0, canvas.width, canvas.height);
	context.restore();
});

Video compositor

The video compositor library was developed by IMA professor Ben Moskowitz.

var videocompositor;
window.onload = function() {
	var canvas = document.getElementById('canvas');
	canvas.width = 640;
	canvas.height = 360;
	videocompositor = new VideoCompositor(canvas);

	var playButton = document.querySelector('#play');
	var pauseButton = document.querySelector('#pause');

	pauseButton.addEventListener('click', function() {
		videocompositor.pause();
	});
	

	var playlist = {
		"tracks":[
                [
                    {
                        type:"video",
                        id:"clip-1",
                        src:"catgreenscreen.mp4",
                        start:0,
                        duration:120
                    }
                ],
                [
                    {
                        type:"image",
                        id:"bg-image",
                        src:"apocalypse.jpg",
                        start:4,
                        duration:3
                    },
                    {
                        type:"image",
                        id:"bg-image2",
                        src:"jungle.jpg",
                        start:7,
                        duration:3
                    }
                ]
            ],
		"effects": {
			"greenscreen-effect": {
                "inputs":["clip-1"],
                "effect":VideoCompositor.Effects.GREENSCREEN,
                "parameters":{
                    "yLowerThreshold": 0.1,
                    "yUpperThreshold": 1.0
             	}
        	}
		}
	};

	videocompositor.playlist = playlist;
	var visCanvas = document.getElementById('visualization-canvas');
        visCanvas.width = 640;
        visCanvas.height = 30;
        VideoCompositor.renderPlaylist(playlist, visCanvas);

    playButton.addEventListener('click', function() {
		videocompositor.play();
	});
}