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

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

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

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. 
              
Hi  Michael,

Please, is there any alternative for rev 156.

I could not connect my PC camera.

PS: works in Webcam ghost effect

@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?
              
Thank You Lawrence… Now I saw many images. 

Here:

https://threejs.org/examples/#webgl_materials_video_webcam
webcam_three796×346 31 KB
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. 

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!
              
@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 
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:
    Live on an old TV set, with webcam and animated canvas textures 
Much based in video (mp4) as texture for a plane, and 
partially based on Webcam ghost effect 
the link: 
https://jrlazz.eu5.org/anim/ontv.html 
Three.js Forever !!! 
Jose Roberto Lazzareschi … jrlazz … November, 27, 2023 
 [ontv]