Stream without forwarding ports?
-
- Posts: 5
- Joined: Fri Apr 06, 2012 9:36 pm
Stream without forwarding ports?
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
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
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 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.
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.
-
- Posts: 5
- Joined: Fri Apr 06, 2012 9:36 pm
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
-
- Posts: 5
- Joined: Fri Apr 06, 2012 9:36 pm
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
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
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
-
- Posts: 5
- Joined: Fri Apr 06, 2012 9:36 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:
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:
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>
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>
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
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:
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/.
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>
-
- Posts: 12
- Joined: Fri Feb 08, 2008 1:37 am
Re: Stream without forwarding ports?
Here's a sample Nginx configuration that achieves this
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.
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;
}
}
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.
Re: Stream without forwarding ports?
Hi friendhotinferno 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
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