mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 21:58:35 +00:00
examples page
This commit is contained in:
Joel Calado
parent
a67c12cddb
commit
e078e0b9c4
1
examples/github.svg
Normal file
1
examples/github.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||||
|
After Width: | Height: | Size: 814 B |
154
examples/index.html
Normal file
154
examples/index.html
Normal file
@ -0,0 +1,154 @@
|
||||
<head>
|
||||
<link rel="stylesheet" href="../main.css?ver=40" />
|
||||
<style>
|
||||
.container {
|
||||
max-width: 900px;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
padding: 10px;
|
||||
background-color: #457b9d;
|
||||
color: white;
|
||||
border-bottom: 2px solid #3b6a87;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 a {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
#examples {
|
||||
margin-top: 3em;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 1em;
|
||||
}
|
||||
|
||||
|
||||
div#examples>div {
|
||||
background: #dddddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.youtube {
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.media {
|
||||
background: hsl(203deg 26% 73%);
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style='color:white'>
|
||||
<div id="header">
|
||||
<a id="logoname" href="./" style="text-decoration: none; color: white; margin: 2px">
|
||||
<span data-translate="logo-header">
|
||||
<font id="qos">V</font>DO.Ninja
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div id="info">
|
||||
<h1>VDO.Ninja tech demonstrations</h1>
|
||||
<div id="examples">
|
||||
<div>
|
||||
<h2><a href='p2p.html'>p2p</a></h2>
|
||||
<div class="description">How to use vdo.ninja as a data transport tunneling service</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2><a href='twitch.html'>twitch</a></h2>
|
||||
<div class="description">How to have a twitch live chat side-by-side with VDO.NInja on the same
|
||||
screen</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2><a href='dual.html'>dual</a></h2>
|
||||
<div class="description">how to have two VDO.Ninja windows (or any windows really) open on the same
|
||||
page;
|
||||
Picture-in-Picture style</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2><a href='sensors.html'>sensors</a></h2>
|
||||
<div class="media">
|
||||
<a href='https://www.youtube.com/watch?v=SqbufszHKi4' class="youtube">
|
||||
<img src="youtube.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="description">how to transmit sensor and video data from a phone to a computer, drawing
|
||||
it to canvas.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2><a href='midi.html'>midi</a></h2>
|
||||
<div class="media">
|
||||
<a href='https://www.youtube.com/watch?v=rnZ8HM9FL4I' class="youtube">
|
||||
<img src="youtube.svg" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="description">Demonstrates the MIDI API for VDO.Ninja
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2><a href='draggable.html'>draggable</a></h2>
|
||||
<div class="description">demonstrates how to drag multiple
|
||||
windows around, if you wanted to create a custom
|
||||
layout of elements. (experimental)</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2><a href='chat.html'>chat</a></h2>
|
||||
<div class="description">Example of a chat-only interface for VDO.Ninja; maybe
|
||||
dockable into OBS even.</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2><a href='iframe.outbound-stats.html'>iframe.outbound-stats</a></h2>
|
||||
<div class="description">iframe.outbound-stats.html demostrates how to get stats from VDO.Ninja
|
||||
using the
|
||||
IFRAME API</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2><a href='changepass.html'>changepass</a></h2>
|
||||
<div class="description">lets you create passwords and related HASH values for VDO.NInja
|
||||
rooms</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2><a href='webhid.html'>webhid</a></h2>
|
||||
<div class="description">webhid demonstrates how to interface with a USB device, like a streamdeck
|
||||
(mouse/keyboard not supported)</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2><a href='zoom.html'>zoom</a></h2>
|
||||
<div class="description">A tool for letting you publish into VDO.Ninja, but then
|
||||
full-screen the window once setup, allowing for
|
||||
window-capturing into zoom.</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2><a href='obs_remote/index.html'>obs_remote</a></h2>
|
||||
<div class="media">
|
||||
<a href='https://github.com/steveseguin/remote_ninja' class="youtube">
|
||||
<img src="github.svg" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="description">Also hosted on github elsewhere, but it's an example of how to remotely
|
||||
control OBS using VDO.Ninja's tunneling abilities</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
1
examples/youtube.svg
Normal file
1
examples/youtube.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
|
||||
|
After Width: | Height: | Size: 342 B |
Loading…
x
Reference in New Issue
Block a user