Issue
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.
Answered By - FunnyO Answer Checked By - David Goodson (WPSolving Volunteer)