Web Video

Notes Home

Inspiration

Class examples

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

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();
	});
}

Resources