-1

I'm trying to make a site that I can stream to. I didn't want to use Twitch or Youtube or anything, just independent. So I followed this guide on streaming with HLS and Videojs: https://www.youtube.com/watch?v=sRdDNhALeVo

I have Nginx running. I got a temp folder on my D: drive, and inside of it, is a folder named hls_temp. When I go live on OBS, a folder called stream is created, and inside that is the .m3u8 file, and chunks of my stream (files) are being written into the folder. When I check if it's working by going to http://localhost:8050/index-hls.html, it works. I can see my stream live. Then I implement videojs into a different site of mine (Videojs apparently has native HLS streaming support now), and the source is: <source src="/hls/stream/index.m3u8" type="application/x-mpegURL"> (This is what the index-hls.html file was using and it worked). Doesn't work, videojs just tells me "The media could not be loaded, either because the server or network failed or because the format is not supported.". Then I tried changing it to: "D:/streamtemp/temp/hls_temp/stream/index.m3u8" and now the media player doesn't have the error message anymore, but loads forever. So, a step in the right direction?

I'm assuming the problem is the source can't be a folder on my PC, as HTML doesn't really understand how to read from that. Every example I see online, the source is a link from some file hosting site like streambox. Is that the only way to get your source as your .m3u8 stream? There's no way for example, to put that temp folder in my neocities site storage, and have Nginx write the files there instead of my D: drive? My question really is, how do I get my video source on HTML, to be my .m3u8 file that's on my D: drive? I'm just looking for an answer that doesn't cost money (or at least very little)!

Here's the full HTML file (Let me know if you also need to see something else like my Nginx.config file):

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/video.js@6.7.1/dist/video.js"></script>
<script src="https://unpkg.com/@videojs/http-streaming@0.9.0/dist/videojs-http-streaming.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<title>Who Cares</title>
</head>
  <body>
  <video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="/hls/stream/index.m3u8" type="application/x-mpegURL">
  </video-js>
  
  <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>
  
  <script>
    var player = videojs('my_video_1');
  </script>
</body>
</html>
goeticdingus
  • 1
  • 3

1 Answers1

0

If you want to access files on your computer, use the file URI scheme.

E.g. in your case file:///d:/streamtemp/temp/hls_temp/stream/index.m3u8

Be wary, though -- accessing files stored on a local machine comes with some caveats and if you host this HTML on the server (e.g. over HTTP(S)), this request will most likely be blocked.

If you're running this on NGINX, you should upload this file to your server as well.

I don't know about the contents of your M3U8 file but if it references files via absolute links on your disks, the browser won't be able to load this as well.

boky
  • 815
  • 5
  • 10
  • Okay, so the file URI scheme isn't the preferred option I guess, since I do have the site hosted live, and intend many random viewers to be able and access it. I checked my M3U8 file in Notepad, and didn't see any absolute links, fortunately. As for the Nginx server uploading, how do I do that? I don't think the tutorial I followed included anything similar, can you point me in the right direction? – goeticdingus Mar 10 '21 at 13:07
  • If you intend to serve this to other users than yourself then you certainly can't use the file url. You should put the M3U8 file on the server, next to your HTML file and then use a relative link to said file. – boky Mar 10 '21 at 21:57