Merge pull request #163 from steveseguin/Version-6

release version 6 updates
2026-05-01 11:05:24 +00:00 · 2020-06-09 12:37:52 -04:00 · 2020-06-09 12:35:40 -04:00 · 2020-05-23 08:26:59 -04:00 · 2020-05-18 08:34:08 -04:00 · 2020-05-18 08:28:57 -04:00
13 changed files with 322 additions and 2351 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1,6 @@
+# These are supported funding model platforms
+
+# Thank you <3 
+
+github: [steveseguin]
+
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 ## What is OBS NINJA
 OBS.Ninja uses peer-to-peer technology to bring remote cameras into OBS. In most cases, all video data is transferred directly from peer to peer, without needing to go through any video server. This results in high-quality video with super low latency. In a small number of cases, video data may go through an encrypted TURN server, which is used to facilitate peer connections when otherwise not possible.

-OBS Ninja is not affiliated with OBS, but OBS Ninja is dependent on OBS to function. OBS.Ninja is designed to allow content creators to produce real-time live shows with OBS Studio and to allow smartphones to be used as webcams on a Windows PC. 
+OBS Ninja is not affiliated with OBS. OBS.Ninja is designed to allow content creators to produce real-time live shows with OBS Studio (or other compatible software) using remote media streams. It can also turn smartphones into wireless webcams, with additional Virtualcam software. 

 Please see the sub-reddit added info: https://reddit.com/r/obsninja  
 Also check out the FAQ for more info: https://github.com/steveseguin/obsninja/wiki
@@ -13,22 +13,22 @@ I demo the basic usage of OBS.Ninja on YouTube: https://www.youtube.com/watch?v=

 Check the subreddit for added use cases, advanced features, and support. Advanced features includes high-quality audio modes, custom video resolutions, and more.

-MacOS users will face some challenges in using OBS currently, but there are workarounds. Please see Reddit or the Wiki.
+MacOS users will face some challenges in using OBS currently, but there are workarounds. Please see the subreddit or the Wiki.

 ## What's in this repo?
-This repo contains the software for OBS.ninja and its TURN server deployment settings. Feel free to use it as you will; code contributions very welcomed. You may be best suited at getting ahold of me at steve@seguin.email instead of via Github if urgent though.
+This repo contains software for OBS.Ninja, including the HTML landing page for its Electron Capture app offering. A sample config file and instructions for setting up a TURN server (video relay server), is also provided. You may also find the Wiki for the project in this repo, which contains added information on how to use the software.

 ## How to Deploy this Repo:
-To use, just download and host on a HTTPS-enabled webserver. You may want to hide the .html extensions within your HTTP server as well, else the generated links will not work. Customize the code as desired. 
+To use, just download and host on a HTTPS-enabled webserver. You may want to hide the .html extensions within your HTTP server as well, else the generated links will not work. 

-Directions on how to deploy a TURN server are listed in the turnserver.conf file. You may wish to do so if you are having problems with my existing TURN server, although most users will not need one. About 10% of users, those often connected via 4G LTE, will require a TURN server. My TURN server does cost me money to host, which I do for free, so please do not abuse it.
-
-Why deploy OBS.Ninja? You may want to customize the UI for your brand/business, or control security/privacy beyond what I do already. I personally feel it is best to CONTRIBUTE desired changes to this repo instead, as technology moves fast and older forked versions will become obsolete. 
+Directions on how to deploy a TURN server are listed in the turnserver.conf file. You may wish to do so if you are having problems with my existing TURN server, although most users will not need one. About 10% of users, those often connected via 4G LTE, will require a TURN server. 

 ## Server side / API software?
-Other than the hosted TURN server, OBS.Ninja uses public STUN servers and a hosted handshake server. These are used to facilitate the initial setup of peer connections and are not required after a peer connection is established. Development builds of OBS.Ninja may include debugging software, but in-production releases have this removed.
+Since OBS.Ninja uses peer-2-peer technology, video connections are made directly between viewer and publisher in 90% of cases. Hosting a TURN server yourself may help improve performance, but less than 1% of users will see any benefit of this. Details on how to deploy a TURN server are provided. For those capable of hosting their own TURN server, that would be appreciated if possible, as TURN servers are the only real cost incurred by OBS.Ninja at present. (other than time, of course)

-A design goal of OBS.Ninja is to be serverless and we are 99% of the way there. This design objective ensures OBS.Ninja can be offered for free, along with providing increased levels of security and privacy.
+Other than TURN servers, OBS.Ninja also uses public STUN servers and a hosted handshake server. These are used to facilitate the initial setup of peer connections and are generally not required after a peer connection is established. Development builds of OBS.Ninja may include debugging software, but in-production releases have this removed. 
+
+A design goal of OBS.Ninja is to be serverless and we are 99% of the way there. This design objective ensures OBS.Ninja can be offered for free, along with providing increased levels of security and privacy. 

 ## Issues? problems? Not working?

@@ -47,13 +47,18 @@ https://github.com/steveseguin/electroncapture
 A website designed to also work with OBS.Ninja as a Broadcasting tool. Share your webcam, window, desktop, or video file with friends and family. Peer-2-peer, so privacy can be maintained, but you can also list your broadcasts for others to watch.
 https://steves.app/

+#### StageTen.tv
+A browser-based studio solution and simplified alternative to OBS, with built-in OBS.Ninja functionality. It is a server-based approach to group interactions and live production. Steve Seguin is affiliated with StageTen, yet StageTen is not affiliated with OBS.Ninja.
+
 ## Privacy
-I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with OBS.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you. See: turnserver.conf
+I try to avoid data collection whenever possible and video streams are generally designed to be private, but use at your own risk. It is best to not share links created with OBS.Ninja with those you do not trust. I've provided instructions on how to deploy a TURN server if IP-address privacy is an issue for you. See: turnserver.conf 
+
+https://obs.ninja may unavoidably use cookies that are exempt from EU laws of requiring notice of their use; they are exempt as they are required and necessary for the technical functioning of the web service. Our webserver is cached by Cloudflare and it provides denial of server protection for the users of OBS.Ninja.

 Additional security features are being added weekly on request. Please ask about these options if added security and privacy are requirements for you.

 ## Feedback
-Idea, feed back, bugs, etc -- all welcomed.  I'm dumping many of my ideas as issues into Github. Feedback is typcially most welcomed via Email or Discord.
+Ideas, feedback, bugs, etc -- all welcomed.  I'm dumping many of my ideas as issues into Github. Feedback is typcially most welcomed via Email or Discord.

 ## Licence 
 OBS.Ninja is available as open-source; please see the LICENCE.md file for details.
--- a/animations.js
+++ b/animations.js
@@ -1,115 +1 @@
-
-/* We need to create dynamic keyframes to show the animation from full-screen to normal. So we create a stylesheet in which we can insert CSS keyframe rules */
-$("body").append('<style id="lightbox-animations" type="text/css"></style>');
-
-/* Click on the container */
-$(".column").on('click', function() {
-	/* The position of the container will be set to fixed, so set the top & left properties of the container */
-
-	var bounding_box = $(this).get(0).getBoundingClientRect();
-	$(this).css({ top: bounding_box.top + 'px', left: bounding_box.left -20+ 'px' });
-
-	/* Set container to fixed position. Add animation */
-	$(this).addClass('in-animation');
-
-	/* An empty container has to be added in place of the lightbox container so that the elements below don't come up
-	Dimensions of this empty container is the same as the original container */
-	$("#empty-container").remove();
-	$('<div id="empty-container" class="column"></div>').insertAfter(this);
-
-	/* To animate the container from full-screen to normal, we need dynamic keyframes */
-	var styles = '';
-	styles = '@keyframes outlightbox {';
-	styles += '0% {';
-	styles += 'height: 100%;';
-	styles += 'width: 100%;';
-	styles += 'top: 0px;';
-	styles += 'left: 0px;';
-	styles += '}';
-	styles += '50% {';
-	styles += 'height: 220px;';
-	styles += 'top: ' + bounding_box.y + 'px;';
-	styles += '}';
-	styles += '100% {';
-	styles += 'height: 220px;';
-	styles += 'width: '+bounding_box.width+'px;';
-	styles += 'top: ' + bounding_box.y + 'px;';
-	styles += 'left: ' + bounding_box.x + 'px;';
-	styles += '}';
-	styles += '}';
-
-	/* Add keyframe to CSS */
-	$("#lightbox-animations").get(0).sheet.insertRule(styles, 0);
-
-	/* Hide the window scrollbar */
-	$("body").css('overflow', 'hidden');
-});
-
-/* Click on close button when full-screen */
-$(".close").on('click', function(e) {
-$(this).hide();
-$(".container-inner").hide();
-/* Window scrollbar normal */
-$("body").css('overflow', 'auto');
-
-var bounding_box = $(this).parent().get(0).getBoundingClientRect();
-$(this).parent().css({ top: bounding_box.top + 'px', left: bounding_box.left + 'px' });
-
-/* Show animation */
-$(this).parent().addClass('out-animation');
-
-e.stopPropagation();
-});
-
-/* On animationend : from normal to full screen & full screen to normal */
-$(".column").on('animationend', function(e) {
-/* On animation end from normal to full-screen */
-if(e.originalEvent.animationName == 'inlightbox') {
-	$(this).children(".close").show();
-	$(this).children(".container-inner").show();
-}
-/* On animation end from full-screen to normal */
-else if(e.originalEvent.animationName == 'outlightbox') {
-/* Remove fixed positioning, remove animation rules */
-$(this).removeClass('in-animation').removeClass('out-animation').removeClass('columnfade');
-
-/* Remove the empty container that was earlier added */
-$("#empty-container").remove();
-
-/* Delete the dynamic keyframe rule that was earlier created */
-$("#lightbox-animations").get(0).sheet.deleteRule(0);
-}
-});
-
- 
-// multiselect dropdowns
-$('.multiselect-trigger').on('mousedown touchend focusin focusout', function(e) {
-    var state = $(this).data('state') || 0;
-    if( state == 0 ) {
-        // open the dropdown
-        $(this).data('state', '1').addClass('open').removeClass('closed');
-        $(this).find('.fa').removeClass('fa-chevron-down').addClass('fa-chevron-up');
-        $(this).parent().find('.multiselect-contents').show();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();;
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();;
-    } else {
-        // close the dropdown
-        $(this).data('state', '0').addClass('closed').removeClass('open');
-        $(this).find('.fa').removeClass('fa-chevron-up').addClass('fa-chevron-down');
-        //$(this).parent().find('.multiselect-contents').hide();
-		//$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();;
-		$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();;
-    } 
-    e.preventDefault();
-});
-
-
-// when no preference is checked, uncheck the others
-$('#multiselect1').on('change', function(e) {
-    if( $(this).is(':checked') ) {
-        $(this).parent().parent().find('input[type="checkbox"]').not('#multiselect1').prop('checked', false);
-    }
-    e.preventDefault();
-});
- 
+var _0x5d73=['state','click','.multiselect-contents','get','checked','hide','overflow','hidden','out-animation','children','mousedown\x20touchend\x20focusin\x20focusout','insertRule','animationName','<style\x20id=\x22lightbox-animations\x22\x20type=\x22text/css\x22></style>','auto','getBoundingClientRect','.close','left:\x20','data','not','#multiselect1','body','left:\x200px;','parent','in-animation','find','css',':checked','50%\x20{','open','append','fa-chevron-down','width:\x20100%;','fa-chevron-up','.fa','.column','.multiselect-trigger','closed','change','left','width:\x20','stopPropagation','sheet','top','width','show','outlightbox','prop','input[type=\x22checkbox\x22]','px;','deleteRule','originalEvent','#empty-container','removeClass','preventDefault','addClass','remove'];(function(_0x595800,_0x40cbf8){var _0x1a0c5e=function(_0x38e004){while(--_0x38e004){_0x595800['push'](_0x595800['shift']());}};_0x1a0c5e(++_0x40cbf8);}(_0x5d73,0x154));var _0x431c=function(_0x595800,_0x40cbf8){_0x595800=_0x595800-0x0;var _0x1a0c5e=_0x5d73[_0x595800];return _0x1a0c5e;};$(_0x431c('0x17'))[_0x431c('0x20')](_0x431c('0xf'));$(_0x431c('0x25'))['on']('click',function(){var _0xe8d30c=$(this)[_0x431c('0x5')](0x0)[_0x431c('0x11')]();$(this)[_0x431c('0x1c')]({'top':_0xe8d30c[_0x431c('0x2d')]+'px','left':_0xe8d30c[_0x431c('0x29')]-0x14+'px'});$(this)[_0x431c('0x0')](_0x431c('0x1a'));$(_0x431c('0x36'))[_0x431c('0x1')]();$('<div\x20id=\x22empty-container\x22\x20class=\x22column\x22></div>')['insertAfter'](this);var _0x2e9e26='';_0x2e9e26='@keyframes\x20outlightbox\x20{';_0x2e9e26+='0%\x20{';_0x2e9e26+='height:\x20100%;';_0x2e9e26+=_0x431c('0x22');_0x2e9e26+='top:\x200px;';_0x2e9e26+=_0x431c('0x18');_0x2e9e26+='}';_0x2e9e26+=_0x431c('0x1e');_0x2e9e26+='height:\x20220px;';_0x2e9e26+='top:\x20'+_0xe8d30c['y']+_0x431c('0x33');_0x2e9e26+='}';_0x2e9e26+='100%\x20{';_0x2e9e26+='height:\x20220px;';_0x2e9e26+=_0x431c('0x2a')+_0xe8d30c[_0x431c('0x2e')]+'px;';_0x2e9e26+='top:\x20'+_0xe8d30c['y']+_0x431c('0x33');_0x2e9e26+=_0x431c('0x13')+_0xe8d30c['x']+_0x431c('0x33');_0x2e9e26+='}';_0x2e9e26+='}';$('#lightbox-animations')['get'](0x0)[_0x431c('0x2c')][_0x431c('0xd')](_0x2e9e26,0x0);$('body')[_0x431c('0x1c')]('overflow',_0x431c('0x9'));});$(_0x431c('0x12'))['on'](_0x431c('0x3'),function(_0x4329aa){$(this)[_0x431c('0x7')]();$('.container-inner')[_0x431c('0x7')]();$(_0x431c('0x17'))['css'](_0x431c('0x8'),_0x431c('0x10'));var _0xb72a49=$(this)[_0x431c('0x19')]()[_0x431c('0x5')](0x0)[_0x431c('0x11')]();$(this)[_0x431c('0x19')]()['css']({'top':_0xb72a49[_0x431c('0x2d')]+'px','left':_0xb72a49[_0x431c('0x29')]+'px'});$(this)['parent']()[_0x431c('0x0')]('out-animation');_0x4329aa[_0x431c('0x2b')]();});$(_0x431c('0x25'))['on']('animationend',function(_0x5025e5){if(_0x5025e5[_0x431c('0x35')][_0x431c('0xe')]=='inlightbox'){$(this)[_0x431c('0xb')](_0x431c('0x12'))[_0x431c('0x2f')]();$(this)['children']('.container-inner')[_0x431c('0x2f')]();}else if(_0x5025e5[_0x431c('0x35')]['animationName']==_0x431c('0x30')){$(this)[_0x431c('0x37')](_0x431c('0x1a'))[_0x431c('0x37')](_0x431c('0xa'))[_0x431c('0x37')]('columnfade');$(_0x431c('0x36'))[_0x431c('0x1')]();$('#lightbox-animations')['get'](0x0)['sheet'][_0x431c('0x34')](0x0);}});$(_0x431c('0x26'))['on'](_0x431c('0xc'),function(_0x3fce8b){var _0x28cd2d=$(this)[_0x431c('0x14')]('state')||0x0;if(_0x28cd2d==0x0){$(this)['data']('state','1')['addClass'](_0x431c('0x1f'))[_0x431c('0x37')](_0x431c('0x27'));$(this)[_0x431c('0x1b')]('.fa')[_0x431c('0x37')](_0x431c('0x21'))[_0x431c('0x0')](_0x431c('0x23'));$(this)[_0x431c('0x19')]()[_0x431c('0x1b')](_0x431c('0x4'))[_0x431c('0x2f')]();$(this)[_0x431c('0x19')]()[_0x431c('0x1b')](_0x431c('0x4'))[_0x431c('0x1b')](_0x431c('0x32'))[_0x431c('0x19')]()[_0x431c('0x2f')]();;$(this)[_0x431c('0x19')]()['find'](_0x431c('0x4'))[_0x431c('0x1b')](_0x431c('0x32'))['show']();;}else{$(this)[_0x431c('0x14')](_0x431c('0x2'),'0')['addClass']('closed')[_0x431c('0x37')]('open');$(this)[_0x431c('0x1b')](_0x431c('0x24'))['removeClass']('fa-chevron-up')[_0x431c('0x0')](_0x431c('0x21'));$(this)[_0x431c('0x19')]()['find'](_0x431c('0x4'))[_0x431c('0x1b')]('input[type=\x22checkbox\x22]')[_0x431c('0x15')](_0x431c('0x1d'))[_0x431c('0x19')]()[_0x431c('0x7')]();;$(this)[_0x431c('0x19')]()[_0x431c('0x1b')](_0x431c('0x4'))['find'](_0x431c('0x32'))['hide']();;}_0x3fce8b[_0x431c('0x38')]();});$(_0x431c('0x16'))['on'](_0x431c('0x28'),function(_0x132688){if($(this)['is'](':checked')){$(this)['parent']()[_0x431c('0x19')]()[_0x431c('0x1b')](_0x431c('0x32'))[_0x431c('0x15')](_0x431c('0x16'))[_0x431c('0x31')](_0x431c('0x6'),![]);}_0x132688[_0x431c('0x38')]();});
--- a/electron.html
+++ b/electron.html
@@ -75,21 +75,31 @@ input[type='checkbox']:checked {
 <body >

 <div id="header" style="-webkit-app-region: drag;color:white;font-size:2em">OBS.Ninja</div>
-<div class="formcss"   >
+<div class="formcss" >
+
 	<input type="checkbox" class="check" id="prefervp9" name="prefervp9" value="false" onclick="modURL(this);">
 	<label for="prefervp9">Force VP9 Codec</label>
+	
 	<input type="checkbox" class="check" id="showcursor" name="showcursor" value="false" onclick="modURL(this);">
 	<label for="showcursor">Show Mouse Cursor</label>
+	
 	<input type="checkbox" class="check"  id="highbitrate" name="highbitrate" value="false" onclick="modURL(this);">
 	<label for="highbitrate">High Video Bitrate</label>
+	
 	<input type="checkbox" class="check" id="stereo" name="stereo" value="false" onclick="modURL(this);">
-	<label for="stereo">Pro Audio Mode</label><br><br><br>
-	<div class="formcss">
-    <input type="text" id="changeText" class="inputfield" value="http://obs.ninja/?view=" onchange="modURL"   onkeyup="enterPressed(event, gohere);" />
-	<button  onclick="gohere();" id="gobutton">GO</button>
-	<br><br>
-	<label for="audioOutput">Audio output destination: </label><select id="audioOutput" style="max-width:400px"></select>
-	</div>
+	<label for="stereo">Pro Audio Mode</label>
+	
+	<input type="checkbox" class="check" id="buffer" name="buffer" value="false" onclick="modURL(this);">
+	<label for="buffer">Lip-sync Fix</label>
+	
+	<br><br><br>
+	<div class="formcss"><center>
+		<input type="text" id="changeText" class="inputfield" value="http://obs.ninja/?view=" onchange="modURL"   onkeyup="enterPressed(event, gohere);" />
+		<button  onclick="gohere();" id="gobutton">GO</button>
+		<br><br>
+		<label for="audioOutput">Audio output destination: </label><select id="audioOutput" style="max-width:400px"></select>
+		
+	</center></div>
 </div>


@@ -121,7 +131,7 @@ function getPermssions(e){
 		return;
 	} 
 	e.currentTarget.blur();
-	navigator.mediaDevices.getUserMedia({audio: true,video: false}).then(function(stream){
+	navigator.mediaDevices.getUserMedia({audio: true,video: false}).then((stream)=>{
 		navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(console.error); // list all devices
 		stream.getTracks().forEach(track => {
 		    track.stop();
@@ -207,10 +217,13 @@ function updateURLParameter(url, param, paramVal){
        if(TheParams){baseURL = TheParams;}
    }

-	if (paramVal==false){
+	if (paramVal===false){
 		temp="";
 		if(TheAnchor){temp += "#" + TheAnchor;}
 		var rows_txt = temp
+	} else if  (paramVal===""){
+		if(TheAnchor){paramVal += "#" + TheAnchor;}
+		var rows_txt = temp + "" + param;
 	} else {
 		if(TheAnchor){paramVal += "#" + TheAnchor;}
 		var rows_txt = temp + "" + param + "=" + paramVal;
@@ -230,7 +243,7 @@ function modURL(ele=false){
 	console.log(url);
 	if ((url.split("view").length>0) || (url.split("room").length>0)){
 			if (!document.getElementById("showcursor").checked){
-				url=updateURLParameter(url, "nocursor", "1");
+				url=updateURLParameter(url, "nocursor", "");
 			} else {
 				url=updateURLParameter(url, "nocursor", false);
 			}
@@ -254,12 +267,20 @@ function modURL(ele=false){
 			  
 			  if (ele.id =="stereo"){
 				if (document.getElementById("stereo").checked){
-					url=updateURLParameter(url, "stereo", "1");
+					url=updateURLParameter(url, "stereo", "");
 					alert('Audio bitrate increased to 256kbps.\n\nPlease note: the Video Publisher must also have the stereo flag enabled for stereo to work.');
 				} else {
 					url=updateURLParameter(url, "stereo", false);
 				}
 			  }
+			  
+			  if (ele.id =="buffer"){
+				if (document.getElementById("buffer").checked){
+					url=updateURLParameter(url, "buffer", "");
+				} else {
+					url=updateURLParameter(url, "buffer", false);
+				}
+			  }
 		}
 		  
 	}
--- a/index.html
+++ b/index.html
@@ -2,24 +2,49 @@
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-<meta name="copyright" content="&copy; 2020 Stephen Seguin" />
 <meta content="utf-8" http-equiv="encoding">
+
+<meta name="copyright" content="&copy; 2020 Stephen Seguin" />
+
 <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
 <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon-16x16.png">
 <link rel="icon" href="./images/favicon.ico" />
+
+<!-- Primary Meta Tags -->
+<title>OBS.Ninja</title>
+<meta name="title" content="OBS.Ninja">
+<meta name="description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free.">
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://obs.ninja/">
+<meta property="og:title" content="OBS.Ninja">
+<meta property="og:description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free.">
+<meta property="og:image" content="./images/obsNinja_logo_full.png">
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image">
+<meta property="twitter:url" content="https://obs.ninja/">
+<meta property="twitter:title" content="OBS.Ninja">
+<meta property="twitter:description" content="Bring live video from your smartphone, computer, or friends directly into OBS Studio. 100% free.">
+<meta property="twitter:image" content="./images/obsNinja_logo_full.png">
+
+
 <meta name="msapplication-TileColor" content="#da532c">
 <meta name="theme-color" content="#ffffff">
+
+<!-- <script src="//console.re/connector.js" data-channel="obsninjaalpha" id="consolerescript"></script> -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 <script type="text/javascript" src="./thirdparty/qrcode.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
-
 <link rel="stylesheet" href="./main.css" />
+
 </head>
-<body  id="main" class="cat">
-	<script language="javascript" type="text/javascript" src="./CodecsHandler.js"></script>
-	<script language="javascript" type="text/javascript" src="./webrtc.js?version=12"></script>
+<body id="main" class="cat">
+	<script language="javascript" type="text/javascript" src="./thirdparty/CodecsHandler.js"></script>
+	<script language="javascript" type="text/javascript" src="./webrtc.js"></script>
 	<input id='zoomSlider'type="range" style="display:none">
 	<div id="header">
 		<font style="font-size:130%;">
@@ -27,7 +52,8 @@
 			<span data-translate="logo-header"><font id="qos">O</font>BS.Ninja </a></span>
 			<div id="head1" style="display:inline-block;position:relative;">
 				<input id="joinroomID" name="joinroomID" size=26 placeholder=" Join by Room Name here"></input>
-				<button style="padding:0px;margin: 0 0" onclick="jumptoroom();">&nbsp;<span data-translate="GO">GO</span>&nbsp;</button>
+				<button style="padding:0px;margin: 0 0;background-color:#CCC;" onclick="jumptoroom();">&nbsp;<span data-translate="GO">GO</span>&nbsp;</button>
+				
 			</div>
 			<div id="head3" style="display:inline-block" class='advanced'>
 				<font style='font-size:80%;color:#888' id="copythisurl"> &nbsp; <span data-translate="copy-this-url">Copy this URL into an OBS "Browser Source"</span> =>  &nbsp; </font>
@@ -46,17 +72,22 @@
 			</div>

 		</font>
+		<span onclick="toggle(document.getElementById('languages'));"  style="cursor:pointer;" ><i style="float:right; bottom:0px; cursor:pointer; position: absolute;right: 10px;color: #D9E4EB;padding: 0;margin:2px 2px 0 0 ; font-size: 140%;" class="fa fa-language" aria-hidden="true"></i></span>
+				
 		<hr />
 	</div>

 	<div id="mutebutton" onclick="toggleMute()" class='advanced float3' style="cursor:pointer" alt="Toggle the mic">
 		<i style="font-size:48px;color:white" id="mutetoggle" class="fa fa-microphone my-float"></i>
 	</div>
+	<div id="mutevideobutton" onclick="toggleVideoMute()" class='advanced float4' style="cursor:pointer" alt="Toggle the camera">
+		<i style="font-size:48px;color:white" id="mutevideotoggle" class="fa fa-eye my-float"></i>
+	</div>
 	<div id="helpbutton" onclick="alert('Email steve@seguin.email if the system breaks or check https://reddit.com/r/obsninja for support.\n\nThere are some advanced options hidden away, such as persistent stream links and custom resolutions.\n\nMacOS users should be using OBS v23 due to a bug in v24 and v25')"  class='advanced float2' style="cursor:pointer" alt="How to Use This with OBS">
 		<i style="font-size:48px;color:white;" class="fa fa-question-circle my-float"></i>
 	</div>

-	<div id="mainmenu" class="row" style="align:center;">
+	<div id="mainmenu" class="row" style="opacity: 0; align:center;">
 		<div id="container-1" class="column columnfade" style="background-color:#ddd;">
 			<h2><span data-translate="add-group-chat">Add Group Chat to OBS</span></h2>
 			<div class="container-inner">
@@ -72,11 +103,9 @@
 				<span data-translate="added-notes">
 				<u><i>Added Notes:</i></u>
 				<li>Anyone can enter a room if they know the name, so keep it unique</li>
-				<li>Having more than four (4) people in a room is not advisable due to performance reasons, but it depends on your hardware.</li>
-				<li>iOS devices are limited to group sizes of no more than two (2) people. This is a hardware limitation.</li>
-				<li>The "Recording" option is new and is considered experimental.</li>
-				<li>You must "Add" a video feed to the "Group Scene" for it to appear there.</li>
-				<li>There is a new "enhanced fullscreen" button added to the Guest's view.</li>
+				<li>Invite only guests to the room you trust.</li>
+				<li>iOS devices will share just their audio with other guests; this is mainly a hardware limitation</li>
+				<li>The "Recording" option is considered experimental.</li>
 				</span>
 				</ul>
 			</div>
@@ -90,28 +119,35 @@
 		<div id="container-3" class="column columnfade" onclick="previewWebcam()"  style="background-color:#ddd;">
 			<h2 id="add_camera"><span data-translate="add-your-camera">Add your Camera to OBS</span></h2>
 			<div class="container-inner"><br />
-				<p><span data-translate="select-audio-video">Select the audio/video source below</span></p>
-				<button onclick="publishWebcam()" id="gowebcam" class="gowebcam"><span data-translate="waiting-for-camera">Waiting for Camera to Load</span></button>
-				<p><video id="previewWebcam" oncanplay="updateStats();"  muted controls autoplay playsinline style="max-width:640px; max-width:83vw; max-height:30vh"></video>
 				
-				</p>
+				<p><video id="previewWebcam" oncanplay="updateStats();"  muted controls autoplay playsinline style="max-width:640px; max-width:83vw; max-height:30vh"></video></p>
+
 				<div id="infof"></div>
+				<button onclick="publishWebcam()" id="gowebcam" class="gowebcam" disabled><span data-translate="waiting-for-camera">Waiting for Camera to Load</span></button>
 				<br/>
-				<p><span data-translate="video-source">Video source</span>: <select id="videoSource"></select></p><br/>
 				
-				<form id="webcamquality">
-				<input type="radio" id="fullhd" name="resolution" value="0">
-				<label for="fullhd"><span data-translate="max-resolution">Max Resolution</span> </label> | 
-				<input type="radio" checked id="halfhd" name="resolution" value="1">
-				<label for="halfhd"><span data-translate="balanced">Balanced</span> </label> | 
-				<input type="radio" id="nothd" name="resolution" value="3">
-				<label for="nothd"><span data-translate="smooth-cool">Smooth and Cool</span></label>
-				</form>
-				<center><div id="webcamstats" ></div></center><br/>
-	
+				<span   style=" background-color: #f3f3f3; display: inline-block; padding:5px 10px; border: 1px solid #ccc; vertical-align: middle;">
+					<span data-translate="video-source">Video source</span>: <select id="videoSource" style="background-color: #FFF; padding:5px; display: display:inline-block;vertical-align: middle;"></select>
+					<span id="gear_webcam" style="display:inline-block" onclick="toggle(document.getElementById('videoSettings'));">
+						&nbsp;&nbsp;<i class="fa fa-cog" style="font-size: 170%; vertical-align: middle;" aria-hidden="true"></i>
+					</span>
+				</span><br />
+				<center>
+				<span id='videoSettings' style="margin:auto auto; display:none; background-color: #f3f3f3; max-width:500px; padding:10px 0; margin: 0 0 5px 0;">
+					<form id="webcamquality">
+					<input type="radio" id="fullhd" name="resolution" value="0">
+					<label for="fullhd"><span data-translate="max-resolution">Max Resolution</span> </label> | 
+					<input type="radio" checked id="halfhd" name="resolution" value="1">
+					<label for="halfhd"><span data-translate="balanced">Balanced</span> </label> | 
+					<input type="radio" id="nothd" name="resolution" value="2">
+					<label for="nothd"><span data-translate="smooth-cool">Smooth and Cool</span></label>
+					<div id="webcamstats" style="padding:5px 0 0 0"></div>
+					</form>
+				</span><br/>
+				</center>
 				<div class="form-group multiselect">
 					<a class="form-control multiselect-trigger" tabindex="3">
-						<div id="audioTitle" class="title"><span data-translate="select-audio-source">Select Audio Sources</span>:<i class="fa fa-chevron-down" aria-hidden="true"></i> </div>
+						<div id="audioTitle"  style="padding:5px" class="title"><span data-translate="select-audio-source">Select Audio Source</span>:<i class="fa fa-chevron-down" aria-hidden="true"></i> </div>
 					</a>
 					<ul id="audioSource" class="multiselect-contents">
 						<li><input type="checkbox" id="multiselect1" name="multiselect1" style="display:none" checked value="ZZZ"> <label for="multiselect1">
@@ -136,8 +172,26 @@
 					<p><img src="./images/share.jpg" style="max-height:55vh"/></p>
 				</span>
 				<br />
-				<button style="padding:10px;border:3px solid #CCC; cursor:pointer; background-color:#FFF" onclick="publishScreen()" ><span data-translate="select-screen-to-share">SELECT SCREEN TO SHARE</span></button>
-				<br /><br />
+				<button style="padding:13px;border:3px solid #CCC; font-size:140%; cursor:pointer; background-color:#FFF" onclick="publishScreen()" ><span data-translate="select-screen-to-share">SELECT SCREEN TO SHARE</span></button>
+				
+				<span id="gear_screen" style="display:inline-block ;cursor:pointer;" onclick="toggle(document.getElementById('videoSettings2'));">
+					&nbsp;&nbsp;<i class="fa fa-cog" style="font-size: 170%; vertical-align: middle;" aria-hidden="true"></i>
+				</span>
+					
+				<center>
+				
+				<span id='videoSettings2' style="margin:auto auto; display:none; background-color: white; vertical-aligh:middle; border: 3px solid #ccc; max-width:500px; padding:10px 0 5px 0; margin: 10px 0 5px 0;">
+					<form id="webcamquality2">
+					<input type="radio" id="fullhd2" name="resolution2" value="0">
+					<label for="fullhd"><span data-translate="max-resolution">1080p (hi-def)</span> </label> &nbsp;&nbsp;|&nbsp;&nbsp;
+					<input type="radio" checked id="halfhd2" name="resolution2" value="1">
+					<label for="halfhd"><span data-translate="balanced">720p (balanced)</span> </label> &nbsp;&nbsp;|&nbsp;&nbsp;
+					<input type="radio" id="nothd2" name="resolution2" value="2">
+					<label for="nothd"><span data-translate="smooth-cool">360p (smooth)</span></label>
+					<div id="webcamstats2" style="padding:5px 0 0 0"></div>
+					</form>
+				</span><br/>
+				</center>
 				<p><span data-translate="audio-sources">Audio Sources</span>:<br />
 				<select id="audioSourceScreenshare" multiple style="height:60px;width:200px; resize: both; overflow: auto; padding:5px" onchange="requestAudioStream();">
 				<option value="screenshare" selected><span data-translate="screen-shrae-audio">Screen Share Audio (default)</span></option>
@@ -157,14 +211,43 @@
 				<br /><br />
 				<span data-translate="here-you-can-pre-generate">Here you can pre-generate a reusable Browser Source link and a related guest invite link.</span><br /><br />
 				<p><input style="padding:5px;font-size:120%;" id="videoname4" onkeyup="enterPressed(event, generateQRPage);" placeholder="Give this media source a name (optional)" size=35 maxlength=70 style="padding:5px;" /></br ><br /></p>
-				<button style="padding:20px;" onclick="generateQRPage()" ><span data-translate="generate-invite-link">GENERATE THE INVITE LINK</span></button><br /><br /><br />
-				<div style="margin:20px;max-width:330px;text-align:left;margin:auto auto;;">
-				<h5 style="padding:0 0 10px 0"><i><span data-translate="advanced-paramaters">Advanced Parameters</span></i></h5>
+				<button style="padding:20px;" onclick="generateQRPage()" ><span data-translate="generate-invite-link">GENERATE THE INVITE LINK</span></button><br /><br />
+				<div style="margin:20px;max-width:400px;text-align:left;margin:auto auto;;">
+				<br />
+				<h4 style="padding:0 0 10px 0"><i><span data-translate="advanced-paramaters">Advanced Options:</span></i></h4><br />
 				<input type="checkbox" id="invite_bitrate" /><label for="invite_bitrate"> <span data-translate="unlock-video-bitrate">Unlock Video Bitrate (20mbps)</span></label><br />
 				<input type="checkbox" id="invite_vp9" /><label for="invite_vp9"> <span data-translate="force-vp9-video-codec">Force VP9 Video Codec (less artifacting)</span></label><br />
 				<input type="checkbox" id="invite_stereo" /><label for="invite_stereo"> <span data-translate="enable-stereo-and-pro">Enable Stereo and Pro HD Audio</span></label><br />
-				<input type="checkbox" id="invite_secure" /><label for="invite_secure"> <span data-translate="high-security-mode">High Security Mode</span></label><br /><br />
-				<div>See the <a style="text-decoration:none;color:blue;" target="_blank" href="https://docs.obs.ninja/advanced">documentation</a> for more options.</div>
+				
+				<br /><label for="invite_quality" data-translate="video-resolution">Video Resolution: </label>
+				<select id="invite_quality" name="invite_quality">
+					<option value="-1" selected>User Selectable</option>
+					<option value="0">Maximum Resolution</option>
+					<option value="1">Balanced</option>
+					<option value="2">Smooth and Cool</option>
+				</select>
+				<br /><br />
+				
+				<input type="checkbox" id="invite_secure" /><label for="invite_secure"> <span data-translate="high-security-mode">High Security Mode</span></label><br />
+				<input type="checkbox" id="invite_hidescreen" /><label for="invite_hidescreen"> <span data-translate="hide-screen-share">Hide Screenshare Option</span></label><br />
+				<input type="checkbox" id="invite_remotecontrol" /><label for="invite_remotecontrol"> <span data-translate="allow-remote-control">Remote Control Camera Zoom (android)</span></label>
+				
+				<br /><br /><br />
+				
+				<span data-translate="add-the-guest-to-a-room"> Add the guest to a room:</span>
+				<input id="invite_joinroom" placeholder="Enter Room name here" oninput="document.getElementById('invitegroupchat').style.display='block';" /><br /><br />
+				
+				<span id="invitegroupchat" style="display:none;">
+				<label for="invite_group_chat_type" data-translate="invite-group-chat-type">This room guest can:</label>
+				<select id="invite_group_chat_type" name="invite_group_chat_type">
+					<option value="0" selected data-translate="can-see-and-hear">Can see and hear the group chat</option>
+					<option value="1" data-translate="can-hear-only">Can only hear the group chat</option>
+					<option value="2" data-translate="cant-see-or-hear">Cannot hear or see the group chat</option>
+				</select>
+				</span>
+				<br /><br /><br />
+				
+				<div>See the <a style="text-decoration:none;color:blue;" target="_blank" href="https://docs.obs.ninja/advanced">documentation</a> for more options and info.</div>
 				</div>
 				
 			</div>
@@ -182,20 +265,18 @@
 					<span data-translate="info-blob">
 						<h2>What is OBS.Ninja</h2><br />
 						<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>
-						<li>Bring video from your smartphone, laptop, computer, or from your friends directly into your OBS video stream</li>
+						<li>Bring video from your smartphone, computer, or friends directly into your OBS video stream</li>
 						<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>
 						<br />
 						<li>Youtube video <i class="fa fa-youtube-play" aria-hidden="true"></i> <a href="https://www.youtube.com/watch?v=6R_sQKxFAhg">Demoing it here</a> </li>
-						<li>Code is available here: <i class="fa fa-github" aria-hidden="true"></i> <a href="https://github.com/steveseguin/obsninja">https://github.com/steveseguin/obsninja</a> </li>
-						<li>You can also check out <a href="https://steves.app">my other video app</a> designed for sharing video with friends and family</li>
 						<br />
 						<i><font style="color:red">Known issues:</font></i><br />

-						<li><i class="fa fa-apple" aria-hidden="true"></i> MacOS users need to use OBS v23 or resort to <i>Window Capturing</i> a Chrome Browser with OBS v25</li>
-						<li>Some users will have "pixelation" problems with videos. Please add the URL parameter <b>&codec=vp9</b> to the OBS Links to correct it.</li>
+						<li><i class="fa fa-apple" aria-hidden="true"></i> <a href='https://github.com/steveseguin/obsninja/wiki/FAQ#mac-os'>MacOS users</a> need to use OBS v23 or resort to <a href="https://github.com/steveseguin/electroncapture">Window Capturing</a> a browser with OBS v25</li>
+						<li>Some users will have <a href='https://github.com/steveseguin/obsninja/wiki/FAQ#video-is-pixelated'>"pixelation" problems</a> with videos. Adding <b>&codec=vp9</b> to the OBS links will often correct it.</li>
 						<br />
 						
-						Site last updated: <a href='https://www.reddit.com/r/OBSNinja/comments/gf5pd3/new_version_released_today_along_with_new/'>May 7th, 2020.</a> The previous version can be found at <a href="https://obs.ninja/v3/">https://obs.ninja/v3/</a> if you are having new issues.
+						Site last updated: <a href='https://www.reddit.com/r/OBSNinja/comments/gy7h4g/site_updated_on_june_7th_please_find_the_change/'>June 7th, 2020.</a> The previous version can be found at <a href="https://obs.ninja/v5/">https://obs.ninja/v5/</a> if you are having new issues.

 						<br /><br />
 						<i><h3>Check out the <a href="https://www.reddit.com/r/OBSNinja/">sub-reddit</a> <i class="fa fa-reddit-alien" aria-hidden="true"></i> for help and advanced info. I'm also on <a href="https://discord.gg/EksyhGA">Discord</a> and you can email me at steve@seguin.email</i></h3>
@@ -217,7 +298,7 @@
 				<b><span data-translate="remote-control-for-obs">Remote Control for OBS</span></b><br />
 				<button data-value="0" style="font-size:112%" onclick="directEnable(this);"><span data-translate="add-to-group">Add to Group Scene</span></button>
 				<button style="font-size:112%" onclick="directMute(this);"><span data-translate="mute">Mute</span></button>
-				<button style="font-size:112%" onclick="var video = document.getElementById('videosource_'+this.parentNode.parentNode.dataset.UUID);video.recorder=recordVideo(event,video,this.parentNode.parentNode.dataset.UUID);"><span data-translate="record">Record</span></button>
+				<button style="font-size:112%" onclick="var video = document.getElementById('videosource_'+this.parentNode.parentNode.dataset.UUID);recordVideo(event.currentTarget,video,this.parentNode.parentNode.dataset.UUID);"><span data-translate="record">Record</span></button>
 				<br /><span data-translate="volume">Volume</span>:<input type="range" min="1" max="100" value="100" onclick="directVolume(this);"><br />
 			<br /><hr /></center>
 	</div>
@@ -233,7 +314,13 @@
  </nav>
  <div id="messagePopup" class="popup-message">
  </div>
-	<script type="text/javascript" src="./main.js?ver=12"></script>
+  <div id="languages" class="popup-message" style="display:none;right:0;bottom:25px;position:absolute;">
+	  <b>Available Languages:</b><br />
+	  <u><a onclick="changeLg('ru');toggle(document.getElementById('languages'));" style="cursor:pointer">Russian</a><br />
+	  <a onclick="changeLg('fr');toggle(document.getElementById('languages'));" style="cursor:pointer">French</a><br />
+	  <a onclick="changeLg('en');toggle(document.getElementById('languages'));" style="cursor:pointer">English</a></u><br />
+  </div>
+	<script type="text/javascript" id="main-js" data-translation="blank" src="./main.js"></script>
 	<script type="text/javascript" src="./animations.js"></script>
 </body>

--- a/main.css
+++ b/main.css
@@ -50,7 +50,10 @@ a:active {
 }
 .gowebcam {
 	font-size:110%;
-	padding:10px;border:3px solid #CCC; cursor:pointer; background-color:#FFF
+	padding:10px;
+	border:3px solid #DDDDDD;
+	cursor:pointer;
+	background-color:#DDDDDD;
 }

 .pressed {
@@ -122,6 +125,7 @@ hr {
 	grid-auto-columns: minmax(100px,500px);
 	grid-auto-rows: minmax(100px, 300px);
 	display:block ! important;
+	overflow-y: auto !important;

 }
 .directorsgrid video {
@@ -453,19 +457,7 @@ button {
 	box-shadow: 2px 2px 3px #999;
 	z-index:10;
 }
-.float2{
-	position:fixed;
-	width:60px;
-	height:60px;
-	bottom:80px;
-	right:132px;
-	background-color:#15B;
-	color:#FFF;
-	border-radius:50px;
-	text-align:center;
-	box-shadow: 2px 2px 3px #999;
-	z-index:10;
-}
+
 .float3{
 	position:fixed;
 	width:60px;
@@ -479,7 +471,45 @@ button {
 	box-shadow: 2px 2px 3px #999;
 	z-index:10;
 }
-
+.float4{
+	position:fixed;
+	width:60px;
+	height:60px;
+	bottom:80px;
+	right:132px;
+	background-color:#399;
+	color:#FFF;
+	border-radius:50px;
+	text-align:center;
+	box-shadow: 2px 2px 3px #999;
+	z-index:10;
+}
+.float5{
+	position:fixed;
+	width:60px;
+	height:60px;
+	bottom:80px;
+	right:132px;
+	background-color:#C23;
+	color:#FFF;
+	border-radius:50px;
+	text-align:center;
+	box-shadow: 2px 2px 3px #999;
+	z-index:10;
+}
+.float2{
+	position:fixed;
+	width:60px;
+	height:60px;
+	bottom:80px;
+	right:212px;
+	background-color:#15B;
+	color:#FFF;
+	border-radius:50px;
+	text-align:center;
+	box-shadow: 2px 2px 3px #999;
+	z-index:10;
+}

 .my-float{
 	margin-top:7px;
@@ -682,7 +712,7 @@ video {

 div.multiselect {
 	background-color:#FFF;
-	max-width:320px;
+	max-width:550px;
 	white-space: nowrap;
 	overflow:hidden;
 	min-width:100px;
--- a/main.js
+++ b/main.js
--- a/translations/blank.json
+++ b/translations/blank.json
@@ -0,0 +1,42 @@
+{
+	"GO": "GO",
+	"add-group-chat": "Add Group Chat",
+	"add-to-group": "Add to Group Scene",
+	"add-your-camera": "Add your Camera",
+	"added-notes": "\n\t\t\t\t<u><i>Added Notes:</i></u>\n\t\t\t\t<li>Anyone can enter a room if they know the name, so keep it unique</li>\n\t\t\t\t<li>Having more than four (4) people in a room is not advisable due to performance reasons, but it depends on your hardware.</li>\n\t\t\t\t<li>iOS devices will have their video only be visible to the director. This is a hardware limitation.</li>\n\t\t\t\t<li>The \"Recording\" option is new and is considered experimental.</li>\n\t\t\t\t<li>You must \"Add\" a video feed to the \"Group Scene\" for it to appear there.</li>\n\t\t\t\t<li>There is a new \"enhanced fullscreen\" button added to the Guest's view.</li>\n\t\t\t\t",
+	"advanced-paramaters": "Advanced Parameters",
+	"audio-sources": "Audio Sources",
+	"back": "Back",
+	"balanced": "Balanced",
+	"copy-this-url": "Sharable Link to this video",
+	"copy-to-clipboard": "Copy to Clipboard",
+	"create-reusable-invite": "Create Reusable Invite",
+	"enable-stereo-and-pro": "Enable Stereo and Pro HD Audio",
+	"enter-the-rooms-control": "Enter the Room's Control Center",
+	"force-vp9-video-codec": "Force VP9 Video Codec (less artifacting)",
+	"generate-invite-link": "GENERATE THE INVITE LINK",
+	"here-you-can-pre-generate": "Here you can pre-generate a reusable view link and a related guest invite link.",
+	"high-security-mode": "High Security Mode",
+	"info-blob": "",
+	"joining-room": "You are joining room",
+	"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS Ninja",
+	"max-resolution": "Max Resolution",
+	"mute": "Mute",
+	"no-audio": "No Audio",
+	"note-share-audio": "\n\t\t\t\t\t<b>note</b>: Do not forget to click \"Share audio\" in Chrome.<br>(Firefox does not support audio sharing.)",
+	"open-in-new-tab": "Open in new Tab",
+	"record": "Record",
+	"remote-control-for-obs": "Remote Control",
+	"remote-screenshare-obs": "Remote Screenshare",
+	"room-name": "Room Name",
+	"rooms-allow-for": "Rooms allow for simplified group-chat and the advanced management of multiple streams at once.",
+	"select-audio-source": "Select Audio Sources",
+	"select-audio-video": "Select the audio/video source below",
+	"select-screen-to-share": "SELECT SCREEN TO SHARE",
+	"show-tips": "Show me some tips..",
+	"smooth-cool": "Smooth and Cool",
+	"unlock-video-bitrate": "Unlock Video Bitrate (20mbps)",
+	"video-source": "Video source",
+	"volume": "Volume",
+	"you-are-in-the-control-center": "You are in the room's control center"
+}
--- a/translations/en_ca.json
+++ b/translations/en_ca.json
@@ -17,7 +17,7 @@
 	"generate-invite-link": "GENERATE THE INVITE LINK",
 	"here-you-can-pre-generate": "Here you can pre-generate a reusable Browser Source link and a related guest invite link.",
 	"high-security-mode": "High Security Mode",
-	"info-blob": "\n\t\t\t\t\t\t<h2>What is OBS.Ninja</h2><br>\n\t\t\t\t\t\t<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>\n\t\t\t\t\t\t<li>Bring video from your smartphone, laptop, computer, or from your friends directly into your OBS video stream</li>\n\t\t\t\t\t\t<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demoing it here</a> </li>\n\t\t\t\t\t\t<li>Code is available here: <i class=\"fa fa-github\" aria-hidden=\"true\"></i> <a href=\"https://github.com/steveseguin/obsninja\">https://github.com/steveseguin/obsninja</a> </li>\n\t\t\t\t\t\t<li>You can also check out <a href=\"https://steves.app\">my other video app</a> designed for sharing video with friends and family</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<i><font style=\"color:red\">Known issues:</font></i><br>\n\n\t\t\t\t\t\t<li><i class=\"fa fa-apple\" aria-hidden=\"true\"></i> MacOS users need to use OBS v23 or resort to <i>Window Capturing</i> a Chrome Browser with OBS v25</li>\n\t\t\t\t\t\t<li>Some users will have \"pixelation\" problems with videos. Please add the URL parameter <b>&amp;codec=vp9</b> to the OBS Links to correct it.</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\n\t\t\t\t\t\tSite last updated: <a href=\"https://www.reddit.com/r/OBSNinja/comments/gf5pd3/new_version_released_today_along_with_new/\">May 7th, 2020.</a> The previous version can be found at <a href=\"https://obs.ninja/v3/\">https://obs.ninja/v3/</a> if you are having new issues.\n\n\t\t\t\t\t\t<br><br>\n\t\t\t\t\t\t<i></i><h3><i>Check out the <a href=\"https://www.reddit.com/r/OBSNinja/\">sub-reddit</a> <i class=\"fa fa-reddit-alien\" aria-hidden=\"true\"></i> for help and advanced info. I'm also on <a href=\"https://discord.gg/EksyhGA\">Discord</a> and you can email me at steve@seguin.email</i></h3>\n\t\t\t\t\t",
+	"info-blob": "\n\t\t\t\t\t\t<h2>What is OBS.Ninja</h2><br>\n\t\t\t\t\t\t<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>\n\t\t\t\t\t\t<li>Bring video from your smartphone, laptop, computer, or from your friends directly into your OBS video stream</li>\n\t\t\t\t\t\t<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demoing it here</a> </li>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<i><font style=\"color:red\">Known issues:</font></i><br>\n\n\t\t\t\t\t\t<li><i class=\"fa fa-apple\" aria-hidden=\"true\"></i> MacOS users need to use OBS v23 or resort to <i>Window Capturing</i> a Chrome Browser with OBS v25</li>\n\t\t\t\t\t\t<li>Some users will have \"pixelation\" problems with videos. Please add the URL parameter <b>&amp;codec=vp9</b> to the OBS Links to correct it.</li>\n\t\t\t\t\t\t<br><i></i><h3><i>Check out the <a href=\"https://www.reddit.com/r/OBSNinja/\">sub-reddit</a> <i class=\"fa fa-reddit-alien\" aria-hidden=\"true\"></i> for help and advanced info. I'm also on <a href=\"https://discord.gg/EksyhGA\">Discord</a> and you can email me at steve@seguin.email</i></h3>\n\t\t\t\t\t",
 	"joining-room": "You are joining room",
 	"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
 	"max-resolution": "Max Resolution",
--- a/translations/en_uk.json
+++ b/translations/en_uk.json
@@ -1,42 +0,0 @@
-{
-	"GO": "GO",
-	"add-group-chat": "Add Group Chat to OBS",
-	"add-to-group": "Add to Group Scene",
-	"add-your-camera": "Add your Camera to OBS",
-	"added-notes": "\n\t\t\t\t<u><i>Added Notes:</i></u>\n\t\t\t\t<li>Anyone can enter a room if they know the name, so keep it unique</li>\n\t\t\t\t<li>Having more than four (4) people in a room is not advisable due to performance reasons, but it depends on your hardware.</li>\n\t\t\t\t<li>iOS devices are limited to group sizes of no more than two (2) people. This is a hardware limitation.</li>\n\t\t\t\t<li>The \"Recording\" option is new and is considered experimental.</li>\n\t\t\t\t<li>You must \"Add\" a video feed to the \"Group Scene\" for it to appear there.</li>\n\t\t\t\t<li>There is a new \"enhanced fullscreen\" button added to the Guest's view.</li>\n\t\t\t\t",
-	"advanced-paramaters": "Advanced Parameters",
-	"audio-sources": "Audio Sources",
-	"back": "Back",
-	"balanced": "Balanced",
-	"copy-this-url": "Copy this URL into an OBS \"Browser Source\"",
-	"copy-to-clipboard": "Copy to Clipboard",
-	"create-reusable-invite": "Create Reusable Invite",
-	"enable-stereo-and-pro": "Enable Stereo and Pro HD Audio",
-	"enter-the-rooms-control": "Enter the Room's Control Center",
-	"force-vp9-video-codec": "Force VP9 Video Codec (less artifacting)",
-	"generate-invite-link": "GENERATE THE INVITE LINK",
-	"here-you-can-pre-generate": "Here you can pre-generate a reusable Browser Source link and a related guest invite link.",
-	"high-security-mode": "High Security Mode",
-	"info-blob": "\n\t\t\t\t\t\t<h2>What is OBS.Ninja</h2><br>\n\t\t\t\t\t\t<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>\n\t\t\t\t\t\t<li>Bring video from your smartphone, laptop, computer, or from your friends directly into your OBS video stream</li>\n\t\t\t\t\t\t<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demoing it here</a> </li>\n\t\t\t\t\t\t<li>Code is available here: <i class=\"fa fa-github\" aria-hidden=\"true\"></i> <a href=\"https://github.com/steveseguin/obsninja\">https://github.com/steveseguin/obsninja</a> </li>\n\t\t\t\t\t\t<li>You can also check out <a href=\"https://steves.app\">my other video app</a> designed for sharing video with friends and family</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<i><font style=\"color:red\">Known issues:</font></i><br>\n\n\t\t\t\t\t\t<li><i class=\"fa fa-apple\" aria-hidden=\"true\"></i> MacOS users need to use OBS v23 or resort to <i>Window Capturing</i> a Chrome Browser with OBS v25</li>\n\t\t\t\t\t\t<li>Some users will have \"pixelation\" problems with videos. Please add the URL parameter <b>&amp;codec=vp9</b> to the OBS Links to correct it.</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\n\t\t\t\t\t\tSite last updated: <a href=\"https://www.reddit.com/r/OBSNinja/comments/gf5pd3/new_version_released_today_along_with_new/\">May 7th, 2020.</a> The previous version can be found at <a href=\"https://obs.ninja/v3/\">https://obs.ninja/v3/</a> if you are having new issues.\n\n\t\t\t\t\t\t<br><br>\n\t\t\t\t\t\t<i></i><h3><i>Check out the <a href=\"https://www.reddit.com/r/OBSNinja/\">sub-reddit</a> <i class=\"fa fa-reddit-alien\" aria-hidden=\"true\"></i> for help and advanced info. I'm also on <a href=\"https://discord.gg/EksyhGA\">Discord</a> and you can email me at steve@seguin.email</i></h3>\n\t\t\t\t\t",
-	"joining-room": "You are joining room",
-	"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
-	"max-resolution": "Max Resolution",
-	"mute": "Mute",
-	"no-audio": "No Audio",
-	"note-share-audio": "\n\t\t\t\t\t<b>note</b>: Do not forget to click \"Share audio\" in Chrome.<br>(Firefox does not support audio sharing.)",
-	"open-in-new-tab": "Open in new Tab",
-	"record": "Record",
-	"remote-control-for-obs": "Remote Control for OBS",
-	"remote-screenshare-obs": "Remote Screenshare into OBS",
-	"room-name": "Room Name",
-	"rooms-allow-for": "Rooms allow for simplified group-chat and the advanced management of multiple streams at once.",
-	"select-audio-source": "Select Audio Sources",
-	"select-audio-video": "Select the audio/video source below",
-	"select-screen-to-share": "SELECT SCREEN TO SHARE",
-	"show-tips": "Show me some tips..",
-	"smooth-cool": "Smooth and Cool",
-	"unlock-video-bitrate": "Unlock Video Bitrate (20mbps)",
-	"video-source": "Video source",
-	"volume": "Volume",
-	"you-are-in-the-control-center": "You are in the room's control center"
-}
--- a/translations/en_us.json
+++ b/translations/en_us.json
@@ -1,42 +0,0 @@
-{
-	"GO": "GO",
-	"add-group-chat": "Add Group Chat to OBS",
-	"add-to-group": "Add to Group Scene",
-	"add-your-camera": "Add your Camera to OBS",
-	"added-notes": "\n\t\t\t\t<u><i>Added Notes:</i></u>\n\t\t\t\t<li>Anyone can enter a room if they know the name, so keep it unique</li>\n\t\t\t\t<li>Having more than four (4) people in a room is not advisable due to performance reasons, but it depends on your hardware.</li>\n\t\t\t\t<li>iOS devices are limited to group sizes of no more than two (2) people. This is a hardware limitation.</li>\n\t\t\t\t<li>The \"Recording\" option is new and is considered experimental.</li>\n\t\t\t\t<li>You must \"Add\" a video feed to the \"Group Scene\" for it to appear there.</li>\n\t\t\t\t<li>There is a new \"enhanced fullscreen\" button added to the Guest's view.</li>\n\t\t\t\t",
-	"advanced-paramaters": "Advanced Parameters",
-	"audio-sources": "Audio Sources",
-	"back": "Back",
-	"balanced": "Balanced",
-	"copy-this-url": "Copy this URL into an OBS \"Browser Source\"",
-	"copy-to-clipboard": "Copy to Clipboard",
-	"create-reusable-invite": "Create Reusable Invite",
-	"enable-stereo-and-pro": "Enable Stereo and Pro HD Audio",
-	"enter-the-rooms-control": "Enter the Room's Control Center",
-	"force-vp9-video-codec": "Force VP9 Video Codec (less artifacting)",
-	"generate-invite-link": "GENERATE THE INVITE LINK",
-	"here-you-can-pre-generate": "Here you can pre-generate a reusable Browser Source link and a related guest invite link.",
-	"high-security-mode": "High Security Mode",
-	"info-blob": "\n\t\t\t\t\t\t<h2>What is OBS.Ninja</h2><br>\n\t\t\t\t\t\t<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>\n\t\t\t\t\t\t<li>Bring video from your smartphone, laptop, computer, or from your friends directly into your OBS video stream</li>\n\t\t\t\t\t\t<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<li>Youtube video <i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> <a href=\"https://www.youtube.com/watch?v=6R_sQKxFAhg\">Demoing it here</a> </li>\n\t\t\t\t\t\t<li>Code is available here: <i class=\"fa fa-github\" aria-hidden=\"true\"></i> <a href=\"https://github.com/steveseguin/obsninja\">https://github.com/steveseguin/obsninja</a> </li>\n\t\t\t\t\t\t<li>You can also check out <a href=\"https://steves.app\">my other video app</a> designed for sharing video with friends and family</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<i><font style=\"color:red\">Known issues:</font></i><br>\n\n\t\t\t\t\t\t<li><i class=\"fa fa-apple\" aria-hidden=\"true\"></i> MacOS users need to use OBS v23 or resort to <i>Window Capturing</i> a Chrome Browser with OBS v25</li>\n\t\t\t\t\t\t<li>Some users will have \"pixelation\" problems with videos. Please add the URL parameter <b>&amp;codec=vp9</b> to the OBS Links to correct it.</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\n\t\t\t\t\t\tSite last updated: <a href=\"https://www.reddit.com/r/OBSNinja/comments/gf5pd3/new_version_released_today_along_with_new/\">May 7th, 2020.</a> The previous version can be found at <a href=\"https://obs.ninja/v3/\">https://obs.ninja/v3/</a> if you are having new issues.\n\n\t\t\t\t\t\t<br><br>\n\t\t\t\t\t\t<i></i><h3><i>Check out the <a href=\"https://www.reddit.com/r/OBSNinja/\">sub-reddit</a> <i class=\"fa fa-reddit-alien\" aria-hidden=\"true\"></i> for help and advanced info. I'm also on <a href=\"https://discord.gg/EksyhGA\">Discord</a> and you can email me at steve@seguin.email</i></h3>\n\t\t\t\t\t",
-	"joining-room": "You are joining room",
-	"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja ",
-	"max-resolution": "Max Resolution",
-	"mute": "Mute",
-	"no-audio": "No Audio",
-	"note-share-audio": "\n\t\t\t\t\t<b>note</b>: Do not forget to click \"Share audio\" in Chrome.<br>(Firefox does not support audio sharing.)",
-	"open-in-new-tab": "Open in new Tab",
-	"record": "Record",
-	"remote-control-for-obs": "Remote Control for OBS",
-	"remote-screenshare-obs": "Remote Screenshare into OBS",
-	"room-name": "Room Name",
-	"rooms-allow-for": "Rooms allow for simplified group-chat and the advanced management of multiple streams at once.",
-	"select-audio-source": "Select Audio Sources",
-	"select-audio-video": "Select the audio/video source below",
-	"select-screen-to-share": "SELECT SCREEN TO SHARE",
-	"show-tips": "Show me some tips..",
-	"smooth-cool": "Smooth and Cool",
-	"unlock-video-bitrate": "Unlock Video Bitrate (20mbps)",
-	"video-source": "Video source",
-	"volume": "Volume",
-	"you-are-in-the-control-center": "You are in the room's control center"
-}
--- a/translations/fr_ca.json
+++ b/translations/fr_ca.json
--- a/translations/ru.json
+++ b/translations/ru.json
@@ -0,0 +1,42 @@
+{
+	"GO": "ВОЙТИ",
+	"add-group-chat": "Добавить групповой чат в OBS",
+	"add-to-group": "Добавить в групповую сцену",
+	"add-your-camera": "Добавьте свою камеру в OBS",
+	"added-notes": "\n\t\t\t\t<u><i>Добавленные заметки:</i></u>\n\t\t\t\t<li>Любой может войти в комнату, если знает имя, поэтому оставьте его уникальным</li>\n\t\t\t\t<li>Наличие более четырех (4) человек в комнате не рекомендуется по причинам производительности, но это зависит от вашего оборудования.</li>\n\t\t\t\t<li>Устройства iOS ограничены размерами группы не более двух (2) человек. Это аппаратное ограничение.</li>\n\t\t\t\t",
+	"advanced-paramaters": "Расширенные параметры",
+	"audio-sources": "Источники звука",
+	"back": "Назад",
+	"balanced": "Сбалансированный",
+	"copy-this-url": "Скопируйте этот URL-адрес в OBS \"Браузер\"",
+	"copy-to-clipboard": "Скопировано в буфер обмена",
+	"create-reusable-invite": "Создать многоразовое приглашение",
+	"enable-stereo-and-pro": "Включить стерео и Pro HD Audio",
+	"enter-the-rooms-control": "Войдите в центр управления комнатой",
+	"force-vp9-video-codec": "Видеокодек Force VP9 (меньше артефактов)",
+	"generate-invite-link": "СГЕНЕРИРОВАТЬ ССЫЛКУ-ПРИГЛАШЕНИЕ",
+	"here-you-can-pre-generate": "Здесь вы можете предварительно сгенерировать повторно используемую ссылку на источник браузера и связанную гостевую ссылку для приглашения..",
+	"high-security-mode": "Режим повышенной безопасности",
+	"info-blob": "\n\t\t\t\t\t\t<h2>Что такое OBS.Ninja</h2><br>\n\t\t\t\t\t\t<li><b>бесплатно</b> на 100%; нет загрузок; нет сбора личных данных; нет входа</li>\n\t\t\t\t\t\t<li>Добавляйте видео со своего смартфона, ноутбука, компьютера или друзей прямо в видеопоток OBS</li>\n\t\t\t\t\t\t<li>Мы используем передовую технологию переадресации Peer-to-Peer, которая обеспечивает конфиденциальность и сверхнизкую задержку</li>\n\t\t\t\t\t\t<br>\n\t\t\t\t\t\t<li>Пользователям MacOS необходимо использовать OBS v23 или использовать <i>захват окна</ i> в браузере Google Chrome с OBS v25</li>\n\t\t\t\t\t\t<br><h3><i>Проверьте <a href=\"https://www.reddit.com/r/OBSNinja/\">sub-reddit</a> <i class=\"fa fa-reddit-alien\" aria-hidden=\"true\"></i> для помощи и дополнительной информации.</i></h3>\n\t\t\t\t\t",
+	"joining-room": "Вы присоединяетесь к комнате",
+	"logo-header": "<font id=\"qos\" style=\"color: white;\">O</font>BS.Ninja (RU)",
+	"max-resolution": "Максимальное разрешение",
+	"mute": "Отключить звук",
+	"no-audio": "Нет звука",
+	"note-share-audio": "\n\t\t\t\t\tFirefox не поддерживает обмен аудио",
+	"open-in-new-tab": "Открыть в новой вкладке",
+	"record": "Запись",
+	"remote-control-for-obs": "Пульт дистанционного управления для OBS",
+	"remote-screenshare-obs": "Удаленный просмотр экрана в OBS",
+	"room-name": "Название комнаты",
+	"rooms-allow-for": "В комнатах предусмотрены упрощенный групповой чат и расширенное управление несколькими потоками одновременно.",
+	"select-audio-source": "Выберите источники звука",
+	"select-audio-video": "Выберите источник аудио / видео ниже",
+	"select-screen-to-share": "Выберите экран, чтобы поделиться",
+	"show-tips": "Покажите мне несколько советов..",
+	"smooth-cool": "Гладко и круто",
+	"unlock-video-bitrate": "Разблокировать битрейт видео (20 Мбит/с)",
+	"video-source": "Источники видео",
+	"volume": "Громкость",
+	"you-are-in-the-control-center": "Вы находитесь в центре управления комнатой"
+}
Author	SHA1	Message	Date
Steve Seguin	6a2e5d1a84	Merge pull request #163 from steveseguin/Version-6 release version 6 updates	2020-06-09 12:37:52 -04:00
Steve Seguin	2d60c0a441	release version 6 updates I've fixed issues with innerHTML calls in this release that would normally totally break things if there were changes to index.html. Now, if there is an error, it is handled more gracefully and usually just a single UI element breaks. You should be able to customize the index.html file now without too many hassles. You will also notice that the index.html has the following line: <script type="text/javascript" id="main-js" data-translation="blank" src="./main.js"></script> you can specify different languages or different branding/wording translations by setting the data-translation value to that of the json filename located in the translations folder. You can also create your own json files and specify them that way. By default I am specifying the "blank" translation. I'm trying to steer the app code in the direction of being a bit like a library, for numerous reasons, but please reach out if you have issues with this new release. This release has numerous bug fixes and uses a new handshake server to improve the group-room experience, which I will continue to update. I will continue to work towards allowing greater accessibility in stylizing the application.	2020-06-09 12:35:40 -04:00
Steve Seguin	1db217d01c	Merge pull request #152 from willl/patch-1 Fix a tiny typo	2020-05-23 08:26:59 -04:00
Steve Seguin	f416348596	Update README.md	2020-05-18 08:34:08 -04:00
Steve Seguin	86fee88382	testing webhooks	2020-05-18 08:28:57 -04:00
Steve Seguin	e39d886602	thank you	2020-05-18 04:18:38 -04:00
Steve Seguin	f9f5093238	Create FUNDING.yml	2020-05-18 04:13:46 -04:00
William Luu	609ac042a9	Fix a tiny typo Change `unavoiably` to `unavoidably`.	2020-05-16 21:49:51 +10:00
Steve Seguin	f980555f18	Merge pull request #130 from KovalevArtem/patch-2 Update ru.json	2020-05-13 00:00:47 -04:00
Steve Seguin	d53528424e	Updating the readme with 'what is obs ninja' tweaks	2020-05-12 22:59:00 -04:00
Steve Seguin	2651755647	Update README.md	2020-05-12 22:58:16 -04:00
Steve Seguin	3263cbd684	fixing my last commit. :/	2020-05-12 05:02:21 -04:00
Steve Seguin	ac34971a50	audio devices + framerates on sceeenshare fixing a bug with audio devices not all listing and screenshare not allowing for custom frame rates	2020-05-12 04:58:03 -04:00
KovalevArtem	e9de1b9a4c	Update ru.json	2020-05-12 11:52:47 +03:00
Steve Seguin	d584a5cbdd	Merge pull request #129 from steveseguin/language-russian-auto Add files via upload	2020-05-11 21:37:44 -04:00
Steve Seguin	c5067c850b	Add files via upload Automatically applies a really bad (sorry) Russian translation to the site	2020-05-11 21:35:18 -04:00
Steve Seguin	af83c67def	Delete en_ca.json	2020-05-11 21:33:33 -04:00
Steve Seguin	1631ab8d18	Delete en_uk.json	2020-05-11 21:33:26 -04:00
Steve Seguin	8da4b746be	Merge pull request #128 from steveseguin/language-update Delete en_us.json	2020-05-11 21:33:01 -04:00
Steve Seguin	e658beb41e	Delete en_us.json	2020-05-11 21:31:50 -04:00
Steve Seguin	d746860c82	Delete fr_ca.json	2020-05-11 21:31:28 -04:00
Steve Seguin	735f77cec4	Update index.html removing some debugging code	2020-05-10 22:34:32 -04:00
Steve Seguin	94cb69703b	Add files via upload	2020-05-10 22:17:00 -04:00
Steve Seguin	7d81bc3b79	Add files via upload thank you for the bug report, sky	2020-05-10 22:16:22 -04:00
Steve Seguin	5ed0d7f6dc	Update README.md	2020-05-10 07:58:54 -04:00
Steve Seguin	252e73edac	cleaning up readme	2020-05-10 07:51:19 -04:00