Buggy Cam ESP8266 Arduino Project costs just $10

Buggy Cam is a device that looks like a small toy car where a camera is mounted to take photos & videos. In this post, I will share How did I make my own homemade Buggy Cam ESP8266 Arduino DIY for just $10. You can also say it ” WiFi Controlled Moving CCTV Camera”.

What is Buggy Cam

Buggy cam is a remote-controlled car where a powerful camera is mounted to take photos & videos. Buggy cam is widely used in cricket matches where the small camera car is in the boundary line & moves towards the cricket call when it reaches the boundary line.

This Buggy Cam is also used in wildlife photography to take animal close shots where any human can reach like a close to tiger or lion.

Buggy Cam ESP8266 Arduino DIY

When I watched this camera in a cricket match, it made me curious to make my own Buggy Cam ESP8266 Arduino DIY. So I took some cheap hardware from my home store room & took my Wemos D1 (ESP8266) to make this project happen.

Hardware Required

The following components are required to make Buggy Cam which costs me approx $10.
All the products I bought from the local offline shops. This costs cheap. If you wish to buy online links are given, but the price will be high.

How to make Buggy Cam at home

Attach wheels

First, attach 4 wheels in the plywood board. In the front caster wheels will be and in back Bo motor.

Electronics Components case

In the plastic small box, I have separated sectors for battery Wemos D1 and other circuits. I used some metal sheets & hot glue to make sectors.

Connect Circuits

Connect all the components according to the circuit diagram given below.

After Connecting all the Components final Buggy Cam will be looks like this.

So Now just we have to connect any old Android Mobile and it is done.

Circuit Diagram for Buggy Cam ESP8266 Arduino

Web UI Design for Buggy Cam ESP8266 Arduino

To Control Buggy Cam we have to design an HTML web page. Below the source code given. If you wish to change anything you can. This web UI is designed in such a way it will support android Mobile & desktop both.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;meta charset="utf-8"/&gt;
&lt;meta name="description" content="Wi-Fi Controlled Moving CCTV Camera powered by ESP8266 NodeMCU made by by Som Tips" /&gt;
&lt;title&gt;Wi-Fi Controlled Moving CCTV Camera Car using NodeMCU by Som Tips&lt;/title&gt;
&lt;head&gt;
  &lt;style&gt;
    body {background-color: rgb(255, 255, 255); float:center;text-align: center;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
    h1   {color: blue;}
    h2   {color: rgb(105, 0, 0);}
    h3   {color: rgb(143, 117, 0);}
    div{margin: 0 auto;}
    button  {text-align: center;border-radius: 15px;font-size: 20px;color: white;padding: 10px;}
#forward {
	width: 0;
	height: 0;
    margin-bottom: 5px;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid rgb(255, 30, 30);
    }
    #carleft {
    display:inline-block;
    margin-right:25px ;
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid rgb(68, 0, 114);
	border-bottom: 25px solid transparent;

}
#carright {
    display:inline-block;
    margin-left: 25px;
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid rgb(68, 0, 114);
	border-bottom: 25px solid transparent;
}
#backward {
    margin-top:4px;
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid rgb(0, 0, 0);
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Moving CCTV Camera&lt;/h1&gt;
&lt;div id= "opencamera"&gt;
&lt;button style="background-color: green"&gt;Open Camera&lt;/button&gt;
&lt;/div&gt;
&lt;h2&gt;Car Control&lt;/h2&gt;
&lt;div id ="forward" &gt;&lt;/div&gt;
&lt;div id ="carleft" &gt;&lt;/div&gt;
&lt;div id ="carright"&gt;&lt;/div&gt;
&lt;div id ="backward"&gt;&lt;/div&gt;
&lt;h2&gt;Camera Control&lt;/h2&gt;
&lt;h3&gt;Camera Switch&lt;/h3&gt;
&lt;button id ="frontcam" style="background-color: #9966ff"&gt;Front Cam&lt;/button&gt;
&lt;button id ="backcam" style="background-color: #ff4d4d"&gt;Back Cam&lt;/button&gt;
&lt;h3&gt;Front LED&lt;/h3&gt;
&lt;button id ="frontflashon" style="background-color: #540099"&gt;On&lt;/button&gt;
&lt;button id ="frontflashoff" style="background-color: #006779"&gt;Off&lt;/button&gt;
&lt;h3&gt;Back LED&lt;/h3&gt;
&lt;button id ="backflashon" style="background-color: #540099"&gt;On&lt;/button&gt;
&lt;button id ="backflashoff" style="background-color: #006779"&gt;Off&lt;/button&gt;
&lt;br&gt;&lt;br&gt;
&lt;a href="http://192.168.0.50:2222/browserfs.html" target="_blank"&gt;&lt;button style="background-color: rgb(0, 0, 0)"&gt;Full Screen Camera&lt;/button&gt;&lt;/a&gt;
&lt;div id ="settings"&gt;
&lt;br&gt;&lt;br&gt;
&lt;button  style="background-color: rgb(197, 105, 0)"&gt;Camera Settings&lt;/button&gt;
&lt;/div&gt;
&lt;br&gt;&lt;br&gt;
&lt;footer&gt;©Som Tips&lt;/footer&gt;

&lt;script&gt;
        document.getElementById("forward").addEventListener("mousedown", forward );
        document.getElementById("forward").addEventListener("touchstart", forward );
        document.getElementById("backward").addEventListener("mousedown", backward );
        document.getElementById("backward").addEventListener("touchstart", backward );
        document.getElementById("forward").addEventListener("mouseup", stop );
        document.getElementById("forward").addEventListener("touchend", stop );
        document.getElementById("backward").addEventListener("mouseup", stop );
        document.getElementById("backward").addEventListener("touchend", stop );
        document.getElementById("carleft").addEventListener("mousedown", carleft );
        document.getElementById("carleft").addEventListener("touchstart", carleft );
        document.getElementById("carright").addEventListener("mousedown", carright );
        document.getElementById("carleft").addEventListener("mouseup", stop );
        document.getElementById("carleft").addEventListener("touchend", stop );
        document.getElementById("carright").addEventListener("mouseup", stop );
        document.getElementById("carright").addEventListener("touchend", stop );
        document.getElementById("carright").addEventListener("touchstart", carright );
        document.getElementById("settings").addEventListener("mouseup", settings );
        document.getElementById("settings").addEventListener("touchend", settings );
        document.getElementById("opencamera").addEventListener("mouseup", opencamera );
        document.getElementById("opencamera").addEventListener("touchend", opencamera );
        document.getElementById("frontcam").addEventListener("mouseup", frontcam );
        document.getElementById("frontcam").addEventListener("touchend", frontcam );
        document.getElementById("backcam").addEventListener("mouseup", backcam );
        document.getElementById("backcam").addEventListener("touchend", backcam);
        document.getElementById("frontflashon").addEventListener("mouseup", frontflashon );
        document.getElementById("frontflashon").addEventListener("touchend", frontflashon);
        document.getElementById("frontflashoff").addEventListener("mouseup", frontflashoff );
        document.getElementById("frontflashoff").addEventListener("touchend", frontflashoff);
        document.getElementById("backflashon").addEventListener("mouseup", backflashon );
        document.getElementById("backflashon").addEventListener("touchend", backflashon );
        document.getElementById("backflashoff").addEventListener("mouseup", backflashoff );
        document.getElementById("backflashoff").addEventListener("touchend", backflashoff );

        function opencamera() {
            
            document.getElementById("opencamera").innerHTML = ' &lt;iframe src="http://192.168.0.50:2222/browserfs.html" frameborder="0" height="175px" scrolling="no"&gt; &lt;/iframe&gt;';
        }
        function settings() {
            
            document.getElementById("settings").innerHTML = ' &lt;iframe src="http://192.168.0.50:2222/settings_window.html" width="80%" height="300px" frameborder="0"&gt; &lt;/iframe&gt;';
        }
        function forward() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "forward", true);
            xhr.send();
        }
        function backward() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "backward", true);
            xhr.send();
        }
        function stop() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "stop", true);
            xhr.send();
        }
        function carleft() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "carleft", true);
            xhr.send();
        }
        function carright() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "carright", true);
            xhr.send();
        }
        
        function left() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "left", true);
            xhr.send();
        }
        function right() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "right", true);
            xhr.send();
        }
        
        function frontcam() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "http://192.168.0.50:2222/settings/ffc?set=on", true);
            xhr.send();
        }
        function backcam() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "http://192.168.0.50:2222/settings/ffc?set=off", true);
            xhr.send();
        }
        function frontflashon() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "http://192.168.0.50:2222/enabletorch", true);
            xhr.send();
        }
        function frontflashoff() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "http://192.168.0.50:2222/disabletorch", true);
            xhr.send();
        }
        function backflashon() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "backflashon", true);
            xhr.send();
        }
        function backflashoff() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "backflashoff", true);
            xhr.send();
        }      
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

<!DOCTYPE html>

<html>

<title>Wi-Fi Controlled Moving CCTV Camera Car using NodeMCU by Som Tips</title>

<head>

<style>

body {background-color: rgb(255, 255, 255); float:center;text-align: center;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

h1 {color: blue;}

h2 {color: rgb(105, 0, 0);}

h3 {color: rgb(143, 117, 0);}

div{margin: 0 auto;}

button {text-align: center;border-radius: 15px;font-size: 20px;color: white;padding: 10px;}

#forward {

width: 0;

height: 0;

margin-bottom: 5px;

border-left: 25px solid transparent;

border-right: 25px solid transparent;

border-bottom: 50px solid rgb(255, 30, 30);

}

#carleft {

display:inline-block;

margin-right:25px ;

width: 0;

height: 0;

border-top: 25px solid transparent;

border-right: 50px solid rgb(68, 0, 114);

border-bottom: 25px solid transparent;

}

#carright {

display:inline-block;

margin-left: 25px;

width: 0;

height: 0;

border-top: 25px solid transparent;

border-left: 50px solid rgb(68, 0, 114);

border-bottom: 25px solid transparent;

}

#backward {

margin-top:4px;

width: 0;

height: 0;

border-left: 25px solid transparent;

border-right: 25px solid transparent;

border-top: 50px solid rgb(0, 0, 0);

}

</style>

</head>

<body>

<h1>Moving CCTV Camera</h1>

<button style="background-color: green">Open Camera</button>

</div>

<h2>Car Control</h2>

<h2>Camera Control</h2>

<h3>Camera Switch</h3>

<button id ="frontcam" style="background-color: #9966ff">Front Cam</button>

<h3>Front LED</h3>

<a href="http://192.168.0.50:2222/browserfs.html" target="_blank"><button style="background-color: rgb(0, 0, 0)">Full Screen Camera</button></a>

<button style="background-color: rgb(197, 105, 0)">Camera Settings</button>

</div>

document.getElementById("forward").addEventListener("mousedown", forward );

document.getElementById("forward").addEventListener("touchstart", forward );

document.getElementById("backward").addEventListener("mousedown", backward );

document.getElementById("backward").addEventListener("touchstart", backward );

document.getElementById("forward").addEventListener("mouseup", stop );

document.getElementById("forward").addEventListener("touchend", stop );

document.getElementById("backward").addEventListener("mouseup", stop );

document.getElementById("backward").addEventListener("touchend", stop );

document.getElementById("carleft").addEventListener("mousedown", carleft );

document.getElementById("carleft").addEventListener("touchstart", carleft );

document.getElementById("carright").addEventListener("mousedown", carright );

document.getElementById("carleft").addEventListener("mouseup", stop );

document.getElementById("carleft").addEventListener("touchend", stop );

document.getElementById("carright").addEventListener("mouseup", stop );

document.getElementById("carright").addEventListener("touchend", stop );

document.getElementById("carright").addEventListener("touchstart", carright );

document.getElementById("settings").addEventListener("mouseup", settings );

document.getElementById("settings").addEventListener("touchend", settings );

document.getElementById("opencamera").addEventListener("mouseup", opencamera );

document.getElementById("opencamera").addEventListener("touchend", opencamera );

document.getElementById("frontcam").addEventListener("mouseup", frontcam );

document.getElementById("frontcam").addEventListener("touchend", frontcam );

document.getElementById("backcam").addEventListener("mouseup", backcam );

document.getElementById("backcam").addEventListener("touchend", backcam);

document.getElementById("frontflashon").addEventListener("mouseup", frontflashon );

document.getElementById("frontflashon").addEventListener("touchend", frontflashon);

document.getElementById("frontflashoff").addEventListener("mouseup", frontflashoff );

document.getElementById("frontflashoff").addEventListener("touchend", frontflashoff);

document.getElementById("backflashon").addEventListener("mouseup", backflashon );

document.getElementById("backflashon").addEventListener("touchend", backflashon );

document.getElementById("backflashoff").addEventListener("mouseup", backflashoff );

document.getElementById("backflashoff").addEventListener("touchend", backflashoff );

function opencamera() {

document.getElementById("opencamera").innerHTML = ' <iframe src="http://192.168.0.50:2222/browserfs.html" frameborder="0" height="175px" scrolling="no"> </iframe>';

}

function settings() {

document.getElementById("settings").innerHTML = ' <iframe src="http://192.168.0.50:2222/settings_window.html" width="80%" height="300px" frameborder="0"> </iframe>';

}

function forward() {