publish direct to twitch with vdo.ninja

This commit is contained in:
steveseguin 2023-04-16 14:34:38 -04:00
parent c3cbd15b3b
commit 0a88b24b97
4 changed files with 42 additions and 20 deletions

View File

@ -56,7 +56,7 @@
<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<link rel="stylesheet" href="./main.css?ver=300" />
<link rel="stylesheet" href="./main.css?ver=301" />
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script>
<style id="lightbox-animations" type="text/css"></style>
<!-- <link rel="manifest" href="manifest.json" /> -->
@ -2475,11 +2475,11 @@
// session.hidehome = true; // If used, 'hide home' will make the landing page inaccessible, along with hiding a few go-home elements.
// session.record = false; // uncomment to block users from being able to record via vdo.ninja's built in recording function
</script>
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=743"></script>
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=745"></script>
<!--
// If you wish to change branding, blank offers a good clean start.
<script type="text/javascript" id="main-js" src="./main.js" data-translation="blank"></script>
-->
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=598"></script>
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=600"></script>
</body>
</html>

9
lib.js
View File

@ -32997,7 +32997,7 @@ function whipOut(){
var contentType = this.getResponseHeader('content-type');
if (contentType == "application/sdp"){
if (contentType.startsWith("application/sdp")){
var jsep = {};
jsep.sdp = this.responseText;
jsep.type = "answer";
@ -33052,7 +33052,7 @@ function whipOut(){
} */
warnlog("Processing answer:");
//warnlog(jsep);
warnlog(jsep);
session.whipOut.setRemoteDescription(jsep).then(function(){
warnlog("SHOULD BE CONNECTED?");
@ -33081,6 +33081,9 @@ function whipOut(){
} else if (callback){
callback();
}
} else{
console.warn(this.responseText);
console.error(this);
}
};
if (type==="trickle-ice-sdpfrag"){
@ -33450,7 +33453,7 @@ async function whepIn(){ // PLAY WHEP
responseLocation = this.getResponseHeader('location');
if (contentType == "application/sdp"){
if (contentType.startsWith("application/sdp")){
var jsep = {};
jsep.sdp = this.responseText;
jsep.type = "answer";

18
main.js
View File

@ -288,24 +288,20 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
}
}
if (urlParams.has('whippush')) { // URL or data:base64 image. Becomes local to this viewer only. This is like &avatar, but slightly different. Just CSS in this case
if (urlParams.get('whippush')){
if (urlParams.has('whippush') || urlParams.has('whipout') || urlParams.has('pushwhip')) { // URL or data:base64 image. Becomes local to this viewer only. This is like &avatar, but slightly different. Just CSS in this case
let whippush = urlParams.get('whippush') || urlParams.get('whipout') || urlParams.get('pushwhip');
if (whippush){
try {
session.whipOutput = decodeURIComponent(urlParams.get('whippush'));
session.whipOutput = decodeURIComponent(whippush);
} catch(e){
errorlog(e);
}
}
}
if (urlParams.has('whippushtoken')) { // URL or data:base64 image. Becomes local to this viewer only. This is like &avatar, but slightly different. Just CSS in this case
if (urlParams.get('whippushtoken')){
try {
session.whipOutputToken = urlParams.get('whippushtoken');
} catch(e){
errorlog(e);
}
}
if (urlParams.has('whippushtoken') || urlParams.has('whipouttoken') || urlParams.has('pushwhiptoken')) {// URL or data:base64 image. Becomes local to this viewer only. This is like &avatar, but slightly different. Just CSS in this case
session.whipOutputToken = urlParams.get('whippushtoken') || urlParams.get('whipouttoken') || urlParams.get('pushwhiptoken') || false;
}
if (urlParams.has('whepplay')) { // URL or data:base64 image. Becomes local to this viewer only. This is like &avatar, but slightly different. Just CSS in this case
if (urlParams.get('whepplay')){
try {

View File

@ -304,7 +304,7 @@
<label for="changeText">
<i class="las la-upload"></i>
</label>
<input type="text" id="changeText1" class="inputfield changeText" placeholder="WHIP Publishing URL" " />
<input type="text" id="changeText1" class="inputfield changeText" placeholder="WHIP Publishing URL" />
<button onclick="gohere1();" class="gobutton" id="gobutton1">GO</button>
</div>
<div class="inputCombo" style="width:350px;margin:10 0 10 auto;">
@ -313,6 +313,19 @@
</div>
</div>
<div id="urlInput1" class="urlInput" title="Put the link you want to load here">
<h3>Publish a video from VDO.Ninja to your Twitch channel</h3>
<div class="inputCombo" id="inputCombo1t">
<label for="changeText">
<i class="las la-upload"></i>
</label>
<input type="text" id="changeText1t" class="inputfield changeText" placeholder="Enter your Twitch stream token here" />
<button onclick="gohere1t();" class="gobutton" id="gobutton1t">GO</button>
</div>
</div>
<div id="urlInput2" class="urlInput"title="Put the WHIP token you want to listen for">
<h3>Setup VDO.Ninja to be a WHIP-ingestion end-point</h3>
@ -361,6 +374,7 @@
var domain = "./";
document.querySelector("#changeText1").value = localStorage.getItem('changeText1') || "";
document.querySelector("#changeText1t").value = localStorage.getItem('changeText1t') || "";
document.querySelector("#changeText1a").value = localStorage.getItem('changeText1a') || "";
document.querySelector("#changeText2").value = localStorage.getItem('changeText2') || "";
document.querySelector("#changeText3").value = localStorage.getItem('changeText3') || "";
@ -369,14 +383,22 @@ function gohere1(){
if (document.getElementById('changeText1').value && document.getElementById('changeText1a').value){
localStorage.setItem('changeText1', document.getElementById('changeText1').value);
localStorage.setItem('changeText1a', document.getElementById('changeText1a').value);
window.location = domain + "?whippush=" + encodeURIComponent(document.getElementById('changeText1').value) + "&whippushtoken=" + document.getElementById('changeText1a').value;
window.location = domain + "?push&whippush=" + encodeURIComponent(document.getElementById('changeText1').value) + "&whippushtoken=" + document.getElementById('changeText1a').value;
} else if (document.getElementById('changeText1').value){
localStorage.setItem('changeText1', document.getElementById('changeText1').value);
localStorage.setItem('changeText1a', "");
window.location = domain + "?wc&whippush=" + encodeURIComponent(document.getElementById('changeText1').value);
window.location = domain + "?push&whippush=" + encodeURIComponent(document.getElementById('changeText1').value);
}
}
function gohere1t(){
if (document.getElementById('changeText1t').value){
localStorage.setItem('changeText1t', document.getElementById('changeText1t').value);
window.location = domain + "?push&whippush=https%3A%2F%2Ftwitch.vdo.ninja%2F"+ document.getElementById('changeText1t').value;
}
}
function gohere2(){
if (document.getElementById('changeText2').value){
localStorage.setItem('changeText2', document.getElementById('changeText1').value);
@ -401,6 +423,7 @@ function resetHistory(){
document.querySelector("#changeText1a").value = "";
document.querySelector("#changeText2").value = "";
document.querySelector("#changeText3").value = "";
document.querySelector("#changeText1t").value = "";
}
(function (w) {