Video stream responsive design - Softwareontwikkeling

vrijdag 21 november 2014 11:39

Acties:

Topicstarter

Op dit moment staat er in mijn kippenhok een Rpi met een Rpi camera module, deze staat al meer dan een jaar in het kippenhok, hiermee bedien ik de deur en het licht.
Een week geleden had ik op mijn 2de RPi (met camera module) een nieuwe installatie gemaakt met Raspbian en daarop Webiopi om het licht en de deur te bedienen, dit alles om te proberen/testen, maar bij deze heb ik ook RPi cam web interface geïnstalleerd, omdat dit zorgt voor mooie vloeiende camera beelden, want op dit moment krijgen we om de 5 seconden een nieuw beeld.

Het probleem wat ik heb en wat ik eigenlijk ook al met de eerste RPi heb is dat het op de desktop computer alles er goed uitziet, maar als ik dan naar de webpagina ga op mijn smartphone dan staan de 2 knoppen mooi in het midden, maar is er altijd een deel van de videostream weg gesneden.

Ik heb dit al op een ander forum gevraagd maar daar konden ze me niet echt verder helpen, dus vraag ik het hier eens.

Zo ziet het eruit op de smartphone, zoals je kan zien is het beeld afgesneden:
http://www.wuala.com/andl...t_2014-11-18-18-06-21.png

En zo op de pc:
http://www.wuala.com/andlinux/Share/PC.jpg

Zelf ken ik niet heel veel van html/CSS/JS dat geef ik toe, door het bij elkaar zoeken van code en veel proberen geraak ik er meestal uit maar niet bij deze.

Hier is de code die ik op dit moment heb, er zit een iframe in, maar als het gaat mag dat weg.

code:

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "width=device-width,initial-scale=1" />
        <title>WebIOPi | Kippenhok</title>
        <script type="text/javascript" src="/webiopi.js"></script>
        <script type="text/javascript">
        webiopi().ready(function() {

                webiopi().setFunction(0,"out");
                webiopi().setFunction(1,"out");

                var content, button;
                content = $("#content");

                button = webiopi().createGPIOButton(0,"Deur");
                content.append(button); // append button to content div

                button = webiopi().createGPIOButton(1,"Licht");
                content.append(button); // append button to content div

                webiopi().refreshGPIO(true);


        });
        </script>
        <style type="text/css">
                button {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: black;
                }

                input[type="range"] {
                        display: block;
                        width: 160px;
                        height: 45px;
                }

                .LOW {
                        background-color: White;
                }

                .HIGH {
                        background-color: Green;
                }

                #container {
                    width: 100%;
                }

                #content {
                    margin: 0 auto;
                    max-width: 640px;

                    text-align: center;
                }

                #content button {
                    margin-left: auto;
                    margin-right: auto;
                }

                .video  {
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 0;
                    padding-bottom: 75%;
                }

                .video iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border: 0;
                }
      </style>
</head>
<body>
<div id="container">
    <div id="content">
        <div class="video">
            <iframe src="http://192.168.1.13/clean.php" scrolling="no" scale="aspect"></iframe>
        </div>
    </div>
</div>
</body>
</html>

vrijdag 21 november 2014 11:43

Acties:

TI_Observer

fitvids.js gaat sowieso werken, maar volgens mij werkt max-width: 100% ook gewoon in html5

Ik lieg ALTIJD... zie je dat was weer een leugen!

vrijdag 21 november 2014 12:11

Acties:

AnD

Topicstarter

Ik heb net eens geprobeerd met die max-width: 100% bij het iframe dus:

code:

.video iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    max-width: 100%;
                    width: 100%;
            height: 100%;
                    border: 0;
                }

Maar dit lijkt niet te werken of moet dit ergens anders staan ?

Edit:
Net ook eens fitvid geprobeerd, maar dat wil ook niet lukken.
Hier mijn code:

code:

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "width=device-width,initial-scale=1" />
        <title>WebIOPi | Kippenhok</title>
        <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
            
        webiopi().ready(function() {

                webiopi().setFunction(0,"out");
                webiopi().setFunction(1,"out");

                var content, button;
                content = $("#content");

                button = webiopi().createGPIOButton(0,"Deur");
                content.append(button); // append button to content div

                button = webiopi().createGPIOButton(1,"Licht");
                content.append(button); // append button to content div

                webiopi().refreshGPIO(true);


        });
        </script>
        <style type="text/css">
                button {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: black;
                }

                input[type="range"] {
                        display: block;
                        width: 160px;
                        height: 45px;
                }

                .LOW {
                        background-color: White;
                }

                .HIGH {
                        background-color: Green;
                }

                #container {
                    width: 100%;
                }

                #content {
                    margin: 0 auto;
                    max-width: 640px;

                    text-align: center;
                }

                #content button {
                    margin-left: auto;
                    margin-right: auto;
                }

                .video  {
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 0;
                    padding-bottom: 75%;
                }

                .video iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
            height: 100%;
                    border: 0;
                }
      </style>
</head>
<body>
<script src="/jquery.fitvids.js"></script>
<script>
    $(document).ready(function(){
        // Target your .container, .wrapper, .post, etc.
    $(".container").fitVids();
    });
</script>

<div id="container">
    <div id="content">
        <div class="video">
            <iframe src="http://192.168.1.13/clean.php" scrolling="no" scale="aspect"></iframe>
        </div>
    </div>
</div>
</body>
</html>

Wat doe ik verkeerd ?
Ik heb jquery.fitvids.js bij mijn index.html bestand gezet.

[ Voor 79% gewijzigd door AnD op 21-11-2014 12:51 ]

vrijdag 21 november 2014 12:54

Acties:

Bosmonster

*zucht*

Hier heb je helemaal geen javascript voor nodig. Als je de verhouding weet van je video, kun je dit met CSS oplossing met de padding-truc. (zoals 56.25% voor een 16/9 video).

http://jsfiddle.net/rqs1kzaf/

[ Voor 8% gewijzigd door Bosmonster op 21-11-2014 12:58 ]

vrijdag 21 november 2014 12:59

Acties:

AnD

Topicstarter

De video resolutie is 1296 x 976
dan heb ik full FOV, wel 4/3)

[ Voor 9% gewijzigd door AnD op 21-11-2014 13:00 ]

vrijdag 21 november 2014 13:00

Acties:

Bosmonster

*zucht*

Dan is het 75.3086%

vrijdag 21 november 2014 13:05

Acties:

AnD

Topicstarter

Heb net de padding-bottom aangepast van 75 naar 75.3086%, maar het helpt niet.

vrijdag 21 november 2014 13:06

Acties:

Bosmonster

*zucht*

Je hebt mn jsfiddle gezien:

http://jsfiddle.net/rqs1kzaf/

Als je dit nu eens als basis hanteert.

vrijdag 21 november 2014 13:11

Acties:

AnD

Topicstarter

Ja dat heb ik gezien, ik heb mijn code ook aangepast zoals het op jsfiddle stond.
Of doe ik nog iets verkeerd.
Vergeet niet dat ik geen expert ben op dit vlak

code:

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "width=device-width,initial-scale=1" />
        <title>WebIOPi | Kippenhok</title>
        <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
            
        webiopi().ready(function() {

                webiopi().setFunction(0,"out");
                webiopi().setFunction(1,"out");

                var content, button;
                content = $("#content");

                button = webiopi().createGPIOButton(0,"Deur");
                content.append(button); // append button to content div

                button = webiopi().createGPIOButton(1,"Licht");
                content.append(button); // append button to content div

                webiopi().refreshGPIO(true);


        });
        </script>
        <style type="text/css">
                button {
                        display: block;
                        margin: 5px 5px 5px 5px;
                        width: 160px;
                        height: 45px;
                        font-size: 24pt;
                        font-weight: bold;
                        color: black;
                }

                input[type="range"] {
                        display: block;
                        width: 160px;
                        height: 45px;
                }

                .LOW {
                        background-color: White;
                }

                .HIGH {
                        background-color: Green;
                }

                #container {
                    width: 100%;
                }

                #content {
                    margin: 0 auto;
                    max-width: 640px;

                    text-align: center;
                }

                #content button {
                    margin-left: auto;
                    margin-right: auto;
                }

                .video  {
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 0;
                    padding-bottom: 75.3086%;
                }

                .video iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
            height: 100%;
                    border: 0;
                }
      </style>
</head>
<body>


<div id="container">
    <div id="content">
        <div class="video">
            <iframe src="http://192.168.1.13/clean.php" scrolling="no" scale="aspect"></iframe>
        </div>
    </div>
</div>
</body>
</html>

[ Voor 89% gewijzigd door AnD op 21-11-2014 13:14 ]

vrijdag 21 november 2014 13:21

Acties:

Bosmonster

*zucht*

Als ik jouw code in jsfiddle gooi werkt het prima. (met een youtube video althans)

[ Voor 24% gewijzigd door Bosmonster op 21-11-2014 13:21 ]

vrijdag 21 november 2014 13:25

Acties:

AnD

Topicstarter

Dan begrijp ik niet waarom het hier niet werkt.

Net een test gedaan en heb
<iframe src="http://192.168.1.13/clean.php" scrolling="no" scale="aspect"></iframe>
aangespast in
<iframe src="test.png" scrolling="no" scale="aspect"></iframe>
dus een bestand wat op mijn computer stond en dan werkt het hier ook, dus het probleem is de clean.php met andere woorden, de video stream.

[ Voor 80% gewijzigd door AnD op 21-11-2014 13:42 ]

vrijdag 21 november 2014 15:01

Acties:

Bosmonster

*zucht*

gooi die scale="aspect" er eens af

vrijdag 21 november 2014 15:41

Acties:

AnD

Topicstarter

Doet nog altijd hetzelfde, werkt niet.

vrijdag 21 november 2014 15:43

Acties:

Joostje123

AnD schreef op vrijdag 21 november 2014 @ 13:25:
Dan begrijp ik niet waarom het hier niet werkt.

Net een test gedaan en heb
<iframe src="http://192.168.1.13/clean.php" scrolling="no" scale="aspect"></iframe>
aangespast in
<iframe src="test.png" scrolling="no" scale="aspect"></iframe>
dus een bestand wat op mijn computer stond en dan werkt het hier ook, dus het probleem is de clean.php met andere woorden, de video stream.

Tsja als wij niet weten wat erin clean.php gebeurt kunnen we niet echt helpen hier.
Misschien als jij daar geen controle overhebt, zal je heel nasty met !important kunnen werken in CSS styles (heurt niet).

vrijdag 21 november 2014 15:46

Acties:

TERW_DAN

Met een hamer past alles.

Bij voorkeur zou ik in dit geval geen iframe gebruiken, of op z'n minst de code in de iframe aanpassen. Als die keihard een width zet kun je dat in het document waarop je dat ding include niet beïnvloeden op de manier die je wilt (want je CSS is van toepassing op je iframe, niet op de elementen daarin).

vrijdag 21 november 2014 17:18

Acties:

AnD

Topicstarter

Ik heb net eens geken naar dat clean.php bestand en het volgende staat erin.

code:

<!DOCTYPE html>
<html>
  <head>
    <title>RPi Cam Preview</title>
    <script src="script_min.js"></script>
  </head>
  <body onload="setTimeout('init();', 100);">
    <center>
      <div><img id="mjpeg_dest" /></div>
    </center>
  </body>
</html>

Edit: Ik heb net op het net iets gevonden en daar voegen ze style=width:100% toe.
Edit2: Dat lijkt te werken, dank aan allen

code:

<!DOCTYPE html>
<html>
  <head>
    <title>RPi Cam Preview</title>
    <script src="script_min.js"></script>
  </head>
  <body onload="setTimeout('init();', 100);">
    <center>
      <div><img id="mjpeg_dest" style= width:100% /></div>
    </center>
  </body>
</html>

Maar ik denk dat het dan zijn beelden van preview.php haalt.
En daar staat wat meer in:

code:

<!DOCTYPE html>
<html>
  <head>
    <title>RPi Cam Download</title>
  </head>
  <body>
    <p><a href="index.php">Back</a></p>
    <?php
      if(isset($_GET["delete"])) {
        unlink("media/" . $_GET["delete"]);
      }
      if(isset($_GET["delete_all"])) {
        $files = scandir("media");
        foreach($files as $file) unlink("media/$file");
      }
      else if(isset($_GET["file"])) {
        echo "<h1>Preview</h1>";
        if(substr($_GET["file"], -3) == "jpg") echo "<a href='media/" . $_GET["file"] . "' target='_blank'><img src='media/" . $_GET["file"] . "' width='640'></a>";
        else echo "<video width='640' controls><source src='media/" . $_GET["file"] . "' type='video/mp4'>Your browser does not support the video tag.</video>";
        echo "<p><input type='button' value='Download' onclick='window.open(\"download.php?file=" . $_GET["file"] . "\", \"_blank\");'> ";
        echo "<input type='button' value='Delete' onclick='window.location=\"preview.php?delete=" . $_GET["file"] . "\";'></p>";
      }
    ?>
    <h1>Files</h1>
    <?php
      $files = scandir("media");
      if(count($files) == 2) echo "<p>No videos/images saved</p>";
      else {
        foreach($files as $file) {
          if(($file != '.') && ($file != '..')) {
            $fsz = round ((filesize("media/" . $file)) / (1024 * 1024));
            echo "<p><a href='preview.php?file=$file'>$file</a> ($fsz MB)</p>";
          }
        }
        echo "<p><input type='button' value='Delete all' onclick='if(confirm(\"Delete all?\")) {window.location=\"preview.php?delete_all\";}'></p>";
      }
    ?>
  </body>
</html>

[ Voor 8% gewijzigd door AnD op 21-11-2014 17:35 ]