Capture video and duplicate it

Hi guys,

Is it possible to capture a video from the webcam and duplicate it (?). For example I want to capture the user’s face and display it to the three colorful boxes simultaneously.

Thanks a lot!

41

have a look through

1 Like

Thank you Mark. I look the examples that you sent me but still I haven’t been able to find a way to play the video in two canvases. I will try again. Thanks so much!

Always helps if you can post an example of where you are at

1 Like

Thank you Mark. Here is the file, that I based it in one of your previous examples. I want the webcam video to be displayed in the yellow square-shape as well (now is only visible in the blue square).

windows.hype.zip (10.5 KB)

Cheers. Out and about at mo.
But will pick it up when I am back to my Mac if no one else has already

1 Like

Change your code to this

var videos = document.querySelectorAll('.hype_mp4video'); //-- Get an array of all the videos
	
 
for (i = 0; i < videos.length; i++) { 
 //-- Set attributes
 
videos[i].setAttribute('autoplay', '');
    videos[i].setAttribute('muted', '');
    videos[i].setAttribute('playsinline', '');
	videos[i].style.width = '100%';
	videos[i].style.height = '100%';
    var constraints = {
         audio: false,
         video: {
             facingMode: 'user'
         }
    }
 
}
	
	 //-- ONLY call the stream request once but use the same stream source on all videos 
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
for (i = 0; i < videos.length; i++) { 
      videos[i].srcObject = stream;
     
      } 
    });

Also if you want a tint put another coloured rect over each video and drop it’s opacity.

4 Likes

Thank you so much Mark! Works great! Thank you again :slight_smile:

2 Likes