Question

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

为了使这个要求非常明确，这些是我的约束和我想要完成的事情：

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

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

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

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

- 我们实际上拥有无限的CPU处理和RAM（运行此服务器的服务器上的> 100GHz，256GB RAM），因此，如果有一个处理密集型解决方案，我们可以追求它。

到目前为止我尝试过：

- 使用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>

- 我也尝试过使用Guacamole等显示使用VLC显示流的VM的解决方案。不幸的是，Guacamole对于帧速率敏感的应用程序来说不是一个好的解决方案。

我一直在反对这个约6个小时，并没有取得任何进展。考虑到我没有HTML经验，我已经没有想法尝试了。

Answer 1

我此刻正在开展一个类似的项目。

我设法在没有 VLC的浏览器中设置UDP流的唯一方法是首先通过ffmpeg运行流，然后使用类似VideoJS的内容显示生成的播放列表在浏览器中。

即

sudo /home/stuart/bin/ffmpeg -nostdin -v quiet -err_detect ignore_err -re -i "udp://@239.110.10.3:1234?overrun_nonfatal=1&fifo_size=50000000" -c:v libx264 -an -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /usr/share/nginx/html/mux1.m3u8 &

...然后

<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>

使用HTML查看UDP流（Firefox）

1 个答案: