Webcam input three.js

Hi there,

I’d like to use webcam input for my next project. I’ve seen some examples but is there somewhere a good and clear tutorial or source code that I can look at? So far I’ve not found anything that is helpful for me.

Many thanks in advance

I’ve created a little fiddle that might be helpful. The code uses THREE.VideoTexture in order to display the video stream of the webcam as a texture on a simple plane.

https://jsfiddle.net/LmwrxLdy/2/

2 Likes

There are some pitfalls. In my experience (mostly on Chrome), the webcam can only be accessed over https. Not even locally, with Chrome’s --allow-file-access-from-files. Maybe there exists some flag that will do the trick.

The idea is to create a texture with this image so that the webcam input merges with it if that makes any sense?? camtexture

https://www.yuichiroharai.com/experiments/fluid/ <— a bit like this but with the image above…

1 Like

Mugen87’s solution is now deprecated. Try this:

var videoTexture, videoSettings;

navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
	videoSettings = stream.getVideoTracks()[0].getSettings();
	let video = document.createElement("video");
	Object.assign(video, {
		srcObject: stream,
		//height: videoSettings.height,
		//width: videoSettings.width,
		autoplay: true
	});
	//document.body.appendChild(video);
	videoTexture = new THREE.VideoTexture(video);
	videoTexture.minFilter = THREE.LinearFilter;
	init();
	}
	).catch(function(error){console.error(error);});

Now the videoTexture containing the live webcam can basically be treated as any other texture, so that you can blend it with other images in a shader, apply post-processing etc. :slight_smile:

1 Like

@EliasHasle Thanks for updating!

There is also an example now. The next release R98 will use the latest code for using a media stream as a source object for a video texture: https://threejs.org/examples/#webgl_materials_video_webcam