forked from xingyzt/mercator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
207 lines (194 loc) · 35.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!doctype html>
<html lang='en-us'>
<head>
<title>Mercator Studio</title>
<link rel='shortcut icon' type='image/png' href='icon.png'>
<meta charset='utf-8'>
<meta name='author' content='Xing'>
<meta name='description' content='A camera-feed-editing extension for Google Meet'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta property='og:title' content='Mercator Studio'>
<meta property='og:type' content='website'>
<meta property='og:url' content='https://x-ing.space/mercator'>
<meta property='og:description' content='A camera-feed-editing extension for Google Meet'>
<meta property='og:image' content='https://x-ing.space/mercator/icon.png'>
<style>
html{
margin: 0;
background: #eee
}
*{
box-sizing: border-box;
}
main{
margin-right: 1rem;
margin-left: auto;
width: 64ch;
max-width: calc(100vw - 2rem);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
right: 0
}
main>*{
font-weight: normal ;
width: inherit;
max-width: inherit;
margin-bottom: 1rem;
line-height: 1.4rem;
}
h1 {
margin-bottom: .4rem;
}
h2 {
margin-bottom: 2.5rem;
}
#install{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
a,button{
flex-grow: 1;
border-radius: 1ch;
border: .1rem solid #aaa;
font-family: sans-serif;
font-size: inherit;
color: black;
text-decoration: none;
padding: 1rem;
text-align: center;
transition: background 200ms;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
#install>a>svg{
margin-bottom: .5rem;
}
a:hover,button:hover{
background: white
}
#bookmarklet::after{
content: 'Bookmarklet'
}
video{
background: #ccc;
border-radius: 1rem;
width: 100%;
height: auto;
display: none;
}
#readme{
text-align: left;
white-space: pre-wrap;
padding: 0 1rem;
}
</style>
</head>
<body>
<main>
<svg width='128' height='128' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'>
<title>Logo of Mercator Filters</title>
<circle cx='64' cy='64' r='64' fill='hsl(31, 100%, 73%)'/>
<rect fill='hsl( 18, 100%, 68%)' width='96' x='16' y='0' height='128'/>
<rect fill='hsl(-10, 100%, 80%)' width='80' x='16' y='0' height='128'/>
<rect fill='hsl( 5, 90%, 72%)' width='64' x='16' y='0' height='128'/>
<rect fill='hsl( 48, 100%, 75%)' width='48' x='16' y='0' height='128'/>
<rect fill='hsl( 36, 100%, 70%)' width='32' x='16' y='0' height='128'/>
<rect fill='hsl( 20, 90%, 70%)' width='16' x='16' y='0' height='128'/>
<circle cx='64' cy='64' r='52' fill='hsl(191, 35%, 41%)'/>
<rect x='34' y='46' width='44' height='36' fill='white' rx='8' ry='8'/>
<path d='M68 64l22 -10v20z' fill='white' stroke-width='8' stroke='white' stroke-linejoin='round'/>
<desc>(C) Xing 2020.</desc>
</svg>
<h1>Mercator Studio for Google Meet</h1>
<h2>A project by Xing</h2>
<section id='install'>
<a href='https://chrome.google.com/webstore/detail/ohcmmfphdpigpccfppacepjhamgcffjh'>
<svg height='32' viewBox="1 1 176 176"><style><![CDATA[.B{clip-path:url(#C)}.C{fill:#3e2723}.D{fill-opacity:.15}.E{fill-opacity:.2}]]></style><defs><circle id="A" cx="96" cy="96" r="88"/><path id="B" d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z"/></defs><clipPath id="C"><use xlink:href="#A"/></clipPath><g class="B" transform="translate(-7 -7)"><path d="M21.97 8v108h39.4L96 56h88V8z" fill="#db4437"/><linearGradient id="D" x1="29.34" x2="81.84" y1="75.02" y2="44.35" gradientUnits="userSpaceOnUse"><stop stop-color="#a52714" stop-opacity=".6" offset="0"/><stop stop-color="#a52714" stop-opacity="0" offset=".66"/></linearGradient><path d="M21.97 8v108h39.4L96 56h88V8z" fill="url(#D)"/><path d="M62.3 115.6L22.48 47.3l-.58 1 39.54 67.8z" class="C D"/><use xlink:href="#B" fill="#0f9d58"/><linearGradient id="E" x1="110.9" x2="52.54" y1="164.5" y2="130.3" gradientUnits="userSpaceOnUse"><stop stop-color="#055524" stop-opacity=".4" offset="0"/><stop stop-color="#055524" stop-opacity="0" offset=".33"/></linearGradient><path d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z" fill="url(#E)"/><path d="M129.8 117.3l-.83-.48-38.4 67.15h1.15l38.1-66.64z" fill="#263238" class="D"/><defs><path id="F" d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z"/></defs><clipPath id="G"><use xlink:href="#F"/></clipPath><g clip-path="url(#G)"><path d="M96 56l34.65 60-38.88 68H184V56z" fill="#ffcd40"/><linearGradient id="H" x1="121.9" x2="136.6" y1="49.8" y2="114.1" gradientUnits="userSpaceOnUse"><stop stop-color="#ea6100" stop-opacity=".3" offset="0"/><stop stop-color="#ea6100" stop-opacity="0" offset=".66"/></linearGradient><path d="M96 56l34.65 60-38.88 68H184V56z" fill="url(#H)"/></g><path d="M96 56l34.65 60-38.88 68H184V56z" fill="#ffcd40"/><path d="M96 56l34.65 60-38.88 68H184V56z" fill="url(#H)"/><defs><path id="I" d="M96 56l34.65 60-38.88 68H184V56z"/></defs><clipPath id="J"><use xlink:href="#I"/></clipPath><g clip-path="url(#J)"><path d="M21.97 8v108h39.4L96 56h88V8z" fill="#db4437"/><path d="M21.97 8v108h39.4L96 56h88V8z" fill="url(#D)"/></g></g><radialGradient id="K" cx="668.2" cy="55.95" r="84.08" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop stop-color="#3e2723" stop-opacity=".2" offset="0"/><stop stop-color="#3e2723" stop-opacity="0" offset="1"/></radialGradient><g transform="translate(-7 -7)"><path d="M96 56v20.95L174.4 56z" fill="url(#K)" class="B"/><g class="B"><defs><path id="L" d="M21.97 8v40.34L61.36 116 96 56h88V8z"/></defs><clipPath id="M"><use xlink:href="#L"/></clipPath><g clip-path="url(#M)"><use xlink:href="#B" fill="#0f9d58"/><path d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z" fill="url(#E)"/></g></g></g><radialGradient id="N" cx="597.9" cy="48.52" r="78.04" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop stop-color="#3e2723" stop-opacity=".2" offset="0"/><stop stop-color="#3e2723" stop-opacity="0" offset="1"/></radialGradient><path transform="translate(-7 -7)" d="M21.97 48.45l57.25 57.24L61.36 116z" fill="url(#N)" class="B"/><radialGradient id="O" cx="671.8" cy="96.14" r="87.87" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop stop-color="#263238" stop-opacity=".2" offset="0"/><stop stop-color="#263238" stop-opacity="0" offset="1"/></radialGradient><g transform="translate(-7 -7)"><path d="M91.83 183.9l20.96-78.2 17.86 10.3z" fill="url(#O)" class="B"/><g class="B"><circle cx="96" cy="96" r="40" fill="#f1f1f1"/><circle cx="96" cy="96" r="32" fill="#4285f4"/><path d="M96 55c-22.1 0-40 17.9-40 40v1c0-22.1 17.9-40 40-40h88v-1H96z" class="C E"/><path d="M130.6 116c-6.92 11.94-19.8 20-34.6 20-14.8 0-27.7-8.06-34.6-20h-.04L8 24.48v1L61.4 117c6.92 11.94 19.8 20 34.6 20 14.8 0 27.68-8.05 34.6-20h.05v-1h-.06z" fill="#fff" fill-opacity=".1"/><path d="M97 56c-.17 0-.33.02-.5.03C118.36 56.3 136 74.08 136 96s-17.64 39.7-39.5 39.97c.17 0 .33.03.5.03 22.1 0 40-17.9 40-40s-17.9-40-40-40z" opacity=".1" class="C"/><path d="M131 117.3c3.4-5.88 5.37-12.68 5.37-19.96a39.87 39.87 0 0 0-1.87-12.09c.95 3.42 1.5 7 1.5 10.73 0 7.28-1.97 14.08-5.37 19.96l.02.04-38.88 68h1.16L131 117.3z" fill="#fff" class="E"/><path d="M96 9c48.43 0 87.72 39.13 88 87.5 0-.17.01-.33.01-.5 0-48.6-39.4-88-88-88S8 47.4 8 96c0 .17.01.33.01.5C8.28 48.13 47.57 9 96 9z" fill="#fff" class="E"/><path d="M96 183c48.43 0 87.72-39.13 88-87.5 0 .17.01.33.01.5 0 48.6-39.4 88-88 88S8 144.6 8 96c0-.17.01-.33.01-.5.27 48.37 39.56 87.5 88 87.5z" class="C D"/></g></g></svg>
Chrome Web Store
</a>
<a href='https://addons.mozilla.org/en-US/firefox/addon/mercator-studio/'>
<svg height='32' viewBox="0 0 87.418564 81.96698"> <defs id="defs978"> <linearGradient gradientTransform="translate(3.7,-0.0040855)" gradientUnits="userSpaceOnUse" y2="74.468002" x2="6.447" y1="12.393" x1="70.786003" id="a"> <stop id="stop834" stop-color="#fff44f" offset=".048" /> <stop id="stop836" stop-color="#ffe847" offset=".111" /> <stop id="stop838" stop-color="#ffc830" offset=".225" /> <stop id="stop840" stop-color="#ff980e" offset=".368" /> <stop id="stop842" stop-color="#ff8b16" offset=".401" /> <stop id="stop844" stop-color="#ff672a" offset=".462" /> <stop id="stop846" stop-color="#ff3647" offset=".534" /> <stop id="stop848" stop-color="#e31587" offset=".705" /> </linearGradient> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(7978.7,8523.9959)" r="80.796997" cy="-8515.1211" cx="-7907.187" id="b"> <stop id="stop851" stop-color="#ffbd4f" offset=".129" /> <stop id="stop853" stop-color="#ffac31" offset=".186" /> <stop id="stop855" stop-color="#ff9d17" offset=".247" /> <stop id="stop857" stop-color="#ff980e" offset=".283" /> <stop id="stop859" stop-color="#ff563b" offset=".403" /> <stop id="stop861" stop-color="#ff3750" offset=".467" /> <stop id="stop863" stop-color="#f5156c" offset=".71" /> <stop id="stop865" stop-color="#eb0878" offset=".782" /> <stop id="stop867" stop-color="#e50080" offset=".86" /> </radialGradient> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(7978.7,8523.9959)" r="80.796997" cy="-8482.0889" cx="-7936.7109" id="c"> <stop id="stop870" stop-color="#960e18" offset=".3" /> <stop id="stop872" stop-opacity=".74" stop-color="#b11927" offset=".351" /> <stop id="stop874" stop-opacity=".343" stop-color="#db293d" offset=".435" /> <stop id="stop876" stop-opacity=".094" stop-color="#f5334b" offset=".497" /> <stop id="stop878" stop-opacity="0" stop-color="#ff3750" offset=".53" /> </radialGradient> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(7978.7,8523.9959)" r="58.534" cy="-8533.457" cx="-7926.9702" id="d"> <stop id="stop881" stop-color="#fff44f" offset=".132" /> <stop id="stop883" stop-color="#ffdc3e" offset=".252" /> <stop id="stop885" stop-color="#ff9d12" offset=".506" /> <stop id="stop887" stop-color="#ff980e" offset=".526" /> </radialGradient> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(7978.7,8523.9959)" r="38.471001" cy="-8460.9844" cx="-7945.6479" id="e"> <stop id="stop890" stop-color="#3a8ee6" offset=".353" /> <stop id="stop892" stop-color="#5c79f0" offset=".472" /> <stop id="stop894" stop-color="#9059ff" offset=".669" /> <stop id="stop896" stop-color="#c139e6" offset="1" /> </radialGradient> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.972,-0.235,0.275,1.138,10095.002,7833.7939)" r="20.396999" cy="-8491.5459" cx="-7935.6201" id="f"> <stop id="stop899" stop-opacity="0" stop-color="#9059ff" offset=".206" /> <stop id="stop901" stop-opacity=".064" stop-color="#8c4ff3" offset=".278" /> <stop id="stop903" stop-opacity=".45" stop-color="#7716a8" offset=".747" /> <stop id="stop905" stop-opacity=".6" stop-color="#6e008b" offset=".975" /> </radialGradient> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(7978.7,8523.9959)" r="27.676001" cy="-8518.4268" cx="-7937.731" id="g"> <stop id="stop908" stop-color="#ffe226" offset="0" /> <stop id="stop910" stop-color="#ffdb27" offset=".121" /> <stop id="stop912" stop-color="#ffc82a" offset=".295" /> <stop id="stop914" stop-color="#ffa930" offset=".502" /> <stop id="stop916" stop-color="#ff7e37" offset=".732" /> <stop id="stop918" stop-color="#ff7139" offset=".792" /> </radialGradient> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(7978.7,8523.9959)" r="118.081" cy="-8535.9814" cx="-7915.9771" id="h"> <stop id="stop921" stop-color="#fff44f" offset=".113" /> <stop id="stop923" stop-color="#ff980e" offset=".456" /> <stop id="stop925" stop-color="#ff5634" offset=".622" /> <stop id="stop927" stop-color="#ff3647" offset=".716" /> <stop id="stop929" stop-color="#e31587" offset=".904" /> </radialGradient> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.105,0.995,-0.653,0.069,-4680.304,8470.1869)" r="86.499001" cy="-8522.8594" cx="-7927.165" id="i"> <stop id="stop932" stop-color="#fff44f" offset="0" /> <stop id="stop934" stop-color="#ffe847" offset=".06" /> <stop id="stop936" stop-color="#ffc830" offset=".168" /> <stop id="stop938" stop-color="#ff980e" offset=".304" /> <stop id="stop940" stop-color="#ff8b16" offset=".356" /> <stop id="stop942" stop-color="#ff672a" offset=".455" /> <stop id="stop944" stop-color="#ff3647" offset=".57" /> <stop id="stop946" stop-color="#e31587" offset=".737" /> </radialGradient> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(7978.7,8523.9959)" r="73.720001" cy="-8508.1758" cx="-7938.3828" id="j"> <stop id="stop949" stop-color="#fff44f" offset=".137" /> <stop id="stop951" stop-color="#ff980e" offset=".48" /> <stop id="stop953" stop-color="#ff5634" offset=".592" /> <stop id="stop955" stop-color="#ff3647" offset=".655" /> <stop id="stop957" stop-color="#e31587" offset=".904" /> </radialGradient> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="translate(7978.7,8523.9959)" r="80.685997" cy="-8503.8613" cx="-7918.9229" id="k"> <stop id="stop960" stop-color="#fff44f" offset=".094" /> <stop id="stop962" stop-color="#ffe141" offset=".231" /> <stop id="stop964" stop-color="#ffaf1e" offset=".509" /> <stop id="stop966" stop-color="#ff980e" offset=".626" /> </radialGradient> <linearGradient gradientTransform="translate(3.7,-0.0040855)" gradientUnits="userSpaceOnUse" y2="66.806" x2="15.267" y1="12.061" x1="70.013" id="l"> <stop id="stop969" stop-opacity=".8" stop-color="#fff44f" offset=".167" /> <stop id="stop971" stop-opacity=".634" stop-color="#fff44f" offset=".266" /> <stop id="stop973" stop-opacity=".217" stop-color="#fff44f" offset=".489" /> <stop id="stop975" stop-opacity="0" stop-color="#fff44f" offset=".6" /> </linearGradient> </defs> <path style="fill:url(#a)" id="path980" d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 l 0.007,0.065 c -4.382,-10.925 -11.813,-15.33 -17.882,-24.9220005 -0.307,-0.485 -0.614,-0.971 -0.913,-1.484 -0.171,-0.293 -0.308,-0.557 -0.427,-0.8 a 7.053,7.053 0 0 1 -0.578,-1.535 0.1,0.1 0 0 0 -0.088,-0.1 0.138,0.138 0 0 0 -0.073,0 c -0.005,0 -0.013,0.009 -0.019,0.011 -0.006,0.002 -0.019,0.011 -0.028,0.015 l 0.015,-0.026 c -9.735,5.7 -13.038,16.2520005 -13.342,21.5300005 a 19.387,19.387 0 0 0 -10.666,4.111 11.587,11.587 0 0 0 -1,-0.758 17.968,17.968 0 0 1 -0.109,-9.473 28.705,28.705 0 0 0 -9.329,7.21 h -0.018 c -1.536,-1.947 -1.428,-8.367 -1.34,-9.708 a 6.928,6.928 0 0 0 -1.294,0.687 28.225,28.225 0 0 0 -3.788,3.245 33.845,33.845 0 0 0 -3.623,4.347 v 0.006 -0.007 a 32.733,32.733 0 0 0 -5.2,11.743 l -0.052,0.256 c -0.073,0.341 -0.336,2.049 -0.381,2.42 0,0.029 -0.006,0.056 -0.009,0.085 A 36.937,36.937 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z m -44.67,30.338 c 0.181,0.087 0.351,0.181 0.537,0.264 l 0.027,0.017 q -0.282,-0.135 -0.564,-0.281 z m 8.878,-23.376 z m 31.952,-4.934 v -0.037 l 0.007,0.041 z" /> <path style="fill:url(#b)" id="path982" d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 v 0.037 l 0.007,0.041 a 35.1,35.1 0 0 1 -1.206,26.158 c -4.442,9.531 -15.194,19.3 -32.024,18.825 -18.185,-0.515 -34.2,-14.009 -37.194,-31.683 -0.545,-2.787 0,-4.2 0.274,-6.465 A 28.876,28.876 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z" /> <path style="fill:url(#c)" id="path984" d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 v 0.037 l 0.007,0.041 a 35.1,35.1 0 0 1 -1.206,26.158 c -4.442,9.531 -15.194,19.3 -32.024,18.825 -18.185,-0.515 -34.2,-14.009 -37.194,-31.683 -0.545,-2.787 0,-4.2 0.274,-6.465 A 28.876,28.876 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z" /> <path style="fill:url(#d)" id="path986" d="m 60.782,31.382915 c 0.084,0.059 0.162,0.118 0.241,0.177 a 21.1,21.1 0 0 0 -3.6,-4.695 C 45.377,14.816915 54.266,0.7419145 55.765,0.0269145 l 0.015,-0.022 c -9.735,5.7 -13.038,16.2520005 -13.342,21.5300005 0.452,-0.031 0.9,-0.069 1.362,-0.069 a 19.56,19.56 0 0 1 16.982,9.917 z" /> <path style="fill:url(#e)" id="path988" d="m 43.825,33.788915 c -0.064,0.964 -3.47,4.289 -4.661,4.289 -11.021,0 -12.81,6.667 -12.81,6.667 0.488,5.614 4.4,10.238 9.129,12.684 0.216,0.112 0.435,0.213 0.654,0.312 q 0.569,0.252 1.138,0.466 a 17.235,17.235 0 0 0 5.043,0.973 c 19.317,0.906 23.059,-23.1 9.119,-30.066 a 13.38,13.38 0 0 1 9.345,2.269 19.56,19.56 0 0 0 -16.982,-9.917 c -0.46,0 -0.91,0.038 -1.362,0.069 a 19.387,19.387 0 0 0 -10.666,4.111 c 0.591,0.5 1.258,1.168 2.663,2.553 2.63,2.591 9.375,5.275 9.39,5.59 z" /> <path style="fill:url(#f)" id="path990" d="m 43.825,33.788915 c -0.064,0.964 -3.47,4.289 -4.661,4.289 -11.021,0 -12.81,6.667 -12.81,6.667 0.488,5.614 4.4,10.238 9.129,12.684 0.216,0.112 0.435,0.213 0.654,0.312 q 0.569,0.252 1.138,0.466 a 17.235,17.235 0 0 0 5.043,0.973 c 19.317,0.906 23.059,-23.1 9.119,-30.066 a 13.38,13.38 0 0 1 9.345,2.269 19.56,19.56 0 0 0 -16.982,-9.917 c -0.46,0 -0.91,0.038 -1.362,0.069 a 19.387,19.387 0 0 0 -10.666,4.111 c 0.591,0.5 1.258,1.168 2.663,2.553 2.63,2.591 9.375,5.275 9.39,5.59 z" /> <path style="fill:url(#g)" id="path992" d="m 29.965,24.356915 c 0.314,0.2 0.573,0.374 0.8,0.531 a 17.968,17.968 0 0 1 -0.109,-9.473 28.705,28.705 0 0 0 -9.329,7.21 c 0.189,-0.005 5.811,-0.106 8.638,1.732 z" /> <path style="fill:url(#h)" id="path994" d="m 5.354,42.158915 c 2.991,17.674 19.009,31.168 37.194,31.683 16.83,0.476 27.582,-9.294 32.024,-18.825 a 35.1,35.1 0 0 0 1.206,-26.158 v -0.037 c 0,-0.029 -0.006,-0.046 0,-0.037 l 0.007,0.065 c 1.375,8.977 -3.191,17.674 -10.329,23.555 l -0.022,0.05 c -13.908,11.327 -27.218,6.834 -29.912,5 q -0.282,-0.135 -0.564,-0.281 c -8.109,-3.876 -11.459,-11.264 -10.741,-17.6 a 9.953,9.953 0 0 1 -9.181,-5.775 14.618,14.618 0 0 1 14.249,-0.572 19.3,19.3 0 0 0 14.552,0.572 c -0.015,-0.315 -6.76,-3 -9.39,-5.59 -1.405,-1.385 -2.072,-2.052 -2.663,-2.553 a 11.587,11.587 0 0 0 -1,-0.758 c -0.23,-0.157 -0.489,-0.327 -0.8,-0.531 -2.827,-1.838 -8.449,-1.737 -8.635,-1.732 h -0.018 c -1.536,-1.947 -1.428,-8.367 -1.34,-9.708 a 6.928,6.928 0 0 0 -1.294,0.687 28.225,28.225 0 0 0 -3.788,3.245 33.845,33.845 0 0 0 -3.638,4.337 v 0.006 -0.007 a 32.733,32.733 0 0 0 -5.2,11.743 c -0.019,0.079 -1.396,6.099 -0.717,9.221 z" /> <path style="fill:url(#i)" id="path996" d="m 57.425,26.864915 a 21.1,21.1 0 0 1 3.6,4.7 c 0.213,0.161 0.412,0.321 0.581,0.476 8.787,8.1 4.183,19.55 3.84,20.365 7.138,-5.881 11.7,-14.578 10.329,-23.555 -4.384,-10.93 -11.815,-15.335 -17.884,-24.9270005 -0.307,-0.485 -0.614,-0.971 -0.913,-1.484 -0.171,-0.293 -0.308,-0.557 -0.427,-0.8 a 7.053,7.053 0 0 1 -0.578,-1.535 0.1,0.1 0 0 0 -0.088,-0.1 0.138,0.138 0 0 0 -0.073,0 c -0.005,0 -0.013,0.009 -0.019,0.011 -0.006,0.002 -0.019,0.011 -0.028,0.015 -1.499,0.711 -10.388,14.7860005 1.66,26.8340005 z" /> <path style="fill:url(#j)" id="path998" d="m 61.6,32.035915 c -0.169,-0.155 -0.368,-0.315 -0.581,-0.476 -0.079,-0.059 -0.157,-0.118 -0.241,-0.177 a 13.38,13.38 0 0 0 -9.345,-2.269 c 13.94,6.97 10.2,30.972 -9.119,30.066 a 17.235,17.235 0 0 1 -5.043,-0.973 q -0.569,-0.213 -1.138,-0.466 c -0.219,-0.1 -0.438,-0.2 -0.654,-0.312 l 0.027,0.017 c 2.694,1.839 16,6.332 29.912,-5 l 0.022,-0.05 c 0.347,-0.81 4.951,-12.263 -3.84,-20.36 z" /> <path style="fill:url(#k)" id="path1000" d="m 26.354,44.744915 c 0,0 1.789,-6.667 12.81,-6.667 1.191,0 4.6,-3.325 4.661,-4.289 a 19.3,19.3 0 0 1 -14.552,-0.572 14.618,14.618 0 0 0 -14.249,0.572 9.953,9.953 0 0 0 9.181,5.775 c -0.718,6.337 2.632,13.725 10.741,17.6 0.181,0.087 0.351,0.181 0.537,0.264 -4.733,-2.445 -8.641,-7.069 -9.129,-12.683 z" /> <path style="fill:url(#l)" id="path1002" d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 l 0.007,0.065 c -4.382,-10.925 -11.813,-15.33 -17.882,-24.9220005 -0.307,-0.485 -0.614,-0.971 -0.913,-1.484 -0.171,-0.293 -0.308,-0.557 -0.427,-0.8 a 7.053,7.053 0 0 1 -0.578,-1.535 0.1,0.1 0 0 0 -0.088,-0.1 0.138,0.138 0 0 0 -0.073,0 c -0.005,0 -0.013,0.009 -0.019,0.011 -0.006,0.002 -0.019,0.011 -0.028,0.015 l 0.015,-0.026 c -9.735,5.7 -13.038,16.2520005 -13.342,21.5300005 0.452,-0.031 0.9,-0.069 1.362,-0.069 a 19.56,19.56 0 0 1 16.982,9.917 13.38,13.38 0 0 0 -9.345,-2.269 c 13.94,6.97 10.2,30.972 -9.119,30.066 a 17.235,17.235 0 0 1 -5.043,-0.973 q -0.569,-0.213 -1.138,-0.466 c -0.219,-0.1 -0.438,-0.2 -0.654,-0.312 l 0.027,0.017 q -0.282,-0.135 -0.564,-0.281 c 0.181,0.087 0.351,0.181 0.537,0.264 -4.733,-2.446 -8.641,-7.07 -9.129,-12.684 0,0 1.789,-6.667 12.81,-6.667 1.191,0 4.6,-3.325 4.661,-4.289 -0.015,-0.315 -6.76,-3 -9.39,-5.59 -1.405,-1.385 -2.072,-2.052 -2.663,-2.553 a 11.587,11.587 0 0 0 -1,-0.758 17.968,17.968 0 0 1 -0.109,-9.473 28.705,28.705 0 0 0 -9.329,7.21 h -0.018 c -1.536,-1.947 -1.428,-8.367 -1.34,-9.708 a 6.928,6.928 0 0 0 -1.294,0.687 28.225,28.225 0 0 0 -3.788,3.245 33.845,33.845 0 0 0 -3.623,4.347 v 0.006 -0.007 a 32.733,32.733 0 0 0 -5.2,11.743 l -0.052,0.256 c -0.073,0.341 -0.4,2.073 -0.447,2.445 0,0.028 0,-0.029 0,0 A 45.094,45.094 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z m -3.845,1.991 0.007,0.041 z" /> </svg>
Firefox Addons
</a>
<a href='https://greasyfork.org/en/scripts/406944'>
<svg height='32' viewBox="0 0 96 96"> <circle fill="#000" r="48" cy="48" cx="48"/> <g id="text-group"><path fill="#fff" d=" M10 5h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18 M10 25h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18 M10 45h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18 M10 65h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18 M10 85h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18m10 0h2v18h-2v-18 "/></g> <g id="fork-group"><path fill="#000" d="M20 16l62 62l-8 8l-62-62z"/><path fill="#fff" d="M18 18l60 60l-4 4l-60-60z"/></g> </svg>
Greasyfork Scripts
</a>
<a id='bookmarklet' href='javascript:!async function(){"use strict";const t=document.createElement("aside"),e=t.attachShadow({mode:"open"}),n=navigator.userAgent.includes("Firefox"),r=document.createElement("main");r.addEventListener("click",t=>{r.classList.contains("focus")||t.target===a||r.classList.add("focus")});const a=document.createElement("button");a.textContent="↑ collapse ↑",a.id="collapse",a.addEventListener("click",()=>{r.classList.remove("focus")});const i=document.createElement("button");i.id="minimize",i.title="toggle super tiny mode",i.addEventListener("click",t=>{t.stopPropagation(),r.classList.toggle("minimize")});const o=document.createElement("form"),s=document.createElement("style"),l=`"Google Sans", Roboto, RobotDraft, Helvetica, sans-serif, serif`;s.textContent=`* {box-sizing: border-box;transition: all 200ms;}*:not(input) {user-select: none;}@media (prefers-reduced-motion) {* {transition: all 0s;}}:focus {outline: 0;}main {z-index: 99999;position: fixed;left: 0;top: 0;width: 480px;max-width: 100vw;height: auto;min-height: 100vh;display: flex;flex-direction: column;justify-content: space-between;background: white;transform: translateY(calc(-100% + 3rem));box-shadow: 0 .1rem .25rem #0004;border-radius: 0 0 .75rem 0;padding: 1rem 1rem 0 1rem;overflow: hidden;font-family: ${l};font-size: 1rem;cursor: pointer;}button{font-family: inherit;font-size: .8rem;}main #collapse {background: white;cursor: pointer;margin-bottom: .5rem;}main.focus {transform: none;border-radius: 0;height: 100vh;padding: 1rem;cursor: default;overflow: hidden scroll;}main.focus #minimize{display: none;}main.minimize {width: 1rem;padding-right: 0;}#minimize {font-family: inherit;font-size: .5rem;font-weight: bold;color: #444;margin-left: -1rem;flex: 0 0 1rem;width: 1rem;text-align: center;border: 0;background: white;cursor: pointer;overflow-wrap: anywhere;}#minimize::before{content: "◀";transition: inherit;}#minimize:hover::before,.minimize #minimize::before{margin-left: -2px;}.minimize #minimize::before{content: "▶"}.minimize #minimize:hover::before{margin-left: 0;}#previews {margin-top: 1rem;height: 3rem;display: flex;}#previews>video,#previews>canvas {height: 100%;width: auto;background-image: linear-gradient(90deg,hsl( 18, 100%, 68%) 16.7%,hsl(-10, 100%, 80%) 16.7%,hsl(-10, 100%, 80%) 33.3%,hsl( 5, 90%, 72%) 33.3%,hsl( 5, 90%, 72%) 50%,hsl( 48, 100%, 75%) 50%,hsl( 48, 100%, 75%) 66.7%,hsl( 36, 100%, 70%) 66.7%,hsl( 36, 100%, 70%) 83.3%,hsl( 20, 90%, 70%) 83.3%);margin-right: 1rem;}#previews>h1 {flex-grow: 1;font-size: 1rem;font-weight: normal;text-align: center;color: #444;line-height: 1.5rem;}:hover>#previews>h1 {transform: translateY(.1rem); /* Tiny nudge downwards */}.focus>#previews>h1 {display: none;}.focus>#previews {height: auto;}.focus>#previews>* {height: auto;width: calc(50% - .5rem);}#presets,label {display: flex;justify-content: space-between;align-items: center;}#presets>* {border: 0;background: transparent;flex-grow: 1;}#presets>:first-child {border-radius: 100px 0 0 100px;}#presets>:last-child {border-radius: 0 100px 100px 0;}label {height: 2rem;}label>*{width: calc(100% - 6.5rem);}label>*,#collapse {height: 1.5rem;border-radius: 0.75rem;border: 0.25rem solid lightgray;}label>:hover,#collapse:hover {border: 0.25rem solid gray;}#presets>:hover {background: #0003;}#presets>:focus {background: black;color: white;}#presets:focus-within,#collapse:focus,label>:focus {border-color: black;}textarea {text-align: center;font-family: inherit;font-weight: bold;resize: none;line-height: 1;}input[type=range] {-webkit-appearance: none;--gradient: transparent, transparent;--rainbow: hsl(0, 80%, 75%), hsl(30, 80%, 75%), hsl(60, 80%, 75%), hsl(90, 80%, 75%), hsl(120, 80%, 75%), hsl(150, 80%, 75%), hsl(180, 80%, 75%), hsl(210, 80%, 75%), hsl(240, 80%, 75%), hsl(270, 80%, 75%), hsl(300, 80%, 75%), hsl(330, 80%, 75%);background: linear-gradient(90deg, var(--gradient)), linear-gradient(90deg, var(--rainbow));}input[type=range]::-webkit-slider-thumb {-webkit-appearance: none;background: white;width: 1rem;height: 1rem;border: 0.25rem solid black;border-radius: 0.5rem;}input[type=range]:focus::-webkit-slider-thumb {border-color: white;background: black;}input#exposure,input#fog,input#vignette {--gradient: black, #8880, white}input#contrast {--gradient: gray, #8880}input#temperature {--gradient: #88f, #8880, #ff8}input#tint {--gradient: #f8f, #8880, #8f8}input#sepia {--gradient: #8880, #aa8}input#hue,input#rotate {background: linear-gradient(90deg, hsl(0, 80%, 75%), hsl(60, 80%, 75%), hsl(120, 80%, 75%), hsl(180, 80%, 75%), hsl(240, 80%, 75%), hsl(300, 80%, 75%), hsl(0, 80%, 75%), hsl(60, 80%, 75%), hsl(120, 80%, 75%), hsl(180, 80%, 75%), hsl(240, 80%, 75%), hsl(300, 80%, 75%), hsl(0, 80%, 75%))}input#saturate {--gradient: gray, #8880 50%, blue, magenta}input#blur {--gradient: #8880, gray}input#scale,input#x,input#y,input#pillarbox,input#letterbox {--gradient: black, white}`,o.append(s);const c=JSON.parse(window.localStorage.getItem("mercator-studio-values")),d=Object.fromEntries("exposure,contrast,temperature,tint,sepia,hue,saturate,blur,fog,vignette,rotate,scale,x,y,pillarbox,letterbox,text".split(",").map(t=>{let e;if("text"==t?(e=document.createElement("textarea")).placeholder="🌈 Write text here 🌦️":((e=document.createElement("input")).type="range",e.min=["blur","sepia","scale","pillarbox","letterbox"].includes(t)?0:-1,e.max=1,e.step=1e-5,e.value=0),e.classList.add("input"),c&&(e.value=c[t]),!["temperature","tint"].includes(t)||!n){let n=document.createElement("label");n.textContent=e.id=t,o.append(n),n.append(e)}return[t,e]})),u=Object.fromEntries(Object.entries(d).map(t=>[t[0],t[1].valueAsNumber||t[1].value]));function m(t,e){u[t.id]=t.value=e,window.localStorage.setItem("mercator-studio-values",JSON.stringify(u))}o.addEventListener("wheel",t=>{if("range"!==t.target.type)return;t.preventDefault();const e=t.target,n=e.getBoundingClientRect().width,r=-t.deltaX,a=t.deltaY,i=(Math.abs(r)>Math.abs(a)?r:a)/n,o=e.max-e.min;m(e,e.valueAsNumber+i*o)}),o.addEventListener("contextmenu",t=>{"range"===t.target.type&&(t.preventDefault(),m(t.target,0))}),o.addEventListener("input",t=>{const e=t.target;m(e,"text"===e.id?(e.value+"").replace(/\\sqrt/g,"√").replace(/\\pm/g,"±").replace(/\imes/g,"×").replace(/\\cdot/g,"·").replace(/\\over/g,"∕").replace(/(\^|\_)(\d+)/g,(t,e,n)=>n.split("").map(t=>String.fromCharCode(t.charCodeAt(0)+("_"===e?8272:"1"===t?136:"23".includes(t)?128:8256))).join("")):e.valueAsNumber)});const p=document.createElement("label"),h=document.createElement("div");h.id="presets";const g="reset,concorde,mono,stucco,matcha,deepfry".split(",").map(t=>{let e=document.createElement("button");return e.textContent=e.id=t,e});p.textContent="presets",h.append(...g),p.append(h),p.addEventListener("click",t=>{t.preventDefault();const e=function(t){switch(t){case"concorde":return{contrast:.1,temperature:-.25,tint:-.05,saturate:.2};case"mono":return{exposure:.1,contrast:-.1,sepia:.8,saturate:-1,vignette:-.5};case"stucco":return{contrast:-.1,tint:.1,sepia:.25,saturate:.25,fog:.1};case"matcha":return{exposure:.1,tint:-.75,sepia:1,hue:.2,vignette:.3,fog:.3};case"deepfry":return{contrast:1,saturate:.5}}}(t.target.id);Object.values(d).forEach(t=>{m(t,"text"===t.id?"":e&&e[t.id]||0)})});const f="http://www.w3.org/2000/svg",b=document.createElementNS(f,"svg"),v=document.createElementNS(f,"filter");v.id="filter";const x=document.createElementNS(f,"feComponentTransfer"),w=Object.fromEntries(["r","g","b"].map(t=>{const e=document.createElementNS(f,"feFunc"+t.toUpperCase());return e.setAttribute("type","table"),e.setAttribute("tableValues","0 1"),[t,e]}));x.append(...Object.values(w)),v.append(x),b.append(v);const y=document.createElement("div");y.id="previews";const E=document.createElement("video");E.setAttribute("playsinline",""),E.setAttribute("autoplay",""),E.setAttribute("muted","");const k=document.createElement("canvas"),S=document.createElement("h1");function M(t,e){return(t+1)**e}function z(t){return Array(32).fill(0).map((e,n)=>Math.pow(n/31,2**t)).join(" ")}function A(t){return 100*t+"%"}S.textContent="↓ Mercator Studio ↓",y.append(i,E,k,S),o.append(p),r.append(a,o,y),e.append(r,b),document.body.append(t);const $=8;class C extends MediaStream{constructor(t){super(t),E.srcObject=t;const e=t.getVideoTracks()[0].getSettings(),r=e.width,a=e.height,i=[r/2,a/2];k.width=r,k.height=a;const o=k.getContext("2d");let s=E.currentTime;o.textAlign="center",o.textBaseline="middle",function t(){if(!E.srcObject||s!=E.currentTime){s=E.currentTime,o.clearRect(0,0,r,a),d.hue.value%=1,d.rotate.value%=1;let t=u,e=A(M(t.exposure,2)),c=A(M(t.contrast,3)),m=n?0:t.temperature,p=n?0:t.tint,h=A(t.sepia),g=360*t.hue+"deg",f=A($**t.saturate),b=t.blur*r/16+"px",v=t.fog,x=t.vignette,y=2*t.rotate*Math.PI,k=M(t.scale,2),S=t.x*r,C=t.y*a,j=t.pillarbox*r/2,L=t.letterbox*a/2,R=t.text.split("");if(w.r.setAttribute("tableValues",z(p/2-m)),w.g.setAttribute("tableValues",z(-p)),w.b.setAttribute("tableValues",z(m+p/2)),o.filter=`brightness(${e})contrast(${c})${"url(#filter)".repeat(Boolean(m||p))}sepia(${h})hue-rotate(${g})saturate(${f})blur(${b})`,o.translate(...i),y&&o.rotate(y),k-1&&o.scale(k,k),(S||C)&&o.translate(S,C),o.translate(-r/2,-a/2),E.srcObject?o.drawImage(E,0,0,r,a):"18, 100%, 68%; -10,100%,80%; 5, 90%, 72%; 48, 100%, 75%; 36, 100%, 70%; 20, 90%, 70%".split(";").forEach((t,e)=>{o.fillStyle=`hsl(${t})`,o.fillRect(e*r/6,0,r/6,a)}),o.setTransform(1,0,0,1,0,0),o.filter="brightness(1)",v){let t=100*Math.sign(v),e=Math.abs(v);o.fillStyle=`hsla(0,0%,${t}%,${e})`,o.fillRect(0,0,r,a)}if(x){let t=100*Math.sign(x),e=Math.abs(x),n=o.createRadialGradient(...i,0,...i,Math.sqrt((r/2)**2+(a/2)**2));n.addColorStop(0,`hsla(0,0%,${t}%,0`),n.addColorStop(1,`hsla(0,0%,${t}%,${e}`),o.fillStyle=n,o.fillRect(0,0,r,a)}if(j&&(o.clearRect(0,0,j,a),o.clearRect(r,0,-j,a)),L&&(o.clearRect(0,0,r,L),o.clearRect(0,a,r,-L)),R){const t=.9*(r-2*j),e=.9*(a-2*L);o.font=`bold ${t}px ${l}`;let n=o.measureText("0"),s=(n.width,n.actualBoundingBoxAscent+n.actualBoundingBoxDescent),c=R.reduce((t,e)=>Math.max(t,o.measureText(e).width),0);const d=Math.min(t**2/c,e**2/s/R.length);o.font=`bold ${d}px ${l}`,n=o.measureText("0"),s=1.5*(n.actualBoundingBoxAscent+n.actualBoundingBoxDescent),o.lineWidth=d/8,o.strokeStyle="black",o.fillStyle="white",R.forEach((t,e)=>{let n=i[0],r=i[1]+s*(e-R.length/2+.5);o.strokeText(t,n,r),o.fillText(t,n,r)})}}requestAnimationFrame(t)}();const c=k.captureStream(30);return c.addEventListener("inactive",()=>{t.getTracks().forEach(t=>{t.stop()}),o.clearRect(0,0,r,a),E.srcObject=null}),c}}MediaDevices.prototype.old_getUserMedia=MediaDevices.prototype.getUserMedia,MediaDevices.prototype.getUserMedia=async function(t){return t&&t.video&&!t.audio?new C(await navigator.mediaDevices.old_getUserMedia(t)):navigator.mediaDevices.old_getUserMedia(t)}}();'>
<svg height='32' viewBox="2 2 20 20"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" fill="#444"/></svg>
<span hidden>Mercator Studio</span>
</a>
</section>
<button id='play-video'>Test it out! <noscript>(requires JavaScript)</noscript></button>
<video width='800' height='450'></video>
<section id='readme'>
Mercator Studio gives you fine control over your appearance on Google Meet.
Write text & emoji in front of your face:
· Auto-adjusts size to fit any length of text onto the screen.
· Auto-converts \sqrt to √, \times to ×, \cdot to ·, \pm to ±, ^number to ¹², and _number to ₄₂
Precisely adjust lighting and colors:
· Exposure & Contrast
· Temperature & Tint
· Hue & Saturation
· Sepia & Blur
· Fog & Vignette
Move the focus to where you want it:
· Rotate & Scale
· Horizontal & Vertical Translate
· Pillarbox & Letterbox Crop
Somewhat nice presets:
· Concorde
· Mono
· Stucco
· Matcha
· Deepfry
Scroll or drag the sliders to adjust, and right click on them to reset.
Changelog:
· 1.15.0 Added toggle to super tiny mode.
· 1.14.1 Added math auto-convert.
· 1.13.3 Preserve values across sessions.
· 1.12.0 Luminance-preserving temperature & tint.
· 1.11.0 Multiline text input. Rebranded as Mercator Studio for Google Meet.
· 1.10.8 Right click to individually reset; Text scales correctly.
· 1.10.7 Turns off camera in sync; Partial Firefox support.
· 1.10.5 Added scroll input for the range sliders; Increased max blur.
· 1.10.4 UI color & accessibility tweaks.
· 1.10.0 Changed to click to open panel; Added support for Firefox.
· 1.9.0 Added text & emoji input.
· 1.8.0 Added presets; Matched UI with material design.
· 1.7.1 Fixed problem with collapsible UI.
· 1.7.0 Added color balance tools and refined UI.
· 1.6.0 Added fog.
· 1.5.0 Added vignettes.
· 1.4.0 Converted to Chrome extension.
Source code: https://github.com/FlyOrBoom/mercator
Available for other browsers: https://x-ing.space/mercator
Unfortunately, temperature & tint filters don't work in Firefox.
(C) Xing 2020, MIT License
</section>
</main>
<script src='mercator-studio/script.js'></script>
<script>
const video = document.querySelector('video')
const play = document.querySelector('#play-video')
play.addEventListener('click',()=>{
navigator.mediaDevices.getUserMedia({
video: true
}).then( stream => {
video.srcObject = stream
video.play()
video.style.display = 'block'
play.remove()
document.querySelector('aside').shadowRoot.querySelector('main').classList.add('focus')
})
})
const bookmarklet = document.querySelector('#bookmarklet')
const bookmarklet_original = bookmarklet.innerHTML
</script>
</body>
</html>