# \#HELP# building an Pan-Tilt Webinterface for Pimoroni Pan-Tilt HAT FULL KIT with Webcam Server

**URL:** <https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654>\
**Category:** Projects\
**Created:** [December 28, 2016, 2:14pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654 "2016-12-28T14:14:31Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joey73](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/joey73/32/1861_2.png) [@Joey73](https://forums.pimoroni.com/u/Joey73)\
**Post date:** [December 28, 2016, 2:14pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/1 "2016-12-28T14:14:31Z")

</div>

Hi FolkZ,

can anyone help me building an Pan-Tilt Webinterface for Pimoroni Pan-Tilt HAT FULL KIT with Webcam Server for the Pi-Camera Module 2.1.

I’m not so good at programming, and will donate for this Project.

GREETZ  
Joey

---

<div class="post-metadata">

**Author:** ![gadgetoid](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/gadgetoid/32/13_2.png) [@gadgetoid](https://forums.pimoroni.com/u/gadgetoid)\
**Post date:** [December 28, 2016, 2:26pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/2 "2016-12-28T14:26:55Z")

</div>

I was working on an example of this but @waveform has done better with a port of Pi Streaming that’s compatible with Pan Tilt HAT: [https://github.com/waveform80/pistreaming/tree/pantilthat](https://github.com/waveform80/pistreaming/tree/pantilthat)

---

<div class="post-metadata">

**Author:** ![Joey73](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/joey73/32/1861_2.png) [@Joey73](https://forums.pimoroni.com/u/Joey73)\
**Post date:** [December 29, 2016, 5:58am UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/3 "2016-12-29T05:58:49Z")

</div>

mmmh, i can’t start the Webserver.

Issue?

Python 2.7.9 (default, Sep 17 2016, 20:26:04)  
[GCC 4.9.2] on linux2  
Type “copyright”, “credits” or “license()” for more information.

> > > ================================ RESTART ================================

Traceback (most recent call last):  
File “/home/pi/pistreaming/server.py”, line 12, in   
from http.server import HTTPServer, BaseHTTPRequestHandler  
ImportError: No module named http.server

> > >

I have startet the script like usage but the console will not start???

Usage

Run the Python server script which should print out a load of stuff to the console as it starts up:

---

<div class="post-metadata">

**Author:** ![gadgetoid](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/gadgetoid/32/13_2.png) [@gadgetoid](https://forums.pimoroni.com/u/gadgetoid)\
**Post date:** [December 29, 2016, 9:10am UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/4 "2016-12-29T09:10:05Z")

</div>

`http.server` only exists in Python 3. You’ll need to `sudo apt-get install python3` and run it with `python3`.

---

<div class="post-metadata">

**Author:** ![Joey73](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/joey73/32/1861_2.png) [@Joey73](https://forums.pimoroni.com/u/Joey73)\
**Post date:** [December 29, 2016, 11:30am UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/5 "2016-12-29T11:30:16Z")

</div>

okay, thanks i’m testing it

---

<div class="post-metadata">

**Author:** ![waveform](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/waveform/32/477_2.png) [@waveform](https://forums.pimoroni.com/u/waveform)\
**Post date:** [December 29, 2016, 7:57pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/6 "2016-12-29T19:57:27Z")

</div>

I can only apologise for the web interface - the pantilthat branch is literally a 15 minute hack on top of the main pistreaming project. But it’s a reasonable foundation to build upon given it works with all browsers I’ve tried (including firefox and chrome on android) and uses an honest-to-goodness video format (okay, MPEG1, but that’s still preferable to streaming everything full-frame like all the MJPEG stuff out there).

Still … the web interface needs some work! Feel free to open PRs against the project - I’m happy to incorporate suggestions even on non-master branches like pantilthat (I can’t really merge pantilthat into master given that most people who use the project won’t have one, but I’m happy to keep it around indefinitely).

---

<div class="post-metadata">

**Author:** ![boxgr0ve](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@boxgr0ve](https://forums.pimoroni.com/u/boxgr0ve)\
**Post date:** [December 31, 2016, 11:50am UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/7 "2016-12-31T11:50:28Z")

</div>

@waveform, I’m trying to get this working on a fresh install of jessie but get the following error when loading up the web server…

Any ideas?

[Pic here](http://i.imgur.com/SnheqUV.png)

---

<div class="post-metadata">

**Author:** ![GordonTGopher](https://avatars.discourse-cdn.com/v4/letter/g/0ea827/32.png) [@GordonTGopher](https://forums.pimoroni.com/u/GordonTGopher)\
**Post date:** [December 31, 2016, 3:41pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/8 "2016-12-31T15:41:56Z")

</div>

Just an observation that might help someone at some point; make sure you clone the pantilthat branch and not the master!

A ‘friend’ spent a while working out why the pan-tilt controls weren’t visible, then realised they had cloned the master branch!

Thanks to @waveform for the web interface, great to have a working example to build on.

Cheers,

Gordon

---

<div class="post-metadata">

**Author:** ![Joey73](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/joey73/32/1861_2.png) [@Joey73](https://forums.pimoroni.com/u/Joey73)\
**Post date:** [December 31, 2016, 4:27pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/9 "2016-12-31T16:27:25Z")

</div>

clone the pantilthat branch and not the master, how am I to understand that?

Could someone give a more detailed guide with the complete Pythonj code?

I get the webinterface not reasonable to run.

GREETZ  
Joey

---

<div class="post-metadata">

**Author:** ![RogueM](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/roguem/32/311_2.png) [@RogueM](https://forums.pimoroni.com/u/RogueM)\
**Post date:** [December 31, 2016, 5:04pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/10 "2016-12-31T17:04:47Z")

</div>

`git status` will tell you what branch you are on. If not on the pantilthat branch you can switch to it with `git checkout pantilthat` (as long as you didn’t make a shallow copy of the master branch only i.e you followed instructions in the repo).

… there’s quite a lot of info in Dave’s repo, and the code is entirely available there, but I’m sure if there’s anything that is unclear you could ask here and get an helpful answer.

---

<div class="post-metadata">

**Author:** ![Joey73](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/joey73/32/1861_2.png) [@Joey73](https://forums.pimoroni.com/u/Joey73)\
**Post date:** [January 1, 2017, 1:37pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/11 "2017-01-01T13:37:21Z")

</div>

Have any User here an full working webinterface with mpeg Streaming for the PIMORONI Pan-Tilt Kit for Raspian Jessie (Pixel)?

Sorry, I can not get any further.

Greetz from Germany

Joey

---

<div class="post-metadata">

**Author:** ![waveform](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/waveform/32/477_2.png) [@waveform](https://forums.pimoroni.com/u/waveform)\
**Post date:** [January 3, 2017, 7:57pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/12 "2017-01-03T19:57:40Z")

</div>

@boxgr0ve Interesting. Looks like Safari (at least, I’m assuming that’s Safari, given it looks Mac-ish) uses some websockets header that ws4py doesn’t know about. I’ll see if I can figure out what’s going on, but I can’t promise much (I don’t have any Mac stuff to play with). Try using Chrome / Firefox instead in the meantime.

@Joey73 As @RogueM mentioned you need the pantilthat branch. The following instructions should install everything, clone the repo, switch to that branch and run the server:

```auto
$ sudo apt-get install libav-tools git python3-picamera python3-ws4py python3-pantilthat
$ git clone https://github.com/waveform80/pistreaming.git
$ cd pistreaming
$ git checkout pantilthat
$ python3 server.py

```

Then once it’s fired up you simply visit [http://your-pi-address:8082/](http://your-pi-address:8082/) and you should see the (crude) interface. As for the complete code - it’s all in the repo - nothing hidden. If you’ve got any specific questions about the code, I’m happy to try and answer them.

---

<div class="post-metadata">

**Author:** ![Joey73](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/joey73/32/1861_2.png) [@Joey73](https://forums.pimoroni.com/u/Joey73)\
**Post date:** [January 4, 2017, 9:56am UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/13 "2017-01-04T09:56:29Z")

</div>

## @waveform

Many thanks, you have helped me a lot.

The web server runs perfectly and the PAN TILT function is also great.

Many thanks again for your help, perfect job.

Greetings from Germany  
Joey

---

<div class="post-metadata">

**Author:** ![boxgr0ve](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@boxgr0ve](https://forums.pimoroni.com/u/boxgr0ve)\
**Post date:** [January 4, 2017, 10:36pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/14 "2017-01-04T22:36:28Z")

</div>

Works great using chrome - cheers.

---

<div class="post-metadata">

**Author:** ![Joey73](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/joey73/32/1861_2.png) [@Joey73](https://forums.pimoroni.com/u/Joey73)\
**Post date:** [February 8, 2017, 6:12pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/15 "2017-02-08T18:12:58Z")

</div>

Does anyone have an idea how to access the pan-tilt control over the Internet? I would like to access the stream from outside.

---

<div class="post-metadata">

**Author:** ![sjltech.uk](https://avatars.discourse-cdn.com/v4/letter/s/94ad74/32.png) [@sjltech.uk](https://forums.pimoroni.com/u/sjltech.uk)\
**Post date:** [March 30, 2017, 10:16pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/16 "2017-03-30T22:16:56Z")

</div>

Hi Joey, the stream access over the internet should be normal port forwarding stuff (as WAVEFORM mentioned, port 8082), I will have a try of control over the internet in the next couple of days and report back (I have VPN access too, so I can look at it in multiple ways (no pun intended))  
Cheers  
Simon

---

<div class="post-metadata">

**Author:** ![W-E-S-pi](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/w-e-s-pi/32/1959_2.png) [@W-E-S-pi](https://forums.pimoroni.com/u/W-E-S-pi)\
**Post date:** [April 12, 2017, 5:04pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/17 "2017-04-12T17:04:49Z")

</div>

Uuuuh, so I messed mine up! I was trying to add a password to the streaming page and edited something I waaaay shouldn’t have. So, is there a way to completely remove and reinstall it? Excellent work, by the way @waveform.  
I can now spy on my doggies AND freak them out a little with the servos while at work! Thank you!

---

<div class="post-metadata">

**Author:** ![waveform](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/waveform/32/477_2.png) [@waveform](https://forums.pimoroni.com/u/waveform)\
**Post date:** [April 12, 2017, 5:35pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/18 "2017-04-12T17:35:06Z")

</div>

No prob, first I’d recommend checking out what you’ve actually changed to see if you can figure out what’s gone wrong:

```bash
cd pistreaming
git diff

```

This’ll show you what you’ve changed compared to the original clone (assuming you haven’t committed anything yourself). Use “q” to quit the diff-viewer. If you want to reset back to the original anyway use the following command in the same directory:

```bash
git reset --hard

```

This should undo all your changes so you can start again.

---

<div class="post-metadata">

**Author:** ![fritz24](https://avatars.discourse-cdn.com/v4/letter/f/8c91f0/32.png) [@fritz24](https://forums.pimoroni.com/u/fritz24)\
**Post date:** [May 21, 2017, 1:22pm UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/19 "2017-05-21T13:22:12Z")

</div>

Hi waveform  
I have a PanTiltHAT with NO Neopixels installed. Would you by any chance have a “pistreaming” version where the neopixel support is not included?  
Thanks, fritz24

---

<div class="post-metadata">

**Author:** ![waveform](https://sea2.discourse-cdn.com/flex016/user_avatar/forums.pimoroni.com/waveform/32/477_2.png) [@waveform](https://forums.pimoroni.com/u/waveform)\
**Post date:** [May 22, 2017, 8:51am UTC](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654/20 "2017-05-22T08:51:11Z")

</div>

You should be able to use the pantilthat branch on a HAT with no neo-pixels out of the box. With nothing connected to the neopixel pins, the control signals will just go nowhere.

I haven’t got a branch that removes the controls from the web-page, but that’s not exactly hard to do: just chopping the relevant bits of HTML out of `index.html` would do the job (you can remove the handlers from `server.py` if you really want, but it won’t hurt to leave them in there).

[Next page](https://forums.pimoroni.com/t/help-building-an-pan-tilt-webinterface-for-pimoroni-pan-tilt-hat-full-kit-with-webcam-server/3654.md?page=2)
