Board with WIFI Websocket Camera Demo

It is good news to hear that the Arduino IDE support was announced on the ESP8266 community forum, the source code can be found from . It is more than another Arduino board, but can be thought as an Arduino combined with a WIFI shield. With faster CPU speed and much smaller form of factor, most important the less than $10USD price is more attractive, you are worth to try although there are also some limitations. Setup is fairly simple with downloads for Linux, OS X, and Windows. A more detailed setup can be found from the adafruit guide.





Now ArduCAM ports our camera libraries for ESP8266, you can use the ESP8266 module with ArduCAM modules to take high quality high resolution photos and save to SD card, or even to publish the photos to webpage. In this tutorial we will use ESP8266 arduino board to take photos and publish to webpage.


Websocket Background
In order to transfer a photo to webpage, I have to briefly introduce the technology of websocket first. WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. It is designed to be implemented in web browsers and web servers, so it can be used by any client and any platform like PCs, laptops, pads and smart phones. The standard HTTP protocol which is C/S based architecture, a client send a request to a server, the server send the information requested back to the client and close connection immediately. Unlike the standard HTTP protocol, the websocket protocol only use HTTP protocol for the handshake stage and keep the connection open afterward. It allows bi-directional conversation between a browser and the server. Detail websocket description can be found from wiki.

In this demo, we create a websocket server on the ESP8266 arduino borad. It connects to a user defined WIFI router by DHCP, then you can connect to this server via your web browser.

Hardware connection
The connection between the ESP8266 board and ArduCAM mini is shown as the following picture and table.

Arduino Sketches and library
Before running the demo sketch, you need to copy three libraries ArduCAM, UTFT4ArduCAM_SPI and ESP8266-Websocket to the Arduino libraries folder.

Open the demo sketch ArduCAM_Mini_OV2640_websocket_server.ino, change the following line according to your own wifi AP router, then upload.

const char* ssid = "your_ssid";
const char* password = "your_passpwd";

Provide you now have the IP address 192.168.1.105 for websocket server, and open the camera_demo.html located in your C:\Users\[YOUR COMPUTER]\AppData\Local\Arduino15\packages\ArduCAM_ESP8266_UNO\hardware\ArduCAM_ESP8266_UNO\2.2.4\libraries\ArduCAM\examples\ESP8266\ArduCAM_ESP8266_UNO_Capture\html_2640 folder from your web browser. Change the websocket IP address get from the serial monitor marked in red box in the picture.

Click the “Connect” button, you will see the websocket connection request from the serial monitor. After few seconds, the webpage will notify the successful connection established.

After that you can click the send button to send a websocket message to ESP8266. It will trigger the capture command on the ESP8266 Arduino side, and it will send back the captured image and display on the webpage.