-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
162 lines (156 loc) · 5.72 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="https://fav.farm/📷" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="apple-mobile-web-app-title"
content="Use your phone as a webcam"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#18181b" />
<meta name="msapplication-TileColor" content="#ff0000" />
<meta name="theme-color" content="#18181b" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Primary Meta Tags -->
<title>Use your phone as a webcam, for free.</title>
<meta name="title" content="Use your phone as a webcam, for free." />
<meta
name="description"
content="Use your mobile device as a high-definition webcam, for free, using OBS Virtual Camera."
/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://phone-as-webcam.netlify.app/" />
<meta property="og:title" content="Use your phone as a webcam, for free." />
<meta
property="og:description"
content="Use your mobile device as a high-definition webcam, for free, using OBS Virtual Camera."
/>
<meta
property="og:image"
content="https://phone-as-webcam.netlify.app/meta.png"
/>
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta
property="twitter:url"
content="https://phone-as-webcam.netlify.app/"
/>
<meta
property="twitter:title"
content="Use your phone as a webcam, for free."
/>
<meta
property="twitter:description"
content="Use your mobile device as a high-definition webcam, for free, using OBS Virtual Camera."
/>
<meta
property="twitter:image"
content="https://phone-as-webcam.netlify.app/meta.png"
/>
<script async data-api="/_hive" src="/bee.js"></script>
</head>
<body>
<div>
<header>
<button class="back">
<p>↑</p>
<p>Capture back</p>
</button>
<button class="front">
<p>↓</p>
<p>Capture front</p>
</button>
<button class="fullscreen">
<p>⬒</p>
<p>Enter full screen</p>
</button>
</header>
<main>
<video autoplay muted playsinline>
If you're seeing this, your browser probably doesn't support HTML
video. That also means you probably haven't updated your browser or
device in a few years, meaning you're an easy target for hacking.
Update now.
</video>
</main>
<footer>
<p>Created with 📷️ by <a href="http://didier.cz/g">Didier Catz</a></p>
<details>
<summary>How to use</summary>
<article>
<a href="https://didier.cz/g/phone-as-webcam">Source</a>
<h1>
Use your smartphone camera as a webcam, via OBS Virtual Camera.
</h1>
<ol>
<li>
Open
<a href="https://phone-as-webcam.netlify.app/" rel="nofollow"
>https://phone-as-webcam.netlify.app/</a
>
on your phone.
</li>
<li>Click "Capture Back" for the back-facing camera</li>
<li>
Click "Full screen" to make the video feed full-screen.
Optionally double tap on the video to completely fill the
screen.
</li>
<li>
Enable Airplane/silent mode on your phone to disable push
notifications
</li>
<li>
Connect your phone to your computer using a charging cable. For
iPhones, this is a Lightning cable. For Androids, this is
usually a USB-C or Micro-USB cable.
</li>
</ol>
<h2>
Mirror your phone screen as a virtual camera on
Mac/Windows/Linux/Etc.
</h2>
<ol>
<li>
Download, install, and open
<a href="https://obsproject.com/" rel="nofollow">OBS Studio</a>
</li>
<li>
Set the right canvas resolution in OBS Studio settings by
clicking "Settings" and then "Video". "2436x1125" works well for
an iPhone 12 Pro.
</li>
<li>
Add "Video Capture Device" as a new source in OBS studio by
clicking + under sources. Use any name and select your phone as
a device
</li>
<li>Start Virtual Camera by clicking "Start Virtual Camera"</li>
<li>
Your phone screen should be mirrored in Zoom, Google Meet, or
others if you select "OBS Virtual Camera" as your camera.
</li>
</ol>
<h4>
Main inspiration taken from
<a href="https://github.com/apancik/iphone-as-a-webcam"
>https://github.com/apancik/iphone-as-a-webcam</a
>.
</h4>
</article>
</details>
</footer>
</div>
<script type="module" src="/main.js" async defer></script>
</body>
</html>