To look at the smart front-end children's shoes how anti-theft

Many of the development of children's shoes are mixed in the lake, overnight in the village, if the security of the place to live in the absence of, then out of the house will inevitably worry about the property security.

In fact, there are many big on the world's anti-theft equipment, but for the smart front-end children's shoes, as long as there is a computer with a camera, you can simply implement a burglar monitoring system ~

Pure JS "anti-theft" ability to a large extent through the power of H5 canvas, and very interesting. If you are unfamiliar with canvas, you can read my series of tutorials here first.

Step1. Call camera

We need to access and call the camera on the browser first to monitor every move in the room. There's a slight difference in the API for calling the camera in different browsers, and here we do the example with chrome:

<video width= "640" height= "480" autoplay></video><script>    var video = Document.queryselector (' Video ');    Navigator.webkitgetusermedia ({                video:true            }, success, error);    Function success (stream) {        video.src = Window.webkitURL.createObjectURL (stream);        Video.play ();    }    Function error (ERR) {        alert (' Video error: ' + err)    }</script>

After running the page, the browser, for security reasons, asks whether to allow the current page to access your camera device, and then clicks "Allow" to see the image captured by the camera directly on the <video>:

Step2. Capturing the video frame screen

It doesn't make any sense to watch the room with the camera on, and the browser won't be able to help you analyze the monitor screen. So here we have to use the script to capture the frames on video for subsequent data analysis.

From here on, we're going to use canvas power. In the canvas Primer (v) Article we introduced the Ctx.drawimage () method, which captures the video frame and renders it to the canvas.

We need to create a canvas and then write this:

<video width= "640" height= "480" Autoplay></video><canvas width= "640" height= "480" ></canvas> <script>    var video = document.queryselector (' video ');    var canvas = document.queryselector (' canvas ');    Video capture camera screen    Navigator.webkitgetusermedia ({                video:true            }, success, error);    Function success (stream) {        video.src = Window.webkitURL.createObjectURL (stream);        Video.play ();    }    Function error (ERR) {        alert (' Video error: ' + err)    }    //canvas    var context = Canvas.getcontext (' 2d ') ;    SetTimeout (function () {        //) renders the current video frame content onto the canvas        context.drawimage (video, 0, 0, 640, 480);    }, </ Script>

As shown in the code above, render the video frame content to the canvas after 5 seconds (right-hand image below):

Step3. Performs a differential blend on captured two frame screens

As we mentioned above, to effectively identify a scene, you need to perform a data analysis on the video screen.

So, how do we identify our house and have someone break into it? The answer is simple-capture the video at timed intervals and then compare the contents of the two frames before and after a large change.

Let's start by simply writing a timed capture method and saving the captured frame data:

    Canvas    var context = Canvas.getcontext (' 2d ');    var preframe,   //Previous frame        curframe;   Current frame    //capture and save frame contents    function Captureandsaveframe () {console.log (context);        Preframe = Curframe;        Context.drawimage (video, 0, 0, 640, 480);        Curframe = Canvas.todataurl;  Switch to base64 and save    }    //Timer capture    function timer (delta) {        setTimeout () (function () {            Captureandsaveframe ();            Timer (delta)        }, Delta | | );    }    Timer ();

As shown in the code above, the canvas captures and renders the video frame content every 500 milliseconds (the dead wow, accidentally spilled cookies on the ground ...). \("▔□▔)/):

Notice here we use the Canvas.todataurl method to save the frame screen.

Then the data analysis processing, we can compare the captured frames before and after the image to determine whether the camera monitoring changes, then how to do?

Familiar with the design of the students must often use a layer function--Mixed mode:

When you have two layers, you can see the difference between the two layers at a glance by setting the blend mode of difference/difference for the top layer:

"Figure A" is the photo I took last year in the company downstairs, then I turned it a little bit brighter and drew an X and O on it to get "figure B". Then I mixed them in the "difference" mode and got the right-most picture.

"Difference" mode principle: to mix the two sides of the RGB value of each value of the comparison, with the high value minus the low value as the composite color, usually with a white layer to synthesize an image, you can get the negative effect of the reversed phase image. There is no change in black (black brightness is lowest, lower color minus the minimum color value 0, the result is the same as the original), and White will be reversed (the lower color is subtracted, get the complement), other colors based on their brightness level

In CSS3, there are already blend-mode features to support this interesting blending mode, but we have found that the canvas's globalcompositeoperation interface has been well-supported for image blending modes in mainstream browsers:

So we build a more canvas to show the difference between the front and back two frames:

<video width= "640" height= "480" Autoplay></video><canvas width= "640" height= "480" ></canvas>    <canvas width= "640" height= "480" ></canvas><script> var video = document.queryselector (' video ');    var canvas = document.queryselectorall (' canvas ') [0];    var Canvasfordiff = document.queryselectorall (' canvas ') [1];    Video capture Camera screen Navigator.webkitgetusermedia ({video:true}, success, error); Function success (stream) {video.src = window.        Url.createobjecturl (stream);    Video.play ();        The function error (ERR) {alert (' Video error: ' + err)}//canvas var context = Canvas.getcontext (' 2d '),    Diffctx = Canvasfordiff.getcontext (' 2d ');    Set the second canvas blending mode to "diff" diffctx.globalcompositeoperation = ' difference ';   var preframe,//Previous frame curframe;        Current frame//capture and save frame contents function Captureandsaveframe () {preframe = Curframe;        Context.drawimage (video, 0, 0, 640, 480); CUrframe = Canvas.todataurl ();        Convert to Base64 and save}//Draw base64 image onto canvas function drawimg (src, ctx) {ctx = CTX | | diffctx;        var img = new Image ();        IMG.SRC = src;    Ctx.drawimage (IMG, 0, 0, 640, 480);         }//Before and after rendering two frame difference function Renderdiff () {if (!preframe | |!curframe) return;        Diffctx.clearrect (0, 0, 640, 480);        Drawimg (Preframe);    Drawimg (Curframe);            }//Timer capture function timer (delta) {setTimeout (function () {captureandsaveframe ();            Renderdiff (); Timer (Delta)}, Delta | |    500); } timer ();</script>

The effect is as follows (Yao Shou Ah, finish this action I again put Sprite on the keyboard ... (#--)/):

As you can see, the third canvas is almost dark when the next two frames are small, and only when the camera captures the action does the third canvas have a noticeable highlight content.

Therefore, we only need to pixel-analyze the image after the third canvas has been rendered--to determine whether its highlight threshold reaches a specified expectation:

    var context = Canvas.getcontext (' 2d '), Diffctx = Canvasfordiff.getcontext (' 2d ');    Set the second canvas blending mode to "diff" diffctx.globalcompositeoperation = ' difference ';   var preframe,//Previous frame curframe;  Current frame Var diffframe;        ImageData//Capture and save frame contents function Captureandsaveframe () {preframe = Curframe;        Context.drawimage (video, 0, 0, 640, 480);  Curframe = Canvas.todataurl ();        Convert to Base64 and save}//Draw base64 image onto canvas function drawimg (src, ctx) {ctx = CTX | | diffctx;        var img = new Image ();        IMG.SRC = src;    Ctx.drawimage (IMG, 0, 0, 640, 480);        }//Before and after rendering two frame difference function Renderdiff () {if (!preframe | |!curframe) return;        Diffctx.clearrect (0, 0, 640, 480);        Drawimg (Preframe);        Drawimg (Curframe);  Diffframe = diffctx.getimagedata (0, 0, 640, 480);        The ImageData object that captures the differencing frame}//Calculates the difference function Calcdiff () {if (!diffframe) return 0; var cache = Arguments.callee, Count =0; Cache.total = Cache.total | | 0; The entire canvas is white when the sum of the values of all pixels for (var i = 0, L = diffframe.width * Diffframe.height * 4; i < l; i + = 4) {Cou            NT + = Diffframe.data[i] + diffframe.data[i + 1] + diffframe.data[i + 2];   if (!cache.isloopever) {//simply execute cache.total + = 255 * 3 in the first loop;        Single white Pixel Value}} Cache.isloopever = true;  Count *= 3;    Brightness zoom In//return "The Difference canvas highlights part of the pixel value" as a proportion of "canvas full brightness" pixel value return number (count/cache.total). toFixed (2);            }//Timer capture function timer (delta) {setTimeout (function () {captureandsaveframe ();            Renderdiff ();            SetTimeout (function () {Console.log (Calcdiff ());            }, 10); Timer (Delta)}, Delta | |    500); } timer ();

Note Here we use the Count *= to enlarge the luminance value of the difference highlighting pixel, otherwise the value is too small. We run the next page (the picture is a bit slow to load):

After a test (BAI), xia that if the ratio of Calcdiff () returns is greater than 0.20, then it can be characterized as "an empty room, suddenly someone broke in" situation.

Step4. Escalate exception picture

When the above calculation finds a situation, there is a way to notify us. If you have the energy, you can deploy a mail server, send e-mail or even text messages to yourself, but this article go to eat Spit juvenile route, do not engage in so high-end.

So how to simply implement the exception image escalation? I think for the moment--send the problem picture directly to a site.

Here we choose the Blog Park "Diary" function, it can upload relevant content.

P.S, in fact, here originally wanted to directly upload pictures to the blog Park album, unfortunately, the POST request picture entity required to go file format, that is, unable to change the file through the script Input[type=file], to the Blob upload also useless, had to give up.

When we create a journal in the background of management, we can see that the request parameters are very simple through the Fiddler grab package:

Thus a request can be constructed directly:

    Exception image upload processing    function submit () {        //ajax submit form        $.ajax ({            URL: ' http://i.cnblogs.com/EditDiary.aspx? Opt=1 ',            type: ' POST ',            data: {                ' __viewstate ': ', '                __viewstategenerator ': ' 4773056F ',                ' editor$ Edit$txbtitle ': ' Alarm ' + date.now (),                ' editor$edit$editorbody ': '  ',                ' editor$ Edit$lkbpost ': ' Save '            },            success:function () {                console.log (' Submit Done ')}}        );    

Of course, if the request page is different from the blog garden domain name, is unable to send a cookie to cause the request cross-domain and invalid, but this is a good solution, directly modify the host (how to modify it is not introduced, self-Baidu bar).

My side changed the host, through the address of the http://i.cnblogs.com/h5monitor/final.html to visit the page, found that the camera has failed ~

Through Google's documentation, this is for security reasons, non-HTTPS server requests can not access the camera. But the solution is also, take the window system, for example, open the CMD command line panel and navigate to the Chrome installation folder, and then execute:

Chrome--unsafely-treat-insecure-origin-as-secure= "http://i.cnblogs.com/h5monitor/final.html"  -- User-data-dir=c:\testprofile

This will open a separate chrome process in sandbox mode and remove the security restrictions for the specified site. Note that we have to re-login to the blog park in the new chrome.

This time will be able to access the camera normally, we do the code under processing, when the difference detection anomaly, create a diary, the minimum interval of 5 seconds (but later found not necessary, because the blog Park has made a time limit, almost 10 seconds before the release of a new diary):

    Timer capture function timer (delta) {setTimeout (function () {captureandsaveframe ();            Renderdiff (); if (Calcdiff () > 0.2) {//Monitor to exception, send log submit ()} timer (delta)}, Delta | |    500);  } setTimeout (Timer, 60000 * 10);        Set open page 10 minutes before monitoring//exception image upload processing function submit () {var cache = Arguments.callee, now = Date.now ();  if (Cache.reqtime && (Now-cache.reqtime <)) return;        Journal creation minimum interval is 5 seconds cache.reqtime = now;            Ajax submits form $.ajax ({url: ' http://i.cnblogs.com/EditDiary.aspx?opt=1 ', type: "POST", timeout:5000, data: {' __viewstate ': ', ' __viewstategenerator ': ' 47730  56F ', ' editor$edit$txbtitle ': ' Alarm ' + date.now (), ' editor$edit$editorbody ': '  ', ' editor$edit$lkbpost ': ' Save '},    Success:function () {console.log (' Submit done ')}, Error:function (err) {                Cache.reqtime = 0;    Console.log (' ERROR: ' + Err)}}); }

Execution effect:

The diary is also duly completed:

You can see the picture of the anomaly by opening it:

To keep in mind, blog Park on the number of the diary is to do a daily quota to prevent brush, to reach the limit of the words will lead to the day's essays and articles can not be published, so be careful to use:

But this form can only report abnormal pictures, temporarily can not let us timely receipt of alarm, interested in children's shoes can try to write a chrome plugin, timed to pull the diary list to make judgments, if there is a new diary triggered page alert.

In addition, we certainly want to be able to directly to the intruder to warn, this piece is better to do-make a warning audio, in the abnormal time to trigger playback:

    Play Audio    function Firealarm () {        audio.play ()    }    //timed capture    function timer (delta) {        setTimeout ( function () {            captureandsaveframe ();            if (preframe && curframe) {                renderdiff ();                if (Calcdiff () > 0.2) {  //monitor to abnormal                    //Send journal                    submit ();                    Play Audio Alarm                    firealarm ();                }            }            Timer (delta)        }, Delta | | );    }    SetTimeout (Timer, 60000 *);  Set the page open for 10 minutes before you start monitoring

Finally, the code is hanging on my GitHub, interested children's shoes can be self-download. Mutual Encouragement ~

To look at the smart front-end children's shoes how anti-theft