From 9aaa6e9020114d2eb4590efd32cca2544689c8aa Mon Sep 17 00:00:00 2001 From: moe Date: Mon, 12 Oct 2020 20:17:52 -0700 Subject: [PATCH] Add searchable select for choosing camera --- client/package.json | 1 + client/src/components/WebcamCapture.js | 7 ++- client/src/no_camera.png | Bin 0 -> 23813 bytes client/src/pages/Create/Create.js | 58 ++++++++++++++++++++++--- package-lock.json | 3 +- 5 files changed, 58 insertions(+), 11 deletions(-) create mode 100644 client/src/no_camera.png diff --git a/client/package.json b/client/package.json index b262c1b..d2a6cd9 100644 --- a/client/package.json +++ b/client/package.json @@ -15,6 +15,7 @@ "react-paginate": "^6.3.2", "react-router-dom": "^5.2.0", "react-scripts": "^3.4.3", + "react-select": "^2.0.0-beta.7", "react-webcam": "^5.2.0" }, "scripts": { diff --git a/client/src/components/WebcamCapture.js b/client/src/components/WebcamCapture.js index 3e1f90a..4fdda1a 100644 --- a/client/src/components/WebcamCapture.js +++ b/client/src/components/WebcamCapture.js @@ -34,6 +34,7 @@ const WebcamStreamCapture = ({ onCaptureReady, onError, onStopCapture, + cameraInput, }) => { const webcamRef = useRef(null) const mediaRecorderRef = useRef(null) @@ -61,7 +62,6 @@ const WebcamStreamCapture = ({ const prepareMediaRecorder = async () => { const constraints = getConstraints() - stream = await navigator.mediaDevices.getUserMedia(constraints) mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, { mimeType: 'video/webm', @@ -90,7 +90,10 @@ const WebcamStreamCapture = ({ return ( ?(Xi80KpxCyGw9)cb7oWV8Pv;;O^Qujq`WjPu@G<{by#~ zHLTU$#VOy<-uqNnosLjZl14_rM*sr@Lzb11Py+)44+o_m;9x-S_c)H~U|TDo*z1RyJl}U@{RYsjwPYhd4uB8Rs$ei1J}2zzv*u{WS89$kF;XmjyFAH%Urd zISKTHQYcCd=%NA{MmSoWzu2`rPs_Xk;$O3)%-f^o+*)7d_n z93lr!^gb-LaD-AgWeUJVO|ed!q~m6gwsrY%e=hY25J=z6lS10sUijK))5O|6|Y zf@OO_1q^oxJAZuy3*U#BJ{^($U|zL1J%)-zO75-%(drs0f^7-zYY4#@fb1ah1cd4& zg$oXH4S?JcVVea?)gqrk@RE|8LBfjimP1I3Lh_&}1)?~>=z^tnbFx55bwjeiQ1`I2 zARhFPLy7W)L(Guk$-t|HxsYLo!!L_g$8%$Wg@~)FF!qPd7T8YP(UQ;yjuw0^M}H#b zL)HtZ7U`Q7v?R>@rZ0M7gryKlWeBYW$rYSYOK}Db+he`0#RI(oVbSNkt=0k~1k>F2 zVaxgwP5?$Y=uibrQfx+bl-3sub3gi8QZnCIMQk2LgZMktr=YK*t_4r3+^Qz!hvn{; zjG3Y4`FAs1mZ&Z)nL$dT7a||>$7Ya^++0YWsJ#dUquzoG4EI=n;aVdhVunTx*!1ri z%CWenbB#-m!CcRKVbM^z7f8`_#t%3piz`#R>5~dF&VKJ z#H+|3k?YbZVBkdTNGKM5WDQRjS(9X>YC>bikdCO4rA$N^iQH3;q%ljBlckYKlie+L zH>KAOJ5z|IEK33=o{p^VdG9S^AxH-8h(zQUtKO^O({&_ECpVLGphKdk!fBe8$%M$X z4I?LfD1=gVRh6D`E!2^amr#z-|KQ6cg*J!gjAIgYj#i1r|Itm_Mk$-xjuF6+%cxJf zLFp&ylNnj`RYk8t_bb;OZDSgrsQ8SA)g%XsE%%R9w*)S_Zz_GWIjVkYpK{M;kH^W=iDn-#)_2W!4Sub& zA2*6RJVi%K-@*WgHHzhhoy#zbO@xJs6@@)TH%U8_e3rbE5}7i|AZRATMu;aHttLfc z@>yGdS)5m|^^2#9r>dknl@^tJ$*27SdexK){Gu;aD@A;jrNswDO^QFX&pY`kfMTaN8JrS&8c`mxKr(6|x+K#q*{o!rs1#~0PP@C^CZx`(e#Odl@Fb@(#5MCy_H@(c))vDy z)239@s(Ro#{$ zzV}S%fanKHYv=ka_{W8RnPi zN9QN}Wb*p@!tjy@g$rwgc!XLEU5#pkkd5kuK#$~wR)w8SyoO1RkAXLfTaR{v@db+y z#~imw@a#*Ajfani1r!rGWg(NXUCe1_kTo^M1cfuXea&y(Hmma#*ZR}Mg&aNRU%4G` z8d%iy9N+0qAXn4$`f{VpB{ij{oU(btc&1uV){Fs2Q>mK$S&?-ybdedcjWL2~{FoLb znixQV4c<t%zU9U$k1tZNcVmiL=U6*_zB_D60$eU@`yLii ze)6si9h~n_JPCd~$3WH1O`&7g`a`T6jWN^{VU4DlmFty)`-$@gB1a;Vob8;xGC^ga z%d$)3tL3H1E8adkwguG`PA*06m{7Be-`HcToha}IvF-!4*8))B2>G<*_u(eD$IR)@ zzPw$U*E7-cltEL6&q3r}%A96~CV#cIt~Ch@iRJUiOIed>RL}is>LPzwRp_r!P2{{b zBmdoA#k8z6yE;2P0&PJyAO45?b^ZkRL4ebR(x&_`;I-f2>i}#x`}C zottcf0skL91$R4Pn}mJ@>Bw0*K6E~L=i5Dl zg@+4tpW`k2D+8qKQ3X~JKy1qKC5frDQ7pcfbzWMU{7 zEa(#h^pePj_*X7?cs}I6(qIpN3W}@} z$+Z+!NX6})%t$$zIG9+-g%C(dNd=rt&H2vT|^-vbQ7s)2@-Ry{n5L zIr*QC{{8olahiEp{oRwD^FOBrnjrI^9A;J~7UqAq4XP^e=PI9ym4}&)mV}ip2p&)$ zLhQV30)LhNZ#jSW_>Y>OoXwoX?QKC7U4;I|_n(#jYvzAe{Hsgtzq@4P;Q6mz{+FD8 z))Zj=GxPs~#6MvE>naFmAp`;Df5%J+!GCvQ77R=TOjbfv!vp+02R_?O()Hc?m-l@N z93@ zt!d)L#noN&@${MaQC|79&_M@QU6JmG?gzvA>z?QWLGSx}Q@D41RgBbX-@A>iKY1E%R4!tbJ6Zs$KX@t^#7?4)8Mb zHJH$8xf{gjZ{8BJ95oz|89^nL+@!4L8lh3!#y-=dkPE_@uQ7SjyJM{y?CvQl_6-*&`{B+(Ws>uB*_TmeihphlJ$+QG_@|+ z5~1=TA*DzkVx%Mqn6Pm&*>pMZu{(qvD(K+8t7#MtJqx?wyrouu?F?jlF_u93a4L^!5Zf2qD(I}kw?6!h>jeViu5w##h@u}UEkNS+>mNkwuKKAe zNXv&kK9je%q^#Oq3?Ci7!7v zerfxpWjX3FW2y0TTg|9|E+)!T%|s|3?g0F2OE=CS>>%u12I_dyuZb&imQc_3Krw3; z-7l=5MZa;20+kT$k8}in-J9arg_qZ?^B2XI>jg!x%D-PgWbH{BAtfS8J}QtFe$UOAdOk`fU&{pH@8)6zxIy&|+}@dp2f5EXpTP{?^K3 zHyYJoZ2zvZ;!pt!plR=bKm}{14Af0Nr>-I5F63^|@gFE{bLTnlEOWa#c}Byx)x=aO zkkar8%}l>2`#$8zi&Z~zD24XT)cEeQ-K$XdTI&Clqa{X~oR zZz|cgX#6u6w{P7grKII@s_-{Z)tM#vNNKp}eI++r!%wQ?oC|Tr64Y+OUscgG-0S&V z`=?jE|85^NFeRUO4YVBM*;@Q0D-Qa<#-F@hI8$!fSJEq{9vUT8R5*nAhdwO8dD9!0 z=A_^uwtlU2mI@W zs`Ub!aZ9qwJX~K1j5Hn{h(*t)H^oc|c+{YYCXm~;;4+aK`mi)U=4+rinlyNCVsWTz z{X(GndjcSXK~%(J!jFmEAZeM$g8D>9Z$zB`sR1i_8-v2Q#f6wqTR5_H@JTg#xE~<> z5h3s-HVsn>DJ6w~LaiV9UlJe8LQO<4Zf7XSTIc%)g5~d4x&9shUws=E zTNEk}FB!w4`_&;C6p`RUDFrTFkUkcC1~@hZLMc=zN8$QFM2$xM;u*lNjtzoY>1Xpj zC5Q4p0_lGYUy&MA6Tcx+f(7+UA9NFo5Q|Xyq>o|lJcu>waR;hj{uPa0hl(CmsZs={ z5^Qy&Je%BkGelI(Q2A&XbZ%Xw4``rjD?Tdp;VpH`w)O~_bc}i-iGPXt@0k4MSr@3f zUl9VoW2La5PJh=%7zIg|RhJJnwu)px*W{H}%G4NGgaa+=nw3qxquKCZB=^VVZ$P3` zxKEq4vC7f-SET=T!psv8CmQW+3uv;+Of+8EKr#N87Wy6N3d+&vi2e|+PP~rMkhl+| zJF{X_P>=^8%3g5AHo^)Erl{h?y|C(1z2X?&*IkgIQ3 zJuU~3H^p4aCz)Q^^u+o1#Es@3DgKU2!fa$ktuiPZBg3fo|HqfO+JK6p>>(wUD*vJK zzf^Mc`b}O@R3)Vl;{f~%r@Sa06DxVB{9#YRT~WF<2&!;}Gr##l(sF=?`&)R{@CLV3 zaX0}}C?Xt)=LSMD^l&DTZe!N$x_LG>s3_-GO0HH5bxLL}Sa9hMiq3)CY`hMv$|vPH zrEQ0%P||puy8j`(zYMDJfI;f*fR*r%@O=K8@EU0fJn1#T{=+xEvi-5P{~b;oakC&_ z`bR86<&k6A*giS@TX#Ah=`6a&5|J$+R}Tod>X|DOwHtN-T%c4{$fZRHWNsIOa0CE)~G?GpwF6E)}C$ssDB9QiQnf~p& zrTm}*dM07U2d4iZSikZAh+sBAn*SNWvN->r3C4SWc0i`bsV9l&_rEayulw<>$L=hM zW}_awMjADGDxdA5!?$PsLcc1x)5X^LC5sL0eZfz;Z=uA7!oy1{+2#N_!70gkYM!E1 znb)vs3IPbN#)JQxXN`~i)3b*EXPy=CKl3aD>;HGpQa<@Vc@|Bjx-?QphxFf`$Rc#q z4=W2jb4-R@$(r%MF?X-_KWap9R*nfP+szg9UaQt?TLY}O4Mf)uebjGXiji)esf=BH z{?aDX>FIlyQ#;v8(;~r z@WbGc*kcR4+4c0Z@QGC0Np083q6Q$IHqaZ;T2{s05F)CILANimBK&?M?5?TrSz+w+Ax0k<8a)LKxG-&2O)Z{r}_`?F=ckwhxMv^eUWJZCSy zUnzw;(G+Ec#ZVu++gR$yioztI+u73gh5uy`iOYre=JVPv$-75{ax_rplZU`%gHs5k z*QFtsP`GE01D?Uu{VPDW!(vL`{h|Z-3z=YnMtX@gh+_bicMr||VLOcd_;QSwka0++ zknU{E1z4qjzEESZso`?|_We`kTGz{1S28d#aVhO?)u2VI)r?&kPN?y|_Wp>HMjjem zW0x*ji~7sQK$pHyWLpb_Pnd3{S~nI@Lb(?O*4U#RuT467>3Bz*>bFz=Z_e(^W@*3u zGAHGXqZlbB9lZDVmh`#(-(K*U$S@oL{cEXAq@TN#XmquD*XvBm2yh9V*e&i6>?a(= zy@5R1e2&fs<5%6J-0{-v=C>_=+6bY*C)0ot1n6&_Nao~ZkJ2#pN~!x{FN`%Ei8*BQ zz+%LpPjq_bp;xsj?IUs5h{6f_bR{y-abaG7IJZhVIDH`vh=3&lTZAInq0;jS?#;8b z#LR0{VBM|JIdS~TZ<^xwt2qC&jaPts+?aPT+a0#9-|MNth}vR&=eo@MY1dn2+i7*% z7r(fa{!W{?)ZYC;%N2LZ$C=6Ib+@cd6ND+|FF%KK9D3o&zO==tw)?Xf4sRj7 zCGoiwbzdD#srCm3gabS5fYpA@zC&E-U4j53RKWovhi-7dNo9>|!{Nl86i=HQz$r_M zoOtDw_&Oewhyk+;Tf5QMyAG>eI@%R(Z-T!KuTX1GSlKC$gh~Zx);W|Gb_Sy=!aJmw zeVCp3O9;xbr@2b%Z`d%H^i$8SAHrh#<+b_j{<Us|3n#QYnOrq0}J!47dNivL$6Bg_nE9A z%yzX&Zo_$v(448zLrHKSE5T$FxStCWxSVV>s$aVX$$LNecA(P{rNl2q8tO)Xd)Kob zys@rbc#*`U@cYY3E|eH>CeH6C|I<;Cc>P`qI{3DgvUjE?#`BKg%62`ddD9LxZqF$< zQG4Auptnkm-D)!tQ^iaAuT8(_bH6>TU6Dh5Itt-8I6A7jnp5ew3d4OR6y2BE*x@?l zLafkxq+cI(nnn`uA?+qso+Z(%To-knW7bx8avzEt)-ySQ-a@)g6I zp3e?Dw{joHExerXGJM(Bw!?^zyzcKKKJ6He;E&^&b_@VNU`fn&v&GlIAYQy=wf6*W=EIE-iHwVxq^x#jZD3Qi7T)lF)#}X+xNE zV!y@3I=RId=($qGEEnuV4mk+SrMmA1w5I+Cho;CL`$X;!JrHvz8cUtN-k#4429J?# zM}<+NE!6ji-cTii#6H*?%NyLFEsIhIqj*-*z-+4Xf*wKr;fBpx??pS-yv<{F50$4a zqcEa_XH6EMh1fKAnPi1<|J*VA|Cl#dbv#UI;i|tQ0~``40~SL{O5a^YsY1|XG;A065Q6G;|PvO;@Qge z>s+Ak8f$zf$UgLeaolwlNA+3G-EF^5|C}jgw{Ip(Pl~0YSU=wV0PhF|V?9$5|0Ohh zt_O>+pFLvUTZMbvI!K*B6XJr?dVx{6v2T^v2B*<`Gus{MuFs2sCZDqN_1ykhu|a=% z&lu~cHIT`u_|16TNo%-}@NgpQ5QjaY=b*_86YTzAA{Vob=j=RQp#8hp494m z=;get^jIL^d6WC`qqyY}m`ZKz@gqJ~2jwWD72zwX8fZ`f0-NzHlJ z)<6-zus-j`9fCTzKoQ=#tbRiG++G#ehhur$(v#|FFpV(!W-~n(Ye*1Q`ovkX+DKrb z=()K4q-H-_bRNrhQa%Voe!Pl(>Ogl9?{$Xzd>^rcwuqXIKK=rI*4rRDVz=^;e~5Sz zij>alY(An{)fMJ)zM`2HMQS!;9>vHoktICUT-RRSexvKY^=)hoo`(2B`Y9|tLSPUL zL@9U@6~JtX{5pIuD!cddno$@b{ga4B2qU;{>Wkfa-N?r;ESj?ojkQCEZQN(9GH0nK*`%-SCjrsW9nWPq@R7V_<0cpQ zK<*I#((M1ty(lYtw+*7rF1G*zHuU+qtz0!ddRO^a+QygXGcAb2$G+j2!;6KU_ zN=%LZNdSqUL@AOkv`2=TP=bs1+hUaAsk>XHOQ-1;tXantAt*EC=EFl51&Z)|4*jFx zJ{_DP`T+Sn`h5fCdys@D;|C$3{k^0Tz&M}E+CaXg3|F;%*{kX2o~z4=tS-X{{u4{>R1CaR?v{O^9$O{un$VV86jHAfd}j`?bt%bDBowG|vx>+Q zNwN}3PQ%@aAFu@bGOY0vut*H5Jf9QAn}6;f4yb-h1#UBD7u{#N9E8$|q` zedvlG3=x>noq{4|Sw_i`XDpuBwkECPbI8AWWj$*X-4_J6cwT7Z41usyY4FjUr$$gY zS)!1H)d8Gf^n@$^{ch3VBBWv?XzqgGiTPs93JrZ!8txtF|K1!|NI4uAv$l4)tlUq! zcku?e_$n9JxoVd${mp&NG3>)j0n>T)Egcqu9EAR4f@Xuol#~1cQ)Bh=(ovupfc!{-3|TkV;+$b1xU?QlzT0y|}TP4YoMUh%NGacec6r-5Z&) zN6Q4J8B-7dpa3jhb4>H~jK-mo~?BkaBZu=lN8 zn^!0?N%oji;1REYl`=o35gB?@8DzK z79%(Z^yM1u9I)nf(ZA7lvrWS4dXcH7lKLODVN)n`Bsa0GE)aQfR$nLN4e z6Qh(9BvE#EIpzjMZl$hAtSS>YmE)DXVp}*H3>gq)6!#(wSR75ncnPoCq-HbjEB#@2bH8qvG)_*u#nc zutjQHfk^l!W2%LHN?@)=CveltD6}>L>)QGk+n4u!X8(+r46~}{j&s|6Cuz2XHHmoE zz~>EM=OIuwmS-p2RIRr6`0xca_agUZ?J#*M0hijmf}w1qSX9LECwyc+-SjuKpEX{; zE1|lCfI%cL-3(@_`A!fQAtAEqKh`~VV~ne{3<`s}ExpI{cDtY1A}2g)a;ZL^D;btP z7m>UU&)jDMU*eG8S$>sN2N&u?0$ehT0zY0U6i8t@^I*XU1dE(u$=t-)`xGhM_mR9!=Xjk|)OY$DRcBPU8vBboCn>_9AlK8yU(buft`oj*Yb}bi&DuC-FjE-& zC<#XV?Ia=T9iulo&F2oQ?)OpkxXCYEt?T>?EwJ2nZr0p3cMo;R8>@2+WA3nzW@?PD zYTvNouvSLu38nn!eZbB)*{=+_k4Ha4qzh%-*TT~^GL-6!jJGKt-YD$-2H;SHHg~0ZJt`&rxXIYXeVpv?Y)hk?_cns ztPl8D(p%-velJr_!Y}H3+kV7jhvyPf7J4j>?ZxSFz8d)Od_5dIiGs=j&BvXU489uA zbi0||gf#U6ni4{B7h95yk+wVsA$$YVD*-#aM}1cJb5S;WsYRZz+p2T|d~jOV%RWHf z;3?6Dn%O#8laY*-M-;uzC|WjAfqX3&j}0zWKuf03hP7Qm0<(zJwi0BuJHa6IW)FdCc+(W2lZ{M4rJHCeHm^ zh69nirY8OcHrdQ>;*k7nsyBY;vGG5C=d>OC;^)pe@G>VNZNPX$3YbTPE(PZJ9Lxxh zQ^u<@d-Nc_Fn>cGl#5M62wZbLUA(^M!Ic0lQ44W1<>k;^$Rssw8hOmr%k4_Fh_3e8yDhV`Szb55nUHECxuBfP3mvc8f`jf>j+x$O4#l>iAiK z2xG%JPc2@!7`01z6*iqrDnEEeOxBxCM*rrK=!;2yP1*P5gD2BVD*7IVP!*tFThrK? zh&eP{UyCMJQ(Rh4uj)>pB%YS(4}Zh3)p`I7u>8GYg~&ZS8>iMWrtNKE832I&(4xoB z6~%q0+f%5yV)<#f{tDkGL@cl_d6yGf6kPJ)&*54`yGuiV6q?yCr<+Ff#U%7$K#{$^FTl}Ej-t$leoai9&c)ome?tliiD#t$$f2@ zt5=mSo2aah+CBWFDLXGkZGTaSR-5)Gdj8~o;nz7~DrhTuU#(T8SDZ~9ze}>*nw=g6 z02`u!XCE^6e0_-hPnPemxRPpPTDUld^viTAZc7eGR_Hdo;6{^3q_l>)vcF5{YLX#* zANoi(lH2$Fk}yz%N>gDmxN*0j_TwK~_dhcV(^J*W>tK_`L68_m3^>t75@%~&8wGIq z3pMl_(rIAzuqnoklfw-3Y2$Brqh1)*h`k+I3%HL~peC7RFWYsDGx<}XxU>s5TYr=kDkYk=;2Fa_^RxPQ+>ef}xBqwr zKzFRJf9G#*tMNIdZZ;PzonL*eGR)yQUw069Oq5WayX`VEFYza0;GKM_paOG3dvh#0 z>R&G&BT6`a;ZzLsolVN!TOvL^0LoTjzW$v;_pD8WtXZf_0nL27v1nV95^_lT9q;6IuVP~&>?>%Lk|43 zoXYf{Juq^C`Hyw#kLhef1?p`lw~9C(im;3)7LXH;JbW%*KrGY($|e4YeQbdMwXL{i zl%-41PNcbiTxWn7vcFD~&GoBE+8V{WR8JVgi{q9kY?QG!>2o=-?X*AhY{Ppo(rlfL z)l+yjtAoTTJ-rk3#xHX(lQy;~3QKg7%BaJXDl5O{^Qc2FAKJbO+7;WgOQO$Xb)3oDtOCZ&WYdI4FR%jDqUT&G@=RXD^kt!Y;!F}e zX@eOE#!b+1JKpvU-b(V!yPkg6eAU2knKy~$rLG*F_XFcPSL_Z`=z}4-vXe5XNYJ0; zRZk8Ai&6AcMNyRhC?GyP`pv9)zPw0A`#o)9jtBH*h`rKyQwH{A5q>PblVE$2-3Dz) zE-*HSK+SeWcKM{;#7v66*PEAYA2z9>U1p;PiYGZJQ6zsa)MGQ`aHX+w@&mB~9URQ3 z);sB?Q*D>akF)#zE>+Qe7j#tLM9i6^RfXiDggu0QB5S_kLM4XYPHzioZtVACDmxBE z%n=URzjRgl9TO)bAB&?3YXOK3V}*~gn$NoT>!UfR?j~~1i3oY6t<0^u$-<&XsUNdF zqfE^VE9Q+7(tS5cmtGgrJP&q>&r^xsRNUu$hgy*N;~Z}GTA>jS9=udO!2F&!;V}B? z)LxcjRXOSN^O%Q%PE*DOA~>|jq#kRgnDWY?BTKm9&4YB4H1^6Yq1TnbT@WI{J@MK8OOEmCAM zaY>&ci^kNt7qxHFS|oxmnw3>gm)p?aObAmQ zbf3TIwL4=m%-l(CxvNS*1UIK>9&9L$pDKrzd}XdZ9Orca^Xk_+6^}yIV@E*{<<&G# z7sqe*gAb*3LEf-{+q$m&t6Hujo{dczS2JG7Veq_+pjMo#SFW3hfh;VHL~GHfR9m%z ztO+Z@XKLnHKC2HbC*eP;cW!CnQ-54CN*P|~ih{@EWV$1b26+D@1NOFsQ4z_W03kn& z3hlx0u9#0`dY8maCVbm10BB_h-bQRsKoSsRJyTz&_|=*ft7u-5+6GWNin_DN<{aG#5XPhSUC`V2U@UZcM&B^ z&=lZZ8*)ri^Kh*Ze$1H@#fus8#%ZMx9*w~xDl1qE7(k}rl=_}7;g*@wbNLkIDv*T1 zRB^372FJpNqqrWd8zPZQ7gd;DuO*iLan6a)`pAZNYQR>M|A79~gBmz2EyPwPlPAT1 z^QywM2_uS;JFy)SpK7sth*!K9x`m5dMshrUN~i28r!%gN()O?uwY!t($cT=&N7ise zKpWA0aT_w-BuW-9+f7aj%bab-SL=c&ZF(EYIq#LR3_xQB3;-^RVqN4-IZZokNbOgf zJ~75NwTbdl`(!=n4bS+nS*IU+^+&ZCaEv2qldsTGSMu+*Txb{4n%_?*?+SIG&cDL?t^o{uv zxlJUEX(>~>$2fNcgXHPP?xbK#d4Le2qTj|q6gUG%u*}mlK<3V&EK~;;eKQ(S^x}k< zgRYCPslkhyvOl^-SnPjc{!aEACnuH9MZ3qFZ*2@azF4^t8OX0anGlLLmH4YpBy#b6 zq$X>|zujW!W}e?Y9_zx$L5;N%p&jx(3|n{3iOQ@Ik#(xq+fRxVH6#OSDa4zMIXSSC z+xdVnLB8Roqet&`=XCne?QCTmmgSO;1gDoYReRw6ht8Utwy~HJn#4OCi97+a#Rl^Q zr88Hv%Z%ElU4!|ERjt0`Su%FiKw&rntjI~)*n6M$B9jSKo_OirAvP4ZmgI_N?mS)0 zVB#c${uP3KQzS3_XOY%G%65?!2u88ggzGLEb6ezR4*kBgycf?R!0x)8c%L^K6G!CG~Y8R$7uGI8P^9&eAiI3rz zq^?TnfP@%zh}9zevH1|NO7_{AI7vJEoMueEFY{Z}8hvtE%Pgz235m&@PqaY)&6iP{ zTXLVUK1(bp?dV2AW^9RU&$A33U4Q?XlwsLs@z_SQFH(mk32<=q=}$>{FU8(tIvYE2 zl^%DM2Irrvw6^^(?n#1OwAd}?c-{NX?B5RTw`q3|ZmjInp-^<1T(~PL!F^CsXN>UZ&VD2JI1=n5<^9_>z-d|w z7P{I~XNpCI_$9P9jF>Rl-h8}!{-^S!ZVIVfF9VD!3Zj{Ix%4cSyjgk~TP4HSDMRdw zud__a9d-NHittbCC#x3@ui}!0`pa?YRH=$kv50Zv%|TMHKF!y7lGwnacmqXIhlXK+ zDRDj?O^4sem~4l?zW&x5DM7%8u!iHqM}Uy*@p=S7W%|CDoHwa6w{k_(+|Vtu9?j$G znK?=1d!^7$H##o>)XU;4tCpwXi_YgOk&nSppJLgeKDQ7Cdb%eNZuU5RLs_Stnjijr zh;7L?Wn}Cp^E{Bpdu|SeljUW+K^QDUTX~GnK%P5hD=ql__oI6QYQCb-GUOOG?N*WW za`NT`hE;XBfox9Uk4(LKR{`cJIAu!N>T-mu9Wxp?2PzHS%Q|9Y%lWgUJthRYmJx zm$%+B(gz#be~JJm5_b7v22Q;yk@DfcWIPfSJy=xjc|--~E3tURUS1@}qT7F!mF(iq zx&5;}Q$fiiiwR@=NSAhe?4X$C_p54Vn!(f@a}^l&!hsp;UBQsU-UK${oBHAu@&O_! zzE?;y;GilbXoTebisV_9e{)(;83lsUk}9FCc)+>tdQYDoiY$JoYYh+MaZrp{`E@P8 zss?4fy^Of$M8GM9?ruS>GiyI*o^&@|Ax!OLWghm|vVVl44JS-diOJ3Vw8fS;l!FRH z9Sh1a0u_Y)Sv-3h*9dnxs(V!b$d6{t)Kt^_3)DAEd8$SBq4U%tUYu}V26+{@=T5Wi zy!k`!=Iy>mW3WCWf7*0$6u#*n+OA=F84k6Z0*=+Ymz{5Zc(gQx{1pb{dF#eWCnOaD zD%{#uc{?@ldp}n8_sS52Otdo(tOE+#u2$zIL&GPW zJZvRbn(k!84T`5F6{-h?+TH7ACVNZ<1U?0*3dqR)b}k0$U(cqcoP*h0N}`z~fH*Z; zfOewSiYR+lY13gR+fV7XIYs z=ziHHN`>{Bu$ooNVzOPHry51LlfH_*f)y2dr_1kKu_wPZBPT3%k2gtXFI7^VYB(Js zZ#*fg3g4Ldj@0N-`~ITIcqS^AUi&A6qR?MQ&)@vE5e<&?-=7w}3y_k8K^xP^!YPZ% z0kr-aP@|$*3E%VDNd^sG1`Ot7PYpHVx{>8}LISP1saq=&elV%e)iu|f10IP`wB{eD z-465oJH6kZH!ofdZ|!rA=2`Jt$DAtE{qr9BX`Yl;Ds+RjcoKz*C-l^)eB14NJF>sQ z9;0Q_z4gR}aSg+_wkzoqk`TiX@Os|lgooump>>_5CkoOcK4dcZdl^az*mZed=$#8c zhiC>&4SCPdYu-BIDI`6$e^pG?5o>+R zD(fj?wO&z3pE6@S&15f)$RmEp=I*<9|2HOIJ|}<^OQ&$sWD;LlUl~3+m1x-SNxk#* zAb}lB*5meVum-oOYXbHF_l{FNzrjFb(P^?^Wq~V+O-GJhad!H}G41tio0Yw9qetvz zN$PLb`ZxIRA#B-qhL#GD=;;sO{Y7`l$K*xL*+~XHp+3tbz0X7;aX$pvnXZ4g#B- zgk@7zCkGC%=bJ~+4AQ$Fi2CmKsJF!#4_thhn(w>dIo=Ol!()7OG+$b_$UARX7)!0F z=OIm)D#h4>wBM#44QR6c@*O2IaI-)hj^p_w=p>%t*hG4`c|FdFz^u5->QqXbI&=5) zM(galEAVUcPC2$+6K$CO1z3m9QwZZ|xaU!ocCTh{lKW=k=#MY0vlmw5`aDzTc(_i| z#AHL(jM`^h;SFnw&1;k}we!pNL1FX{)^b7%7)a98B{ZA{swY@S^KeHVqY-B426AJ^ zdz!kAl4DZrkKlHU{h23ynZAI!Eyo-uC^6dR5v&AN?ImtFtE_4k0SGoK%3TXJq)=bp z+{#vP=zfE;{5n4vIk9YSP`-B%bp#PWta3m(TM?E7v=c184;0 zO%-jcZla(++GftZA;B%xM2UaT+2tT3W`>3aC-k#-x5b}=fh#cST_T(wMD93VWa9kp13v%+38I zz~gc84Yq$9c(6Gd@gr&3dD=egt&}~HOVY`qJ zCBYZ@#J$gTv5nIheh9;WHck6W^S9R3&goEeW6-x>>9KU?l@qw7k|woeacQ=Jt(A>rlZUgc^~Z z^jW@S|Db>foY@=oTF z170~0z8&w~eHQ9 zP&}9KV!Z0|`YdA!CHL~p``Qz9G?0C^M?ohpjJdjhvnu@3CwxR{YsGg9Ivkf85|V4{ zwxJGFRuxt87QR>6ov!8h9Tf%Y+)}FyR0wHU|`%0IuP?6Vc0*!@I%$alF-8G zt!kSS!nrdmtpc8k>Fb(=3BKwmu+N&y-qpN6)ihu^y$F<1QdDtnhPg+~mF`rOv}*k7 z!)RE*X87FFFv&MIl^e%*T^{Qr(h0XtY6*#INj28NlC{+t8|KxsD*QOJU%xG|6)U{$ z0lbtJ>LnumEIST|yF^G0t4ZAMQ(+^;>@;RdU8hkEJNg|eQl!7#lIk#45CD2Og|2M0 z+pO+#?c8an&wXIrUyruefU|Thf1?1<7>u0YOEx6Wt_fpiax5Fu`XM@L*CIgEW|F(8 zCuFivSbZrV1vV9Zy&?Cms+3Z1U3$5=Ga_b$__U=J+#E^W;&r?vP5*>j&N(F6k4v%v zwatqkV?r z&w^O38t*%#qqB;W*Esw8j253-7b~WvjDC*!>DfJBGqpD4?8XXKFG-8AP>IF1i?yhk zt03tHVZdpJZi)%~B)E_!5gl%D9|nuni=@eMZQ}ouJcogP3mnef?*LZaFUY+O?T|cb zas(z11YC9xjIE(dj}8UzwW0rf20exLxIWf-9+*V!?Vdc4_Zh8#IOl<4o?qA5fy~y9 zPdF%?-69yKR*}qfgN|s(ioeLD7eB{Cp`!=*F-z-U1DH;FPTH9o(x$tnGz zL*e(wrctu?Md%N@EIWAY>{V{Bg30LBPXuIM=fW==F1BGhFG$Y{IeYRbB>C-VO`-*& zu-la>L7in6VO}$UE)1%x82NYkPRWj0f6Aj|btShrzFj2X^c)F53F~PXd+1kRoWM$s z!&(FzoOg>4_e%m`yDX1ddY9zHP2S+aU-Pxs_hz;x1!O9M3yXxhwCpr`HH@AQYt|jG%xNg*J8!EkzKT%xDI}aZs?Yc2mWqT!sS4qPM|&0E*?#ZIJmXvp?{E$4 z?u307jt;FGKPk1PjdB-7XLYuu(dBUt-|zEq=BOs_y#$^6md_DiIpXhJfF7@Sm0=k0 zM}pGYm9i>odDtztG^eu2xucA;mm5i9-o(0?_bV1}9WwvDwg^rE?~yBrEp@kUC@*x0 zPjmeC-1Xij+@f^2E{MdTTOk zp(rH?5+Wgtk~4&aAQB@f2n@`ok#GR%?iT4(=~7xa&luo7+r7{GUhnzvetxbCn6>Wv zUJtPTKlsxvD&&QUNS`D5-JIq8yagQMR@MV-J9%VG!x8~?EFouNI0kw|ZgtY7P_2+*DUC-tf=g>%NYpZ}O z%_jp78{y0SAxb($ZA$XYgl_w34ll6asZcnvfxQv74+bamdDt#4Assy1GsFWQmr7~g zYbz$&X|ZHf3#$qGzDhniQCi4!7_bzJS8N#D-wE8@z< zBT^c^{dDeQl50c@_V`ti`8L6e;D-r|x&45Y$%mb-sZlC+scJDESQe zWSAfqfzO=+ObimoR=-s7?M|Vue*T$}Iz7FN@e@}BdS|qc=e3V219wwTYNK&Y+b{X1 zSe!(7H_)$4SEdGJZ>!9cV!(Lv-{@_mEZ{sTk*8&X$Z`i9w^!`57n&hCW#T~d` zE&ogVleRcPR_Y=hrF0Wr+_bMmU8}4Aj0`M8)i_a7{u)wqj1)FE9YnUEKU6LL)lC!0;8SsmrTh7G!N0jJu9fhuC3D_0KYyIRURKKgQA-k zcNO<@Ikvhdu<7BGz_p1-b@f>abG0fg;UcqBO60!Xt|>eWeFe@**%Eyi?b~uiw?iTleD$GGL9tsKe{Xp@)0HO zbq2`OhR|E~2I$rE&r~0-QKfY;DOb;Oc)JuBkro>;*Q`$Pv_q~0Djbx$Mpl!VI%k)7(?pLq<6t6XMrv|^qnZZ#xXN<;5;P@wmNK|lf$B@U zxTY6xwsOQLQt!*MM?#I-v**O?q3>78#RchebzAAjMVX)%vGq8T-5`feJ-##fYlY0c zTCzH$DjNjQP^ontW-4_o@<5?@XDK_uo1Lo4!F$~v)zJpzhd0Cp1U-jxZZF<`JPBUQ zyAO5^dp<(5@DV?Ub{E=689{nYHJ6okVnfu>0=PM6E$N9Mb5iADg zP2&s#wO5E-Z+Au#b+~g?3y0J`BElvxJx{qRpik2$_twC4Kq_kmxO%K4&3pgzj8XO0 zkQ3uNx1`X^Lbu)_XhTS1H`=`$=qj;f{M$v8828=qI~iOwjOC?9&xfUR>X6To8Ar_1 z^MQ`W=(xj`Zz#<_kHuhLUetd)#Qal&Q)-^627mvLkZ2~zS zW8o+a^1q=bUSd!^gAIPhzwmjtW0PL59Ku&^q~%@eV&AI7F4rWAfR3wVE>qX|xoU6J z+Ajc zjdfa*Qg>u9DOc@P+q~q4T|WI%R4nvv+m^+^ftTp2c+^1g@qp@@-igyD#$CEWA_Dg! zYFs%ktY%~Q1%9?V3wO`kOQe%lW?Ugmw8r}Mi07UI7p9mx%st{(i}+(3fh!_ypFTY#y#e&c4lYXDLrZU|eX{_N=Ek!h5@6nME3rx*nr-lCt&m z{W~>?zL!z1aazt5uDj$U(qBK1N_+r~LuR&~Fv% zWX6rBq(|Qa#20FAZX2ow?<%UAy9*nl@r3NQ;>BDFS5jReRmYxqawwicw>S-fDmF6vKYDGFI`!2^uwY zUg^EM?Fs#qgA!^}PA|bO)=!l<^o7Fv3}~&jSrxtkQ=hM9Bx2 ztA<-wc&D*Ck0a-w^CLe>t?xU=^H#OANcqUdv0Sf3EQTsC!m2-8UonwLHC$7P!PJt= zO5Q1q+o9zF{z*H-X&qxrkIrX>U@h#co~C%2J0pi=(Iwxbs@lG|p39}Zg?=*rI!0xR zt1vepQf0}xN~`Ct^Lbv5k+1RvZ zMWD0<-brm1auFW({1Y`yYcCcb5;Pb;Ae&Hc43}3mkLy#g$d(dv3aCAH zB;LB>Rqh?Ik%4%LHuB!-E4-+G;vfu$TFkFGesn(~jE0>(YD93^&s#7#nv92< z9PxU?-Dl7Ur+Z0OVEPRdO1<9sX5$UO^K;vz3=QO=F1}mQFFn~P+CS~6iHmL5 zMQVNt+n#qDdD(8^RYPVLF}C0*OMewCf;k#>RJ#){#BkXdGw5& zE^~oe7mjzmFxN@wHIGDMX`JqIOC3=v^p4CG>87-srp|Ux4psGJb$X5O<^r3aQDq3P@8=f#)p4BA;xGA>OTOUor}d!Z$j$I>WtV5Me;c8H=&aB)>G53 zVihU^ifY10G*&)YuO>Ewedi$0W$;7;zuu}brfc~^_{BQ=p}L+-nC*Oxswe@HVatUt#$Px6!?V4f~E10np+aS*OENJTJ=8#-OE7Hk@`0;Z@4 zUJ<#FPkzA7)ZCXitV{3OAnHifr`IP^>7irbg1Y{p#EK_$K3oO@ZZC|F1cx7!Z+et) zj2<@US$+v4D?0Ab$mEISq6 z|8CVjgv6gybfWtahi62w51nk}bs#Gunvr^x7IO`?IpyNFF`ET?^mS~B&R~*8U~%*< zJjR!M?%eaxNy=3BIQL!507MG}@DTFEEOcT8o+{!0pM(4FP5vpkf5(04Nm}{tle3U) zGfwgz6N2fQWQN66_JN-k%D?dmk*EmzEsHh8NVLEKGW@V9Ho?qdqyu-WW)cBDMAM4-90n0Wd`V4$Dvm><_?wAcUQM zBYiB`Purk4Fc`0a?X0{s9Hls^6vjtT<`r) zWevb2w0y}p$^a>nU*to{B3N{&3;c7kVs0UTOx}8-`IIdIHevGvGy_7ruJ*~MTr2fY zn#ft4-wDN}@Pvb|>Vjy~@5SoonEe^c_!ih#2}i9_FC}KeAP5178Ta0lSk_+zRwTY1 zrC;D3i)i;@a-MeG!3MB!R)$fyA7t%+HEBjc2>Yc6e|Y+hJ|0Xc{qB~0mok7Zte1KZ zLa5&f`u!T&{5RG}Q;T9V$E4!SD*?ok_xnH@u^+12m6d4y@z*udbO*$b8|7uaMI08N zUFk~Q0BYs?kNnFfQ(ys9247+Z6D=9wto*jixDx)-W!ylQ+5V}^fELx1Oi;E1u!mn- zIG+1WjG;!LcQLR9mq8k|fNpUr>)hLxMKH}a+t9q_vV{ZQk=j3cNA)0?92+i9pa>hC z7eQjhK9sIczogSfg-k@=pu`+XUg~CiK=J=?8h{dBc1O>z>! z*L7_eK?p-fqsX_@0uEFhpvx|n4k&DzhyQV1DbMG3OLPU*iE{d+;SRv8{ta(*f16U% zkGcE@Xij)0TInSiy7r!T?#FBd@ z8hET=^EWca!~cIWMsrF)Uyt=*f9y|J=gOHaqCts5Y8;+JWQ6{1a{sla$_^?1S2Z<} z`+u$}=9ZKRP(}_shqIyJr&V+|T^R100+n^0j-MlZsg$6-{V8znjrQntE%G&88IIJ; zeqpMf-p>HMJ}|LZ6$>Y!;FPcF6I-vjRt-qvb6pxhi1gtkPKI#Z()R43fQ;G;Kg0jY(93H+-gxKJ#8>QVjrJ%mMT;I;3Lkw5~B$Zo{4cNvs4ke2p`I-$dV-sylgJkme*U8SlemKdsO#tw5d!*8EPXqqf!Sqd1V&F#= zN&UF~|7be(b^?7005uJnR1|Bpd_f%sD3nKQqZ}N{E)#VVSbP)(HV_QFPW^X{BgOxQ zan#a*#}b69pi{K08E38w7*AIwV|%-tl26}}&y1sQ+S^0`aCRBdg73ZZ6i^!CPB*MM zJ)D05h-gt0JdF!i7y-PArm74&+cgD904pLGiyAu=M~*44@O0+mesDXVXMlxk&SfU+ zgbq9VU;bv#2>~Ok6s-4daL!=!T + navigator.mediaDevices + .enumerateDevices() + .then((inputs) => { + const options = [] + inputs + .filter((input) => { + return input.kind === 'videoinput' + }) + .forEach((videoInput) => { + options.push({ + value: videoInput, + label: videoInput.label, + }) + }) + return options + }) + .catch((err) => { + console.error('ERROR: No camera input found', err) + return [] + }) + const retry = () => { setGifId(null) setText('') @@ -127,6 +152,19 @@ function Create({ history }) { [WARNING_GENERIC]: , [WARNING_BROWSER]: , } + const webCamCompo = recodingInput ? ( + setWarning(WARNING_GENERIC)} + onCaptureReady={() => setIsWebcamReady(true)} + recordingInput={recodingInput} + onStopCapture={onStopCapture} + isPlaying={phase === PHASE_RECORDING} + cameraInput={recodingInput} + /> + ) : ( + + ) return ( ) : ( - setWarning(WARNING_GENERIC)} - onCaptureReady={() => setIsWebcamReady(true)} - onStopCapture={onStopCapture} - isPlaying={phase === PHASE_RECORDING} - /> + webCamCompo )} +
+ { + return 'No camera detected...' + }} + loadOptions={cameraOptions} + /> +
{isPrerecordingPhase && (