srizan/archived-vdo.ninja
1
0
Fork 0
mirror of https://github.com/SrIzan10/vdo.ninja.git synced 2026-05-01 11:05:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

WHEP PATCH tweak; media to file recording fix

Browse Source
This commit is contained in:
steveseguin
2024-05-25 14:13:36 -04:00
parent b0e453cea5
commit 80c332e520
12 changed files with 508 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
examples/switchmics.html Normal file
View File

@@ -0,0 +1,207 @@
<html>
<head><title>Toggle Two Mutes Controller</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<style>
body{
padding:0;
margin:0;
background-color:#003;
width:100%;
height:100%;
color:white;
font-family: tahoma, arial;
}
a {
color:white
}
iframe {
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
display:block;
}
input{
padding:10px;
width:80%;
font-size:1.2em;
z-index: 1000;
}
div{
border:0;
margin:0;
padding:0;
text-align: center;
}
button {
margin:40px;
padding:40px;
}
#container2 button{
margin: 5px min(10px, 1vh);
padding:10px min(100px, 10vh);
cursor:pointer;
height:100%;
font-size: max(30px, 4.5vh);
font-weight: 900;
}
iframe{
border:1px solid white;
}
span {
margin: 0 10px;
}
.selected{
border:3px solid lightblue;
}
</style>
</head>
<body>
<div id="container1" style="width:100%;height:89%;display:none;">
</div>
<div id="container2" style="width:100%;height:10%;display:none;">
<span>
<button id='a' onclick="mute('a')" style='background-color:green'>A</button>
<button id='c' onclick="mute('c')" style='background-color:red'>MUTE BOTH</button>
<button id='b' onclick="mute('b')" style='background-color:green'>B</button>
</span>
</div>
<div id="deleteme">
<h2>PTZ Remote Control interface</h2>
<input placeholder="Enter a push link. ie) https://vdo.ninja/?push=english123a&label=ENGLISH" id="viewlinka" type="text"><br>
<input placeholder="Enter a push link. ie) https://vdo.ninja/?push=french123b&label=FRENCH" id="viewlinkb" type="text" /><br>
<button onclick="loadIframes()">CONNECT</button>
<br>
This app is a toggle between two different inputs
</div>
<script>
var iframe;
function mute(target){
if (iframea && iframeb){
if (target=="a"){
document.getElementById("b").classList.remove("selected");
document.getElementById("c").classList.remove("selected");
document.getElementById("a").classList.add("selected");
iframea.contentWindow.postMessage({mic:true}, '*');
iframeb.contentWindow.postMessage({mic:false}, '*');
} else if (target=="b"){
document.getElementById("a").classList.remove("selected");
document.getElementById("c").classList.remove("selected");
document.getElementById("b").classList.add("selected");
iframea.contentWindow.postMessage({mic:false}, '*');
iframeb.contentWindow.postMessage({mic:true}, '*');
} else {
document.getElementById("a").classList.remove("selected");
document.getElementById("b").classList.remove("selected");
document.getElementById("c").classList.add("selected");
iframea.contentWindow.postMessage({mic:false}, '*');
iframeb.contentWindow.postMessage({mic:false}, '*');
}
}
}
var urlEdited = window.location.search.replace(/\?\?/g, "?");
urlEdited = urlEdited.replace(/\?/g, "&");
urlEdited = urlEdited.replace(/\&/, "?");
if (urlEdited !== window.location.search){
warnlog(window.location.search + " changed to " + urlEdited);
window.history.pushState({path: urlEdited.toString()}, '', urlEdited.toString());
}
var urlParams = new URLSearchParams(urlEdited);
if (urlParams.get("a")){
if (window.location.host){
var path = window.location.host+window.location.pathname.replace("/examples/","/").split("/").slice(0,-1).join("/");
} else {
var path = "vdo.ninja";
}
document.getElementById("viewlinka").value = "https://"+path+"/?push="+urlParams.get("a");
if (urlParams.get("la")){
document.getElementById("viewlinka").value += "&label="+urlParams.get("la");
document.getElementById("a").innerHTML = urlParams.get("la")
}
}
if (urlParams.get("b")){
if (window.location.host){
var path = window.location.host+window.location.pathname.replace("/examples/","/").split("/").slice(0,-1).join("/");
} else {
var path = "vdo.ninja";
}
document.getElementById("viewlinkb").value = "https://"+path+"/?push="+urlParams.get("b");
if (urlParams.get("lb")){
document.getElementById("viewlinkb").value += "&label="+urlParams.get("lb");
document.getElementById("b").innerHTML = urlParams.get("lb")
}
}
var iframeb = null;
var iframea = null;
function loadIframes(){
var iframesrca = document.getElementById("viewlinka").value;
var iframesrcb = document.getElementById("viewlinkb").value;
document.getElementById("deleteme").remove()
delete document.getElementById("deleteme");
document.getElementById("container1").style.display="flex";
document.getElementById("container2").style.display="inline-block";
var params = window.location.search || "";
if (iframesrca.includes("?")){
params = params.slice(1);
iframesrca = iframesrca + "&" + params
} else {
iframesrca = iframesrca + params
}
if (iframesrcb.includes("?")){
params = params.slice(1);
iframesrcb = iframesrcb + "&" + params
} else {
iframesrcb = iframesrcb + params
}
iframea = document.createElement("iframe");
iframea.allow = "encrypted-media;sync-xhr;usb;web-share;cross-origin-isolated;accelerometer;midi;geolocation;autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;gyroscope;";
iframea.src = iframesrca;
document.getElementById("container1").appendChild(iframea);
iframeb = document.createElement("iframe");
iframeb.allow = "encrypted-media;sync-xhr;usb;web-share;cross-origin-isolated;accelerometer;midi;geolocation;autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;gyroscope;";
iframeb.src = iframesrcb;
document.getElementById("container1").appendChild(iframeb);
}
window.addEventListener("message", function (e) {
if (iframeb && (e.source === iframeb.contentWindow)) {
console.log(e.data);
if (e.data.action == "this-label"){
document.getElementById("a").innerHTML = e.data.value;
}
} else if (iframea && (e.source === iframea.contentWindow)) {
if (e.data.action == "this-label"){
document.getElementById("b").innerHTML = e.data.value;
}
}
}, false);
</script>
</body>
</html>

8
index.html
View File

@@ -92,7 +92,7 @@
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/CodecsHandler.js?ver=10"></script> <script type="text/javascript" crossorigin="anonymous" src="./thirdparty/CodecsHandler.js?ver=10"></script>
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script> <script type="text/javascript" crossorigin="anonymous" src="./thirdparty/aes.js"></script>
<script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=783"></script> <script type="text/javascript" crossorigin="anonymous" src="./webrtc.js?ver=789"></script>
<input id="zoomSlider" type="range" style="display: none;" /> <input id="zoomSlider" type="range" style="display: none;" />
<span id="electronDragZone" style="pointer-events: none; z-index:-10; position:absolute;top:0;left:0;width:100%;height:2%;-webkit-app-region: drag;min-height:20px;"></span> <span id="electronDragZone" style="pointer-events: none; z-index:-10; position:absolute;top:0;left:0;width:100%;height:2%;-webkit-app-region: drag;min-height:20px;"></span>
<div id="header"> <div id="header">
@@ -2634,7 +2634,7 @@
// if (!window.location.search){document.body.innerHTML = "";} // uncomment this line, if you wish to try it. // if (!window.location.search){document.body.innerHTML = "";} // uncomment this line, if you wish to try it.
var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js. var session = WebRTC.Media; // session is a required global variable if configuring manually. Run before loading main.js but after webrtc.js.
session.version = "25.3"; session.version = "25.4";
session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed session.streamID = session.generateStreamID(); // randomly generates a streamID for this session. You can set your own programmatically if needed
session.defaultPassword = "someEncryptionKey123"; // Change this password if self-deploying for added security/privacy session.defaultPassword = "someEncryptionKey123"; // Change this password if self-deploying for added security/privacy
@@ -2756,7 +2756,7 @@
// session.decrypted = session.decodeInvite("U2FsdGVkX1+d58DFIHoO3EQZSuX86ch4PqW2ouztnJ0="); // get a code from invite.cam // session.decrypted = session.decodeInvite("U2FsdGVkX1+d58DFIHoO3EQZSuX86ch4PqW2ouztnJ0="); // get a code from invite.cam
</script> </script>
<script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=1165"></script> <script type="text/javascript" crossorigin="anonymous" id="lib-js" src="./lib.js?ver=1168"></script>
<script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=879"></script> <script type="text/javascript" crossorigin="anonymous" id="main-js" src="./main.js?ver=880"></script>
</body> </body>
</html> </html>

190
lib.js
View File

@@ -4222,7 +4222,7 @@ function setupIncomingScreenTracking(v, UUID) {
log("AUTO RECORD START"); log("AUTO RECORD START");
setTimeout( setTimeout(
function (UUID, v) { function (UUID, v) {
var videoKbps = 4000; var videoKbps = session.recordDefault;
if (session.recordLocal !== false) { if (session.recordLocal !== false) {
videoKbps = session.recordLocal; videoKbps = session.recordLocal;
} }
@@ -4601,7 +4601,7 @@ function setupIncomingVideoTracking(v, UUID) {
log("AUTO RECORD START"); log("AUTO RECORD START");
setTimeout( setTimeout(
function (UUID, v) { function (UUID, v) {
var videoKbps = 4000; var videoKbps = session.recordDefault;
if (session.recordLocal !== false) { if (session.recordLocal !== false) {
videoKbps = session.recordLocal; videoKbps = session.recordLocal;
} }
@@ -6593,21 +6593,26 @@ function updateMixerRun(e = false) {
// ANIMATED - CONTAINER ; width/height/z-index/cover/////////////// // ANIMATED - CONTAINER ; width/height/z-index/cover///////////////
if (layout) { if (layout) {
var left = (w / 100) * layout[vid.dataset.sid].x || layout[vid.dataset.sid].xp || 0; try {
var top = (h / 100) * layout[vid.dataset.sid].y || layout[vid.dataset.sid].yp || 0; var left = (w / 100) * layout[vid.dataset.sid].x || layout[vid.dataset.sid].xp || 0;
top += hi; var top = (h / 100) * layout[vid.dataset.sid].y || layout[vid.dataset.sid].yp || 0;
var width = (w / 100) * layout[vid.dataset.sid].w || layout[vid.dataset.sid].wp || 0; top += hi;
var height = (h / 100) * layout[vid.dataset.sid].h || layout[vid.dataset.sid].hp || 0; var width = (w / 100) * layout[vid.dataset.sid].w || layout[vid.dataset.sid].wp || 0;
if (layout[vid.dataset.sid].cover || layout[vid.dataset.sid].c) { var height = (h / 100) * layout[vid.dataset.sid].h || layout[vid.dataset.sid].hp || 0;
// this should be true/false
//vid.style.objectFit = "cover"; if (layout[vid.dataset.sid].cover || layout[vid.dataset.sid].c) {
cover = true; // this should be true/false
} else { //vid.style.objectFit = "cover";
//vid.style.objectFit = "contain"; // this should fall back to sessio.cover if no layout supplied cover = true;
cover = false; } else {
//vid.style.objectFit = "contain"; // this should fall back to sessio.cover if no layout supplied
cover = false;
}
//container.style.zindex = 0;
container.style.zIndex = layout[vid.dataset.sid].zIndex || layout[vid.dataset.sid].z || 0;
} catch(e){
errorlog(e);
} }
//container.style.zindex = 0;
container.style.zIndex = layout[vid.dataset.sid].zIndex || layout[vid.dataset.sid].z || 0;
} else { } else {
var left = Math.max(offsetx + Math.floor((((i % rw) + 0) * w) / rw), 0); var left = Math.max(offsetx + Math.floor((((i % rw) + 0) * w) / rw), 0);
var top = Math.max(offsety + Math.floor(((Math.floor(i / rw) + 0) * h) / rh + hi), 0); var top = Math.max(offsety + Math.floor(((Math.floor(i / rw) + 0) * h) / rh + hi), 0);
@@ -13500,7 +13505,9 @@ function toggleMute(apply = false, event = false) {
track.enabled = true; track.enabled = true;
}); });
} }
//if (event){ // this might be a good solution, if there is a problem.
refreshMicrophoneDevice(); // to address an issue with iOS/iPad devices losing audio when an inbound audio souce hits. refreshMicrophoneDevice(); // to address an issue with iOS/iPad devices losing audio when an inbound audio souce hits.
//}
//} //}
// toggleMute(false, event) // toggleMute(false, event)
@@ -13516,7 +13523,7 @@ function toggleMute(apply = false, event = false) {
if (!apply) { if (!apply) {
// only if they are changing states do we bother to spam. // only if they are changing states do we bother to spam.
data = {}; var data = {};
data.muteState = session.muted; data.muteState = session.muted;
session.sendMessage(data); session.sendMessage(data);
log("SEND MUTE STATE TO PEERS"); log("SEND MUTE STATE TO PEERS");
@@ -16241,7 +16248,9 @@ async function publishScreen() {
if (session.echoCancellation === true) { if (session.echoCancellation === true) {
constraints.audio.echoCancellation = true; // the defaults for screen publishing should be off. constraints.audio.echoCancellation = true; // the defaults for screen publishing should be off.
} }
if (session.voiceIsolation === true){
constraint.audio.voiceIsolation = true;
}
try { try {
let supportedConstraints = navigator.mediaDevices.getSupportedConstraints(); let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
if (supportedConstraints.cursor) { if (supportedConstraints.cursor) {
@@ -23460,8 +23469,8 @@ function refreshVideoDevice() {
grabVideo(session.quality, "videosource", "select#videoSource3"); grabVideo(session.quality, "videosource", "select#videoSource3");
} }
function refreshMicrophoneDevice() { function refreshMicrophoneDevice() {
if (session.screenShareState) { if (session.screenShareState || session.mediafileShare) {
log("can't refresh a screenshare"); log("can't refresh a screenshare or fileshare");
return; return;
} }
log("refreshing microphone.."); log("refreshing microphone..");
@@ -23782,7 +23791,7 @@ async function getAudioOnly(selector, trackid = null, override = false) {
} }
for (var i = 0; i < audioList.length; i++) { for (var i = 0; i < audioList.length; i++) {
if (session.echoCancellation !== false && session.autoGainControl !== false && session.noiseSuppression !== false) { if (session.echoCancellation !== false && session.autoGainControl !== false && session.noiseSuppression !== false && (session.voiceIsolation !== true)) {
var constraint = { var constraint = {
audio: { audio: {
deviceId: { deviceId: {
@@ -23814,6 +23823,9 @@ async function getAudioOnly(selector, trackid = null, override = false) {
} else { } else {
constraint.audio.noiseSuppression = true; constraint.audio.noiseSuppression = true;
} }
if (session.voiceIsolation === true){
constraint.audio.voiceIsolation = true;
}
} }
constraint.video = false; constraint.video = false;
if (override !== false) { if (override !== false) {
@@ -25150,6 +25162,9 @@ async function grabScreen(quality = 0, audio = true, videoOnEnd = false) {
if (session.noiseSuppression === true) { if (session.noiseSuppression === true) {
constraints.audio.noiseSuppression = true; constraints.audio.noiseSuppression = true;
} }
if (session.voiceIsolation === true){
constraint.audio.voiceIsolation = true;
}
if (audio == false) { if (audio == false) {
constraints.audio = false; constraints.audio = false;
} }
@@ -27887,7 +27902,7 @@ async function press2talk(clean = false) {
log("AUTO RECORD START"); log("AUTO RECORD START");
setTimeout( setTimeout(
function (v) { function (v) {
var videoKbps = 4000; var videoKbps = session.recordDefault;
if (session.recordLocal !== false) { if (session.recordLocal !== false) {
videoKbps = session.recordLocal; videoKbps = session.recordLocal;
} }
@@ -28246,7 +28261,7 @@ session.publishStream = function (v) {
log("AUTO RECORD START"); log("AUTO RECORD START");
setTimeout( setTimeout(
function (v) { function (v) {
var videoKbps = 4000; var videoKbps = session.recordDefault;
if (session.recordLocal !== false) { if (session.recordLocal !== false) {
videoKbps = session.recordLocal; videoKbps = session.recordLocal;
} }
@@ -28434,6 +28449,10 @@ async function publishScreen2(constraints, audioList = [], audio = true, overrid
} else { } else {
constraint.audio.noiseSuppression = true; constraint.audio.noiseSuppression = true;
} }
if (session.voiceIsolation === true) {
constraint.audio.voiceIsolation = true;
}
if (session.audioInputChannels) { if (session.audioInputChannels) {
if (constraint.audio === true) { if (constraint.audio === true) {
@@ -28866,7 +28885,7 @@ async function publishScreen2(constraints, audioList = [], audio = true, overrid
log("AUTO RECORD START"); log("AUTO RECORD START");
setTimeout( setTimeout(
function (v) { function (v) {
var videoKbps = 4000; var videoKbps = session.recordDefault;
if (session.recordLocal !== false) { if (session.recordLocal !== false) {
videoKbps = session.recordLocal; videoKbps = session.recordLocal;
} }
@@ -29316,6 +29335,7 @@ function nextFilePlaylist(vid) {
session.publishFile = function (ele, event) { session.publishFile = function (ele, event) {
// webcam stream is used to generated an SDP // webcam stream is used to generated an SDP
log("FILE STREAM SETUP"); log("FILE STREAM SETUP");
if (session.transcript) { if (session.transcript) {
setTimeout(function () { setTimeout(function () {
@@ -29334,7 +29354,6 @@ session.publishFile = function (ele, event) {
var fileURL = URL.createObjectURL(files[0]); var fileURL = URL.createObjectURL(files[0]);
var container = document.createElement("div"); var container = document.createElement("div");
container.id = "container"; container.id = "container";
//container.className = "vidcon";
if (session.cover) { if (session.cover) {
container.style.setProperty("height", "100%", "important"); container.style.setProperty("height", "100%", "important");
@@ -29342,19 +29361,21 @@ session.publishFile = function (ele, event) {
var v = createVideoElement(); var v = createVideoElement();
v.container = container; v.container = container;
if (session.cleanOutput) { if (session.cleanOutput) {
container.style.height = "100%"; container.style.height = "100%";
v.style.maxWidth = "100%"; v.style.maxWidth = "100%";
v.style.boxShadow = "none"; v.style.boxShadow = "none";
} }
container.appendChild(v);
if (session.streamID) { if (session.streamID) {
v.dataset.sid = session.streamID; v.dataset.sid = session.streamID;
} }
getById("gridlayout").appendChild(container); getById("gridlayout").appendChild(container);
if (session.roomid !== false) { if (session.roomid !== false) {
if (session.roomid === "" && (!session.view || session.view === "")) { if (session.roomid === "" && (!session.view || session.view === "")) {
} else { } else {
@@ -29371,13 +29392,12 @@ session.publishFile = function (ele, event) {
getById("head3a").classList.remove("hidden"); getById("head3a").classList.remove("hidden");
getById("logoname").style.display = "none"; getById("logoname").style.display = "none";
} }
getById("head1").className = "hidden";
updatePushId(); updatePushId();
getById("head1").className = "hidden"; getById("head1").className = "hidden";
getById("head2").className = "hidden"; getById("head2").className = "hidden";
if (!session.cleanOutput) { if (!session.cleanOutput) {
getById("chatbutton").className = "float"; getById("chatbutton").className = "float";
getById("sharefilebutton").classList.remove("hidden"); // we won't override "display:none", if set, though. getById("sharefilebutton").classList.remove("hidden"); // we won't override "display:none", if set, though.
@@ -29414,23 +29434,20 @@ session.publishFile = function (ele, event) {
var vid = getById("videosource"); var vid = getById("videosource");
nextFilePlaylist(vid); nextFilePlaylist(vid);
} }
v.id = "videosource"; // could be set to UUID in the future v.id = "videosource"; // could be set to UUID in the future
v.dataset.menu = "context-menu-video"; v.dataset.menu = "context-menu-video";
v.setAttribute("playsinline", "");
v.src = fileURL;
v.playlist = files; v.playlist = files;
v.addEventListener("ended", myHandler, false); // only fires if the video doesn't loop. v.addEventListener("ended", myHandler, false); // only fires if the video doesn't loop.
v.setAttribute("playsinline", "");
v.src = fileURL;
v.className = "tile clean fileshare"; v.className = "tile clean fileshare";
session.videoElement = v; session.videoElement = v;
container.appendChild(v);
session.mirrorExclude = true; session.mirrorExclude = true;
v.addEventListener("click", function (e) { v.addEventListener("click", (e) => {
log("click"); log("click");
try { try {
if (e.ctrlKey || e.metaKey) { if (e.ctrlKey || e.metaKey) {
@@ -29452,7 +29469,8 @@ session.publishFile = function (ele, event) {
v.touchTimeOut = null; v.touchTimeOut = null;
v.touchLastTap = 0; v.touchLastTap = 0;
v.touchCount = 0; v.touchCount = 0;
v.addEventListener("touchend", function (event) {
v.addEventListener("touchend", (event) => {
if (session.disableMouseEvents) { if (session.disableMouseEvents) {
return; return;
} }
@@ -29501,7 +29519,7 @@ session.publishFile = function (ele, event) {
} }
}); });
v.onerror = function () { v.onerror = () => {
if (session.cleanOutput) { if (session.cleanOutput) {
errorlog("File failed to load.\n\nSelect a compatible media file."); errorlog("File failed to load.\n\nSelect a compatible media file.");
} else { } else {
@@ -29509,16 +29527,19 @@ session.publishFile = function (ele, event) {
} }
}; };
v.onloadeddata = function () { v.onloadeddata = () => {
session.mediafileShare = true;
getById("mainmenu").remove();
if (Firefox) { if (Firefox) {
session.streamSrc = v.mozCaptureStream(); session.streamSrc = v.mozCaptureStream();
} else { } else {
session.streamSrc = v.captureStream(); // gaaaaaaaaaaaahhhhhhhh! session.streamSrc = v.captureStream(); // gaaaaaaaaaaaahhhhhhhh!
} }
toggleMute(true); toggleMute(true);
session.streamSrc = outboundAudioPipeline(session.streamSrc);
updateMixer();
if (session.director) { if (session.director) {
} else if (session.scene !== false) { } else if (session.scene !== false) {
} else if (session.roomid !== false) { } else if (session.roomid !== false) {
@@ -29571,6 +29592,9 @@ session.publishFile = function (ele, event) {
container.backgroundColor = "#666"; container.backgroundColor = "#666";
applyMirror(session.mirrorExclude); applyMirror(session.mirrorExclude);
} }
//session.streamSrc = outboundAudioPipeline(session.streamSrc);
//updateMixer();
updateReshareLink(); updateReshareLink();
pokeIframeAPI("started-fileshare"); // depreciated pokeIframeAPI("started-fileshare"); // depreciated
@@ -34982,7 +35006,7 @@ function previewWebcam(miconly = false) {
var constraint = { var constraint = {
audio: false audio: false
}; };
} else if (session.echoCancellation !== false && session.autoGainControl !== false && session.noiseSuppression !== false) { } else if ((session.echoCancellation !== false) && (session.autoGainControl !== false) && (session.noiseSuppression !== false) && (session.voiceIsolation !== true)) {
// AUTO // AUTO
var constraint = { var constraint = {
audio: true audio: true
@@ -35013,6 +35037,10 @@ function previewWebcam(miconly = false) {
} else { } else {
constraint.audio.noiseSuppression = false; constraint.audio.noiseSuppression = false;
} }
if (session.voiceIsolation===true){
constraint.audio.voiceIsolation = true;
}
} }
if (session.videoDevice === 0 || miconly) { if (session.videoDevice === 0 || miconly) {
@@ -35816,9 +35844,14 @@ function pauseVideo(videoEle, update = true) {
} }
function positionMenu(e) { function positionMenu(e) {
var clickCoords = getPosition(e); try {
clickCoordsX = clickCoords.x; var clickCoords = getPosition(e);
clickCoordsY = clickCoords.y; clickCoordsX = clickCoords.x;
clickCoordsY = clickCoords.y;
} catch(e){
errorlog(e);
return;
}
menuWidth = menu.offsetWidth + 4; menuWidth = menu.offsetWidth + 4;
menuHeight = menu.offsetHeight + 4; menuHeight = menu.offsetHeight + 4;
@@ -35881,7 +35914,7 @@ function pauseVideo(videoEle, update = true) {
} else if (taskItemInContext.startWriter) { } else if (taskItemInContext.startWriter) {
taskItemInContext.startWriter(); taskItemInContext.startWriter();
} else { } else {
var videoKbps = 4000; var videoKbps = session.recordDefault;
if (session.recordLocal !== false) { if (session.recordLocal !== false) {
videoKbps = session.recordLocal; videoKbps = session.recordLocal;
} }
@@ -36732,7 +36765,32 @@ function createPopoutChat() {
errorlog(e); errorlog(e);
}; };
} }
window.open("./popout.html?id=" + session.broadcastChannelID, "popup", "width=600,height=480,toolbar=no,menubar=no,resizable=yes");
const popup = window.open("", "popup", "width=600,height=480,toolbar=no,menubar=no,resizable=yes");
popup.onload = () => {
const newUrl = "./HELLO"; // The new URL you want to show
popup.history.replaceState({}, "", newUrl);
};
const iframe = popup.document.createElement('iframe');
iframe.src = "./popout.html?id=" + session.broadcastChannelID;
iframe.style.width = "100%";
iframe.style.height = "100%";
iframe.style.border = "none";
iframe.style.overflow = "hidden";
iframe.style.position = "absolute";
iframe.style.top = "0";
iframe.style.left = "0";
popup.document.body.style.margin = "0";
popup.document.body.style.padding = "0";
popup.document.body.style.overflow = "hidden";
popup.document.body.appendChild(iframe);
popup.document.title = "Chat pop-out";
//window.open("./popout.html?id=" + session.broadcastChannelID, "popup", "width=600,height=480,toolbar=no,menubar=no,resizable=yes");
return false; return false;
} }
@@ -38175,7 +38233,7 @@ async function recordVideo(target, event = null, videoKbps = false) {
if (videoKbps === false) { if (videoKbps === false) {
if (defaultRecordingBitrate == false) { if (defaultRecordingBitrate == false) {
videoKbps = 4000; videoKbps = session.recordDefault;
if (session.recordLocal !== false) { if (session.recordLocal !== false) {
videoKbps = session.recordLocal; videoKbps = session.recordLocal;
} }
@@ -38436,8 +38494,8 @@ async function recordVideo(target, event = null, videoKbps = false) {
} }
var writer = writable.getWriter(); var writer = writable.getWriter();
readable.pipeTo(streamSaver.createWriteStream(filename.toString() + filext, video.recorder.stop));
video.recorder.writer = writer; video.recorder.writer = writer;
readable.pipeTo(streamSaver.createWriteStream(filename.toString() + filext, video.recorder.stop));
pokeIframeAPI("recording-started"); pokeIframeAPI("recording-started");
log(options); log(options);
@@ -38493,6 +38551,7 @@ async function recordVideo(target, event = null, videoKbps = false) {
video.recorder.mediaRecorder.onerror = function (event) { video.recorder.mediaRecorder.onerror = function (event) {
errorlog(event); errorlog(event);
console.log("It's possible using &recordcodec=vp8 might resolve recording errors if caused by an incompatible hardware encoder or codec");
video.recorder.stop(); video.recorder.stop();
session.requestRateLimit(35, UUID); session.requestRateLimit(35, UUID);
if (!session.cleanOutput) { if (!session.cleanOutput) {
@@ -38518,7 +38577,9 @@ async function recordVideo(target, event = null, videoKbps = false) {
setTimeout( setTimeout(
function (v) { function (v) {
v.recorder.mediaRecorder.start(1000); if (v && v.recorder){
v.recorder.mediaRecorder.start(1000);
}
}, },
500, 500,
video video
@@ -39547,6 +39608,7 @@ async function recordLocalVideo(action = null, videoKbps = false, remote = false
video.recorder.mediaRecorder.onerror = function (event) { video.recorder.mediaRecorder.onerror = function (event) {
errorlog(event); errorlog(event);
console.log("It's possible using &recordcodec=vp8 might resolve recording errors if caused by an incompatible hardware encoder or codec");
if (event && event.error && event.error.name) { if (event && event.error && event.error.name) {
video.recorder.stop(event.error.name); video.recorder.stop(event.error.name);
} else { } else {
@@ -42194,6 +42256,14 @@ async function startPublishing() {
session.noiseSuppression = false; session.noiseSuppression = false;
} }
} }
if (!getById("whipoutisolation").classList.contains("hidden")) {
if (getById("whipoutisolation").value === "1") {
session.voiceIsolation = true;
} else {
session.voiceIsolation = false;
}
}
if (!getById("whipoutautogain").classList.contains("hidden")) { if (!getById("whipoutautogain").classList.contains("hidden")) {
if (getById("whipoutautogain").value === "1") { if (getById("whipoutautogain").value === "1") {
session.autoGainControl = true; session.autoGainControl = true;
@@ -43386,7 +43456,7 @@ async function whepIn(whepInput = false, whepInputToken = false, UUID = false) {
"a=ice-pwd:" + "a=ice-pwd:" +
icePwd + icePwd +
"\r\n" + "\r\n" +
"m=audio RTP/AVP 0\r\n" + "m=audio 9 RTP/AVP 0\r\n" +
"a=mid:0\r\n" + "a=mid:0\r\n" +
"a=" + "a=" +
event.candidate.candidate + event.candidate.candidate +
@@ -43557,7 +43627,7 @@ async function whepIn(whepInput = false, whepInputToken = false, UUID = false) {
"a=ice-pwd:" + "a=ice-pwd:" +
icePwd + icePwd +
"\r\n" + "\r\n" +
"m=audio RTP/AVP 0\r\n" + "m=audio 9 RTP/AVP 0\r\n" +
"a=mid:0\r\n"; "a=mid:0\r\n";
candidates.forEach(candidate => { candidates.forEach(candidate => {
patchCandidates += "a=" + candidate.candidate + "\r\n"; patchCandidates += "a=" + candidate.candidate + "\r\n";
@@ -44963,6 +45033,9 @@ addEventToAll(".column", "click", function (e, ele) {
} catch (e) { } catch (e) {
return; return;
} }
if (!bounding_box){
errorlog("No bounding box for ele found");
}
ele.style.top = bounding_box.top + "px"; ele.style.top = bounding_box.top + "px";
ele.style.left = bounding_box.left - 20 + "px"; ele.style.left = bounding_box.left - 20 + "px";
ele.classList.add("in-animation"); ele.classList.add("in-animation");
@@ -45666,6 +45739,9 @@ async function createSecondStream() {
if (session.noiseSuppression === true) { if (session.noiseSuppression === true) {
constraints.audio.noiseSuppression = true; constraints.audio.noiseSuppression = true;
} }
if (session.voiceIsolation === true){
constraint.audio.voiceIsolation = true;
}
//if (audio == false) { //if (audio == false) {
// constraints.audio = false; // constraints.audio = false;
//} //}
@@ -45929,7 +46005,7 @@ async function createSecondStream() {
ele.classList.add("hidden"); ele.classList.add("hidden");
ele.vid = null; ele.vid = null;
} else { } else {
var videoKbps = 4000; var videoKbps = session.recordDefault;
if (session.recordLocal !== false) { if (session.recordLocal !== false) {
videoKbps = session.recordLocal; videoKbps = session.recordLocal;
} }

50
main.js
View File

@@ -1489,9 +1489,11 @@ async function main() {
session.record = false; session.record = false;
session.recordLocal = false; session.recordLocal = false;
} else if (session.recordLocal != parseInt(session.recordLocal)) { } else if (session.recordLocal != parseInt(session.recordLocal)) {
session.recordLocal = 6000; session.recordLocal = session.recordDefault;
} else { } else if (session.recordLocal !== null){
session.recordLocal = parseInt(session.recordLocal); session.recordLocal = parseInt(session.recordLocal);
} else {
session.recordLocal = session.recordDefault;
} }
} }
@@ -1516,10 +1518,10 @@ async function main() {
session.autorecord = true; session.autorecord = true;
if (session.recordLocal === false) { if (session.recordLocal === false) {
let bitautorec = urlParams.get("autorecord"); let bitautorec = urlParams.get("autorecord");
if (bitautorec !== null) { if (bitautorec !== "") {
session.recordLocal = parseInt(bitautorec); session.recordLocal = parseInt(bitautorec);
} else { } else {
session.recordLocal = 6000; session.recordLocal = session.recordDefault;
} }
} }
} }
@@ -1528,9 +1530,11 @@ async function main() {
if (session.recordLocal === false) { if (session.recordLocal === false) {
session.recordLocal = urlParams.get("autorecordlocal"); session.recordLocal = urlParams.get("autorecordlocal");
if (session.recordLocal != parseInt(session.recordLocal)) { if (session.recordLocal != parseInt(session.recordLocal)) {
session.recordLocal = 6000; session.recordLocal = session.recordDefault;
} else { } else if (session.recordLocal !== ""){
session.recordLocal = parseInt(session.recordLocal); session.recordLocal = parseInt(session.recordLocal);
} else {
session.recordLocal = session.recordDefault;
} }
} }
} }
@@ -1539,9 +1543,11 @@ async function main() {
if (session.recordLocal === false) { if (session.recordLocal === false) {
session.recordLocal = urlParams.get("autorecordremote"); session.recordLocal = urlParams.get("autorecordremote");
if (session.recordLocal != parseInt(session.recordLocal)) { if (session.recordLocal != parseInt(session.recordLocal)) {
session.recordLocal = 6000; session.recordLocal = session.recordDefault;
} else { } else if (session.recordLocal !== ""){
session.recordLocal = parseInt(session.recordLocal); session.recordLocal = parseInt(session.recordLocal);
} else {
session.recordLocal = session.recordDefault;
} }
} }
} }
@@ -2198,6 +2204,10 @@ async function main() {
} }
} }
} }
if (session.label){
pokeIframeAPI("this-label", session.label);
}
if (urlParams.has("transparent") || urlParams.has("transparency")) { if (urlParams.has("transparent") || urlParams.has("transparency")) {
// sets the window to be transparent - useful for IFRAMES? // sets the window to be transparent - useful for IFRAMES?
@@ -2418,7 +2428,29 @@ async function main() {
session.noiseSuppression = true; session.noiseSuppression = true;
} }
} }
if (urlParams.has("isolation") || urlParams.has("voiceisolation") || urlParams.has("vi")) {
session.voiceIsolation = urlParams.get("isolation") || urlParams.get("voiceisolation") || urlParams.get("vi");
if (session.voiceIsolation) {
session.voiceIsolation = session.voiceIsolation.toLowerCase();
}
if (session.voiceIsolation == "false") {
session.voiceIsolation = false;
} else if (session.voiceIsolation == "0") {
session.voiceIsolation = false;
} else if (session.voiceIsolation == "no") {
session.voiceIsolation = false;
} else if (session.voiceIsolation == "off") {
session.voiceIsolation = false;
} else {
session.voiceIsolation = true;
}
}
if (session.voiceIsolation !== null) {
getById("whipoutvoiceisolation").classList.add("hidden");
}
if (session.noiseSuppression !== null) { if (session.noiseSuppression !== null) {
getById("whipoutdenoise").classList.add("hidden"); getById("whipoutdenoise").classList.add("hidden");
} }
@@ -7646,7 +7678,7 @@ async function main() {
// blob mode not needed since iOS 15.6 // blob mode not needed since iOS 15.6
script.src = "./thirdparty/StreamSaver_legacy.js?v=2"; // blob mode for Safari script.src = "./thirdparty/StreamSaver_legacy.js?v=2"; // blob mode for Safari
} else { } else {
script.src = "./thirdparty/StreamSaver.js?v=24"; // do not use blob mode script.src = "./thirdparty/StreamSaver.js?v=29"; // do not use blob mode
} }
}; };
script.src = "./thirdparty/polyfill.min.js"; // dynamically load this only if its needed. Keeps loading time down. script.src = "./thirdparty/polyfill.min.js"; // dynamically load this only if its needed. Keeps loading time down.

BIN
media/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
media/overlay1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
media/overlay2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

8
mixer.html
View File

@@ -2230,6 +2230,9 @@
} }
var injectCSS = ` var injectCSS = `
#directorLinks1,#directorLinks2 {
display:none!important;
}
.directorsgrid .vidcon { .directorsgrid .vidcon {
display: inline-block !important; display: inline-block !important;
width: 293.7px !important; width: 293.7px !important;
@@ -2970,12 +2973,15 @@
document.querySelectorAll(".inviteLink").forEach(ele=>{ document.querySelectorAll(".inviteLink").forEach(ele=>{
if (ele.tagName == "A"){ if (ele.tagName == "A"){
ele.href = inviteURL ele.href = inviteURL
ele.title = "Copy link to clipboard";
ele.onclick = function(evt){copyFunction(inviteURL, evt);};
} else if (document.getElementById("obfuscateInvites").checked){ } else if (document.getElementById("obfuscateInvites").checked){
ele.innerHTML = inviteURL; ele.innerHTML = inviteURL;
ele.onclick = function(evt){copyFunction(inviteURL, evt);};
ele.title = "Copy link to clipboard";
} else if (ele.tagName == "I"){ } else if (ele.tagName == "I"){
ele.innerHTML = "URL + ?room="+roomname+additional+additionalParams; ele.innerHTML = "URL + ?room="+roomname+additional+additionalParams;
} }
ele.onclick = function(evt){copyFunction(this, evt);};
}); });
if (event){ if (event){

210
popout.html
View File

@@ -1,126 +1,128 @@
<html> <!DOCTYPE html>
<html lang="en">
<head> <head>
<meta name="theme-color" content="#ffffff" /> <title>VDO.Ninja Chat Pop-out</title>
<!-- <link rel="stylesheet" href="./main.css?ver=22" /> --> <meta charset="UTF-8">
<style> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#ffffff" />
<style>
:root {
--discord-grey-0: #121212;
--discord-grey-1: #1e1f22;
--discord-grey-1a: #1e1f22;
--discord-grey-2: #232428;
--discord-grey-3: #2b2d31;
--discord-grey-4: #2e3035;
--discord-grey-5: #313338;
--discord-grey-6: #383a40;
--discord-grey-7: #404249;
--discord-grey-8: #5e6064;
--discord-text: hsl( 210 calc(1 * 9.1%) 87.1% /1);
:root { --baby-blue: #BCF;
--discord-grey-0: #121212; }
--discord-grey-1: #1e1f22;
--discord-grey-1a: #1e1f22;
--discord-grey-2: #232428;
--discord-grey-3: #2b2d31;
--discord-grey-4: #2e3035;
--discord-grey-5: #313338;
--discord-grey-6: #383a40;
--discord-grey-7: #404249;
--discord-grey-8: #5e6064;
--discord-text: hsl( 210 calc(1 * 9.1%) 87.1% /1);
--baby-blue: #BCF; * {
} padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
* { body{
padding: 0; background-color: var(--discord-grey-0);
margin: 0; height: 100vh;
border: 0; width: 100vw;
box-sizing: border-box; }
}
body{ #chatModule{
background-color: var(--discord-grey-0); display: flex;
height: 100%; flex-direction: column;
width: 100%; padding: 5px;
} height: 100%;
gap: 5px;
justify-content: flex-end;
}
#chatModule{ #chatBody {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 5px; gap: 5px;
height: 100%; overflow-y: auto;
gap: 5px; }
justify-content: flex-end;
}
#chatBody { .outMessage, .inMessage {
display: flex; display: flex;
flex-direction: column; align-items: center;
gap: 5px; justify-content: flex-end;
overflow-y: auto; gap: 5px;
}
.outMessage, .inMessage { font-family: 'Roboto';
display: flex; font-size: 14px;
align-items: center; text-align: right;
justify-content: flex-end; background-color: var(--baby-blue);
gap: 5px; border-radius: 4px;
padding: 2px 5px;
}
font-family: 'Roboto'; .inMessage {
font-size: 14px; color: var(--discord-text);
text-align: right; background-color: var(--discord-grey-7);
background-color: var(--baby-blue); }
border-radius: 4px;
padding: 2px 5px;
}
.inMessage { .outMessage .chat_message {
color: var(--discord-text); font-weight: bold;
background-color: var(--discord-grey-7); }
}
.outMessage .chat_message { ::-webkit-input-placeholder {
font-weight: bold; color: #ccc !important;
} }
::-webkit-input-placeholder { .controls {
color: #ccc !important; display: flex;
} flex-direction: row;
gap: 5px;
height: 25px;
flex-shrink: 0;
}
.controls { .controls input {
display: flex; border-radius: 4px;
flex-direction: row; flex: 3;
gap: 5px; color: var(--discord-text);
height: 25px; background-color: var(--discord-grey-5);
flex-shrink: 0; border: 1px solid var(--discord-grey-8);
} padding: 0px 5px;
}
.controls input { .controls button {
border-radius: 4px; border-radius: 4px;
flex: 3; flex: 1;
color: var(--discord-text); color: var(--discord-text);
background-color: var(--discord-grey-5); background-color: var(--discord-grey-2);
border: 1px solid var(--discord-grey-8); border: 1px solid var(--discord-grey-8);
padding: 0px 5px; }
}
.controls button { /* SCROLL BAR STYLING */
border-radius: 4px; ::-webkit-scrollbar {
flex: 1; width: 12px;
color: var(--discord-text); }
background-color: var(--discord-grey-2);
border: 1px solid var(--discord-grey-8);
}
/* SCROLL BAR STYLING */ ::-webkit-scrollbar-track {
::-webkit-scrollbar { background-color: var(--discord-grey-1);
width: 12px; border-radius: 4px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-thumb {
background-color: var(--discord-grey-1); background-color: var(--discord-grey-7);
border-radius: 4px; border-radius: 4px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb:hover {
background-color: var(--discord-grey-7); background-color: var(--discord-grey-8);
border-radius: 4px; }
}
::-webkit-scrollbar-thumb:hover { </style>
background-color: var(--discord-grey-8);
}
</style>
</head> </head>
<body> <body>
<div id="chatModule" > <div id="chatModule" >

5
thirdparty/StreamSaver.js vendored
View File

@@ -98,7 +98,7 @@ function streamSaverFunction(){
} }
channel.port1.onmessage = evt => { channel.port1.onmessage = evt => {
console.log(evt); //console.log(evt);
// Service worker sent us a link that we should open. // Service worker sent us a link that we should open.
if (evt.data.download) { if (evt.data.download) {
// Special treatment for popup... // Special treatment for popup...
@@ -213,7 +213,7 @@ function streamSaverFunction(){
WritableStream: global.WritableStream || ponyfill.WritableStream, WritableStream: global.WritableStream || ponyfill.WritableStream,
supported: true, supported: true,
version: { full: '2.0.7', major: 2, minor: 0, dot: 7 }, version: { full: '2.0.7', major: 2, minor: 0, dot: 7 },
mitm: './thirdparty/mitm.html?v=3' mitm: './thirdparty/mitm.html?v=4'
} }
//console.log(streamSaver); //console.log(streamSaver);
@@ -232,6 +232,7 @@ function streamSaverFunction(){
iframe.loaded = false iframe.loaded = false
iframe.name = 'iframe' iframe.name = 'iframe'
iframe.isIframe = true iframe.isIframe = true
iframe.credentialless = true
iframe.postMessage = (...args) => iframe.contentWindow.postMessage(...args) iframe.postMessage = (...args) => iframe.contentWindow.postMessage(...args)
iframe.addEventListener('load', () => { iframe.addEventListener('load', () => {
iframe.loaded = true iframe.loaded = true

7
thirdparty/mitm.html vendored
View File

@@ -41,7 +41,7 @@ let scope = ''
function registerWorker() { function registerWorker() {
return navigator.serviceWorker.getRegistration('./').then(swReg => { return navigator.serviceWorker.getRegistration('./').then(swReg => {
return swReg || navigator.serviceWorker.register('sw.js', { scope: './' }) return swReg || navigator.serviceWorker.register('sw.js?v=2', { scope: './' })
}).then(swReg => { }).then(swReg => {
const swRegTmp = swReg.installing || swReg.waiting const swRegTmp = swReg.installing || swReg.waiting
@@ -63,6 +63,11 @@ function registerWorker() {
function onMessage (event) { function onMessage (event) {
let { data, ports, origin } = event let { data, ports, origin } = event
// Ignore messages other than from iframe parent (e.g. extensions)
if (event.source !== window.parent) {
return
}
// It's important to have a messageChannel, don't want to interfere // It's important to have a messageChannel, don't want to interfere
// with other simultaneous downloads // with other simultaneous downloads
if (!ports || !ports.length) { if (!ports || !ports.length) {

2
webrtc.js
View File

File diff suppressed because one or more lines are too long