I wrote a little webserver in go to show temperature and a livestream of my pond. I used the mjpg-streamer to create the stream on my RaspberryPi. The server gives back a html in which I use an iframe to show the livestream of the mjpg-streamer. Unfortunately this only works while beeing in the same local network as the pi. I want to access it from outside so I tried using a little proxy to access the port on the pi where the streamer sits. Unfortunately, I still get no image (only the default 'no-image-source' icon). The proxy seems to work, because the website asks me for the login and password I configuered within the streamer.
Is there a way to make the stream show up on the webpage from outside the network using the proxy or something else, or to embed the stream directly into my html file without the use of an iframe and proxy?
The go webserver:
package main
import (
"net/http"
"strings"
"os"
"os/exec"
"net/url"
"net/http/httputil"
"html/template"
)
const MYFILE = "temperatures.csv"
func readFile() (string){
file, err := os.Open(MYFILE)
if err != nil {
panic(err)
}
defer file.Close()
buf := make([]byte, 10)
stat, err := os.Stat(MYFILE)
start := stat.Size() - 10
_, err = file.ReadAt(buf, start)
xs := string(buf)
xs = strings.Split(xs,",")[1]
xs = xs[:len(xs)-2]
xs = xs + " °C"
return xs
}
func main() {
go func() {
exec.Command("python", "/home/pi/tempsensor.py").Run()
}()
go func() {
exec.Command("python", "/home/pi/go/src/webserver/display_temp.py", "-d", "sh1106").Run()
}()
go func() {
exec.Command("python", "/home/pi/go/src/webserver/startVid.py").Run()
}()
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
//exec.Command("python","/home/pi/pyplot.py").Run()
t, _ := template.ParseFiles("home.html")
t.Execute(w, readFile())
})
http.HandleFunc("/fix.png", func(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "/home/pi/fix.png")
})
http.HandleFunc("/fish.svg", func(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "/home/pi/go/src/webserver/resources/fish.svg")
})
u, _ := url.Parse("http://localhost:9000")
http.Handle("/stream_simple.html", httputil.NewSingleHostReverseProxy(u))
http.ListenAndServe(":8080", nil)
}
the html (for now, please just ignore the tablet an phone part of it):
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-lime.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="shortcut icon" href="/fish.svg">
<link rel="icon" href="/fish.svg">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Teichüberwachung Familie Fries</title>
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
</head>
<body bgcolor="#5b5b5b">
<style>
a.mdl-js-ripple-effect { position: relative; }
.mdl-navigation__link:hover {
color: #b4fd64;
}
.mdl-navigation__link:hover {
border-bottom-style: solid;
}
.mdl-grid {
margin-top: 50px;
margin-bottom: 50px;
max-width: 1000px;
}
.mdl-button {
margin-right: 20px;
}
</style>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">
<a href="/internal">
<img href="/internal" class="mdl-logo-image" src="/fish.svg" height="42">
</a>
</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation">
<form method="post" action="/logout">
<button class="mdl-button mdl-button--accent mdl-js-button mdl-js-ripple-effect">Log out</button>
</form>
</nav>
</div>
</header>
<main class="mdl-layout__content">
<!-- start of content -->
<style>
.mdl-card{
min-height: 0px;
}
.big.mdl-card-video.mdl-card {
width: 90%;
height: 770px;
margin-top: 50px;
margin-bottom: 50px;
}
.medium.mdl-card-video.mdl-card {
height: 386px;
}
.small.mdl-card-video.mdl-card {
height: 219px;
}
.big.mdl-card-temperature.mdl-card {
width: 90%;
margin-top: 50px;
margin-bottom: 50px;
}
.medium.mdl-card-temperature.mdl-card {
height: 192px;
}
.small.mdl-card-temperature.mdl-card {
height: 102px;
}
.mdl-card-video > .mdl-card__title {
color: #fff;
text-align: center;
}
.mdl-card-video > .mdl-card__menu {
color: #fff;
}
.mdl-card-temperature > .mdl-card__menu {
color: #fff;
}
.frame {
border:none;
background-color:none;
margin: auto; align:middle;
/*height:auto; width:100%;*/
/*-moz-transform:scale(0.60);
-moz-transform-origin: 0 0;
-o-transform: scale(0.60);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.65);
-webkit-transform-origin: 20% 0;*/
}
.temp {
padding: 5px;
}
@media (max-width: 999px) {
.mdl-card-temperature.mdl-card {
width: 85%;
margin-top: 50px;
margin-bottom: 50px;
}
.mdl-card-video.mdl-card {
width: 85%;
margin-top: 50px;
margin-bottom: 50px;
}
}
</style>
<center>
<!-- Desktop Version -->
<div class="big mdl-card-video mdl-card mdl-shadow--8dp mdl mdl-cell--hide-phone mdl-cell--hide-tablet">
<div class="mdl-card__media">
<center>
<button class="mdl-button mdl-button--colored " style="font-size: 200%;">{{.}}</button>
</center>
</div>
<div class="mdl-card__media ">
<iframe class='frame' height=900px src="http://teichfries.de/stream_simple.html" scrolling=no></iframe>
</div>
</div>
<div class="big mdl-card-temperature mdl-card mdl-shadow--8dp mdl-cell--hide-phone mdl-cell--hide-tablet">
<div class="mdl-card__media ">
<img class="temp" src='http://192.168.178.57:8080/fix.png' style='width: calc(100% - 10px);'>
</div>
</div>
<!-- Tablet Version -->
<div class="medium mdl-card-video mdl-card mdl-shadow--8dp mdl mdl-cell--hide-desktop mdl-cell--hide-phone">
<div class="mdl-card__media">
<center>
<button class="mdl-button mdl-button--colored " style="font-size: 200%;">{{.}}</button>
</center>
</div>
<div class="mdl-card__media ">
<img class="temp" src='http://teichfries.de/?action=snapshot' style='width: calc(100% - 10px);'>
</div>
</div>
<div class="medium mdl-card-temperature mdl-card mdl-shadow--8dp mdl-cell--hide-desktop mdl-cell--hide-phone">
<div class="mdl-card__media ">
<img class="temp" src='http://192.168.178.57:8080/fix.png' style='width: calc(100% - 10px);'>
</div>
</div>
<!-- Phone Version -->
<div class="small mdl-card-video mdl-card mdl-shadow--8dp mdl mdl-cell--hide-desktop mdl-cell--hide-tablet">
<div class="mdl-card__media">
<center>
<button class="mdl-button mdl-button--colored " style="font-size: 200%;">{{.}}</button>
</center>
</div>
<div class="mdl-card__media ">
<img class="temp" src='http://192.168.178.57:9000/?action=snapshot' style='width: calc(100% - 10px);'>
</div>
</div>
<div class="small mdl-card-temperature mdl-card mdl-shadow--8dp mdl-cell--hide-desktop mdl-cell--hide-tablet">
<div class="mdl-card__media ">
<img class="temp" src='http://192.168.178.57:8080/fix.png' style='width: calc(100% - 10px);'>
</div>
</div>
</center>
</main>
</div>
</body>
Thanks for your help,
Max
