WINDOW, installazione finestra virtuale con webcam jappe

WINDOW, an artistic installation concept by Gabriele Zaverio, 2020 Still a work in progress

This is a virtual window from another world. You will see a live image chosed between about 1200 different surveillance cameras in Japan.

It's meant to be a physical object - a "window" you can hang on a wall, open to somewhere.

Webcam change casually every hour or so.

Thank you to Blackout69, Katolaz, Fanfani, Drosophila for help coding this shit.

CRISTO E' UN BASTARDO

Contents

  1. WINDOW, installazione finestra virtuale con webcam jappe
    1. SUL SERVER ZAVERIO.COM
      1. index.html della pagina della cam
      2. scritto, lo script bash principale
      3. auto-reload.js
      4. fade.css
    2. RASBERRY PI 3 LOCALE SULLA FINESTRA
      1. unclutter
      2. dhcpcd per la rete
      3. Cose dentro /etc/group, /etc/rc.local, /etc/resolv.conf
      4. ROBA dentro /etc/boot
      5. Roba nella home di pi
      6. Per riavviare la parte X / grafica
    3. VECCHIA MERDA NON USATA, RESTI DI PROVE VECCHIE, CAGATE VOMITATE

SUL SERVER ZAVERIO.COM

Il server zaverio.com contiene un elenco di webcam giapponesi "selezionate" da insecam.com, purgate di troiate varie. E' un file di testo con tutte le URL. Da questo viene selezionata ogni ora una cam a caso, una URL, che finisce in un file chiamato "curcam.txt".

Poi c'e' ROBA CHE GIRA e FA.

L'HOWTO nel server dice: 

1) FOTTITI

2) ARIFOTTITI

3) metti index.html, fade.css, e auto-reload.js dove minchia vuoi

4) cambia l'indirizzo in cima al file auto-reload.js, in modo che punti al posto dove
   avrai il file "curcam.txt"

5) metti la lista delle camere in "listacamere.log" nella stessa dir. secondo me devi
   ELMININARE tutte quelle che hanno "COUNTER" perche' NON FUNGONO, quindi
   dopo che la scarichi fai un bel "grep -v "COUNTER" e VAFFANCULO

6) metti questo in cron, che serve a fare l'update del prossimo URL

POSIX: tail -n +$(echo "$(od -An -N2 -d /dev/urandom) % $(wc -l < listacamere.log )" | bc)  listacamere.log | head -1 > curcam.txt
sano: echo `shuf -n 1 listacamere.log` > curcam.txt

7) N.B.: curcam.txt DEVE CONTENERE SOLO UNA LINEA, CHE E' L'URL DELLA PROSSIMA
   CAM DA CARICARE. SOLO. UNA. LINEA. SOLO. UNA. PORCO. DIO. SOLO. UNA.

8) FINE

index.html della pagina della cam

<!--

**********************************************************
***                                                    ***
***   WARNING: LOAD THIS PAGE AS HTTP !!! NO HTTPS!!!  ***
***                                                    ***
***     IF YOU USE HTTPS, THIS PAGE DOESN'T WORK!!!    ***
***                                                    ***
**********************************************************

WINDOW, an artistic installation concept by Gabriele Zaverio, 2020
Still a work in progress

This is a virtual window from another world. You will see a live image
chosed between about 1200 different surveillance cameras in Japan.

It's meant to be a physical object - a "window" you can hang on a wall, open
to somewhere.

Webcam change casually every hour or so.

Thank you to Blackout69, Katolaz, Fanfani, Drosophila for help
coding this shit.
-->

<html>
    <head>
        <title>WINDOW</title>
        <style>
            .hidden {
                display: none;
            }
            #cam_container {
                overflow: hidden;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            #cam_container img {
                position: absolute;
                top: 50%;
                left: 50%;

                width: auto;
                height: auto;

                max-height: none;
                max-width: none;

                min-height: 100%;
                min-width: 100%;

                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
            }
        </style>
        <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

        PORCODIO STA MERDA NON CI VUOLE DIO BASTARDO

        IL SITO FUNZIONA SOLO DA HTTP://ZAVERIO.COM/~ASBESTO/CAM E NON DA
        HTTPS

        https://stackoverflow.com/questions/37043719/how-can-i-allow-mixed-contents-http-with-https-using-content-security-policy-m

        -->
    </head>
    <body>

    WARNING: THIS PAGE WORKS ONLY IN <B>HTTP</B>, NOT HTTPS !!!<BR>
    ATTENZIONE: QUESTA PAGINA FUNZIONA SOLO DA <b>HTTP</b>, NON DA HTTPS!!!

        <div id="cam_container"></div>

        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!--        <script src="https://code.jquery.com/jquery-2.2.4.js"></script> -->

        <script>

            const REMOTE_CAM = "https://zaverio.com/~asbesto/cam/curcam.txt";
            const UPDATE_CAM_INTERVAL = 1800000; // Intervallo aggiornamento nuova webcam, se esistente
                                 // era 3600000 cioe' ogni ora

            var current_cam = null;
            var fallback_cam = null;
            var lock = false;

            function update_cam_url( url ) {

                if( lock === true )
                    return;

                lock = false;

                jQuery.ajax({
                    type: "POST",
                    url: url,
                    dataType: 'text',
                    async: true,
                    success: function(data, textStatus, xhr) {

                        var first_time = false;
                        var update_cam = false;

                        if (xhr.status == 200) {

                            var cam_url_ricevuto = data.replace(/^\s+|\s+$/g, '');


                            if( jQuery("#cam_container img").length == 0 || (cam_url_ricevuto.length > 0 && cam_url_ricevuto != current_cam) ) {

                                update_cam = true;

                                if( jQuery("#cam_container img").length == 0 || current_cam == null )
                                    first_time = true;

                                fallback_cam = current_cam;
                                current_cam = cam_url_ricevuto;

                                console.log("Ricevuto: " + current_cam);

                            }

                        }
                        else {

                            console.log("Errore, opto per la cam in fallback");

                            current_cam = fallback_cam;
                            update_cam = true;

                        }


                        if( current_cam != null && update_cam === true ) {

                            var img = document.createElement("img");

                            img.id = new Date().getTime();
                            img.src = current_cam;

                            if( first_time === false ) {

                                // Rendo la nuova webcam nascosta
                                img.style.visibility = "hidden";

                                // La rendo visibile solo quando realmente disponibile
                                img.onload = function() {

                                    console.log("Rimuovo immagini con ID diverso da "+img.id);

                                    // Rimuovo tutte le immagini diverse da questa
                                    jQuery("#cam_container img[id!='"+img.id+"']").remove();

                                    // Rendo l'immagine visibile
                                    img.style.visibility = "visible";
                                    img.onload = null;

                                };

                            }

                            jQuery("#cam_container").append( img );

                        }

                        lock = false;

                    },
                    error: function(xhr, status, errorThrown)
                    {
                        console.log("Chiamata AJAX fallita: "+errorThrown);
                        lock = false;
                    }
                });

            }

            window.onload = function() {

                update_cam_url( REMOTE_CAM );

                setInterval( function() {
                    update_cam_url( REMOTE_CAM );
                }, UPDATE_CAM_INTERVAL);

            }

        </script>

    </body>
</html>

scritto, lo script bash principale

Lo script bash usa "shuf" per prendere una linea a caso dall'elenco delle webcam... 

# tempo di durata della webcam sulla finestra, dopodiche' cambia
tempo=1800
#era 3600 cioe' 1 ora ma mi sono rotto i COGLIONI

while true; do
        # scelgo una cam a caso da listacamere.txt
        echo "Scelgo una camera da listacamere.txt..."
        camok=`shuf -n 1 listacamere.txt`

        # vedo se la sua URL mi restituisce dei dati oppure non funziona
        echo "SUCO dei dati da quella webcam e li salvo nel file ./curltest"
        curl -s -m 5 -r 0-500  "$camok" --output curltest
        if [[ -s curltest ]] ; then # Ha scaricato un file > 0 bytes quindi la cam esiste
           echo "Ho scaricato un file con size>0, verifico se ha dati coerenti..."
           # controllo se la cam funziona o restituisce html con errori
           if grep -q Unauthorized curltest; then # se c'e' Unauth allora chiede pw e quindi va scartata
              echo "Chiede password, quindi fanculo"
              date; echo -n "UNAUTHORIZED camera: "; echo $camok
              echo -n $camok >> guaste.log ; echo " UNAUTHORIZED" >> guaste.log
              fault=1
           elif grep -q Error curltest; then # iNTERNAL Server error? Allora VAFFANANO, succede, viene scartata
              date; echo -n "SERVER ERROR camera: "; echo $camok
              echo -n $camok >> guaste.log ; echo " SERVER ERROR" >> guaste.log
              echo "internal server error? vaffanano, scartata"
              fault=1
           else #altrimenti presumo siano dati video coerenti, quindi e' ok!
              echo "Sembra che i dati siano coerenti..."
              date; echo -n "OK! WORKING camera: "; echo $camok
              fault=0
           fi

           if [ $fault == 0 ]; then # se la cam e' ok, controlliamo che funzioni e non sia blu o nera
              echo "Verifico che la cam contenga video e non sia nera o blu fissa"
              filename=./curltest # Questo e' cio' che e' stato sucato testando la webcam
              maxsize=10000 # da prove fatte, se curltest <= 10K, allora e' una immagine fissa blu o nera!
              filesize=$(stat -c%s "$filename")
              if (( filesize > maxsize )); then
                  # presumo che la cam sia quindi ok
                  echo "Size of $filename = $filesize bytes: Filesize is OK! e' buona!!!"
                  # dato che fault e' gia' a 0
              else
                  # altrimenti presumo sia una immagine fissa blu/nera senza segnale
                  echo "E' una telecamera con schermo fisso blu o nero di merda..."
                  date; echo -n "Size of $filename = $filesize bytes: "echo -n "BLU DI MERDA"; echo $camok
                  fault=1
              fi
           fi

        else # Se invede e' un file di zero bytes o nessun file: camera in timeout o url inesistente!
              echo "Il file e' 0 bytes, ergo camera in timeout o url inesistente!"
              date; echo -n "TIMEOUT camera: "; echo $camok
              echo -n $camok >> guaste.log ; echo " TIMEOUT" >> guaste.log
              fault=1
        fi

        if [ $fault == 0 ]; then # non ci sono fault quindi
           echo "Creo curcam.txt con questa webcam dentro..."
           echo $camok > curcam.txt # crea il file curcam.txt - current camera da visualizzare.
                                    # curcam.txt viene letto dalla pagina web di Window.
           echo $camok >> OK.log # e logga la cam buona
           echo "Dormo $tempo secondi..."
           sleep $tempo
        else
           echo "FAULT DETECTED: Ricarico..." # se c'e' un fault qualsiasi nella cam, ricomincia finche
                                              # non ne trova una buona da visualizzare.
           sleep 1
        fi
        fault=0; rm curltest
done

auto-reload.js

//
// CHANGE THESE VARIABLES ACCORDING TO YOUR PREFERENCE
//
// url of the file containing the URL of the next cam
const fileurl= "http://zaverio.com/~asbesto/cam/curcam.txt";
// interval between cam switch
const switch_interval = 20000;
// refresh interval for still jpeg cams
const refresh_interval = 2000;
var nexturl = "http://58.94.97.144/nphMotionJpeg?Resolution=640x480&Quality=Standard";

var last = 0;
var ids = ["back1", "back2"];
var cururl = nexturl;

setInterval(function(){
        last = (last + 1) % 2;
        other = (last + 1) % 2;
        cur = document.getElementById(ids[last]);
        cur.style.backgroundSize = "cover";
        cururl = nexturl;
        cur.style.visibility = "visible";
        next = document.getElementById(ids[other]);
        next.style.visibility = "hidden";
        next.style.background = "url(" + nexturl + ") center no-repeat fixed";

        const Http = new XMLHttpRequest();
        Http.open("GET", fileurl);
        Http.send();

        Http.onreadystatechange = function() {
                nexturl = Http.responseText;
        }

}, switch_interval);

setInterval(function(){
        u_cur = cururl;
        d = new Date();
        if (u_cur.includes("?")){
                u_rel = cururl+"&xxx=" + d.getTime();
        }
        else{
                u_rel = cururl+"?xxx=" +d.getTime();
        }
//      if (u_cur == cururl){
                document.getElementById(ids[last]).style.background = "url("+ u_rel+ ") center no-repeat fixed";
                // console.log("u_rel:" + u_rel);
//      }
}, refresh_interval);

fade.css

html,
body {
  height: 100%;
  margin: 0;
}

.panel {
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  color: white;
  height: 100%;
  min-width: 100%;
  text-align: center;
  display: table;
  margin: 0;
  background: #1c1c1c;
  padding: 0 0;
}

.panel .inner {
  display: table-cell;
  vertical-align: middle;
}

.backgroundimg {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

}

#back1 {
  background:
  url(http://27.116.24.116:80/mjpg/video.mjpg
) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 height: 100%;
 width: 100%;
 overflow: hidden;
}

#back2 {
  background:
  url(http://27.116.24.116:80/mjpg/video.mjpg
) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 height: 100%;
 width: 100%;
 overflow: hidden;
}

RASBERRY PI 3 LOCALE SULLA FINESTRA

A quanto pare uso:

unclutter

/etc/default/unclutter - forse serve sia YES

START_UNCLUTTER="true"

# Options passed to unclutter, see 'man unclutter' for details.
EXTRA_OPTS="-idle 1 -root"

dhcpcd per la rete

/etc/dhcpcd.conf:

# Example static IP configuration:
interface eth0
static ip_address=192.168.1.10
#static ip6_address=fd51:42f8:caae:d92e::ff/64
static routers=192.168.1.1
static domain_name_servers=1.1.1.1 8.8.8.8 fd51:42f8:caae:d92e::1


interface wlan0
static routers=10.69.1.1
static domain_name_servers=1.1.1.1
static domain_search=8.8.8.8
static ip_address=10.10.10.10

Cose dentro /etc/group, /etc/rc.local, /etc/resolv.conf

dentro /etc/group: pi,asbesto ovunque

dentro /etc/rc,local: IMPORTANTISSIMO 

iwconfig wlan0 power off

dentro /etc/resolv.conf: 

# Generated by resolvconf
search 8.8.8.8 lan
nameserver 1.1.1.1
nameserver 2001:b07:6468:e923::1

ROBA dentro /etc/boot

cmdline.txt

console=serial0,115200 console=tty1 root=PARTUUID=d5681f06-02 rootfstype=ext4 elevator=deadline fsck.repair=yes rootwait

config.txt

overscan_left=16
overscan_right=16
overscan_top=16
overscan_bottom=16

Roba nella home di pi

Dentro /home/pi/.bashrc : 

unclutter -display :0 -noevents -grab &

.xsession COMANDA TUTTO

.xsession comanda, usando matchbox-window-manager a quanto pare. Esso contiene: 

xset s off
xset -dpms
xset s noblank
matchbox-window-manager -use_titlebar no -use_cursor no &
exec firefox --kiosk http://zaverio.com/~asbesto/cam

Per riavviare la parte X / grafica

Da shell basta dare 

sudo service lightdm restart

VECCHIA MERDA NON USATA, RESTI DI PROVE VECCHIE, CAGATE VOMITATE

ROBA DI LXDE NON USATA, uso LIGHTDM 

root@window:/home/pi/.config/lxsession/LXDE-pi# pwd
/home/pi/.config/lxsession/LXDE-pi
root@window:/home/pi/.config/lxsession/LXDE-pi# cat autostart
@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
#@xscreensaver -no-splash
point-rpi
@xset s off
@xset -dpms
@xset s noblank
@chromium-browser --start-fullscreen --start-maximized --ingognito --noerrdialogs --disable-translate --no-first-run --fast-start --disable-infobars --disable-features=TranslateUI
#@firefox-esr -url http://zaverio.com/~asbesto/cam & xdotool search --sync --onlyvisible --class "Firefox" windowactivate key F11

root@window:/home/pi/.config/lxsession/LXDE-pi#

Questo probabilmente era un browser di merda provato e mai utilizzato:
root@window:/home/pi# cat uzbl.conf
set show_status = 0
set geometry = maximized
set status_background = #000000
root@window:/home/pi#

Museo/RaspberrySetup/Window (last edited 2026-03-13 15:01:11 by asbesto)