Viewing UDP stream using HTML (Firefox)

video-streaming html5-video vlc

11,820

I'm actually working on a similar project at the moment.

The only way I've managed to get a UDP stream to play within a browser without VLC is to first run the stream through ffmpeg and then use something like VideoJS to display the resulting playlist within a browser.

i.e.

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 &

then...

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

11,820

DyslexicHobo

Updated on June 04, 2022

Comments

DyslexicHobo almost 2 years
For a demo project, I need to embed a live UDP video feed into a web page. Due to legacy Firefox addons that this program is using, the solution needs to work in Firefox v56 or below. This stream will only be viewed by one client, so the solution doesn't even need to utilize multicast or allow for multiple socket connections.

To make the requirements for this very clear, these are my constraints and what I'm trying to accomplish:

-Incoming UDP stream to a specific IP/port

-Display that video stream on a web page using Firefox v56 or earlier

-This is an airgapped demo system, so I cannot use streaming services such as YouTube or Twitch

-The web page only needs to serve one client (if it makes the solution easier, there is only one computer that will ever need access to this video stream)

-We have virtually unlimited CPU processing and RAM (>100GHz, 256GB RAM on the server running this), so if there is a processing intensive solution we can pursue that.

What I've tried so far:

-Embed the video into the web page using the VLC Web plugin. This code works in Internet Explorer, but not Firefox nor Chrome. I can't figure out why it only works in 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>
```
-Embed the video as an HTML5 video object. I can't get this to work with a UDP stream. It only works if I point it to a video file.
```
<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>
```
-I've also tried solutions like using Guacamole to display a VM displaying the stream using VLC. Unfortunately Guacamole is not a good solution for frame rate-sensitive applications.

I've been banging my head against this for about 6 hours and have made no progress. Considering I have no HTML experience, I've run out of ideas to try.