-
-
Notifications
You must be signed in to change notification settings - Fork 823
/
cloudflare.html
264 lines (240 loc) · 9.79 KB
/
cloudflare.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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html>
<head>
<title>Generate Cloudflare Auth</title>
<style>
body {
font-family: Arial, sans-serif;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
background-color: #f0f0f0;
background-image:
linear-gradient(to right, #e0e0e0 1px, transparent 1px),
linear-gradient(to bottom, #e0e0e0 1px, transparent 1px);
background-size: 10px 10px;
backdrop-filter: blur(3px);
}
h1 {
color: #333;
margin-bottom: 20px;
}
form {
background-color: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
width: 300px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
}
input[type="text"],
input[type="password"],
input[type="number"] {
width: 93%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="number"] {
max-width:80px;
}
button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
max-width: 500px;
min-height: 100px;
}
.section{
max-width:700px;
padding: 20px;
overflow: auto;
}
.main {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
align-content: space-around;
justify-content: center;
}
.secondary {
padding: 50px;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
align-content: space-around;
justify-content: center;
max-width:1200px;
margin:auto;
}
</style>
</head>
<body>
<div class='main'>
<h1>Generate Cloudflare Auth for VDO.Ninja</h1>
<form id="postForm">
<label for="userId">Cloudflare Account ID:</label>
<input type="text" id="userId" name="userId" autocomplete="userId" required>
<br><br>
<label for="accessToken">Cloudflare Stream Access Token:</label>
<input type="password" id="accessToken" autocomplete="accessToken" name="accessToken" required>
<br><br>
<label for="expiration">Hours until expiration</label>
<input min="0" type="number" id="expiration" name="expiration" placeholder="optional">
<br><br>
<button type="button" id="submitButton">Generate</button>
</form>
<br><br>
<label for="response">Generated URL parameter to add to VDO.Ninja:</label>
<textarea id="response" rows="5" cols="50" readonly placeholder="Use this parameter with your VDO.Ninja links in place of &meshcast"></textarea>
<div class="section">
<h2>
What you can do with Cloudflare + VDO.Ninja?
</h2>
<h3>Meshcast-alternative</h3>
<p>Instead of using Meshcast to broadcast video from director to guest, or guest to scene, you can use Cloudflare instead.</p>
<p>Meshcast, or any compatible WHIP/WHEP service, can help reduce CPU and network load of guests by offloading distribution to a server, compared to using the peer-to-peer default of VDO.Ninja
<p>VDO.Ninja has built-in support for Cloudflare's WHIP/WHEP, so setup and use is relatively easy.</p>
<h3>Isolated guest recording remotely via WHEP</h3>
<p>You can record the streams of each guest via WHEP remotely, without transcoding and without additional load on the guests.</p>
<p>This offers a redundant backup for your recordings, but also makes it easier to do higher quality VODs edits after the live ends.</p>
<p>Raspberry.Ninja offers WHEP recording, via GStreamer for example, but FFMpeg builds may also support direct WHEP recording</p>
<h3>Pricing</h3>
<p>Cloudflare has decent pricing, however it's a bit obsecure at times what the limits actually are.</p>
<h3>MediaMTX</h3>
<p>If you prefer rolling your own SFU service, VDO.Ninja supports MediaMTX. (open-source!)</p>
<p>Just add <b>&mediamtx=yourdomain.com</b> to your VDO.Ninja publishing URLs to have it use your own MediaMTX server.
</div>
</div>
<div class='secondary'>
<h2>
How it works?
</h2>
<p>When used with VDO.Ninja, video is published to Cloudflare via WHIP, and the WHEP playback URL is distributed to viewers. Unless otherwise specified, viewers will use the WHEP URL as the source of media from the publisher, instead of using the normal peer-to-peer mode. This has the effect of reducing the CPU and network load when sharing media with multiple videos, as instead of distributing media via peer-to-peer, the media is distributed via a server. This approach does have some downsides also, so its not normally advisable unless desired or needed.</p>
<h2>
Why do I need a special URL parameter?
</h2>
<p>The reason we need a special generated URL parameter is because Cloudflare requires user accounts, unlike Meshcast. While you can generate WHIP URLs within your Cloudflare dashboard, and use them on VDO.Ninja links using &whipout, you'd need to create one per guest. Instead here, we're using our Cloudflare credentials to automatically create unique WHIP ingest URLs on demand for each guest, so you can get away with one-invite link for all your guests.</p>
<p>Since it's not advisable to share your Cloudflare credentials, particularly with random guests, this page will encrypt your credentials into URL-friendly parameter. Only the VDO.Ninja servers knows the decryption key, which limits what guest can do with the encrypted key. You can delete or restrict the credentials provided to VDO.Ninja from your Cloudflare dashboard, allowing you to limit or revoke any trust provided to VDO.Ninja.</p>
<h2>
Where to get my Cloudflare account ID and token?
</h2>
<p>The Cloudflare account ID can be found on the right-hand side of the Workers & Pages (Overview) page, or it can be found on the right-lower side of any of your Website (domain) overview pages.</p>
<p>
As for the API token, you'll need to create it, with limited permissions.
<ul>
<li>Go to <a href='https://dash.cloudflare.com/profile/api-tokens' target="_blank">https://dash.cloudflare.com/profile/api-tokens</a></li>
<li>Click to Create Token (API Tokens)</li>
<li>Click Get started with the Create Custom Token option</li>
<li>Provide a token name, and for the permissions select Account -> Stream -> <b>Edit</b> (not Read)</li>
<li>You can define a time-to-live (TTL), if you wish for the token to auto-expire.</li>
</ul>
You should now have access to both access token and account ID.
</p>
<h2>
Can I self-host or hard-code my Cloudflare credentials?
</h2>
<p>Yes, the code is open-sourced and it can be self-hosted, however please be aware there is limited support for those self-hosting.</p>
<h2>
Does VDO.Ninja track me or store my private information?
</h2>
<p>Please refer to the <a href='https://docs.vdo.ninja/help/privacy-and-security-details'>privacy policy</a>, although the short answer is no. I can't say the same for Cloudflare, so please refer to their terms of service.
</div>
<script>
function removeStorage(cname){
localStorage.removeItem(cname);
}
function clearStorage(){
localStorage.clear();
if (!session.cleanOutput){
warnUser("The local storage and saved settings have been cleared", 1000);
}
}
function setStorage(cname, cvalue, hours=9999){ // not actually a cookie
var now = new Date();
var item = {
value: cvalue,
expiry: now.getTime() + (hours * 60 * 60 * 1000),
};
try{
localStorage.setItem(cname, JSON.stringify(item));
}catch(e){errorlog(e);}
}
function getStorage(cname) {
try {
var itemStr = localStorage.getItem(cname);
} catch(e){
errorlog(e);
return;
}
if (!itemStr) {
return "";
}
var item = JSON.parse(itemStr);
var now = new Date();
if (now.getTime() > item.expiry) {
localStorage.removeItem(cname);
return "";
}
return item.value;
}
document.getElementById("accessToken").value = getStorage("accessToken") || "";
document.getElementById("userId").value = getStorage("userId") || "";
document.getElementById("expiration").value = getStorage("expiration") || "";
document.getElementById("submitButton").addEventListener("click", async function () {
const accessToken = document.getElementById("accessToken").value;
const userId = document.getElementById("userId").value;
const expiration = document.getElementById("expiration").value;
if (!accessToken || !userId) {
alert("Access Token and User ID are required.");
return;
}
const data = {
accessToken: accessToken,
userId: userId,
expiration: Math.round(expiration*60)
};
try {
const response = await fetch("https://cloudflare.vdo.ninja/encode/", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
const responseData = await response.text();
console.log(responseData);
setStorage("accessToken",accessToken);
setStorage("userId", userId);
setStorage("expiration", expiration);
document.getElementById("response").value = "&cftoken="+encodeURIComponent(responseData);
} catch (error) {
console.error("Error:", error);
document.getElementById("response").value = "An error occurred.";
}
});
</script>
</body>
</html>