【发布时间】：2018-12-05 16:32:33
【问题描述】：
我在 go 中写了一个小网络服务器来显示温度和我池塘的直播。我使用 mjpg-streamer 在我的 RaspberryPi 上创建流。 服务器返回一个 html，我在其中使用 iframe 显示 mjpg-streamer 的直播。不幸的是，这只适用于与 pi 在同一本地网络中的蜜蜂。我想从外部访问它，所以我尝试使用一个小代理来访问流媒体所在的 pi 上的端口。不幸的是，我仍然没有图像（只有默认的“无图像源”图标）。代理似乎工作，因为网站要求我提供我在流媒体中配置的登录名和密码。
有没有办法使用代理或其他方式使流从网络外部显示在网页上，或者在不使用 iframe 和代理的情况下将流直接嵌入到我的 html 文件中？
Go 网络服务器：
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)
}
html（现在，请忽略平板电脑和手机的一部分）：
<!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>
感谢您的帮助，
最大
【问题讨论】：
标签： html go proxy raspberry-pi mjpeg