Webcam input three.js

Questions
,
1

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

2

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.

2 Likes
3

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.

5

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
6

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
7

@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

9

Hi Michael,
Please, is there any alternative for rev 156.
I could not connect my PC camera.
PS: works in Webcam ghost effect
eliashaste

1 Like
10

@jrlazz are you referring to this example three.js examples? this should work as expected in the latest versions, have you previously denied permissions for webcam access? also if you can let us know which browser / system you’re using? if this is not the example in question could you elaborate on which part of the thread you’re referring to?

11

@jrlazz

if it’s this codepen example, here’s an updated version that uses r158…

12

Thank You Lawrence… Now I saw many images. :slightly_smiling_face:
Here:
https://threejs.org/examples/#webgl_materials_video_webcam

webcam_three
webcam_three796×346 31 KB

1 Like
13

Hi Lawrence,
In fiddle I did not see.
I will try to get the code to run the page locally.
Thank You very much!

After copying and running locally I did not see the camera image. :roll_eyes:
I will try to see if some changes bring it.

In Firefox:
Uncaught (in promise) TypeError: URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads.

In Chrome:
Uncaught (in promise) TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed.

Thank You for the attention!

14

@Lawrence3DPK

Please take a look at this page, made after many experiences, and write me if it worked correctly.

the link

https://jrlazz.eu5.org/anim/ontv.html

the link was corrected :wink:

15

It says page not found.

I am glad my old ghost effect demo worked for you, though. Did the recording function work too? And if so, on what platform/browser? Because I had to report a bug regarding that to the Google Chrome devs, now ages ago.

16

Hi @EliasHasle …

I have corrected the link:

https://jrlazz.eu5.org/anim/ontv.html

There were two points after the link…

Please confirm if it works!

PS: There is another post about it: