CODEWITHSUNDEEP
javascriptpythonhtmlraspberry-pipubnub
Nono
Nono

Reputation: 53

Display picture(located on computer) on webpage(not localhost) in real time

So,i am stuck in my IoT project where i have to display a picture taken with my picam in real time on my webpage(hosted on 000webhost) as soon as it is taken.

Here is what i have tried: on my raspberrry pi i have a python code converting the image into Base64(use pubnub to publish) and to use Pubnub javascript sdk which recieves the base64 string and use it to decode back and display the image. Problem is: Pubnub only allows almost 35kb data to send at a time

is there a way where i can take the picture with my picam in the backend and update my webpage by displaying the very picture taken at that moment.

(i am using pubnub to send a message(trigger) from my webpage to the python script on my raspberry pi to take the picture)

Upvotes: 1

Views: 127

Answers (2)

Stephen Blum
Stephen Blum

Reputation: 6834

Sending Images in Realtime over PubNub

Typically your main challenge is image size. Your image will be too big. And PubNub allows ~34KB max. What you can do is compress and shrink the image before sending. Modern compression works nicely these days.

Define a maximum size. Then, compute a resize ratio by taking min(maxwidth/width, maxheight/height).

The proper size is oldsize*ratio.

There is of course also a library method to do this: the method Image.thumbnail.
Below is an (edited) example from the PIL documentation.

import Image

size = 512, 512 # change this to match (check aspect ratio)

im = Image.open('./path/to/file.png')
im.resize( size, Image.ANTIALIAS )
im.save( './path/to/file.jpg', 'JPEG' )
im.close()

Now you can base64 encode the new .jpg file to send over PubNub.

Upvotes: 1

Stephen Blum
Stephen Blum

Reputation: 6834

ℹ️ Quick Tip: PubNub accepts GZIP content on Publish

This is not a direct answer. It's just a good tip!

You can publish larger image sizes when you gzip POST your publish calls. You can publish gzip compressed data in many languages easily. Here is a quick example in bash. There will be another below for nodejs.

#!/bin/bash

## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
## PubNub POST GZIP Example
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
echo '{"hello":["world",123,null]}' | gzip -c9 | \
curl \
    -H "Content-Encoding: gzip" \
    --data-binary @- \
    'http://pubsub.pubnub.com/publish/demo/demo/0/my_channel/0'

echo

POST GZIP Data with NodeJS

Also you can do this in Node.JS with the following example.

var http = require("http");
var zlib = require("zlib");

exports.publish = function(msg) {
    var req = http.request({
        "host" : "pubsub.pubnub.com",
        "method" : "POST",
        "path" : "/publish/demo/demo/0/my_channel/0",
        "headers" : {
            "Content-Encoding" : "gzip",
            "Content-Type" : "application/json; charset=UTF-8",
        },
    }, function (res) {
        var body = "";
        res.on("data", function (chunk) {
            body += chunk;
        });
        res.on("end", function () {
            console.log(body)
        })
    });

    req.on("error", function (e) {
        console.error("ERROR:", e.message);
    });

    zlib.gzip(msg, function (error, result) {
        console.log("data:", result);
        req.write(result);
        req.end();
    });
};

exports.publish('{"hello":["world",123,null]}');

Upvotes: 1

Related Questions