Search code examples
apacheffmpegraspberry-pihttp-live-streamingrtsp

How to embed m3u8 from ffmpeg Raspberry in Network Webserver

I have a Raspberry-Pi converting an RTSP-Stream to HLS-Segments via ffmpeg. Now when I try to embed the Stream,

I use this:

<head>
<!-- CSS  -->
 <link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">
</head>
<video id='hls-example'  class="video-js vjs-default-skin" width="400" height="300" controls>
    <source type="application/x-mpegURL" src="http://192.168.2.45/files/hls/live.m3u8">
</video>
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>

Working like a charm on the local raspberrypi apache2 Server.

Now the problem is, I cannot display this stream with the identical code on a seperate device.

What am I doing wrong? Is there a Firewallport I need to open? I dont think so? I can access the files when opening: http://192.168.2.45/files/hls/ on the seperate device.

Solution

  • The issue was Server-To-Server communication restriction. You need to enable this setting in the Apache Server file. This setting is called CORS.