| die letzten Änderungen * Seitenstruktur * Stichwortsuche :


logo_puschin.jpg

Startseite

Knowledge base



Kontakt

Impressum

Knowledge base - Raspberry pi

Knowledge base

11 Benutzer online Druckversion




zurück



Raspberry pi
Javascript für die Anzeige von Kamerabildern (Bug-fixed original sourcecode)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Barmke</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <script type="text/javascript">

      /* Copyright (C) 2007 Richard Atterer, richard©atterer.net
       * This program is free software; you can redistribute it and/or modify it
       * under the terms of the GNU General Public License, version 2. See the file
       * COPYING for details.
       */

      var imageNr = 0; // Serial number of current image
      var finished = new Array(); // References to img objects which have finished downloading
      var paused = false;
      var previous_time = new Date();
      var fNi = 0, msAvg = 0, fpsAvg = 0, fcnt = 0, fN = 20, msa = [], wsize = 4;

      function createImageLayer() {
        var img = new Image();
        img.style.position = "absolute";
        img.style.zIndex = -1;
        img.onload = imageOnload;
        img.onclick = imageOnclick;

        img.width = 1280;
        img.height = 768;

        img.src = "[NAME_DER_BILDDATEI_HIER_EINTRAGEN].jpg?n=" + (++imageNr);
        var webcam = document.getElementById("webcam");
                //window.info = document.getElementById('info').firstChild;
                window.ravgFps = document.getElementById('ravgfps').firstChild;
                window.timestamp = document.getElementById('timestamp').firstChild;
                window.number = document.getElementById('number').firstChild;
                //window.ravgMs = document.getElementById('ravgms').firstChild;
                webcam.insertBefore(img, webcam.firstChild);
                document.getElementById('fN').firstChild.nodeValue = fN;
      }


        function runningAvgs (delta) {
                // delta is the measured frame period
                var len;
                if (fcnt < fN) {

                        fcnt++;
                        // we need to populate the sample array
                        msa.push(delta);
                        // calculate average period so far
                        msAvg += (delta - msAvg) / fcnt;

                } else {
                        /*
                                running average (fN samples) according to the formula:
                                rAvg = rAvg - value_fN_samples_back / fN + newest_value / fN
                        */
                        msAvg += (delta - msa[0])/fN;
                        // drop oldest ms value, msa[0]
                        msa = msa.slice(1);
                        // append newest value, delta
                        msa.push(delta);
                }
                // calculate average fps
                fpsAvg = 1000 / msAvg;

                /*
                        once every fN frames, check if we need to adjust the averaging window
                        since faster rates seem to need more samples to reach a stable(er) readout
                */

                /*
                if (++fNi == fN) {

                        fNi = 0;
                        // new window size
                        fN = parseInt(fpsAvg * wsize);
                        len = fcnt - fN;
                        // if our sample array, msa, has extra samples, then trim it to the new size
                        if (len > 0) {

                                // adjust averaging window (nr of samples)
                                msa = msa.splice(len);
                                // avoid populating the sample array again
                                fcnt = fN;
                        }
                }
                */
        }

      // Two layers are always present (except at the very beginning), to avoid flicker
      function imageOnload() {
        this.style.zIndex = imageNr; // Image finished, bring to front!
        while (1 < finished.length) {
          var del = finished.shift(); // Delete old image(s) from document
          del.parentNode.removeChild(del);
        }
        finished.push(this);
        current_time = new Date();
        delta = current_time.getTime() - previous_time.getTime();
        //fps   = (1000.0 / delta).toFixed(1);
        fps   = (1000.0 / delta);
                runningAvgs(delta);
                //info.nodeValue = delta + " ms (" + fps + " fps)";
                //ravgFps.nodeValue = fpsAvg.toFixed(1);
                ravgFps.nodeValue = fpsAvg.toFixed(2);
                timestamp.nodeValue = current_time.toLocaleString();
                number.nodeValue = imageNr;
                //ravgMs.nodeValue = msAvg.toFixed(0);
                previous_time = current_time;
        //if (!paused) createImageLayer();

        setTimeout(function(){ createImageLayer(); }, 5000); // alle 5 Sekunden ein neues Bild, ggf. anpassen.
      }

      function imageOnclick() { // Clicking on the image will pause the stream
        paused = !paused;
        if (!paused) createImageLayer();
      }

    </script>
  </head>

  <body onload="createImageLayer();">

  <div style="position: absolute; bottom:0px; right:15px;">
  <p><font size=2 face=Arial>
  <span  id="ravgfps">-</span> fps (<span  id="number">-</span>)
  <br>
  <span  id="timestamp">-</span> Uhr
  </p>
  </div>

    <div id="webcam"><noscript><img id="streamimage" src="[NAME_DER_BILDDATEI_HIER_EINTRAGEN].jpg"></noscript></div>

    </div>
  </body>
</html>


zurück



Knowledge base wurde zuletzt bearbeitet am 12.07.13 durch Frank

www.puschin.de
login

<body bgcolor='#FFFFFF' link='#000000' vlink='#000000' alink='#000000' text='#000000'><font face='Verdana' size='2'><strong>www.puschin.de</strong><br>Die Webseite http://www.puschin.de bietet eine interessante Webseite zu vielen Themen aus dem Bereich Linux und Windows. Man findet hier Tipps und Tricks zu cms php apache postfix openxchange tomcat windows linux firewall <br><br><font face='Verdana' size='2'><li><a href='cms.php?print=&aktion=thema_anzeigen&menue_id=191'>Startseite</a><font face='Verdana' size='2'><li><a href='cms.php?print=&aktion=thema_anzeigen&menue_id=63'>Knowledge base</a><font face='Verdana' size='2'><li><a href='cms.php?print=&aktion=thema_anzeigen&menue_id=57'>Kontakt</a><font face='Verdana' size='2'><li><a href='cms.php?print=&aktion=thema_anzeigen&menue_id=9'>Impressum</a></body>