1+ let video = document . querySelector ( "video" ) ;
2+
3+ let constraints = {
4+ video : true ,
5+ audio : true
6+ } ;
7+
8+ let mediaRecorder ;
9+ let buffer = [ ] ;
10+
11+ let recordState = false ;
12+
13+ let videoRecorder = document . querySelector ( "#record-video" ) ;
14+ let captureButton = document . querySelector ( "#click-image" ) ;
15+
16+ let timingELem = document . querySelector ( ".timing" ) ;
17+ let clearObj ;
18+
19+ let allFilters = document . querySelectorAll ( ".filter" ) ;
20+ let uiFilter = document . querySelector ( ".ui-filter" ) ;
21+
22+ let zoomIn = document . querySelector ( ".fa-plus" ) ;
23+ let zoomOut = document . querySelector ( ".fa-minus" ) ;
24+
25+ let scale = 1.0 ;
26+
27+ // Video recorder listeners
28+ navigator . mediaDevices
29+ . getUserMedia ( constraints )
30+ . then ( function ( mediaStream ) {
31+ video . srcObject = mediaStream ;
32+
33+ mediaRecorder = new MediaRecorder ( mediaStream ) ;
34+ mediaRecorder . addEventListener ( 'dataavailable' , function ( e ) {
35+ buffer . push ( e . data ) ;
36+ } ) ;
37+ mediaRecorder . addEventListener ( 'stop' , function ( ) {
38+ let blob = new Blob ( buffer , { type : "video/mp4" } ) ;
39+ const url = window . URL . createObjectURL ( blob ) ;
40+ let a = document . createElement ( "a" ) ;
41+ a . download = `VID_${ getTimeStamp ( ) } ;
42+ a . href = url ;
43+ a . click ( ) ;
44+ a . remove ( ) ;
45+ addMediaToDB ( url , "videos" ) ;
46+ buffer = [ ] ;
47+ } ) ;
48+ } ) . catch ( function ( err ) {
49+ console . log ( err ) ;
50+ } ) ;
51+
52+ // Recording Video
53+ videoRecorder . addEventListener ( 'click' , function ( ) {
54+ if ( ! mediaRecorder ) {
55+ alert ( "Permissions not given" ) ;
56+ return ;
57+ }
58+ if ( ! recordState ) {
59+ mediaRecorder . start ( ) ;
60+ videoRecorder . style . animation = "buttonAnimation 0.75s infinite" ;
61+ recordState = true ;
62+ startClock ( ) ;
63+ } else {
64+ mediaRecorder . stop ( ) ;
65+ videoRecorder . style . animation = "none" ;
66+ recordState = false ;
67+ stopClock ( ) ;
68+ }
69+ } ) ;
70+
71+ // Capturing Image
72+ captureButton . addEventListener ( "click" , function ( ) {
73+ if ( ! mediaRecorder ) {
74+ alert ( "Permissions not given" ) ;
75+ return ;
76+ }
77+ // Create a canvas element equal to video frame
78+ let canvas = document . createElement ( "canvas" ) ;
79+ canvas . width = video . videoWidth ;
80+ canvas . height = video . videoHeight ;
81+ let tool = canvas . getContext ( "2d" ) ;
82+ // Zoom from center
83+ tool . scale ( scale , scale ) ;
84+ let x = ( tool . canvas . width / scale - video . videoWidth ) / 2 ;
85+ let y = ( tool . canvas . height / scale - video . videoHeight ) / 2 ;
86+ // Draw a frame on that canvas
87+ tool . drawImage ( video , x , y ) ;
88+ // translucent
89+ tool . globalAlpha = 0.25 ;
90+ tool . fillStyle = getFilter ( document . querySelector ( ".ui-filter" ) . classList [ 1 ] ) ;
91+ // things are drawn on above layer
92+ tool . fillRect ( 0 , 0 , canvas . width , canvas . height ) ;
93+ // toDataUrl
94+ let link = canvas . toDataURL ( ) ;
95+ // Download
96+ let anchor = document . createElement ( "a" ) ;
97+ anchor . href = link ;
98+ anchor . download = `IMG_${ getTimeStamp ( ) } ;
99+ anchor . click ( ) ;
100+ anchor . remove ( ) ;
101+ canvas . remove ( ) ;
102+ addMediaToDB ( link , "images" ) ;
103+ captureButton . style . animation = "buttonAnimation 0.5s 1" ;
104+ setTimeout ( ( ) => {
105+ captureButton . style . animation = "none" ;
106+ } , 1000 ) ;
107+ } ) ;
108+
109+ // Get current time stamp for file name
110+ function getTimeStamp ( ) {
111+ return new Date ( ) . getTime ( ) ;
112+ }
113+
114+ // Filter helper
115+ function getFilter ( filter ) {
116+ switch ( filter ) {
117+ case "filter-1" : return "#cc3838ad" ;
118+ case "filter-2" : return "#0fbbbbad" ;
119+ case "filter-3" : return "#8ddb18ad" ;
120+ case "filter-4" : return "#ee82eead" ;
121+ case "filter-5" : return "#b8870bad" ;
122+ case "filter-6" : return "#ffffff00" ;
123+ }
124+ }
125+
126+ // Video Recorder Timers
127+ function startClock ( ) {
128+ timingELem . classList . add ( "timing-active" ) ;
129+ let timeCount = 0 ;
130+ clearObj = setInterval ( function ( ) {
131+ let seconds = ( timeCount % 60 ) < 10 ? `0${ timeCount % 60 } : `${ timeCount % 60 } ;
132+ let minutes = ( timeCount / 60 ) < 10 ? `0${ Number . parseInt ( timeCount / 60 ) } : `${ Number . parseInt ( timeCount / 60 ) } ;
133+ let hours = ( timeCount / 3600 ) < 10 ? `0${ Number . parseInt ( timeCount / 3600 ) } : `${ Number . parseInt ( timeCount / 3600 ) } ;
134+ timingELem . innerText = `${ hours } ${ minutes } ${ seconds } ;
135+ timeCount ++ ;
136+ } , 1000 ) ;
137+ }
138+ function stopClock ( ) {
139+ timingELem . classList . remove ( "timing-active" ) ;
140+ timingELem . innerText = "00:00:00" ;
141+ clearInterval ( clearObj ) ;
142+ }
143+
144+ // Filter apply
145+ for ( let i = 0 ; i < allFilters . length ; i ++ ) {
146+ allFilters [ i ] . addEventListener ( "click" , function ( ) {
147+ uiFilter . classList . remove ( uiFilter . classList [ 1 ] ) ;
148+ uiFilter . classList . add ( allFilters [ i ] . classList [ 1 ] ) ;
149+ } )
150+ }
151+
152+ // Zoom apply
153+ zoomIn . addEventListener ( "click" , function ( ) {
154+ if ( scale > 1.9 )
155+ return ;
156+ scale += 0.1 ;
157+ // -x for mirroring
158+ video . style . transform = `scale(-${ scale } ${ scale } ;
159+ } )
160+ zoomOut . addEventListener ( "click" , function ( ) {
161+ if ( scale < 0.5 )
162+ return ;
163+ scale -= 0.1 ;
164+ // -x for mirroring
165+ video . style . transform = `scale(-${ scale } ${ scale } ;
166+ } )
0 commit comments