Skip to content

Commit

Permalink
Merge branch 'steveseguin:develop' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
rgblack316 authored Dec 2, 2024
2 parents 76fd4e3 + e93c2eb commit 620aa65
Show file tree
Hide file tree
Showing 61 changed files with 71,186 additions and 30,189 deletions.
43 changes: 43 additions & 0 deletions .github/workflows/static.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
# Runs on pushes targeting the default branch
push:
branches: ["develop"]

# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false

jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
# Upload entire repository
path: '.'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
11 changes: 11 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"semi": true,
"singleQuote": false,
"tabWidth": 4,
"useTabs": true,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid",
"trailingComma": "none",
"printWidth": 10000
}
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ For more advanced users, you can see the [install.md](https://github.com/stevese

If self-hosting, you might also wish to host your own video relay TURN server. Directions on how to deploy a TURN server are listed in the turnserver.md file. Only about ~ 5% of remote guests usually will need a TURN server, often those connected via 4G LTE or those behind a strict firewall, but most other users don't need one. While VDO.Ninja does host some pubiic TURN servers, they are quite expensive to operate, so please try to avoid abusing if possible. If you are deploying your own version of VDO.Ninja, I'd ask you to use your own TURN servers if you are capable of doing so; it's understandable if you aren't able to though.

For users wishing to host VDO.Ninja offline (where no Internet is available), there's a respository with everything needed to deploy locally and offline here: https://github.com/steveseguin/offline_deployment. The offline version includes a Docker option, and there are some community-created Dockers available for online hosting. I may eventually offer an official Docker option designed for online users with heavier requirements, but I lack time and support to maintain such a project currently.
For users wishing to host VDO.Ninja offline (where no Internet is available), there's a repository with everything needed to deploy locally and offline here: https://github.com/steveseguin/offline_deployment. The offline version includes a Docker option, and there are some community-created Dockers available for online hosting. I may eventually offer an official Docker option designed for online users with heavier requirements, but I lack time and support to maintain such a project currently.

### Develop vs Release versions

Expand All @@ -64,7 +64,7 @@ Join me and the community on Discord for support and more: https://discord.vdo.n

The sub-Reddit is available at, https://reddit.com/r/vdoninja. I will often offer a single-message response to support questions posted there, but for deeper discussion, join the Discord.

Also check out the FAQ for common answers: https://docs.vdo.ninja or view recent product updates at https://updates.vdo.ninja
Also check out the FAQ for common answers: https://docs.vdo.ninja or view recent product updates at: https://updates.vdo.ninja

I maintain a Youtube playlist with VDO.Ninja related content I create at https://www.youtube.com/watch?v=vLpRzMjUDaE&list=PLWodc2tCfAH1WHjl4WAOOoRSscJ8CHACe, however Youtube is full of community-created guides that are worth checking out.

Expand Down
81 changes: 81 additions & 0 deletions base64.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VDO.Ninja CSS to Base64 Converter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #1E1E1E;
color: #E0E0E0;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1, h2 {
color: #E0E0E0;
}
textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
background-color: #2D2D2D;
color: #E0E0E0;
border: 1px solid #3D3D3D;
border-radius: 4px;
padding: 10px;
font-family: monospace;
}
#output {
height: 100px;
}
button {
padding: 10px 20px;
background-color: #4ecca3;
color: #1E1E1E;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}
button:hover {
background-color: #45b392;
}
.container {
background-color: #2D2D2D;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>VDO.Ninja CSS to Base64 Converter</h1>
<textarea id="cssInput" placeholder="Enter your CSS here..."></textarea>
<button onclick="convertToBase64()">Convert</button><br><br>
<i>💡Tip: Adding <b>!important</b> after your CSS values can help override existing values.</i>

<h2>Output:</h2>
<textarea id="output" readonly></textarea>
<button onclick="copyToClipboard()">Copy to Clipboard</button>
</div>
<script>
function convertToBase64() {
const cssInput = document.getElementById('cssInput').value;
// Remove tabs and extra spaces
const sanitizedCSS = cssInput.replace(/\s+/g, ' ').trim();
const base64CSS = btoa(encodeURIComponent(sanitizedCSS));
document.getElementById('output').value = '&cssb64=' + base64CSS;
}
function copyToClipboard() {
const output = document.getElementById('output');
output.select();
document.execCommand('copy');
alert('Copied to clipboard!');
}
</script>
</body>
</html>
21 changes: 9 additions & 12 deletions cloudflare.html
Original file line number Diff line number Diff line change
Expand Up @@ -124,22 +124,19 @@ <h1>Generate Cloudflare Auth for VDO.Ninja</h1>
<h2>
What you can do with Cloudflare + VDO.Ninja?
</h2>
<h3>Restream VDO.Ninja as an RTMP Output</h3>
<p>Live Video Inputs (Cloudflare feature) can be set up to forward any input to another input. This can be a RTMP(S) service such as YouTube, Twitch or Facebook Live.</p>
<p>In theory you could publish from VDO.Ninja WHIP output to Cloudstream, and then to your RTMP destinations, like Youtube.</p>
<p></p>
<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
<h3>Automatic isolated guest recording</h3>
<p>Cloudflare will automatically record incoming videos, allowing you (in theory) to have a backup of each guest in a room.</p>
<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>
<h3>SRT, HLS, DASH, MP4, WHIP/WHEP options</h3>
<p>Lots input and output options, although if you're here, you're probably interested in the WHIP/WHEP mainly.</p>
<p>VDO.Ninja is compatible with WHEP and WHIP!</p>
<h3>Very competitive pricing</h3>
<p>There's a $5 entry tier, which is more than enough for testing.</p>
<p>Or pay $1 per 1000 minutes of streaming.</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'>
Expand Down
26 changes: 23 additions & 3 deletions comms.html
Original file line number Diff line number Diff line change
Expand Up @@ -1093,6 +1093,16 @@
mobile = true;
}

var videoMode = false;
if (urlParams.has('video')){
videoMode = true;
}

var chat = true;
if (urlParams.has('hidechat')){
chat = false;
}

if (screen.height && screen.width && (screen.height*screen.width<400000)){
mobile = true;
}
Expand Down Expand Up @@ -1805,10 +1815,15 @@
var chatmsg = "Welcome to the Comms app. Select a group to participate in.";
chatmsg = encodeURIComponent(chatmsg);

var vtype = "&vd=0";
if (videoMode){
vtype = "&ad=0";
}

if (window.location.hostname == "comms.cam"){
var iframesrc = "https://vdo.ninja/?"+urlEdited+"&controlbarspace&volumecontrol&sharperscreen&groupmode&novice&ltb=350&minipreview&transparent&hideheader&margin&rounded&hidetranslate&cleandirector&vd=0&webcam&nvb&sstype=3&ssb&showlabel=toprounded&labelsize=85&style=2&room="+roomname+additional+additional2+"&b64css="+injectCSS+streamID+label+"&chatmsg="+chatmsg;
var iframesrc = "https://vdo.ninja/?"+urlEdited+vtype+"&controlbarspace&volumecontrol&sharperscreen&groupmode&novice&ltb=350&minipreview&transparent&hideheader&margin&rounded&hidetranslate&cleandirector&webcam&nvb&sstype=3&ssb&showlabel=toprounded&labelsize=85&style=2&room="+roomname+additional+additional2+"&b64css="+injectCSS+streamID+label+"&chatmsg="+chatmsg;
} else {
var iframesrc = "./index.html?"+urlEdited+"&controlbarspace&volumecontrol&sharperscreen&groupmode&novice&ltb=350&minipreview&transparent&hideheader&margin&rounded&hidetranslate&cleandirector&vd=0&webcam&nvb&sstype=3&ssb&showlabel=toprounded&labelsize=85&style=2&room="+roomname+additional+additional2+"&b64css="+injectCSS+streamID+label+"&chatmsg="+chatmsg;
var iframesrc = "./index.html?"+urlEdited+vtype+"&controlbarspace&volumecontrol&sharperscreen&groupmode&novice&ltb=350&minipreview&transparent&hideheader&margin&rounded&hidetranslate&cleandirector&webcam&nvb&sstype=3&ssb&showlabel=toprounded&labelsize=85&style=2&room="+roomname+additional+additional2+"&b64css="+injectCSS+streamID+label+"&chatmsg="+chatmsg;
}


Expand All @@ -1824,7 +1839,12 @@

if (!mobile){
document.getElementById("chatModule").classList.remove("hidden");
}
if (!chat){
toggleChat();
}
}



iframe.onload = function(){
iframe.contentWindow.postMessage({ groups: savedSession.activeGroups , groupView: savedSession.activeViewGroups }, "*");
Expand Down
2 changes: 1 addition & 1 deletion convert.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<head>
<link rel="stylesheet" href="./main.css?ver=40" />
<link rel="stylesheet" href="./main.css" />
<style>
.container {
max-width: min(80%,875px);
Expand Down
2 changes: 1 addition & 1 deletion devices.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<html>
<head>
<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
<link rel="stylesheet" href="./main.css?ver=11" />
<link rel="stylesheet" href="./main.css" />
<link rel="stylesheet" href="./devices.css?ver=2" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf8" />
Expand Down
45 changes: 20 additions & 25 deletions dock.html
Original file line number Diff line number Diff line change
Expand Up @@ -194,31 +194,27 @@
}

document.addEventListener("dragstart", event => {
var url = event.target.href || event.target.value;

if (!url || !url.startsWith('https://')) return;
if (event.target.dataset.drag!="1"){
return;
}
//event.target.ondragend = function(){event.target.blur();}

var streamId = url.split('view=');
var label = url.split('label=');

url += '&layer-name=OBSN';
if (streamId.length>1) url += ': ' + streamId[1].split('&')[0];
if (label.length>1) url += ' - ' + decodeURI(label[1].split('&')[0]);

var url = event.target.href || event.target.value;

if (!url || !url.startsWith('https://')) return;
if (event.target.dataset.drag !== "1") return;

var streamId = url.split('view=');
var label = url.split('label=');

url += '&layer-width=1920'; // this isn't always 100% correct, as the resolution can fluxuate, but it is probably good enough
url += '&layer-height=1080';

event.dataTransfer.setDragImage(document.querySelector('#dragImage'), 24, 24);
event.dataTransfer.setData("text/uri-list", encodeURI(url));
//event.dataTransfer.setData("url", encodeURI(url));

//warnlog(event);

url += '&layer-name=VDO.Ninja';
if (streamId.length > 1) url += ': ' + streamId[1].split('&')[0];
if (label.length > 1) url += ' - ' + decodeURI(label[1].split('&')[0]);

// Add layer dimensions
url += '&layer-width=1920';
url += '&layer-height=1080';

event.dataTransfer.setDragImage(document.querySelector('#dragImage'), 24, 24);
event.dataTransfer.setData("text/uri-list", encodeURI(url));

// Add this line to set the URL as plain text as well
event.dataTransfer.setData("text/plain", encodeURI(url));
});

</script>
Expand Down Expand Up @@ -285,7 +281,6 @@ <h3>OBS Browser Source Link:</h3>
<input id="obs-link" class="task red" data-drag="1" onmousedown="copyFunction(this)" onclick="copyFunction(this)" />
<br />
<br />
<i>(links are draggable)</i>
</div>
</div>
<div class="gone" >
Expand Down
Loading

0 comments on commit 620aa65

Please sign in to comment.