-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
100 lines (93 loc) · 6.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
<meta name="theme-color" content="#000" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta property="og:title" content="CameraJS">
<meta property="og:description"
content="Take Pictures, Record Videos and more, all with the power of a fully customisable Camera library built with love and vanilla JS">
<meta property="og:url" content="https://yashrajbharti.github.io/CameraJS/">
<meta property="og:image" content="./assets/poster.png">
<title>CameraJS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section id="camera">
<video id="stream" muted autoplay playsinline data-lens="none"></video>
<div class="controls" role="button" tabindex="0">
<div class="lenses">
<div class="filters">
<input type="checkbox" name="" id="filter-toggle">
<label for="filter-toggle"></label>
<input type="radio" id="none" name="filters" value="none" checked>
<label for="none" class="lens"></label>
<input type="radio" id="monochrome" name="filters" value="monochrome">
<label for="monochrome" class="lens"></label>
<input type="radio" id="gradient1" name="filters" value="gradient1">
<label for="gradient1" class="lens"></label>
<input type="radio" id="gradient2" name="filters" value="gradient2">
<label for="gradient2" class="lens"></label>
<input type="radio" id="gradient3" name="filters" value="gradient3">
<label for="gradient3" class="lens"></label>
<input type="radio" id="gradient4" name="filters" value="gradient4">
<label for="gradient4" class="lens"></label>
</div>
<img class="cancel" src="./assets/cancel.svg" alt="" height="20px">
</div>
<div class="capture-button" role="button" tabindex="0">
<svg width="72" height="72" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="32" r="31.3333" stroke="#2C2C2C" stroke-width="1.33333" />
<circle cx="32" cy="32" r="24" fill="white" class="capture-icon" />
</svg>
</div>
<div class="switch-camera-facing-mode" role="button" tabindex="0" data-facing-mode="front">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="23.5" stroke="#2C2C2C" />
<mask id="mask0_63_76" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="11" y="11"
width="26" height="26">
<path d="M11 11H37V37H11V11Z" fill="white" />
</mask>
<g mask="url(#mask0_63_76)">
<g class="rotate">
<path
d="M18.2887 26.8558V25.2241C18.2887 22.0719 20.8478 19.5129 23.9999 19.5129C25.5758 19.5129 27.0036 20.1525 28.0377 21.1863"
stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16.6572 25.2241L18.289 26.8558L19.9208 25.2241" stroke="white"
stroke-width="1.52344" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M29.7113 23.592V25.2237C29.7113 28.3759 27.1522 30.9349 24.0001 30.9349C22.4242 30.9349 20.9964 30.2952 19.9623 29.2615"
stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M31.3431 25.2236L29.7114 23.5919L28.0796 25.2236" stroke="white"
stroke-width="1.52344" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" />
</g>
<path
d="M11.7617 21.1445C11.7617 20.0627 12.1917 19.0249 12.9566 18.26C13.7215 17.4951 14.7593 17.0651 15.8411 17.0651H17.2804C17.8984 17.0651 18.4634 16.7159 18.74 16.1632C18.8273 15.9878 18.9223 15.7985 19.0186 15.6055C19.5714 14.5 20.7014 13.8016 21.9374 13.8016H26.0626C27.2986 13.8016 28.4286 14.5 28.9814 15.6055C29.0777 15.7985 29.1727 15.9878 29.26 16.1632C29.5366 16.7159 30.1016 17.0651 30.7196 17.0651H32.1589C33.2407 17.0651 34.2785 17.4951 35.0434 18.26C35.8083 19.0249 36.2383 20.0627 36.2383 21.1445V30.1193C36.2383 31.2012 35.8083 32.239 35.0434 33.0038C34.2785 33.7688 33.2407 34.1987 32.1589 34.1987H15.8411C14.7593 34.1987 13.7215 33.7688 12.9566 33.0038C12.1917 32.239 11.7617 31.2012 11.7617 30.1193V21.1445Z"
stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</div>
</div>
<div class="switch-camera-video-photo-mode" role="button" tabindex="0">
<input type="checkbox" name="switch" id="switch">
<label for="switch">
<div>
<span>Photo</span>
<span>Video</span>
</div>
</label>
</div>
</section>
<script src="./main.js" type="module"></script>
</body>
</html>