Hello,

This tutorial have mainly three parts

  • remoteme.org initialization and isntall on RasbperryPI
  • Connect and camera preview at mobile, tablet and wherever You have modern browser
  • Camera steerint with extra light

Final effect::

Video version of this (for now only in Polish let me know if You want me to add subtitles ūüėČ )

 

What is needed:

  • Camera preview
    • Raspberry PI Zero W
    • Camera dedicated for RPi
  • Steering
    • Adafruit 16-Channel 12-bit PWM/Servo Driver – I2C interface – PCA9685 or its clone

    • Two servo mechanisms compatibile with camera holder

    • Camera holder

  • Lights
    • Logic Level Converter

    • power led
    • Mosfet transistor N-type fe¬†: IRF540N MOSFET
    • resistor 220 om
    • power resistors for led the properties of resistor You should compute using some online calculator¬†

What is no needed:

  • Public IP
  • Own server
  • Advanced programming skills ( mostly is copy/paste )

 

How its going to work:

On RasbperryPI is running application “remoteme” this program will register RPi at remoteme.org system, then it will create and setup WebRTC session for camera preview to the browser and steering messages which will be sent from the browser into RPi

At the webpage (hosted at remoteme.org You can change this webpage source to whatever You want) will be javascript to track the mouse, or finger movement and send messages to the Python script located at RPi and this script will steer camera position and light. The second job of webpage will be to display video preview

Remoteme.org system will allow communication beetwen ajvascript,RPi and python script

What is remoteme.org

Its Free of charge environment which parts are:

Whole environment makes easy communication through internet between webpages and devices which could be connected to the internet ( like RasbperryPi, arduino). Webpages can be hosted at remoteme.org itself,   https://app.remoteme.org  also has rest api to send messages by some external programs or systems

RasbperryPi program instalation :

Getting vide preview on webpage:

https://app.remoteme.org/ signup at SingUp tab- (important note there is no need to give your email address so there is no possibility get the password back) Рafter signup You willbe automaticly log-in

Register RasbperryPI at app.remoteme.org. You need to have already configured console connection for example Putty and setup up camera and I2C communication here I’ve written how to do that here

In directory where we want to install program ( later we can easly change it by moving directory to diffrent location) run git clone

It will download the program and all needed files. lets open this directory

and install

What installation is doing under the hood:

  • installs python library¬†https://pypi.python.org/pypi/psutil
  • installs python library https://github.com/adafruit/Adafruit_Python_PCA9685
  • changing conf.json file the file is located at remotem directory

When system asks us if to install libraries we choose yes [ y Enter ]

Then system attemps to install our credtentials to connect app.remoteme.org

“Provide Token and press enter” at webpage https://app.remoteme.org at Token tab click “New Token” provide some name then OK

lets copy new created token:

and paste it (shift + Insert) to the putty, next provide name of our RaspverryPi for example RPi and device Id for example 1:

and run remoteme.sh

result:

at https://app.remoteme.org/en/#/app/devices we have new created device

green icons: shows that device is connected right now.

Let’s make an experiment, restart the program at the putty and let’s check what happens with the icon

Video preview at webpage.

Lets add webpage where we will see camera preview. You dont have to write it by ourself we will use tempaltes:

At devices tab click New:

then “New Web Page” and privide informations:

 

dont forget to choose template “justVideo” and make it active

after submit:

There is new device lets expand it:

 

Becuse You have choosed template You already have files here:

lets click index.html and open it at new browser tab ( use newest chrome or firefox)

What we got after a while is image from our RPi, and red led at camera itself is lighting

 

Ofocurse only You have access to this page it won’t be displayed for any other users.

Let’s open this webpage but at the mobile phone. At the mobile phone, we don’t have to login into the system we will use anonymous links. So first turn off an opened page with camera display – red led at camera should turn off ( because remoteme is emitting video preview just to one target webpage at the time)

Let’s click index.html but this time lets choose¬†“Get anonymous link …”:

and we got:

there is as much links as much tokens You have created, when You remove token from tokens tab after some time there will be no posbility to use generated url again. So we need to open this link at mobile phone browser (for now only newest firefox fully support webrtc protocol), You dont have to manualy rewrite url to the browser address just click QR icon and scan it with your mobile

If Your phone is at the same wifi network as device You will get video preview (double click at video open full screen mode). If You are using LTE or 3g etc internet and there is no image preview You are probably after NAT so to make preview works you have to setup turn server. Don’t worry its simple and free ūüôā

Connecting servo mechanisms:

To control servos we will use 12-channel PWM controller with I2C communication ( from Adafruit or its clone) Adafruit gives us python library which is working out of the box, this library is already installed becasue at second step of installing remotemeProgram at RPI You chosed Yes

Connections:

Pin SDA, SCL, and ground connect the pin at RPi with the same labels

Pins at RPI :

(red numbers helps You counting pin before connecting)

Here You have whole  Rpi pin image

To the V+ and Vcc pins at PWM controller we connect +5V, Vcc is to power controller, V+ to power servomechanisms itself. Servos connect based on pin/ cable colors. MOre about controller here

Before install servomechanisms to the holder, we have to set servomechanisms to center position. We have two ways first way is to check maximum servo position for left/right movement and leave it exactly between – this is the way without set up anything.

Proper way is to center servomecahnisms by PWM control module. There is webpage which helps You do that. At device tab we choose [New] -> [New Web Page] and provice properties:

[Submit]

New web page has been added “Servo WWW” but when we open index.html ad new tab and try to play with it nothing happens, and at developer console [F12 for chrome] we have errors:

Why ?

Web page is sending messages to the script which control servomechanisms, we don’t have such script yet, so webpage doesn’t know where to send messages and return errors

Now we will add such script. The script of course will be placed on RasbperryPi, let’s add it

Tab devices:

 

from menu [Add external script].

New window appears put properties as below

[Submit]

Afeter restart script is added and connected

 

Now we can (almoust) send messages from “servo WWW” to the python script

the only missing thing is to inform webpage where to send messages for servomechanisms

click [Open] and edit:

put there 10, why ten ? becasue 10 is device id of python script

now open index.html at new tab

and when we move sliders servo mechanims are moving

Now by trying we need to find out minimum and maximum values for the servo for me it’s¬† 225 and 880¬† for both servo so lets set center position 552 (becasue (225+880)=552.5), and¬†disconnect this centered servo from the controller.

Now camera holder:

and we have something like that (I’ve already mounted led)

lets go back to “serwo WWW” webpage and let’s check again position of servo, by sliders lets center it for me the center is¬† X=568, Y ax = 506, and let’s check movement for me movement values are 312 fox X ax,¬† 237 for Y . We need to check if the camera is moving smoothly at whole movement area Camera positions:

 

Programming:

We will modify video preview webpage so when mouse move at video area – camera position will be changed, then we will modify python script to read this messages and set up servo machanisms

First modify webpage:

index.html

Lets add variable which is deviceId of python script

and lets add div element when we will display camera position – it will helps debugging

and lets connect mouseevents:

before change

after:

Click[Save], and close index.html

script.js

lets add functions

both of them are calling positionChange with parameters [x,y]

positionChange function looks like that

this function based on component size call sendCameraNow with x,y parameters but this time x,y parameters are [-1;1] where (-1,-1) means one of the corners and (0,0) means we need to center our camera

sendCameraNow(x,y):

First we display actual camera position at added div, then we created 5 bytes messages:

  • first byte =1 it means we want to steer servo mechanisms
  • two next bytes is X-axe position sends as two bytes integer
  • and two next bytes also integer for Y-axe position

based on our servopositions we check above:

putShort and putByte and many others are described here

and then message send to the python script

remoteme class description here

all changes we made at script.js:

lets check it index.html -> [open at new tab]

when we move mouse or finger at screen message is sent

but camera is not moving AND deviceid10 has been disconected !.

Why? – because we have change message format , python script didn’t know what to do and return error.¬† Lets check python script logs

click -> open

Yep, as I wrote python got 5 bytes message length,  and it wants 3 message length message.

Modify python script to work properly with the new message:

python.py

 

functions which process messages looks like that

line below read two integers (byte and short length ) lets chagne it to read byte, short, short:

first byte if equals to 1 means that rest of integers are for camera position. so after changed we have:

  • data[0] – ==1 for camera position
  • data[1] – camera position X
  • data[2] – camera position Y

If You dont remember go back to ajavascript fucntion and check sendCameraNow

lets save it and RPI will restart

now after open page

https://app.remoteme.org/wp/100/index.html

while mouse moving mouse position is changing. but there is one problem webpage is sending lot of messages and RPI program queue it so after long coninues mosuse moving camera is moving after we stopped moving mouse. We need to repair it

open index.html and add :

here You will find class description.

script.js at the top add

150 means do not send messages more often then 150ms

and modify positionChange function

save and refresh now it should work much better ūüôā

 

Led:

Webpage will send message wchih will turn on/off led connected as below:

Programming:

index.html

and keyboard – any key press will turn on/off diode

and compoenent which diode state:

and lets add some colors and make it round and bigger

style.css

script.js

above funciton has to be add

becasue python is prepared to get 5 bytes length message we need to send this time the same length

python.py

needed libraries and contstant

setup function

call it after setupServo

and functinos to read new message:

 

Thats all ūüôā

Evetything works as supposed ūüôā

all source code here

I hope You like this tutorial, if You have any questions ask me on comments section on Forum.

Cheers,

Maciek