diff --git a/devices.html b/devices.html
index cbdf2e3..3c24de2 100644
--- a/devices.html
+++ b/devices.html
@@ -14,7 +14,7 @@
 				style="text-decoration: none; color: white; margin: 2px"
 			>
 				<span data-translate="logo-header">
-					<font id="qos">O</font>BS.Ninja
+					<font id="qos">V</font>DO.Ninja
 				</span>
 			</a>
 		</div>
diff --git a/examples/chatoverlay.html b/examples/chatoverlay.html
index 0e9ab05..2cd5ae7 100644
--- a/examples/chatoverlay.html
+++ b/examples/chatoverlay.html
@@ -2,7 +2,7 @@
 	<head>
 		<meta charset="utf8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>OBSN Chat Overlay</title>
+		<title>VDON Chat Overlay</title>
 		<style>
 		
 			@font-face {
diff --git a/examples/control.html b/examples/control.html
new file mode 100644
index 0000000..f9a97d4
--- /dev/null
+++ b/examples/control.html
@@ -0,0 +1,123 @@
+<html>
+<head>
+	<style>
+		body {
+			margin:0;
+			padding:0;
+			height:100%;
+			width:100%;
+			border:0;
+			overflow:hidden;
+		}
+		
+	
+	</style>
+</head>
+<body id="body">
+	<button onclick='send({"abc1231":[0,0,50,50],abc1232:[50,0,50,50],abc1233:[0,50,50,50],abc1234:[50,50,50,50]});'>2x2</button>
+	<button onclick='send({"abc1231":[0,0,100,100],abc1232:[0, 0, 0, 0  ],abc1233:[0,0,0,0],abc1234:[0,0,0,0]});'>1</button>
+	<button onclick='send({"abc1231":[0,0,50 ,100],abc1232:[50,0,100,100],abc1233:[0,0,0,0],abc1234:[0,0,0,0]});'>2x1</button>
+	<button onclick='send({"abc1231":[0,0,100,100],abc1232:[70,70,20,20],abc1233:[0,0,0,0],abc1234:[0,0,0,0]});'>Pip</button>
+	<script>
+
+	// this app is mainly for demo purposes at this time.  It has been depreciated.
+
+	function updateURL(param, force=false) {
+		var para = param.split('=')[0];
+		if (!(urlParams.has(para)) || (force)){
+			if (history.pushState){
+				
+				var arr = window.location.href.split('?');
+				var newurl;
+				if (arr.length > 1 && arr[1] !== '') {
+					newurl = window.location.href + '&' +param;
+				} else {
+					newurl = window.location.href + '?' +param;
+				}
+				
+				window.history.pushState({path:newurl},'',newurl);
+			}
+		}
+	}
+
+	
+	(function (w) {
+		w.URLSearchParams = w.URLSearchParams || function (searchString) {
+			var self = this;
+			self.searchString = searchString;
+			self.get = function (name) {
+				var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
+				if (results == null) {
+					return null;
+				}
+				else {
+					return decodeURI(results[1]) || 0;
+				}
+			};
+		};
+
+	})(window);
+	var urlParams = new URLSearchParams(window.location.search);
+	
+	
+	function generateStreamID(){
+		var text = "";
+		var possible = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789";
+		for (var i = 0; i < 7; i++){
+			text += possible.charAt(Math.floor(Math.random() * possible.length));
+		}
+		return text;
+	};
+	
+	var roomID = "undefined";
+	
+	if (urlParams.has("room")){
+		roomID = urlParams.get("room");
+	} else {
+		roomID = generateStreamID();
+		updateURL("room="+roomID);
+	}
+	
+	var url = document.URL.substr(0,document.URL.lastIndexOf('/'));
+	
+
+	navigator.clipboard.writeText(url+"/mixer?room="+roomID).then(() => {
+      /* clipboard successfully set */
+    }, () => {
+      /* clipboard write failed */
+    });
+	
+	document.getElementById("body").innerHTML+=url+"/mixer?room="+roomID;
+	
+
+	var socket = new WebSocket("wss://api.action.wtf:666"); // api.action.wtf has been deprecated. 
+		
+	socket.onclose = function (){
+		setTimeout(function(){window.location.reload(true);},100);
+	};
+	
+	socket.onopen = function (){
+		socket.send(JSON.stringify({"join":roomID}));
+	}
+	
+	
+	socket.addEventListener('message', function (event) {
+		if (event.data){
+			var data = JSON.parse(event.data);
+			log(data);
+		}
+	});
+	
+	socket.onclose = function (){
+		setTimeout(function(){window.location.reload(true);},100);
+	};
+	
+	var counter=0;
+	function send(scene){
+		counter+=1;
+		socket.send(JSON.stringify({"msg":true, "scene":scene, "id":counter}));
+	}
+
+	</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/examples/draggable.html b/examples/draggable.html
index d968048..27575e7 100644
--- a/examples/draggable.html
+++ b/examples/draggable.html
@@ -125,7 +125,7 @@ button{
 </head>
 <body>
 
-<input placeholder="Enter an OBS.Ninja Room Link" id="viewlink" />
+<input placeholder="Enter an VDO.Ninja Room Link" id="viewlink" />
 
 <button onclick="loadIframe();">Load URL</button>You can drag and resize the generated windows; multiple can be created.
 
@@ -313,7 +313,7 @@ function loadIframe(){
 
 	var iframe = document.createElement("iframe");
 	iframe.allow="autoplay";
-	iframe.src = document.getElementById("viewlink").value || "https://obs.ninja";
+	iframe.src = document.getElementById("viewlink").value || "https://vdo.ninja";
 	iframe.style.width="325px";
 	iframe.style.height="420px";
 	
diff --git a/examples/dual.html b/examples/dual.html
index 8873eee..5af3dc4 100644
--- a/examples/dual.html
+++ b/examples/dual.html
@@ -50,8 +50,8 @@ function loadIframes(url=false){
 	
 	var path = window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
 	
-	var room1 = "https://"+path+"/?room="+roomname+"&push="+roomname+"_front&webcam&autostart&vd=front&ad=1&exclude="+roomname+"_rear";
-	var room2 = "https://"+path+"/?room="+roomname+"&push="+roomname+"_rear&webcam&autostart&vd=back&ad=0&view&cleanoutput&nosettings&transparent";
+	var room1 = "https://"+path+"/../?room="+roomname+"&push="+roomname+"_front&webcam&autostart&vd=front&ad=1&exclude="+roomname+"_rear";
+	var room2 = "https://"+path+"/../?room="+roomname+"&push="+roomname+"_rear&webcam&autostart&vd=back&ad=0&view&cleanoutput&nosettings&transparent";
 	
 	var iframe = document.createElement("iframe");
 	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
diff --git a/examples/iframe.outbound-stats.html b/examples/iframe.outbound-stats.html
index e026684..6d03ae3 100644
--- a/examples/iframe.outbound-stats.html
+++ b/examples/iframe.outbound-stats.html
@@ -1,12 +1,12 @@
 <html>
 
 <head>
-    <title>OBS.Ninja IFRAME Outgoing Stats Example</title>
+    <title>VDO.Ninja IFRAME Outgoing Stats Example</title>
     <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" />
-    <link itemprop="thumbnailUrl" href="./images/obsNinja_logo_full.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="../media//favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="../media/favicon-16x16.png" />
+    <link rel="icon" href=".../media/favicon.ico" />
+    <link itemprop="thumbnailUrl" href="../media/vdoNinja_logo_full.png" />
     <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <style>
         body {
@@ -43,7 +43,7 @@
     <div class="container-fluid">
         <div class="row controls" style="margin-bottom:15px;border-bottom:1px solid black;">
             <div class="col-8">
-                <input type="text" class="form-control" style="width:95%;margin:10px auto;" placeholder="Enter an OBS.Ninja View URL here" value="" id="viewlink" />
+                <input type="text" class="form-control" style="width:95%;margin:10px auto;" placeholder="Enter an VDO.Ninja View URL here" value="" id="viewlink" />
             </div>
             <div class="col-4">
                 <div class="row">
@@ -61,8 +61,8 @@
             <div class="col-5" id="sourcecontrols">
                 <div class="row text-light" style="margin-top:15px;">
                     <div class="col">
-                        <p>This example will show all connections to the stream generated from this page using statistics gathered using the <a href="https://github.com/steveseguin/obsninja/blob/master/IFRAME.md">iFrame API</a>.</p>
-                        <p>Click start to generate a stream using the OBS.Ninja URL shown. If you use the example URL shown, you can <a id="aView" href="" target="_blank">click here</a> to connect to this stream as a viewer in a new window/tab, this will then show in the table below. Expired connections will be removed after a short delay.</p>
+                        <p>This example will show all connections to the stream generated from this page using statistics gathered using the <a href="https://github.com/steveseguin/vdoninja/blob/master/IFRAME.md">iFrame API</a>.</p>
+                        <p>Click start to generate a stream using the VDO.Ninja URL shown. If you use the example URL shown, you can <a id="aView" href="" target="_blank">click here</a> to connect to this stream as a viewer in a new window/tab, this will then show in the table below. Expired connections will be removed after a short delay.</p>
                     </div>
                 </div>
                 <div class="row" style="margin-top:5px;">
@@ -129,11 +129,11 @@
                 var now = new Date(); //Used for "Added" column and to remove stale viewers
                 for (var viewer in e.data.stats.outbound_stats) {
                     //Check to see if a row exists for this viewier, if not then its a new viewer and we should create a row
-                    if ($("#obsn_viewer_" + viewer).length == 0) {
+                    if ($("#vdon_viewer_" + viewer).length == 0) {
                         var h = now.getHours();
                         var m = now.getMinutes();
                         var s = now.getSeconds();
-                        $('#viewers tbody').append('<tr id="obsn_viewer_' + viewer + '"><th class="obsn_viewer_label" scope="row"></th><td class="obsn_viewer_added">' + ("0" + h).slice(-2) + ':' + ("0" + m).slice(-2) + ':' + ("0" + s).slice(-2) + '</td><td class="obsn_viewer_qlr"></td><td class="obsn_viewer_resolution"></td><td class="obsn_viewer_platform"></td><td class="obsn_viewer_encoder"></td><td class="obsn_viewer_useragent"></td></tr>');
+                        $('#viewers tbody').append('<tr id="vdon_viewer_' + viewer + '"><th class="vdon_viewer_label" scope="row"></th><td class="vdon_viewer_added">' + ("0" + h).slice(-2) + ':' + ("0" + m).slice(-2) + ':' + ("0" + s).slice(-2) + '</td><td class="vdon_viewer_qlr"></td><td class="vdon_viewer_resolution"></td><td class="vdon_viewer_platform"></td><td class="vdon_viewer_encoder"></td><td class="vdon_viewer_useragent"></td></tr>');
                     }
                     //Insert/update stats
                     //Initially objects can be available but without any attributes, check they exist and ignore till the basics are available
@@ -141,24 +141,24 @@
                     if (e.data.stats.outbound_stats[viewer].info == undefined) continue;
                     //Checking these exist as not all attributes are available straight away when stats are created
                     if (e.data.stats.outbound_stats[viewer].info.label != undefined) {
-                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_label').text(e.data.stats.outbound_stats[viewer].info.label);
+                        $("#vdon_viewer_" + viewer).find('.vdon_viewer_label').text(e.data.stats.outbound_stats[viewer].info.label);
                     }
                     if (e.data.stats.outbound_stats[viewer].quality_Limitation_Reason != undefined) {
-                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_qlr').text(e.data.stats.outbound_stats[viewer].quality_Limitation_Reason);
+                        $("#vdon_viewer_" + viewer).find('.vdon_viewer_qlr').text(e.data.stats.outbound_stats[viewer].quality_Limitation_Reason);
                     }
                     if (e.data.stats.outbound_stats[viewer].resolution != undefined) {
-                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_resolution').text(e.data.stats.outbound_stats[viewer].resolution);
+                        $("#vdon_viewer_" + viewer).find('.vdon_viewer_resolution').text(e.data.stats.outbound_stats[viewer].resolution);
                     }
                     if (e.data.stats.outbound_stats[viewer].info.platform != undefined) {
-                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_platform').text(e.data.stats.outbound_stats[viewer].info.platform);
+                        $("#vdon_viewer_" + viewer).find('.vdon_viewer_platform').text(e.data.stats.outbound_stats[viewer].info.platform);
                     }
                     if (e.data.stats.outbound_stats[viewer].encoder != undefined) {
-                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_encoder').text(e.data.stats.outbound_stats[viewer].encoder);
+                        $("#vdon_viewer_" + viewer).find('.vdon_viewer_encoder').text(e.data.stats.outbound_stats[viewer].encoder);
                     }
                     if (e.data.stats.outbound_stats[viewer].info.useragent != undefined) {
-                        $("#obsn_viewer_" + viewer).find('.obsn_viewer_useragent').text(e.data.stats.outbound_stats[viewer].info.useragent);
+                        $("#vdon_viewer_" + viewer).find('.vdon_viewer_useragent').text(e.data.stats.outbound_stats[viewer].info.useragent);
                     }
-                    $("#obsn_viewer_" + viewer).data('last', now.getTime()); //Used below to remove old viewers
+                    $("#vdon_viewer_" + viewer).data('last', now.getTime()); //Used below to remove old viewers
                 }
                 //Mark and then remove viewers who have not been seen for a while
                 $('#viewers tbody tr').each(function(el) {
@@ -243,7 +243,7 @@
             //Add in random ID and password strings to URL's, the below is purely for the purposes of this example
             var pushid = makeid();
             var password = makeid();
-            var baseUrl = "https://obs.ninja/";
+            var baseUrl = "https://vdo.ninja/";
             $('#aView').attr('href', baseUrl + '?view=' + pushid + '&password=' + password + '&label=Test_Link');
             $('#viewlink').val(baseUrl + '?push=' + pushid + '&password=' + password + '&autostart&turn=false&fps=25&maxbitrate=1000&cleanoutput&audiobitrate=32&aec=0&denoise=0&webcam');
         });
diff --git a/examples/multi.html b/examples/multi.html
new file mode 100644
index 0000000..1b2914a
--- /dev/null
+++ b/examples/multi.html
@@ -0,0 +1,88 @@
+<html>
+<head><title>Dual Input</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%;
+}
+
+iframe {
+	width:100%;
+	height:470px;
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+}
+
+
+
+</style>
+</head>
+<body>
+
+<script>
+
+
+
+(function(w) {
+	w.URLSearchParams = w.URLSearchParams || function(searchString) {
+		var self = this;
+		searchString = searchString.replace("??", "?");
+		self.searchString = searchString;
+		self.get = function(name) {
+			var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(self.searchString);
+			if (results == null) {
+				return null;
+			} else {
+				return decodeURI(results[1]) || 0;
+			}
+		};
+	};
+
+})(window);
+
+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);
+var path = window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
+var rooms = "";
+if (urlParams.has("rooms")){
+	rooms = urlParams.get("rooms");
+	rooms = rooms.split(",");
+	
+	var password = prompt("Enter the password for the rooms; leave blank for none");
+	if (password){
+		password = "&password="+password;
+	} else {
+		password = "";
+	}
+	rooms.forEach(room=>{
+		loadIframes("https://"+path+"/../?clean&hidecodirectors&director="+room+password);
+	});
+} else {
+	document.write("To use, comma separate the room names. ie: https://vdo.ninja/examples/multi?rooms=xxxx,yyy,ccc");
+}
+
+function loadIframes(url){ 
+	var iframe = document.createElement("iframe");
+	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+	iframe.src = url;
+	document.body.appendChild(iframe);
+	
+}
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/remoteapi.html b/examples/remoteapi.html
index 296fc4f..7af07a0 100644
--- a/examples/remoteapi.html
+++ b/examples/remoteapi.html
@@ -77,7 +77,7 @@ window.onbeforeunload = function() {
 	return "Dude, are you sure you want to leave? Think of the kittens!"; // prevents accidental page reloads.
 }
 	
-var WID = "testOBSN";
+var WID = "testVDON";
 if (urlParams.has("api")){
 	WID = urlParams.get("api");
 } else if (urlParams.has("osc")){
diff --git a/examples/rip.html b/examples/rip.html
new file mode 100644
index 0000000..0cf0da2
--- /dev/null
+++ b/examples/rip.html
@@ -0,0 +1,94 @@
+<html>
+<head><title>Video with sensor overlayed data</title>
+<style>
+body{
+	padding:0;
+	margin:0;
+	background-color: #0000;
+}
+iframe {
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+	width:100%;
+	height:100%;
+}
+
+#container {
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+	width:50%;
+	height:50%;
+	position:absolute;
+	top:0;
+	left:0;
+}
+
+button{
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+	position:absolute;
+	bottom:0;
+	right:0;
+	z-index: 10;
+}
+
+</style>
+</head>
+<body id="main">
+	<div id="container"></div>
+	<button onclick="dosomething();">SOMETHING</button>
+<script>
+var iframe = document.createElement("iframe");
+function dosomething(){
+	var video = iframe.contentWindow.document.body.querySelector("video");
+	var mediastream = new MediaStream();
+	video.muted=true;
+	video.style.display = "none";
+	video.captureStream().getTracks().forEach(trk=>{
+		mediastream.addTrack(trk);
+	});
+	video.onended = function(){
+		mediastream = null;
+	}
+	video.load();
+	
+}
+function loadIframe(url=false){ 
+	
+	if (url){
+		var iframesrc = url;
+	} else {
+		var iframesrc = document.getElementById("viewlink").value;
+	}
+	
+	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+
+	if (iframesrc==""){
+		iframesrc="./";
+	}
+	
+	iframe.src = iframesrc;
+	document.body.appendChild(iframe);
+
+	////////////  LISTEN FOR EVENTS
+
+	var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+	var eventer = window[eventMethod];
+	var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+	eventer(messageEvent, function (e) {
+		if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+	});
+}
+
+loadIframe("https://youtu.be/XOJMKdwpTZE");
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/sensoroverlay.html b/examples/sensoroverlay.html
new file mode 100644
index 0000000..9531806
--- /dev/null
+++ b/examples/sensoroverlay.html
@@ -0,0 +1,266 @@
+<html>
+<head><title>Video with sensor overlayed data</title>
+<style>
+body{
+	padding:0;
+	margin:0;
+	background-color: #0000;
+}
+iframe {
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+	width:100%;
+	height:100%;
+}
+
+#container {
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+	width:100%;
+	height:100%;
+	position:absolute;
+	top:0;
+	left:0;
+	
+}
+
+#overlay{
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+	text-align:right;
+	position:absolute;
+	top:100px;
+	right:0;
+	z-index: 10;
+    color: white;
+	font-size:300%;
+}
+
+#canvas{
+	border:0;
+	margin:0;
+	padding:0;
+	display:block;
+	width:20%;
+	text-align:right;
+	height:100px;
+	position:absolute;
+	top:0;
+	right:0;
+	z-index: 5;
+}
+
+</style>
+</head>
+<body id="main">
+	<div id="overlay"></div>
+	<canvas id="canvas"></canvas>
+	<div id="container"></div>
+<script>
+function getColor(value) {
+  var hue = (Math.abs(value*100+50)).toString(10);
+  return ["hsl(", hue, ",100%,50%)"].join("");
+}
+var canvas = document.getElementById("canvas");
+var context = canvas.getContext("2d");
+var height = context.canvas.height;
+var width = context.canvas.width;
+canvas.history_accel = [];
+canvas.history_speed = [];
+var canvasNew = true
+
+function plotData(speed, accel) { 
+
+
+	if (isNaN(speed)) {
+		speed = 0;
+	}
+	if (isNaN(accel)) {
+		accel = 0;
+	}
+
+	canvas.history_accel.push(accel);
+	canvas.history_speed.push(speed);
+
+	canvas.history_accel = canvas.history_accel.slice(-1 * canvas.width);
+	canvas.history_speed = canvas.history_speed.slice(-1 * canvas.width);
+	
+	var maxSpeed = Math.max(...canvas.history_speed);
+	
+	var interval = 10;
+	var target = canvas.target || (interval*1.5);
+	if (target && (maxSpeed > target)){
+		
+		canvas.target = maxSpeed*1.5; // set it higher than it needs to be, so it doens't jump around a lot
+		var yScale = height / canvas.target;
+		context.clearRect(0, 0, width, height);
+		var w = 1;
+		var x = width - w;
+		
+		
+		for (var i = 0; i<canvas.history_speed.length;i++){
+			
+			var accel = canvas.history_accel[i];
+			var speed = canvas.history_speed[i];
+			
+			var val = (10-accel)/10;
+			if (val>1){val=1;}
+			else if (val<0){val=0;}
+			var color = getColor(val);
+			var y = height - speed * yScale;
+			context.fillStyle = color;
+			context.fillRect(x, y, w, height);
+			context.fillStyle = "#DDD5";
+			context.fillRect(x, y-2, w, 4);
+			
+			if (y-5>0){
+				context.fillStyle = "#FFF3";
+				context.fillRect(x, y+2, w, 1);
+			}
+
+			var imageData = context.getImageData(w, 0, x, height);
+			context.putImageData(imageData, 0, 0);
+			context.clearRect(x, 0, w, height);
+		}
+		
+		for (var tt = interval; tt<canvas.target;tt+=interval){
+			var y = parseInt(height - tt * yScale);
+			context.fillStyle = "#0555";
+			context.fillRect(0, y, width, 1);
+		}
+		return;
+	}
+	
+	var val = (10-accel)/10;
+	if (val>1){val=1;}
+	else if (val<0){val=0;}
+	var color = getColor(val);
+
+	var yScale = height / target;
+
+	var w = 1;
+	var x = width - w;
+	var y = height - speed * yScale;
+	
+	context.fillStyle = color;
+	context.fillRect(x, y, w, height);
+	context.fillStyle = "#DDD5";
+	context.fillRect(x, y-2, w, 4);
+	
+	if (y-5>0){
+		context.fillStyle = "#FFF3";
+		context.fillRect(x, y+2, w, 1);
+	}
+	
+	context.fillStyle = "#0555";
+	if (canvasNew){
+		canvasNew = false;
+		for (var tt = interval; tt<target;tt+=interval){
+			var y = parseInt(height - tt * yScale);
+			context.fillRect(0, y, width, 1);
+		}
+	} else {
+		for (var tt = interval; tt<target;tt+=interval){
+			var y = parseInt(height - tt * yScale);
+			context.fillRect(x, y, w, 1);
+		}
+	}
+	
+	var imageData = context.getImageData(w, 0, x, height);
+	context.putImageData(imageData, 0, 0);
+	context.clearRect(x, 0, w, height);
+	
+}
+
+function loadIframe(url=false){ 
+	var iframe = document.createElement("iframe");
+	
+	if (url){
+		var iframesrc = url;
+	} else {
+		var iframesrc = document.getElementById("viewlink").value;
+	}
+	
+	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+
+	if (iframesrc==""){
+		iframesrc="./";
+	}
+	
+	iframe.src = iframesrc;
+	
+	document.getElementById("container").appendChild(iframe);
+	var outputWindow = document.getElementById("overlay");
+
+	var sensors = {};
+	
+	////////////  LISTEN FOR EVENTS
+
+	var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+	var eventer = window[eventMethod];
+	var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";
+
+	eventer(messageEvent, function (e) {
+		if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
+		
+		if ("sensors" in e.data){
+			//console.log(e.data.sensors);
+			
+			var speed = 0;
+			if (e.data.sensors.pos){
+				speed = e.data.sensors.pos.speed;
+				// e.data.sensors.pos.alt
+				// e.data.sensors.pos.t
+			}
+			
+			var accel = 0;
+			if (e.data.sensors.lin){
+				accel += Math.pow(e.data.sensors.lin.x, 2);
+				accel += Math.pow(e.data.sensors.lin.y, 2);
+				accel += Math.pow(e.data.sensors.lin.z, 2);
+			}
+			if (accel){
+				accel = Math.pow(accel,0.5);
+			}
+			
+			if (isNaN(accel)){
+				accel = 0;
+			}
+			
+			plotData(speed, accel);
+			
+			outputWindow.innerHTML = "";
+			
+			speed = parseInt(speed*100)/100;
+			outputWindow.innerHTML += "speed: "+speed+"m/s<br />";          
+		
+			accel = parseInt(accel*100)/100;
+			outputWindow.innerHTML += "acceleration: " + accel + "m/s^2<br />";         
+			
+			//for (var key in e.data.sensors.lin) {
+			//	outputWindow.innerHTML += key + " lin: " +  e.data.sensors.lin[key] + "<br />";           
+			//}
+			//for (var key in e.data.sensors.acc) {
+			//	outputWindow.innerHTML += key + " acc: " +  e.data.sensors.acc[key] + "<br />";           
+			//}
+			//for (var key in e.data.sensors.mag) {
+			//	outputWindow.innerHTML += key + " magnet: " +  e.data.sensors.mag[key] + "<br />";         
+			//}
+			//for (var key in e.data.sensors.ori) {
+			//	outputWindow.innerHTML += key + " orientation: " +  e.data.sensors.ori[key] + "<br />";         
+			//}
+		}
+	});
+}
+
+loadIframe("../"+window.location.search);
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/socal.html b/examples/socal.html
new file mode 100644
index 0000000..559a252
--- /dev/null
+++ b/examples/socal.html
@@ -0,0 +1,185 @@
+<html>
+<head><title>SocialStream + Video</title>
+<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1.0, user-scalable=yes" />
+<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+<style>
+body{
+	padding:0;
+	margin:0;
+	background-color:#003;
+	width:100%;
+	height:100%;
+}
+
+iframe {
+	width:100%;
+	height:100%;
+	border:0;
+	margin:0;
+	padding:0;
+	position:absolute;
+	display:block;
+}
+
+
+input{
+	padding:10px;
+	width:80%;
+	font-size:1.2em;
+	z-index: 1000;
+}
+
+h1{
+	color: white;
+    font-family: verdana;
+    margin: 10px;
+}
+
+#container2{
+	width:100vw;
+	height:100vh;
+	position: fixed; 
+	top: 0;
+	left:0;
+	display:none;
+	z-index:2;
+}
+#container1{
+	width:100vw;
+	height:100vh;
+	position: fixed; 
+	top: 0;
+	left:0;
+	display:none;
+}
+iframe{
+	width:100vw;
+	height:100vh;
+}
+	
+@media screen and (orientation:portrait) {
+	#container2{
+	}
+	#container1{
+	}
+	iframe{
+	}
+}
+
+@media screen and (orientation:landscape) {
+	#container2{
+	}
+	#container1{
+	}
+	iframe{
+	}
+}
+
+</style>
+</head>
+<body>
+<div id="container2"></div>
+<div id="container1" ></div>
+<div id="selectChatSource">
+	<h1>Which social integration are you adding?</h1>
+	
+	
+</div>
+<div id="clean">
+	<h1>Use VDO.Ninja and SocialStream chat at the same time</h1>
+	<input placeholder="Enter a VDON stream ID or VDON URL" id="viewlink" type="text" />
+	<input placeholder="Enter the SocialStream URL" id="social" type="text" />
+	<button onclick="loadIframes()" style="display:block;padding:10px;margin:10px;">START</button>
+</div>
+<script>
+
+window.addEventListener("orientationchange", function() {
+  // Announce the new orientation number
+ // alert(window.orientation);
+}, false);
+
+function removeStorage(cname){
+	localStorage.removeItem(cname);
+}
+
+function setStorage(cname, cvalue, hours=9999){ // not actually a cookie
+	var now = new Date();
+	var item = {
+		value: cvalue,
+		expiry: now.getTime() + (hours * 60 * 60 * 1000),
+	};
+	try{
+		localStorage.setItem(cname, JSON.stringify(item));
+	}catch(e){errorlog(e);}
+}
+
+function getStorage(cname) {
+	try {
+		var itemStr = localStorage.getItem(cname);
+	} catch(e){
+		errorlog(e);
+		return;
+	}
+	if (!itemStr) {
+		return "";
+	}
+	var item = JSON.parse(itemStr);
+	var now = new Date();
+	if (now.getTime() > item.expiry) {
+		localStorage.removeItem(cname);
+		return "";
+	}
+	return item.value;
+}
+if (getStorage("SocialStreamChatLink")){
+	document.getElementById("social").value = getStorage("SocialStreamChatLink");
+}
+if (getStorage("vdoNinjaSocialStreamURL")){
+	document.getElementById("viewlink").value = getStorage("vdoNinjaSocialStreamURL");
+}
+
+function loadIframes(url=false){ 
+
+	var roomname = document.getElementById("viewlink").value;
+	var room2 = document.getElementById("social").value;
+	
+	document.getElementById("clean").parentNode.removeChild(document.getElementById("clean"));
+	document.getElementById("container1").style.display="inline-block";
+	document.getElementById("container2").style.display="inline-block";
+	
+	var path = window.location.host+window.location.pathname.split("/").slice(0,-1).join("/");
+	path = path.replace("/examples","");
+	
+	if (roomname.startsWith("https://")){
+		var room1 = roomname;
+	} else {
+		var room1 = "https://"+path+"/?push="+roomname+"&webcam&autostart&vd=front&ad=1&transparent&noheader";
+	}
+	
+	var iframe = document.createElement("iframe");
+	iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+	iframe.src = room1;
+	var iframeContainer = document.createElement("div");
+	iframeContainer.appendChild(iframe);
+	document.getElementById("container1").appendChild(iframeContainer);
+	
+	
+	setStorage("SocialStreamChatLink", room2);
+
+	setStorage("vdoNinjaSocialStreamURL", room1);
+	
+	
+	setTimeout(function(){
+		var iframe = document.createElement("iframe");
+		iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
+		iframe.src = room2;
+		var iframeContainer = document.createElement("div");
+		iframeContainer.appendChild(iframe);
+		document.getElementById("container2").appendChild(iframeContainer);
+	},3000);
+	
+}
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/status.html b/examples/status.html
index e9eb89d..34af89f 100644
--- a/examples/status.html
+++ b/examples/status.html
@@ -2,7 +2,7 @@
 	<head>
 		<meta charset="utf8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>OBSN Chat Overlay</title>
+		<title>VDON Chat Overlay</title>
 		<style>
 		
 			@font-face {
diff --git a/examples/testjs.js b/examples/testjs.js
new file mode 100644
index 0000000..6e54070
--- /dev/null
+++ b/examples/testjs.js
@@ -0,0 +1 @@
+alert("Javascript loaded");
\ No newline at end of file
diff --git a/examples/twitch.html b/examples/twitch.html
index 03e627b..7db72d5 100644
--- a/examples/twitch.html
+++ b/examples/twitch.html
@@ -29,7 +29,11 @@ input{
 	z-index: 1000;
 }
 
-
+h1{
+	color: white;
+    font-family: verdana;
+    margin: 10px;
+}
 @media screen and (orientation:portrait) {
 	#container2{
 		width:100%;height:100%;display:none;
@@ -64,6 +68,7 @@ input{
 <div id="container2"></div>
 <div id="container1" ></div>
 <div id="clean">
+	<h1>Use VDO.Ninja and Twitch chat at the same time</h1>
 	<input placeholder="Enter a VDON stream ID or VDON URL" id="viewlink" type="text" />
 	<input placeholder="Enter the Twitch channel name" id="twitch" type="text" />
 	<button onclick="loadIframes()" style="display:block;padding:10px;margin:10px;">START</button>
@@ -75,6 +80,46 @@ window.addEventListener("orientationchange", function() {
  // alert(window.orientation);
 }, false);
 
+function removeStorage(cname){
+	localStorage.removeItem(cname);
+}
+
+function setStorage(cname, cvalue, hours=9999){ // not actually a cookie
+	var now = new Date();
+	var item = {
+		value: cvalue,
+		expiry: now.getTime() + (hours * 60 * 60 * 1000),
+	};
+	try{
+		localStorage.setItem(cname, JSON.stringify(item));
+	}catch(e){errorlog(e);}
+}
+
+function getStorage(cname) {
+	try {
+		var itemStr = localStorage.getItem(cname);
+	} catch(e){
+		errorlog(e);
+		return;
+	}
+	if (!itemStr) {
+		return "";
+	}
+	var item = JSON.parse(itemStr);
+	var now = new Date();
+	if (now.getTime() > item.expiry) {
+		localStorage.removeItem(cname);
+		return "";
+	}
+	return item.value;
+}
+if (getStorage("twitchChatLink")){
+	document.getElementById("twitch").value = getStorage("twitchChatLink");
+}
+if (getStorage("vdoNinjaTwitchURL")){
+	document.getElementById("viewlink").value = getStorage("vdoNinjaTwitchURL");
+}
+
 function loadIframes(url=false){ 
 
 	var roomname = document.getElementById("viewlink").value;
@@ -100,6 +145,12 @@ function loadIframes(url=false){
 	iframeContainer.appendChild(iframe);
 	document.getElementById("container1").appendChild(iframeContainer);
 	
+	
+	setStorage("twitchChatLink", room2);
+
+	setStorage("vdoNinjaTwitchURL", room1);
+	
+	
 	setTimeout(function(){
 		var iframe = document.createElement("iframe");
 		iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;";
diff --git a/supports.html b/supports.html
index e128913..5882119 100644
--- a/supports.html
+++ b/supports.html
@@ -12,7 +12,7 @@
 				href="./"
 				style="text-decoration: none; color: white; margin: 2px"
 			>
-				<span data-translate="logo-header"> <font id="qos">O</font>BS.Ninja </span>
+				<span data-translate="logo-header"> <font id="qos">V</font>DO.Ninja </span>
 			</a>
 		</div>
 		<div class="card">
