# Using a camera and sending JPEG to cloud

**URL:** <https://community.particle.io/t/using-a-camera-and-sending-jpeg-to-cloud/852>\
**Category:** Firmware\
**Created:** [December 19, 2013, 10:51pm UTC](https://community.particle.io/t/using-a-camera-and-sending-jpeg-to-cloud/852 "2013-12-19T22:51:36Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![tombradshaw](https://avatars.discourse-cdn.com/v4/letter/t/7bcc69/32.png) [@tombradshaw](https://community.particle.io/u/tombradshaw)\
**Post date:** [December 19, 2013, 10:51pm UTC](https://community.particle.io/t/using-a-camera-and-sending-jpeg-to-cloud/852/1 "2013-12-19T22:51:36Z")

</div>

Hi,  
I am looking at doing something like the CCTV camera project show on the kickstarter site.  
I have looked at the camera [https://www.sparkfun.com/products/11610](https://www.sparkfun.com/products/11610) and the demo code.  
My query is how to transmit the JPEG picture, the example code on the sparkfun site re transmits the JPEG data over the serial port.  
How would I deal with this data? does the spark have enough memory to store the JPEG? Can I use one GET to retrieve the whole image?  
Any clues / pointers or example code would help

Thanks

---

<div class="post-metadata">

**Author:** ![zachary](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/zachary/32/20717_2.png) [@zachary](https://community.particle.io/u/zachary)\
**Post date:** [December 20, 2013, 3:15am UTC](https://community.particle.io/t/using-a-camera-and-sending-jpeg-to-cloud/852/2 "2013-12-20T03:15:01Z")

</div>

The Core has something like 10K of memory free for you to use (out of the 20K SRAM on the chip). You should probably work with the JPEG in chunks using your own buffer of, say, 1024 bytes. You could connect to your own server with TCPClient and send the file over that connection.

We definitely have this use case on our radar, but I just added a task to our backlog to post an annotated example of sending an image using TCPClient. Until then, check out the TCPClient docs here: [http://docs.spark.io/#/firmware/communication-tcpclient](http://docs.spark.io/#/firmware/communication-tcpclient)

Let us know how it goes!

---

<div class="post-metadata">

**Author:** ![emc2](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/emc2/32/1997_2.png) [@emc2](https://community.particle.io/u/emc2)\
**Post date:** [December 17, 2014, 4:43pm UTC](https://community.particle.io/t/using-a-camera-and-sending-jpeg-to-cloud/852/3 "2014-12-17T16:43:18Z")

</div>

I think I’ll take a crack at this over the next few days. I’m working with the [4D uCam](http://ca.mouser.com/ProductDetail/4D-Systems/uCAM-TTL/?qs=8kLC2sqLg3PdDMlr%252bsUnEA==) and its [library](https://github.com/9circuits/uCam) (which will need some adapting from Due to Spark).

I hate to be a pain, but I’m not totally sure how to send chunked data over TCPClient so I’d like to ask for a bit of clarification. I’m comfortable writing a web-side POST form to receive data, it’s just the Arduino I’m not so sure of…

To send an image, would one just get data in chunks inside the `if (client.connect(server, 80)){}` loop and keep printing to serial?

---

<div class="post-metadata">

**Author:** ![zachary](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/zachary/32/20717_2.png) [@zachary](https://community.particle.io/u/zachary)\
**Post date:** [December 18, 2014, 12:12am UTC](https://community.particle.io/t/using-a-camera-and-sending-jpeg-to-cloud/852/4 "2014-12-18T00:12:11Z")

</div>

It’s good practice to let `loop()` fall through quickly, so rather than sending the whole file in a single call of `loop()`, you should send the HTTP headers on the first loop, one chunk of the file per loop, then the last boundary and close the socket on a final loop.

You’ll need to read a chunk at a time from the camera over serial and send that chunk over TCP.

The format of a minimal HTTP POST file upload looks something like this once a TCP socket is open.

```
POST /pictures HTTP/1.1
Host: www.example.com
Content-Type: multipart/form-data; boundary=----somegibberish----
Content-Length: 9999

----somegibberish----
Content-Disposition: form-data; name="latest_image"; filename="img.jpg"
Content-Type: image/jpeg
Content-Transfer-Encoding: binary

...contents of the jpeg file...
----somegibberish----

```

The `Content-Length` header needs to actually list the length in bytes of the body, so you have to be able to calculate that up front. The body is the part after the headers and one blank line.

The real story: [http://tools.ietf.org/html/rfc1867](http://tools.ietf.org/html/rfc1867)

---

<div class="post-metadata">

**Author:** ![Dilbert](https://avatars.discourse-cdn.com/v4/letter/d/58f4c7/32.png) [@Dilbert](https://community.particle.io/u/Dilbert)\
**Post date:** [December 18, 2014, 7:54pm UTC](https://community.particle.io/t/using-a-camera-and-sending-jpeg-to-cloud/852/5 "2014-12-18T19:54:35Z")

</div>

Will this be Spark Cloud limitation which could not transmit large amount of data ?  
So, it must use another server to perform this operation, correct ?

---

<div class="post-metadata">

**Author:** ![zachary](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/zachary/32/20717_2.png) [@zachary](https://community.particle.io/u/zachary)\
**Post date:** [December 19, 2014, 12:16am UTC](https://community.particle.io/t/using-a-camera-and-sending-jpeg-to-cloud/852/6 "2014-12-19T00:16:56Z")

</div>

Right now there are 3 ways to transmit data via the Spark Cloud.

[`Spark.function`](http://docs.spark.io/firmware/#spark-function) allows you to send an ASCII text string up to 63 characters as an argument and return a 4-byte integer.

[`Spark.variable`](http://docs.spark.io/firmware/#spark-variable) allows you to expose an INT, DOUBLE, or STRING on the Core via the Cloud. The maximum length of the string is 622 characters.

[`Spark.publish`](http://docs.spark.io/firmware/#spark-publish) and [`Spark.subscribe`](http://docs.spark.io/firmware/#spark-subscribe) allow you to send events with a data payload of up to 63 characters.

You can get very creative with these primitives. For example I’ve seen a solution for sending large text files that involved something like this:

1. Device exposes a `char[622]` as a STRING Spark.variable.

- Device exposes a `nextChunk` Spark.function that copies the next (up to) 622 characters into the Spark.variable and returns the number of characters copied
- API client opens SSE stream to subscribe for “file-available” events
- Device publishes a “file-available” event
- API client calls the `nextChunk` function and saves the returned number of bytes X
- API client gets the Spark.variable and reads X characters
- Repeat steps 5 & 6 until `nextChunk` returns 0.

A simpler, but slower alternative would be to publish the large data in 63 byte chunks, every second, until the large file transfer is finished. A subscriber to an SSE stream via the Spark API could assemble such a file super easily, even in a browser.

That said though, building a process like this can seem cumbersome, which is why it’s often better for large file transfers to happen between the Core and your own server. Also, because a Spark.variable has to contain ASCII text (and is a C string terminated by any zero byte), if your data is binary, then you have to convert it to some other encoding like hex or base64. Because of the Core’s constrained memory, too, you always have to build some chunking mechanism, even when talking to your own server. 😃

Cheers!

---

<div class="post-metadata">

**Author:** ![zachary](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/zachary/32/20717_2.png) [@zachary](https://community.particle.io/u/zachary)\
**Post date:** [December 19, 2014, 12:19am UTC](https://community.particle.io/t/using-a-camera-and-sending-jpeg-to-cloud/852/7 "2014-12-19T00:19:37Z")

</div>

Also, @emc2, just wanted to mention that if on the server you can read plain socket data instead of accepting an HTTP POST, the firmware code will get a lot easier!

---

<div class="post-metadata">

**Author:** ![emc2](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/emc2/32/1997_2.png) [@emc2](https://community.particle.io/u/emc2)\
**Post date:** [December 19, 2014, 4:01am UTC](https://community.particle.io/t/using-a-camera-and-sending-jpeg-to-cloud/852/8 "2014-12-19T04:01:43Z")

</div>

@zachary are you referring to the socket library mentioned at [https://community.spark.io/t/websockets-client/3090/28](https://community.spark.io/t/websockets-client/3090/28) ? I am eventually thinking about a socket connection, but for a quick prototype just wanted to capture decent resolution images from a camera and transfer them to an endpoint without storage.

I’m not quite ready for a project share, but here’s a peek at the app in progress: [https://ionic-basic-spark.herokuapp.com](https://ionic-basic-spark.herokuapp.com)

Workflow:

1. Accounts tab: add new account
2. Cores tab: add new cores from account
3. (Optional) Cores tab: select core, set a color and icon. Handy for visual ID later
4. Listeners tab: add new listener. Uses JS SSE listeners, only the “Publish Event” listener type does anything. Enter details for a core that you know is broadcasting `Spark.publish()` events regularly.
5. Dashboard: swipe left and right to move between event panels for each core

All data is kept as localstorage, so it never leaves your browser (except for the original account auth, which goes to API) - it’s safe to save data. No databases involved. Having images or heavier broadcast data in here would be awesome 🙂

---

<div class="post-metadata">

**Author:** ![zachary](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/zachary/32/20717_2.png) [@zachary](https://community.particle.io/u/zachary)\
**Post date:** [December 19, 2014, 10:55pm UTC](https://community.particle.io/t/using-a-camera-and-sending-jpeg-to-cloud/852/9 "2014-12-19T22:55:16Z")

</div>

Looks great @emc2! Looking forward to that project share!

Nope, not [WebSockets](http://en.wikipedia.org/wiki/WebSocket)—I mean good old standard [TCP](http://en.wikipedia.org/wiki/Transmission_Control_Protocol) [sockets](http://en.wikipedia.org/wiki/Network_socket), which are what the firmware TCPClient creates and what HTTP runs on top of. HTTP is just a TCP socket, with specific agreed-upon text formatting going back and forth.

On heroku, I don’t think you can run a generic TCP server, but I could be wrong.

Here are 3 minimal example TCP socket servers that can handle multiple concurrent connections. The node and ruby examples are just based on the language docs. For python, I basically used one from a Stack Overflow [post](http://stackoverflow.com/questions/17453212/multi-threaded-tcp-server-in-python).

* * *

**JavaScript**

```javascript
var net = require('net');

var server = new net.Server();
server.on('connection', function (socket) {
  socket.on('data', function (buffer) {
    console.log('received data:', buffer.toString());
    socket.write(buffer);
  });
});
server.listen(3000);

```

* * *

**Ruby**

```ruby
require 'socket'

server = TCPServer.new 3000
loop do
  Thread.start(server.accept) do |client|
    loop do
      data = client.gets
      puts "received data: #{data}"
      client.puts data
    end
  end
end

```

* * *

**Python**

```python
import socket, threading

class ClientThread(threading.Thread):
  def __init__ (self, ip, port, socket):
    threading.Thread. __init__ (self)
    self.ip, self.port, self.socket = ip, port, socket

  def run(self):
    data = "_"
    while len(data):
      data = clientsock.recv(1024)
      print "received data: " + data
      clientsock.sendall(data)

tcpsock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
tcpsock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
tcpsock.bind(("0.0.0.0", 3000))

threads = []

while True:
  tcpsock.listen(4)
  (clientsock, (ip, port)) = tcpsock.accept()
  newthread = ClientThread(ip, port, clientsock)
  newthread.start()
  threads.append(newthread)

for t in threads:
  t.join()

```
