Introduction: RasbperryPi Car With FPV Camera. Control by Web Browser

About: Hello, I'm working on project whcih helps You link your devices together and control them throught internet

We will build 4wd car - the steering will be similar like in a tank - to turn one side of wheels will rotate with different speed than other. At the car will be placed camera on special holder where we can change camera position. The robot will be controlled by web browser (chrome or firefox at desktop, or firefox at mobile phone), at the browser, We will get camera video ( with only 200ms latency), and from the browser, we can control the car movements and camera position. To make communication easier I've used system, there is also working out of the box controlling of this kind of car, So You don't have to write Your own code, but of course You can modify scripts add new possibilities etc.

Before connecting power to your PCB please double check all connections!

Step 1: Some Information About

The system has three parts

  • webapplication - when You host your control webpages and it links all communication
  • rasbperryPi program - program which sends video, manage your python scripts
  • libraries where You find class, functions definitions is system fast You link all your devices together, You can host there Your webPages, see your conencted devices. system was made to helps You start making your projects, wihout worrry about protocol communications, main idea is to send binary messages beetwen various devices such a webPages,RasbeprryPI, arduino, and scripts.

From the other hand gives You full control of your files, You can eas modify it writting your own functionality

At this tutorial I will shows You how to make some awesome project almoust without writitng any code.

At the end of this tutorial I've put usefull links which will helps You understand system.

Step 2: What Is Needed:

  • Raspberry PI Zero W
  • Dedicated camera
  • Adafruit 16-Channel 12-bit PWM/Servo Driver - I2C interface - PCA9685 or its clone
  • Two servo mechanisms compatible with the camera holder
  • Camera holder
  • Batteries - In tutorial two possibilities of connection
  • H bridge TB6612FNG, to control wheel speer
  • PCB eagle files It is easy to make it thermal transfer methodDC-DC
  • Step Down Converter Module DC
  • Robot case

Step 3: Connections

Raspberry pi control servo mechanism through PWM module and motor speed by H bridge which is connected to RasbperryPi pins, PWM input to H bridge is generated by the same module I used for servos (which parts I mention above no logic converters are needed )

Step 4: PCB

You can download PCB eagle files from here Paths are fat so its easy to made it by thermal transfer method

Step 5: PCB Outputs

  1. PWM input for drive motors Should be connected to PWM module 15’th and 16th pins (check green rectangle at PWM module image )
  2. Power input for drive motors (check what maximum voltage your motors can work with)
  3. Power for RasbperryPi and PWM module – have to be exactly
  4. Drive motor outputs (there are two outputs because we will pair drive motors )
  5. Servo Mechanisms power – also You have to check what voltage is good for them
  6. Jumper its present power from 5th input will power also drive motors so no need to connect anything to input 2
  7. Jumper if present RasbperryPi will be power from 3rd input – before put jumper here check if connections are OK – You don’t want to burn your RPi
  8. Lets solder here cables since we don’t need logic converters

Step 6: How It’s Going to Work

At RasbperryPi there is python script which uses two libraries

  • import RPi.GPIO as GPIO – for pins 25-AIN1, 8-AIN2, 24-BIN1, 23-BIN2 (BCM notation) which are connected to H bridge
  • import Adafruit_PCA9685 for PWM module

Rpi pins are connected as follows 25-AIN1, 8-AIN2, 24-BIN1, 23-BIN2 (BCM) and control mode of H bridge( forward, backward, stop, short break). H bridge needs also two PWM signals so we can control speed or motor rotation. Because at the project we already have PWM controller (used for servo) we will use it also to generate PWM for H bridge.

PWM module uses I2C communication protocol. I’ve used working out of the box Adafruit_PCA9685 . library

Step 7: Car Assembling - Wheels

We will start from connect drive motors to car case. Left/Side side motors connect together, and both pair, connect to some power cable which later will be connected to PCB. IMportant note while connecting motors wheels at each side have to rotate at the same direction.

Step 8: Power (AA Recharge Batteries) Option 1/2

I will write two possibilities of power Car first one is from 10xAA recharge batteries At last image I've drawn by red colors jumpers which have to be put.

Step 9: Power (Li-Po 7.2V Batteries) Option 2/2

And the second option is 7.2 LI-PO battery. In this case we got 3 voltages – 5v For Rpi and module, 6V for servos and directly from batteries 7.2 volts for drive motors. I had to use two step down modules

Option 2 with LI-PO is better:

  • Batteries have bigger capacity – the car will drive longer
  • Bigger voltage for drive motors – the car will drive faster
  • Less probability that after drive motors start to locate we could have huge voltage drop and RPI restarts.

Step 10: Soldering

I've put at PCB some spacers for PWM module. There is nothing to write just check out images how to solder everything together

Step 11: Camera

we connect the camera, here Is written how to center servo Mechanisms before mounting into camera holder, but the shortest way is to gently manual check maximum rotation position and set servos at center position. This centered servo mechanisms we put into camera holder at the center position ( camera is pointing straight ahead like at the photo)

Step 12: Putting Cars Parts Together

For PCB I've made small plexiglass table

Step 13: Configuration

I've used free system it helps You to make connections, and it already has scripts which we need

At this instructable, I will just show step by step what should be done to make car driving ( here You will find more details)

  • Sing up at after sign up You will be automatically signed in
  • open Token tab at the left, then click “new token” provide some name and click OK, We just created new token (image at the screen)
  • in this example, token value is: ~1_&p@+BNnZ@A+x8 ( yours will be different ;) )

Step 14: RasbperryPi Configuration

at putty console (here how to set up our RPi turn on camera I2c communication)

git clone git://

cd remoteme


  • Instalator will ask us some questions for all we response [Y]es and confirm by [enter]
  • when installation will ask for token we paste (shift+insert) token copied from the application and Enter
  • the name for example Rpi
  • deviceId 1 Enter
  • after installation – run program


Step 15: Checking Connections

Lets go back to

At devices tab we will see our connected RPi ( green link icon means RPi is connected right now)

Step 16: Adding Python Script

Now we will add python script, its already at the templates so we dont have to program anything.

At devices tab open RasbperryPi menu and choose "Add external script".

When new window appears provide information as at image above

Don't forget to choose template "car4wd". After this steps, will add python script to our RasbperryPi and restarts it

Step 17: Checking If Python Script Was Added Sucesfully

At devices tab new python script device should be added, and its deviceId is 2. Into this device Id webpage will send messages to control car

Step 18: Adding Webpage to Control Car

at devices tab click "New" then "WebPage". We just add another device - webPage we will use it to control our car. And because we used the template "car4wdDesktop" at the webpage are already files almost ready to used

Step 19: Configure WebPage Device to Control Car 1/2

Expand WebPage at device tab and click index.html then Open

Step 20: Configure WebPage Device to Control Car 2/2

The window appears then we need to provide deviceId of our python script at our case deviceId is 2. Let's change the place shown in the image

Step 21: Open Car Control Center

Now its time to open our page and see how it's working. At device tab click index.html and then "Open in new tab" To get video preview You have to use chrome or firefox browser others browser doesn't support webRTC fully

Step 22: Camera Configuration 1/2

When we move mouse at video area camera should change position, and it should work exactly like in FPS games. It probably will not move correctly

Step 23: Camera Configuration 2/2

Open script.js (devices tab expand webpage then click at script.js then open ) and find the place I showed at the screen

at my case center position is 560 and 430 and range of movements is for both axies 200

You have to experiment with this numbers so You get camera position center and smooth movements, If You used this tutorial just copy pasted given values

Step 24: Driving 1/2

If u pressed up arrow at the keyboard, gauges should change positions and car should drive. If You press “up” arrow and car is turning then You have to add/remove minus at places at the screen.

After this operation after hit “up” arrow car should drive ahead and down arrow car should drive backward.

Step 25: Driving 2/2

Now turning – hit left arrow if car is turning right You have to flip cables (check the image above)

If You solder this cables You can change it at script.js
just change order of sending motors speed,


pos=putByte(ret, pos ,carController.getMotorMode(carController.getRightSideSpeed()) );
pos=putByte(ret, pos ,Math.abs(carController.getRightSideSpeed()*255 ));

pos=putByte(ret, pos ,carController.getMotorMode(-carController.getLeftSideSpeed()) );

pos=putByte(ret, pos ,Math.abs(carController.getLeftSideSpeed()*255) );


pos=putByte(ret, pos ,carController.getMotorMode(-carController.getLeftSideSpeed()) );

pos=putByte(ret, pos ,Math.abs(carController.getLeftSideSpeed()*255) );

pos=putByte(ret, pos ,carController.getMotorMode(carController.getRightSideSpeed()) );

pos=putByte(ret, pos ,Math.abs(carController.getRightSideSpeed()*255 ));

and now You have to play with minuses like one step before to get it working correctly ;).
As You probably noticed after hit up arrow car is not driving with full speed to make car move faster just fast release up arrow when it's in maximum position and press and hold it again

Step 26: How Is It Working

Web page is sending 9th-byte message messages to python script in format:

  • 1 byte one byte integer value 1
  • 2 bytes integer X camera position
  • 2 bytes integer Y camera position
  • 1 byte integer left motor mode (3= backward, 1= forward, 2=stop)
  • 1 byte integer left motor speed
  • 1 byte integer right motor mode (3= backward, 1= forward, 2=stop)
  • 1 byte integer right motor speed

sending message is made at script.js file at function "sendNow()"

at RasbperryPi is getting this message in function "onUserMessage"

You can check it out and play a little so You know what is going on.

class functions description here

Step 27: Tablet, Mobile Steering

We add new webpage excatly as we did previous time but now we choose template "car4wdMobile"

Next, we configure everything in script.js as we did for desktop control webpage
The message format is exactly the same so we don’t have to change script.

Step 28: Open Page at Mobile Phone

Instead of login to your account from mobile just scan QR anymous url.

details of QR here

If Your mobile control works when RPi and mobile is on the same wifi but doesn’t if You use mobile internet then You have to add turn server, how to do that I’ve written here

Step 29: Adding Turn Server

Sometimes (when You are behind NAT or some firewall settings) You cannot connect your robot from other network then Your robot is connected. Its not big issue and then You have to add turn server.

I’ve tested server from XIRSYS company (its free for developer use ) and I will show how to configure turn server using XIRSYS system


then click "plus" to add application

at the right under "static turn creditentials" You have all data You need. Copy it into file webrtc_streamer.conf to do that go to

expand RaspberryPi deivces

click file webrtc_streamer.conf

click open

and add information



after You end editing You should have something likeat the screen.

then click Save and restart You Rpi, by clicking menu at RasbperryPi device and choose restart

After RPi program is restarted You can see video preview at your mobile phone even If You are using mobile internet.

Step 30: Mobile Steering

at circle 1 we place left thumb, at 2 right – don’t have to be exactly at this points – webpage will set zero position just after you touch screen, and by moving your thumbs (left driving, right camera position ) You can control your car

Step 31: Summary

I hope You liked this tutorial, as I wrote before at this tutorial is more details about how it works under the hood.

some links: - home page of there You find documentations and tutorials

FB fanpage - Facebook fanpage newest inforation about

Youtube - some videos of project, tutorials