CODEWITHSUNDEEP
javascripthtml
hend076
hend076

Reputation: 31

videojs with live stream ts

I am trying to get a live stream from an IPTV service into a webpage for a magicmirror project. I am trying to get a single new channel to embed into the page.

I found that the ts file is using this URL, it loads fine in VLC: http://host.net:826/live/hello/413.ts

I created an m3u8 that looks like this:

#EXTM3U

#EXTINF:-1

http://host.net:826/live/hello/413.ts

When I use this code, the file never loads the stream from the provider.

<video-js id="my_video_1" class="center" controls autoplay preload="auto" width="950" height="600">
  <source src="playlist.m3u8" type="application/x-mpegURL">
</video-js>
  </div>
<script>
  var player = videojs('my_video_1', {
    html5: {
      hls: {
        overrideNative: true
      }
    }
  });
</script>

I have run the stream through ffmpeg so that it dumps the files locally and then creates a local m3u8 file. If I then point the above code to that m3u8 file, it loads and runs fine - but I am not live, it's starting to copy the stream local from whenever I start it. So if I refresh the page, the stream begins from the beginning of the locally saved files again.

Upvotes: 3

Views: 7533

Answers (2)

Edenware
Edenware

Reputation: 36

The highlighted response only makes sense if the source server of the stream is broadcasting in both formats with similar links.

You may use mpegts.js to play this stream in the browser.

<script src="mpegts.js"></script>
<video id="videoElement"></video>
<script>
     if (mpegts.getFeatureList().mseLivePlayback) {
         var videoElement = document.getElementById('videoElement');
         var player = mpegts.createPlayer({
             type: 'mse', // could also be mpegts, m2ts, flv
             isLive: true,
             url: 'http://example.com/live/livestream.ts'
         });
         player.attachMediaElement(videoElement);
         player.load();
         player.play();
     }
</script>

This link has a plugin for videojs.

Upvotes: 1

user2491457
user2491457

Reputation: 101

I know its been 6 months since this questions was asked, I recently worked on the similar issues and figured I'll share my solution.

You can do this with hls.js without creating m3u8 index.

Learn more about hls.js at: https://github.com/video-dev/hls.js/

Start by renaming .ts stream URL to .m3u8, there is no need to create m3u8 index http://host.net:826/live/hello/413.ts - > http://host.net:826/live/hello/413.m3u8

HTML:

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<button type="button" onclick="PlayVideo();">Play</button>
<video id="video" controls autoplay crossorigin="anonymous" />

Javascript:

function PlayVideo() {
    var video = document.getElementById('video');
    var videoSrc = "http://host.net:826/live/hello/413.m3u8";
    if (Hls.isSupported()) {
        // The following hlsjsConfig is required for live-stream
        var hlsjsConfig = {
            "maxBufferSize": 0,
            "maxBufferLength": 30,
            "liveSyncDuration": 30,
            "liveMaxLatencyDuration": Infinity
        }
        var hls = new Hls(hlsjsConfig);
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
        });
    } 
    else if (elementId.canPlayType('application/vnd.apple.mpegurl')) {
        elementId.src = videoSrc;
        elementId.addEventListener('loadedmetadata', function () {
            elementId.play();
        });
    }
}

You can further optimize the buffer to what you need it to be by changing values of the hlsjsConfig. See hls.js API details here: https://github.com/dailymotion/hls.js/blob/master/docs/API.md#second-step-instantiate-hls-object-and-bind-it-to-video-element

Upvotes: 3

Related Questions