html - 如何在自己的 html 中使用 mjpg-streamer？

coder 2023-06-29 原文

我在 go 中编写了一个小型网络服务器来显示温度和我池塘的直播。我使用 mjpg-streamer 在我的 RaspberryPi 上创建流。服务器返回一个 html，我在其中使用 iframe 来显示 mjpg-streamer 的直播。不幸的是，这仅在与 pi 位于同一本地网络中时有效。我想从外部访问它，所以我尝试使用一个小代理来访问流媒体所在的 pi 上的端口。不幸的是，我仍然没有图像(只有默认的“无图像源”图标)。代理似乎有效，因为该网站要求我提供我在 streamer 中配置的登录名和密码。

有没有办法使用代理或其他方式使流从网络外部显示在网页上，或者在不使用 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>

谢谢你的帮助，

最大

最佳答案

您可以将其嵌入 <img>标记将代理处理程序传递给图像源，如下所示:

<img src="http://teichfries.de/stream_simple.html" />

关于html - 如何在自己的 html 中使用 mjpg-streamer？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51051597/

html mjpg-streamer 34 mdl gt go proxy raspberry-pi mjpeg

有关html - 如何在自己的 html 中使用 mjpg-streamer？的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？最佳答案不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
ruby - 在 Ruby 中使用匿名模块 - 2
假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？最佳答案三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于
ruby - 如何在 Ruby 中顺序创建 PI - 2
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
ruby - 使用 ruby 和 savon 的 SOAP 服务 - 2
我正在尝试使用ruby和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

html - 如何在自己的 html 中使用 mjpg-streamer？

有关html - 如何在自己的 html 中使用 mjpg-streamer？的更多相关文章

随机推荐