VNC remote desktop via web browser
Posted: Sun Jul 06, 2014 4:52 pm
Hi folks;
This is a slight variant on an earlier set of instructions I posted a while ago here.
The basic premise is to use another computer as the input console for the Raspberry Pi without needing to get a separate screen, keyboard and mouse on the Pi. Ideal if you've got a room full of laptops, chrome books or iMacs for example.
This way differs from the previous in that you don't need to install any software on the host computer/laptop. You can set the Raspberry Pi up so that it provides everything the host computer needs through the web browser. It makes it as easy as typing an address in
Here is an example of the end product on Windows / IE:
What will it work on?
Any HTML5 compliant web browser. But basically these and above:
Best to start with a fresh install of Raspbian and follow these instructions while logged in as the default pi user.
So the aim here is to install the VNC server software as well as a web based HTML5 client onto the Raspberry Pi.
We're first going to need to install a few packages (TightVNC server and screen). Run these commands from the terminal.
Next run TightVNC server which will prompt you to enter a password and an optional view-only password.
Now let's get the HTML5 VNC client. Enter the following commands.
We just need to make a small adjustment to some of the files here. The folder we've just downloaded will be served out as a http root for the Pi so we just need to ensure there is an index page. This will allow the host computer to access the VNC client software.
Then run these commands:
You should see the message:
After a few moments you'll then see this message:
Press Ctrl - C to stop it, and then press Enter a couple of times to get the command prompt back.
Next we need to set everything to start automatically since you're probably going to want to use the Raspberry Pi in headless mode.
To do this we just need to create a few scripts inside init.d, enter the following commands.
Note the line that says -geometry 1280x800. This sets the screen resolution for the remote desktop, so you may wish to alter this to suit the screen size of the PC or Mac that you want to control from. Ideally this should be set slightly lower to avoid having scroll bars.
Press Ctrl - O followed by Enter to save, then Ctrl - X to quit from editing.
The script we've just created basically makes VNC part of the background services that Linux is controlling.
We next need to register the script, enter the following commands:
Ignore any messages about missing LSB tags and overrides.
That's the server part done. Next we need to setup a similar script for the HTML5 client.
Ignore any messages about missing LSB tags and overrides.
Now you should be able to reboot and both services will start up automatically.
When the Pi has rebooted you should now be able to enter the IP address of the Raspberry Pi into the web browser of the host computer.
You will be prompted for the password that you specified when setting up the VNC server.
I have occasionally observed an error on the first time that you try to connect, I think this is being caused by the proxy getting started before the VNC server socket is open.
If you see this the top bar goes red. Just hit refresh (F5), enter the password again and it should work.
Master and slave mode
There is another trick you can do here if you want to really have things sown up. I also describe this in the previous post but there are a few differences here.
Using the following instructions each Raspberry Pi will be directly connecting to the host computer using a single Ethernet cable, thus making a completely isolated point to point network between the two and therefore your network administrators shouldn't have any cause to complain. Note: you don't need a cross over cable for this, a standard cable will work because the Pi Ethernet port auto-switches the transmit and receive pins.
Firstly we'll need to install some more software on the Pi. We’re going to make the Pi Ethernet port behave in a similar way to a home router. This means assigning a static IP address to it and installing a DHCP service (dnsmasq) that will respond to address requests from the host computer.
Enter these commands:
It’s a good idea to use an IP address range that is very different to your main network, so let’s use 10.0.0.X. To configure this we must edit the network interfaces file, enter the following command;
Find the following line;
Add a hash symbol at the start of the line to disable it and then add the other four lines shown below.
Press Ctrl - O followed by Enter to save, then Ctrl - X to quit from editing.
The Raspberry Pi will now have a static address of 10.0.0.1
Next we need to configure dnsmasq (that we installed earlier) to give out IP addresses. I am going to explicitly specify a configuration file for the dnsmasq service so let’s first make a backup of the default config file and then save my one in its place.
You should now be editing a blank file. Copy and paste the following into it.
The first line tells dnsmasq to listen for DHCP requests on the Ethernet port of the Pi. The second line is specifying the range of IP addresses that can be given out. The third and fourth lines tell the host computer what it's default gateway and DNS server settings are.
Next we're going to make a small edit to the hosts file. This will allow the user to type in pi into the browser instead of 10.0.0.1.
Enter the following command to edit the hosts file.
Find the line that says 127.0.0.1 raspberrypi and add the following line;
Press Ctrl - O followed by Enter to save, then Ctrl - X to quit from editing.
Next disconnect the Pi from the LAN and reboot.
You can go ahead and plug in the single Ethernet cable directly from the Pi to the host computer.
The host computer should then be given an IP address which will be 10.0.0.X where X is a random number between 2 and 250.
One thing to try is to open up a command prompt on the host computer (a Terminal on OSX and Linux) and enter the following command;
If you see reply, reply, reply then it's working. If you see request timed out then something is wrong and you'll need to go back and double check everything.
You should now be able to open up a web browser on the host computer and enter pi into the address bar to get to the VNC client page.
Note: Windows users: This may not work properly on Windows (you'll still need to use 10.0.0.1) but if you install a package called winbind you'll be able to type the Raspberry Pi hostname into the browser. Usually this is raspberrypi. The winbind package can be installed with the command below:
It should be fine on OSX, Ubuntu and any flavour of Linux though.
You will be prompted for the password that you specified when setting up the VNC server.
I have occasionally observed an error on the first time that you try to connect, I think this is being caused by the proxy getting started before the VNC server socket is open.
If you see this the top bar goes red. Just hit refresh (F5), enter the password again and it should work.
Hope it's helpful!
Dave
This is a slight variant on an earlier set of instructions I posted a while ago here.
The basic premise is to use another computer as the input console for the Raspberry Pi without needing to get a separate screen, keyboard and mouse on the Pi. Ideal if you've got a room full of laptops, chrome books or iMacs for example.
This way differs from the previous in that you don't need to install any software on the host computer/laptop. You can set the Raspberry Pi up so that it provides everything the host computer needs through the web browser. It makes it as easy as typing an address in
Here is an example of the end product on Windows / IE:
What will it work on?
Any HTML5 compliant web browser. But basically these and above:
- Chrome 8
- Firefox 4
- Safari 5
- iOS Safari 4.2
- Opera 11
- IE 9
Best to start with a fresh install of Raspbian and follow these instructions while logged in as the default pi user.
So the aim here is to install the VNC server software as well as a web based HTML5 client onto the Raspberry Pi.
We're first going to need to install a few packages (TightVNC server and screen). Run these commands from the terminal.
Code: Select all
sudo apt-get update
sudo apt-get install tightvncserver screen -yCode: Select all
tightvncserverCode: Select all
cd /usr/local/share/
sudo git clone git://github.com/kanaka/noVNC
Code: Select all
cd noVNC
sudo cp vnc_auto.html index.html
Code: Select all
cd utils
sudo ./launch.shCode: Select all
No installed websockify, attempting to clone websockify...Code: Select all
Navigate to this URL:
http://blablabla
Press Ctrl-C to exit
WebSocket server settings:
- Listen on :6080
- Flash security policy server
- Web server. Web root: /usr/local/share/noVNC
- No SSL/TLS support (no cert file)
- proxying from :6080 to localhost:5900
Next we need to set everything to start automatically since you're probably going to want to use the Raspberry Pi in headless mode.
To do this we just need to create a few scripts inside init.d, enter the following commands.
Code: Select all
cd /etc/init.d/
sudo wget https://dl.dropboxusercontent.com/u/14125489/RaspberryPi/vncboot --no-check-certificate
sudo nano vncbootPress Ctrl - O followed by Enter to save, then Ctrl - X to quit from editing.
The script we've just created basically makes VNC part of the background services that Linux is controlling.
We next need to register the script, enter the following commands:
Code: Select all
sudo chmod 755 vncboot
sudo update-rc.d vncboot defaultsThat's the server part done. Next we need to setup a similar script for the HTML5 client.
Code: Select all
sudo wget https://dl.dropboxusercontent.com/u/14125489/RaspberryPi/vncproxy --no-check-certificate
sudo chmod 755 vncproxy
sudo update-rc.d vncproxy defaults 98
Now you should be able to reboot and both services will start up automatically.
Code: Select all
sudo rebootYou will be prompted for the password that you specified when setting up the VNC server.
I have occasionally observed an error on the first time that you try to connect, I think this is being caused by the proxy getting started before the VNC server socket is open.
If you see this the top bar goes red. Just hit refresh (F5), enter the password again and it should work.
Master and slave mode
There is another trick you can do here if you want to really have things sown up. I also describe this in the previous post but there are a few differences here.
Using the following instructions each Raspberry Pi will be directly connecting to the host computer using a single Ethernet cable, thus making a completely isolated point to point network between the two and therefore your network administrators shouldn't have any cause to complain. Note: you don't need a cross over cable for this, a standard cable will work because the Pi Ethernet port auto-switches the transmit and receive pins.
Firstly we'll need to install some more software on the Pi. We’re going to make the Pi Ethernet port behave in a similar way to a home router. This means assigning a static IP address to it and installing a DHCP service (dnsmasq) that will respond to address requests from the host computer.
Enter these commands:
Code: Select all
sudo apt-get install dnsmasq -yCode: Select all
sudo nano /etc/network/interfacesCode: Select all
iface eth0 inet dhcpCode: Select all
# iface eth0 inet dhcp
auto eth0
iface eth0 inet static
address 10.0.0.1
netmask 255.255.255.0The Raspberry Pi will now have a static address of 10.0.0.1
Next we need to configure dnsmasq (that we installed earlier) to give out IP addresses. I am going to explicitly specify a configuration file for the dnsmasq service so let’s first make a backup of the default config file and then save my one in its place.
Code: Select all
cd /etc
sudo mv dnsmasq.conf dnsmasq.default
sudo nano dnsmasq.confCode: Select all
interface=eth0
dhcp-range=10.0.0.2,10.0.0.250,255.255.255.0,12h
dhcp-option=3,10.0.0.1
dhcp-option=6,10.0.0.1
Next we're going to make a small edit to the hosts file. This will allow the user to type in pi into the browser instead of 10.0.0.1.
Enter the following command to edit the hosts file.
Code: Select all
sudo nano /etc/hostsCode: Select all
10.0.0.1 pi
Next disconnect the Pi from the LAN and reboot.
Code: Select all
sudo rebootThe host computer should then be given an IP address which will be 10.0.0.X where X is a random number between 2 and 250.
One thing to try is to open up a command prompt on the host computer (a Terminal on OSX and Linux) and enter the following command;
Code: Select all
ping 10.0.0.1You should now be able to open up a web browser on the host computer and enter pi into the address bar to get to the VNC client page.
Note: Windows users: This may not work properly on Windows (you'll still need to use 10.0.0.1) but if you install a package called winbind you'll be able to type the Raspberry Pi hostname into the browser. Usually this is raspberrypi. The winbind package can be installed with the command below:
Code: Select all
sudo apt-get install winbindYou will be prompted for the password that you specified when setting up the VNC server.
I have occasionally observed an error on the first time that you try to connect, I think this is being caused by the proxy getting started before the VNC server socket is open.
If you see this the top bar goes red. Just hit refresh (F5), enter the password again and it should work.
Hope it's helpful!
Dave