Fatal编程技术网

Video streaming 使用HTML查看UDP流（Firefox）

video-streaming

Video streaming 使用HTML查看UDP流（Firefox）,video-streaming,html5-video,vlc,Video Streaming,Html5 Video,Vlc,对于演示项目，我需要将实时UDP视频源嵌入到网页中。由于该程序使用的是传统的Firefox插件，因此该解决方案需要在Firefox v56或更低版本中工作。此流将仅由一个客户端查看，因此解决方案甚至不需要利用多播或允许多个套接字连接 为了明确这方面的要求，以下是我的限制条件和我试图实现的目标： -到特定IP/端口的传入UDP流 -使用Firefox v56或更早版本在网页上显示该视频流 -这是一个无空隙的演示系统，所以我不能使用YouTube或Twitch等流媒体服务 -该网页只需为一个客户端提

对于演示项目，我需要将实时UDP视频源嵌入到网页中。由于该程序使用的是传统的Firefox插件，因此该解决方案需要在Firefox v56或更低版本中工作。此流将仅由一个客户端查看，因此解决方案甚至不需要利用多播或允许多个套接字连接

为了明确这方面的要求，以下是我的限制条件和我试图实现的目标：

-到特定IP/端口的传入UDP流

-使用Firefox v56或更早版本在网页上显示该视频流

-这是一个无空隙的演示系统，所以我不能使用YouTube或Twitch等流媒体服务

-该网页只需为一个客户端提供服务（如果它使解决方案更简单，则只有一台计算机需要访问此视频流）

-我们有几乎无限的CPU处理和RAM（运行此功能的服务器上的内存大于100GHz，256GB），因此，如果有处理密集型解决方案，我们可以追求这一点

到目前为止，我所尝试的：

-使用VLC web插件将视频嵌入网页。这段代码可以在Internet Explorer中使用，但不能在Firefox或Chrome中使用。我不明白为什么它只适用于IE

    <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" 
    codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"
    style= "width: 360px; height: 240px;"
>
    <param name="src" value="udp://@" />

    <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
        width="360px"
        height="240px"
        src="udp://@"
    />        
</object>
-将视频作为HTML5视频对象嵌入。我无法让它与UDP流一起工作。只有当我把它指向一个视频文件时，它才起作用

<html>
  <head>
    <title>HTML5 Live Streaming Test</title>
  </head>
  <body>
    <video width="640" height="400" controls="controls" src="udp://@192.168.3.123:1234">
    </video>
  </body>
</html>


HTML5实时流媒体测试
-我也尝试过一些解决方案，比如使用鳄梨酱显示VM，使用VLC显示流。不幸的是，鳄梨酱对于帧速率敏感的应用不是一个好的解决方案

我已经用头撞了大约6个小时，没有任何进展。考虑到我没有HTML方面的经验，我已经没有想法可以尝试了。

目前我实际上正在从事一个类似的项目

在没有VLC的浏览器中播放UDP流的唯一方法是首先通过ffmpeg运行该流，然后使用VideoJS之类的工具在浏览器中显示生成的播放列表

i、 e

然后

<html>
    <head>
        <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
        <script src="https://unpkg.com/video.js/dist/video.js"></script>
        <script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
    </head>
    <body>
          <div class="column">
              <h3>MUX 1</h3>
              <video-js id="stmux1" class="vjs-default-skin" controls preload="auto" width="280" autoplay>
                  <source src="mux1.m3u8" type="application/x-mpegURL">
              </video-js>        
          </div>
          <script>
              var stmux1 = videojs('stmux1');
          </script>
    </body>
</html>


多路复用器1
var stmux1=videojs（'stmux1'）；

<html>
    <head>
        <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
        <script src="https://unpkg.com/video.js/dist/video.js"></script>
        <script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
    </head>
    <body>
          <div class="column">
              <h3>MUX 1</h3>
              <video-js id="stmux1" class="vjs-default-skin" controls preload="auto" width="280" autoplay>
                  <source src="mux1.m3u8" type="application/x-mpegURL">
              </video-js>        
          </div>
          <script>
              var stmux1 = videojs('stmux1');
          </script>
    </body>
</html>