How to get live stream from a webpage

Question

I want to add a live stream to my site. Is it possible?

The source: https://istanbuluseyret.ibb.gov.tr/bagdat-caddesi/

<video id="videojs620230c0a8c70_html5_api" class="vjs-tech" preload="auto" autoplay="" loop="" muted="" poster="https://services.ibb.gov.tr/cam_out/wp-content/uploads/sites/4/2021/07/bagdat_caddesi1_05.jpg" data-setup="{&quot;fluid&quot;:true,&quot;plugins&quot;:{&quot;airplayButton&quot;:{}}}" playsinline="" src="blob:https://istanbuluseyret.ibb.gov.tr/539fef53-2de7-4324-bc51-e493701508e6">
        <source src="https://livestream.ibb.gov.tr/cam_turistik/cam_trsk_bagdat_cad_1.stream/playlist.m3u8" type="application/x-mpegURL">
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank" class="vjs-hidden" hidden="hidden">supports HTML5 video</a></p>
    </video>

Answer 1

You cannot use M3U8 files in a <video> tag.

To play the video you must read the M3U8 (text) file and pass the inside links to the <video> tag using a buffer, so this means using MediaSource Extensions (MSE) method. There are tutorials online on how to prepare your video data for MSE

Alternatively just use a ready-to-use video player that understands M3U8 playlists.
One example player is videoJS.
(test your .m3u8 file here: https://videojs.github.io/videojs-contrib-hls/)