I am trying to incorporate a video from getUserMedia into a plane using three.js. However, the video does not appear as expected. When I deny access to the webcam, an image is loaded and displayed instead of the video. Loading and displaying the image poses no issues. Can someone please point out where I might be going wrong?
// ----------------------------------------------
// custom variables
var PI=3.1415;
var WIDTH=window.innerWidth,
HEIGHT=480;
var FOV=45,
ASPECT=WIDTH/HEIGHT,
NEAR=1,
FAR=10000;
var camera,
scene,
renderer,
video,
backgroundTexture;
// ----------------------------------------------
//
// onload function
function load() {
init();
}
// ----------------------------------------------
// functions
function init() {
if(navigator.webkitGetUserMedia) {
video = document.createElement('video');
document.body.appendChild(video);
navigator.webkitGetUserMedia({video:true},function(stream) {
video.src=window.webkitURL.createObjectURL(stream);
//video.src=webkitURL.createObjectURL(stream);
video.autoplay=true;
// create texture of the video stream
backgroundTexture = new THREE.Texture(video);
setupScene();
},
function(error){
console.log("Faild to get a stream due to", error)
loadAlternativlyBackground();
setupScene();
});
}
else {
loadAlternativlyBackground();
setupScene();
}
}
function setupScene() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( FOV, ASPECT, NEAR, FAR );
camera.position.z = 500;
//scene.add(new THREE.AmbientLight(0x555555));
scene.add(camera);
var material = new THREE.MeshBasicMaterial({map:backgroundTexture});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(WIDTH,HEIGHT),material);
plane.rotation.x=PI/2;
plane.material.depthTest = false;
plane.material.depthWrite = false;
scene.add(plane);
renderer = new THREE.CanvasRenderer();
renderer.setSize( WIDTH, HEIGHT );
renderer.autoClear = false;
document.body.appendChild( renderer.domElement );
animate();
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
if ( backgroundTexture ) backgroundTexture.needsUpdate = true;
}
renderer.clear();
renderer.render( scene, camera );
}
function loadAlternativlyBackground() {
// load alternativly background
backgroundTexture = THREE.ImageUtils.loadTexture('p/background.png');
}