Stream without forwarding ports?

hotinferno · Post by **hotinferno** » Fri Apr 06, 2012 9:55 pm

So here's the deal. When my laptop is at home everything works perfectly. I can view my webcam in and out of my network.
However, I often have to take my laptop to other places such as work, friends relatives etc etc and I don't want to keep having to forward the ports on every single place I visit.
I thought by installing no-ip it would help but turns out it only works if the ports are open even though it does register the changed ip. I even tried changing the no-ip settings to to port80 redirect but still nothing.
So any ideas? Any programs that detect your router and automatically open ports

Post by **z3r0c00l12** » Sat Apr 07, 2012 9:19 am

Theoretically speaking, you could setup a web server on a computer in your house, use an always on vpn connection between your web server and your laptop, open the ports on your router to the web server and have the web server get the stream from your laptop over the vpn, so wherever your laptop is, if it has an internet connection, it will be able to stream to your web server at home, which will be able to relay to whoever is connecting.

For VPN, I like to use Hamachi since it's very simple to set up.

You'd install your no-ip on the web server computer so that if your home ip changes people can connect to it. The VPN will find your laptop anywhere as long as you're on the internet.

EDIT: Forgot to mention, I use apache with some configurations to reverse proxy the request through the VPN. So if someone goes to example.com then they get a regular webpage on my server, but if they try say example.com/yawcam/ then they would be redirected through VPN transparently.

hotinferno · Post by **hotinferno** » Sun Apr 08, 2012 7:02 pm

Thanks for the reply. Sounds very promising. I can set up the vpn but how do I stream the yawcam feed through it to the other computer?

Post by **z3r0c00l12** » Mon Apr 09, 2012 2:14 pm

The computer running the web server will fetch it through the vpn when someone connects. So your port forward will go to the web server computer instead and the webserver will redirect using the reverse proxy configuration through the vpn.

hotinferno · Post by **hotinferno** » Sun Apr 15, 2012 3:00 am

Ok so I have set up Hamachi and I can view the webcam from the server computer through the Hamachi IP.

I have set up a server and created a web page and embeded the yawcam javascript code. So far so good. Works perfectly (I think). The problem is when I try to access that page from another computer that doesn't have hamachi installed.h The page loads (which means that all ports are open) but it just stays on loading.

These are my settings:
In the connection settings of yawcam I have used the hamachi IP with the 8071 port. My server is running on 8050. The password is also disabled since I read that it might cause problems.

Now if I change the yawcam IP to my public IP, edit the server page with the yawcam js code, I can view the webcam from the 3rd pc with no problems. So obviously it has something to do with the hamachi IP.

Am I doing something wrong in the yawcam or hamachi settings? Please help

Post by **z3r0c00l12** » Sun Apr 15, 2012 2:35 pm

What web server are you using?
Can you post the configuration here?
If the website is working, can you post it here? Maybe if I check the source I'll find a problem.

hotinferno · Post by **hotinferno** » Sun Apr 15, 2012 3:43 pm

I am using Microsoft IIS. I doubt it's a problem with the type of server since if I change the IP in the html code from the hamachi IP to the PC's external IP, I can view the video feed from the 3rd pc without any problems.

What kind of configuration do you need to see?

This is the HTML code that I'm using:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yawcam</title>
<style type="text/css">
div.menu
{
	margin: 0px;
	display: none;
	width: 80px;
	border: 1px solid black;
	background: #3F3F3F;
	background-image: url(img/bg.gif);
	padding: 2px 0px;	
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #FFFFFF;  
	text-decoration: none;	
	border-right: none;	
	position: absolute;
}

div.passLayer
{
	margin: 0px;
	display: none;
	width: 320px;
	height: 240px;
	border: 1px solid black;
	background: none;
	background-image: url(err);//none; //trick IE there is something in layer
	padding: 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #000000;
	text-decoration: none;
	position: absolute;
	z-index: 5;
}

div.menu_child
{
	margin: 0px;
	display: none;
	border: none;
	padding: 0px 0px;
	position: absolute;
}

a.menu_Item
{
  display: block;
  margin: 0px;  
  border: 1px solid black;
  background: #FBFBFB;
  padding: 2px 6px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #6C6C6C;
  width: 85px;
  border-bottom: none;
  text-decoration: none;
}

.heading {color: #000000;}
.text a:link{ color: #4589ff;}
.text a:visited {color: #4589ff;}
.text a:hover {color: #ff0000;}
.text a:active { color: #ff0000;}
.text
{
  font-size: 14px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
}

</style>
<script type="text/javascript">
<!-- 

var fps = 30;
var quality = 30;
var timeout = 33;
var baseURL = "http://5.192.130.92:8071/"; //change this to "http://_yawcam_computer_address:port/" when running on own server.
var t_;
var i_;
var ct_;
var id;
var xmlHttp;
var firstReq=true;
var state = "null";

function updateID()
{
	id = Math.random();
}

function setFps(val)
{
	fps = val;
	timeout = Math.round(1000.0/fps);
}

function setQ(val)
{
	quality = val;
}

function scaleIn()
{
	document.images.camImg.width = document.images.camImg.width + 40;
	document.images.camImg.height = document.images.camImg.height + 30;
}

function scaleOut()
{
	document.images.camImg.width = document.images.camImg.width - 40;
	document.images.camImg.height = document.images.camImg.height - 30;
}

function scaleOrg()
{
	document.images.camImg.width = 320;
	document.images.camImg.height = 240;
}

function showLayer(theLayer)
{
	getLayer(theLayer).style.display = "block";
}

function hideLayer(theLayer)
{
	getLayer(theLayer).style.display = "none";
}

function hideAllMenuLayers()
{
	hideLayer('menu_fps');
	hideLayer('menu_fps_child');
	hideLayer('menu_quality');
	hideLayer('menu_quality_child');
	hideLayer('menu_scale');
	hideLayer('menu_scale_child');
	hideLayer('menu_about');
	hideLayer('menu_about_child');
}

function hideAllMenuChildren()
{
	hideLayer('menu_fps_child');
	hideLayer('menu_quality_child');
	hideLayer('menu_scale_child');
	hideLayer('menu_about_child');
}

function showAllMenuCols()
{
	showLayer('menu_fps');
	showLayer('menu_quality');
	showLayer('menu_scale');
	showLayer('menu_about');
}

function fixMenuColPos(owner)
{
	setLyr(owner,'menu_fps',false,0);
	setLyr(owner,'menu_quality',false,1);
	setLyr(owner,'menu_scale',false,2);
	setLyr(owner,'menu_about',false,3);
}

function getLayer(theLayer)
{
	var obj = null;
	if (document.getElementById)
	{
		obj = document.getElementById(theLayer);
	}
	else if (document.all)
	{
		obj = document.all[theLayer];
	}
	else if (document.layers)
	{
		obj = document.layers[theLayer];
	}
	return obj;
}

function getMarker(val,testVal)
{
	var str = null;
	if(val == testVal)
	{
		str = "<img src=\"img/mrk.gif\" style=\"border:none;vertical-align: text-bottom;margin: 0px;\" alt=\"<--\">";
	}
	else 
	{
		str = "";
	}
	return str;
}

function showErrorImage()
{
	clearTimeout(t_);
	clearInterval(i_);
	document.images.camImg.onload = "";
	document.images.camImg.src = "http://www.yawcam.com/offline.jpg";
	window.status = "Webcam offline";
}

function reloadImage()
{
	var theDate = new Date();
	var url = baseURL + "out.jpg?";
	url += ("q="+quality);
	url += ("&id="+id);
	url += "&r=";
	url += theDate.getTime().toString();
	document.images.camImg.src = url;	
	window.status = "Yawcam streaming...";
}

function fixImageTimeout()
{
	t_ = setTimeout("reloadImage();",timeout);
}

function cTO()
{
	if(state=="running")
	{
		clearTimeout(t_);
		reloadImage();
	}
}

function updateFpsMenu()
{
	document.getElementById('fps_30').innerHTML = "30 " + getMarker(fps,30);
	document.getElementById('fps_15').innerHTML = "15 " + getMarker(fps,15);
	document.getElementById('fps_10').innerHTML = "10 " + getMarker(fps,10);
	document.getElementById('fps_5').innerHTML = "5 " + getMarker(fps,5);
	document.getElementById('fps_1').innerHTML = "1 " + getMarker(fps,1);
}

function updateQualityMenu()
{
	document.getElementById('q_75').innerHTML = "75 % " + getMarker(quality,75);
	document.getElementById('q_50').innerHTML = "50 % " + getMarker(quality,50);
	document.getElementById('q_40').innerHTML = "40 % " + getMarker(quality,40);
	document.getElementById('q_30').innerHTML = "30 % " + getMarker(quality,30);
	document.getElementById('q_20').innerHTML = "20 % " + getMarker(quality,20);
	document.getElementById('q_10').innerHTML = "10 % " + getMarker(quality,10);
	document.getElementById('q_5').innerHTML = "5 % " + getMarker(quality,5);
	document.getElementById('q_1').innerHTML = "1 % " + getMarker(quality,1);
}

function setLyr(obj,lyr,drop,col)
{
	var coors = findPos(obj);
	var x = document.getElementById(lyr);
	if(drop == true)
	{
		coors[1] = coors[1]+26;
	}
	x.style.top = coors[1] + 'px';
	coors[0] = coors[0]+(col*80);
	x.style.left = coors[0] + 'px';
}

function findPos(obj)
{
	var curleft = curtop = 0;
	if (obj.offsetParent) 
	{
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) 
		{
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

function startPoll()
{	
	document.images.camImg.onload=fixImageTimeout
	var url=baseURL+"get?id="+id+"&r="+Math.random()
	document.images.camImg.src = url;	
	setTimeout("document.images.camImg.onerror=showErrorImage",2000);
}

function fixStatusTimeout()
{
	ts_ = setTimeout("getStatus();",2000);
}

function fixConnectTimeout()
{
	ct_ = setTimeout("showErrorImage();",4000);
}

-->
</script>
</head>

<body style="background-color: #ffffff; background-image: none;">

	<div id="imgLyr" align="center">	
  	<p class="heading"><strong><font size="5" face="Verdana, Arial, Helvetica, sans-serif">It's a webcam!</font></strong> </p>

	<img id="camImg" src="img/loading.jpg" onMouseOver="javascript:fixMenuColPos(this);showAllMenuCols();" onMouseOut="javascript:hideAllMenuLayers();" onLoad="javascript:updateID();startPoll()" onError="javascript:reloadImage()" width=320 height=240 style="border: 1px solid #000000;">	
	</div>
	
	<div align="center"><br /><div align="left" style="width: 400px;" class="text"><p>Here goes some text...</p></div></div>
	
	<p align="center" class="text" style="font-size: 10px;">Powered by <a href="http://www.yawcam.com" target="_blank">www.yawcam.com</a></p>	

	<div id="menu_fps" class="menu" onMouseOver="javascript:showAllMenuCols();hideAllMenuChildren();updateFpsMenu();setLyr(this,'menu_fps_child',true,0);showLayer('menu_fps_child');">
	<center>Fps</center>
	</div>

	<div id="menu_quality" class="menu" onMouseOver="javascript:showAllMenuCols();hideAllMenuChildren();updateQualityMenu();setLyr(this,'menu_quality_child',true,0);showLayer('menu_quality_child');">
	<center>Quality</center>
	</div>

	<div id="menu_scale" class="menu" onMouseOver="javascript:showAllMenuCols();hideAllMenuChildren();setLyr(this,'menu_scale_child',true,0);showLayer('menu_scale_child');">
	<center>Scale</center>
	</div>

	<div id="menu_about" class="menu" style="border-right: 1px solid black;" onMouseOver="javascript:showAllMenuCols();hideAllMenuChildren();setLyr(this,'menu_about_child',true,0);showLayer('menu_about_child');">
	<center>About</center>
	</div>

	<div id="menu_fps_child" class="menu_child" onMouseOver="javascript:showAllMenuCols();showLayer('menu_fps_child');" onMouseOut="javascript:hideLayer('menu_fps_child');" onClick="javascript:updateFpsMenu();hideLayer('menu_fps_child');">
	<a id="fps_30" class="menu_Item" href="javascript:setFps(30);cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">30 </a>
	<a id="fps_15" class="menu_Item" href="javascript:setFps(15);cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">15 </a>
	<a id="fps_10" class="menu_Item" href="javascript:setFps(10);cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">10 </a>
	<a id="fps_5"  class="menu_Item" href="javascript:setFps(5);cTO();"  onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">5 </a>
	<a id="fps_1"  class="menu_Item" style="border-bottom: 1px solid black;" href="javascript:setFps(1);cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">1 </a>
	</div>

	<div id="menu_quality_child" class="menu_child" onMouseOver="javascript:showAllMenuCols();showLayer('menu_quality_child');" onMouseOut="javascript:hideLayer('menu_quality_child');" onClick="javascript:updateQualityMenu();hideLayer('menu_quality_child');">
	<a id="q_75" class="menu_Item" href="javascript:setQ(75);cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">75 % </a>
	<a id="q_50" class="menu_Item" href="javascript:setQ(50);cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">50 % </a>
	<a id="q_40" class="menu_Item" href="javascript:setQ(40);cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">40 % </a>
	<a id="q_30" class="menu_Item" href="javascript:setQ(30);cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">30 % </a>
	<a id="q_20" class="menu_Item" href="javascript:setQ(20);cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">20 % </a>
	<a id="q_10" class="menu_Item" href="javascript:setQ(10);cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">10 % </a>
	<a id="q_5"  class="menu_Item" href="javascript:setQ(5);cTO();"  onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">5 % </a>
	<a id="q_1"  class="menu_Item" style="border-bottom: 1px solid black;" href="javascript:setQ(1);cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">1 % </a>
	</div>

	<div id="menu_scale_child" class="menu_child" onMouseOver="javascript:showAllMenuCols();showLayer('menu_scale_child');" onMouseOut="javascript:hideLayer('menu_scale_child');" onClick="javascript:hideLayer('menu_scale_child');">
	<a id="z1" class="menu_Item" href="javascript:scaleIn();cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">Up</a>
	<a id="z2" class="menu_Item" href="javascript:scaleOut();cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">Down</a>
	<a id="z3" class="menu_Item" style="border-bottom: 1px solid black;" href="javascript:scaleOrg();cTO();" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">1:1</a>
	</div>

	<div id="menu_about_child" class="menu_child" onMouseOver="javascript:showAllMenuCols();showLayer('menu_about_child');" onMouseOut="javascript:hideLayer('menu_about_child');" onClick="javascript:hideLayer('menu_about_child');">
	<a id="a1" class="menu_Item" href="http://www.yawcam.com" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">Yawcam</a>
	<a id="a2" class="menu_Item" style="border-bottom: 1px solid black;" href="http://www.yawcam.com/menuinfo.php" onMouseOver="this.style.backgroundColor='#CEE6F9'" onMouseOut="this.style.backgroundColor='#FBFBFB'" onFocus="this.blur()">This menu</a>
	</div>

</body>
</html>

That's the hamachi IP address for the client computer and the port I'm using in yawcam.
By using this code, I can see the feed from the computers in the hamachi server but not from a 3rd computer.

I have also tried using iframes:

Code: Select all

<iframe src='http://5.192.130.92:8071/' style='border:none;' frameborder='0'></iframe>

Post by **z3r0c00l12** » Sun Apr 15, 2012 4:22 pm

Oh, you'll have to modify that, basically, what you want to do is have the web server redirect to the hamachi IP:port, so you'll have to edit the web server's configuration. I use apache and I had to tinker with it a bit, but I got it working following most of the instructions here : http://www.apachetutor.org/admin/reverseproxies.

It looks like it's feasible with IIS aswell http://blogs.iis.net/carlosag/archive/2 ... d-arr.aspx

Below is the configuration I had to use for apache:

Code: Select all

LoadFile "modules/libxml2.dll"
LoadModule proxy_html_module modules/mod_proxy_html/mod_proxy_html.so
LoadModule xml2enc_module modules/mod_proxy_html/mod_xml2enc.so
LoadModule headers_module modules/mod_headers.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule rewrite_module modules/mod_rewrite.so

ProxyHTMLEnable On
ProxyRequests off
ProxyPass	/Yawcam/	http://5.X.X.X:8081/
ProxyPassReverse /Yawcam/ http://5.X.X.X:8081/
<Location /Yawcam/>
	ProxyPassReverse /
	ProxyHTMLURLMap / /Yawcam/
</Location>

So when I try say http://example.com/Yawcam/, apache redirects that to http://5.X.X.X:8081/ transparently, so in my pages where I want to embed yawcam, instead of putting hamachi's IP, I simply put the url http://example.com/yawcam/.

bugmenot-user · Post by **bugmenot-user** » Wed Oct 11, 2023 11:13 pm

Here's a sample Nginx configuration that achieves this

Code: Select all

server {
    listen 80;
    server_name example.com;  # Replace with your domain or IP

    location /Yawcam/ {
        proxy_pass http://5.X.X.X:8081/;  # Replace with your Hamachi IP and port
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

This configuration sets up a reverse proxy so that when you access http://example.com/Yawcam/, Nginx will transparently redirect the traffic to your Hamachi IP and port. This way, you can embed the webcam feed on your web pages using the URL http://example.com/Yawcam/.
Now test it Manually or use browser developer tools to inspect network requests and redirects or use any online tool like redirect checker. This can help you to get detail redirection chain and its status code.

Aakriti · Post by **Aakriti** » Sat Oct 14, 2023 7:18 pm

hotinferno wrote: ↑Fri Apr 06, 2012 9:55 pm So here's the deal. When my laptop is at home everything works perfectly. I can view my webcam in and out of my network.
However, I often have to take my laptop to other places such as work, friends relatives etc etc and I don't want to keep having to forward the ports on every single place I visit.
I thought by installing no-ip it would help but turns out it only works if the ports are open even though it does register the changed ip. I even tried changing the no-ip settings to to port80 redirect but still nothing.
So any ideas? Any programs that detect your router and automatically open ports

Hi friend
Port forwarding can be a pain, in fact. Consider looking into your router's UPnP (Universal Plug and Play) settings, which certain programs can use to automatically open ports when necessary. Just make sure that security precautions are taken.GB whatsapp Apk

Yawcam

Stream without forwarding ports?

Stream without forwarding ports?

Re: Stream without forwarding ports?

Re: Stream without forwarding ports?