From 2a244468483f49d94c4538af3e2700e5f0d963e7 Mon Sep 17 00:00:00 2001 From: steveseguin Date: Wed, 8 Nov 2023 01:02:05 -0500 Subject: [PATCH] a month of minor feature adds and fixes --- check.html | 46 + cloudflare.html | 10 +- dock.html | 4 +- examples/kick.html | 363 ++++++ examples/obsremote.html | 412 +++++++ examples/teleprompter.html | 29 +- examples/twitch.html | 2 +- icetest.html | 59 + index.html | 25 +- insertableStreamWorker.js | 135 +++ lib.js | 2335 ++++++++++++++++++++++++------------ main.js | 260 ++-- mictest.html | 226 ++++ mixer.html | 10 +- results.html | 24 +- supports.css | 4 +- supports.html | 2 +- webrtc.js | 2 +- whep.html | 299 +++++ whip.html | 291 ++++- 20 files changed, 3607 insertions(+), 931 deletions(-) create mode 100644 examples/kick.html create mode 100644 examples/obsremote.html create mode 100644 icetest.html create mode 100644 insertableStreamWorker.js create mode 100644 mictest.html create mode 100644 whep.html diff --git a/check.html b/check.html index 123c7a6..a9ec8db 100644 --- a/check.html +++ b/check.html @@ -270,6 +270,52 @@ function logData(data) { logged.push(data); } + + const stunServers = [ + 'stun:stun.l.google.com:19302', + 'stun:stun1.l.google.com:19302', + 'stun:stun.cloudflare.com:3478', + ]; + + async function checkConnectionModes() { + let hostMode = false; + let srflxMode = false; + + const iceConfig = { iceServers: [{ urls: stunServers }] }; + const rtcPeerConnection = new RTCPeerConnection(iceConfig); + + rtcPeerConnection.createDataChannel(''); // Create a dummy data channel + const offer = await rtcPeerConnection.createOffer(); + + rtcPeerConnection.onicecandidate = (event) => { + if (event.candidate) { + if (event.candidate.candidate.includes('srflx')) { + if (!srflxMode){ + srflxMode= true; + if (hostMode){ + logged.push({hostMode,srflxMode}); + } + } + } else if (event.candidate.candidate.includes('host')) { + if (!hostMode){ + hostMode = true; + if (srflxMode){ + logged.push({hostMode,srflxMode}); + } + } + } + } else { + rtcPeerConnection.onicecandidate = null; + if (!hostMode || !hostMode){ + logged.push({hostMode,srflxMode}); + } + } + }; + rtcPeerConnection.setLocalDescription(offer); + } + try { + checkConnectionModes(); + } catch(e){} function reloadTurn(){ console.log("Reloading to change TURN servers"); diff --git a/cloudflare.html b/cloudflare.html index 5365c73..e6f1cce 100644 --- a/cloudflare.html +++ b/cloudflare.html @@ -106,10 +106,10 @@

Generate Cloudflare Auth for VDO.Ninja

- +

- +

@@ -138,7 +138,7 @@

Lots input and output options, although if you're here, you're probably interested in the WHIP/WHEP mainly.

VDO.Ninja is compatible with WHEP and WHIP!

Very competitive pricing

-

There's a free tier, which is more than enough for testing.

+

There's a $5 entry tier, which is more than enough for testing.

Or pay $1 per 1000 minutes of streaming.

@@ -163,7 +163,7 @@
  • Go to https://dash.cloudflare.com/profile/api-tokens
  • Click to Create Token (API Tokens)
  • Click Get started with the Create Custom Token option
  • -
  • Provide a token name, and for the permissions select Account -> Stream -> Edit
  • +
  • Provide a token name, and for the permissions select Account -> Stream -> Edit (not Read)
  • You can define a time-to-live (TTL), if you wish for the token to auto-expire.
  • You should now have access to both access token and account ID. @@ -256,7 +256,7 @@ setStorage("userId", userId); setStorage("expiration", expiration); - document.getElementById("response").value = "&cftoken="+responseData; + document.getElementById("response").value = "&cftoken="+encodeURIComponent(responseData); } catch (error) { console.error("Error:", error); document.getElementById("response").value = "An error occurred."; diff --git a/dock.html b/dock.html index df0ff58..11f4f4c 100644 --- a/dock.html +++ b/dock.html @@ -8,7 +8,7 @@ body { padding:0; border:0; color: #FFF; - background-color: #1F1E1F; + background-color: #2B2E38; font-family: Arial, Helvetica, sans-serif; width:300px; overflow:hidden; @@ -17,13 +17,11 @@ body { min-width:1px; } - #container-links { z-index:10; width:100%; height:100%; display:none; - } #container-setup { diff --git a/examples/kick.html b/examples/kick.html new file mode 100644 index 0000000..ea92055 --- /dev/null +++ b/examples/kick.html @@ -0,0 +1,363 @@ + +Kick + Video + + + + + +
    +
    +
    + + + + + +
    +
    +

    Use VDO.Ninja and Kick chat at the same time

    + + + + + VDO.Ninja Stream ID or URL: + + Kick Username or URL: + + + +


    +

    + This app lets you publish video/audio via VDO.Ninja at the same time as viewing your Kick chat.

    If you have feature requests or suggestions, please report them at https://discord.vdo.ninja in the #feature-request channel. +

    +

    If on mobile, enter "desktop site" mode within your browser's settings

    +
    + + + \ No newline at end of file diff --git a/examples/obsremote.html b/examples/obsremote.html new file mode 100644 index 0000000..68694f3 --- /dev/null +++ b/examples/obsremote.html @@ -0,0 +1,412 @@ + + + + Remote control interface using VDO.Ninja's iframe API + + + + +
    + +

    Remote Controller for OBS Studio


    + +
    +
    +
    +
    + + + Put the following link into OBS with permissions set to allow for scene changes: + + + See the documentation for the built-in OBS control options inside VDO.Ninja + + + +
    + + + \ No newline at end of file diff --git a/examples/teleprompter.html b/examples/teleprompter.html index 600761a..7d6fd7f 100644 --- a/examples/teleprompter.html +++ b/examples/teleprompter.html @@ -317,6 +317,7 @@ + + \ No newline at end of file diff --git a/index.html b/index.html index 77614c4..c1a6e49 100644 --- a/index.html +++ b/index.html @@ -92,7 +92,7 @@ - + -