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!
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 
2 Likes