https://signalsmedia.github.io/webcam.js

1var WebcamView = (function() {
2	
3	// private interface
4	var videoReady;
5	var video;
6	var circleMask;
7	
8	var centerCut;
9	var resolution;
10	
11	function setVideoReady()
12	{
13		videoReady = true;
14		resolution = min(video.width,video.height);
15		centerCut = createVector((video.width-resolution)/2,(video.height-resolution)/2)
16		circleMask = createGraphics(video.width,video.height);
17		circleMask.fill(0,0,0,255);
18		circleMask.circle(video.width/2, video.height/2, resolution);
19		
20		streamRefreshMillis = (1/video.elt.srcObject.getVideoTracks()[0].getSettings().frameRate)*1000;
21		
22		//streamRefreshMillis = 2000
23		
24		if(!streamRefreshMillis) streamRefreshMillis = 1000/30;
25		
26		print("video ready")
27	}
28
29	return  { 
30		// public interface setters
31		// public interface getters
32		isReady: ()=> videoReady,
33		// getBoundSize: ()=> mainRegion.size,
34		// getBoundOrigin: ()=> mainRegion.origin,
35		// getPortSize: ()=> mainRegion.innerSize,
36		// getPortOrigin: ()=> mainRegion.innerOrigin,
37		getCenterCut: ()=> centerCut,
38		getResolution: ()=> resolution,
39		getRefreshRate: ()=> refreshRate,
40		// public interface methods
41		updateDimensions: ()=>{
42			// mainRegion.size = createVector(windowWidth/2,windowWidth/2);
43			// mainRegion.origin = createVector(width/2 - mainRegion.size.x/2,-mainRegion.size.y/16);
44			
45			// mainRegion.innerSize = createVector(2*mainRegion.size.x/3,2*mainRegion.size.y/3);
46			// mainRegion.innerOrigin = createVector(mainRegion.origin.x+mainRegion.innerSize.x/4,mainRegion.origin.y+mainRegion.innerSize.y/4);
47		},
48		//debugImage: undefined,
49		preload: ()=> {
50			let constraints = {
51				video: {
52					width: { ideal: displayWidth/2 },
53					height: { ideal: displayWidth/2 },
54					// width: { ideal: 640 },
55					// height: { ideal: 480 },
56					frameRate: {min: 15}
57				},
58				audio: false
59				
60			};
61			video = createCapture(constraints);
62			//video.size(640, 480);
63			video.hide();
64			video.elt.onloadeddata = setVideoReady;
65			//circleMask = loadImage('assets/circleMask.png');
66			//WebcamView.debugImage = createImg('debug.png','whatever').elt
67			//video.mask(circleMask);
68		},
69		init: ()=> {
70			WebcamView.updateDimensions();
71		},
72		draw: ()=> {
73			if(drawStage!='flip') throw "WebcamView must be drawn within 'flip' drawing stage"
74			if(!videoReady) return;
75			video.mask(circleMask);
76			// image(video,0,0,480,480,80,0,480,480);
77			image(video,mainRegion.innerOrigin.x,mainRegion.innerOrigin.y,mainRegion.innerSize.x,mainRegion.innerSize.y,centerCut.x,centerCut.y,resolution,resolution);
78		},
79		getVideo: ()=> {
80			return video.elt;
81		},
82		createMouseVector: ()=>{
83			return createVector(((flip ? width - mouseX : mouseX)-mainRegion.origin.x)/mainRegion.size.x, (mouseY-mainRegion.origin.y)/mainRegion.size.y);
84		},		
85	};
86})();