Post by Hockey on Jul 29, 2019 14:50:27 GMT
I had some free time yesterday, and I decided to do something pretty neat: create my own streaming service, sort of like Twitch but with just the basics: a web page and a video stream. This project turned out to be significantly more difficult than I thought it would be. Essentially, I wanted to be able to stream something from OBS into my browser using my own servers.
I did some research on streaming protocols, and I decided that the best course of action would be to stream to my server with RTMP (old Adobe protocol, using OBS), transcode that RTMP stream into HLS (modern streaming format), and play back that HLS stream with a web library called VideoJS.
At first, I just wanted to get a stream up and running. I used an npm library called node-media-server to create an RTMP stream. This wasn't super difficult to set up: had to do some firewalling and normal stuff, but it didn't give me too much trouble. I used VLC to test if the video stream was up, and it worked! RTMP is a protocol that was created by Adobe, and you need flash player to use it in a browser. Because of this, I needed to transcode RTMP into a different format. HLS seemed to be the most browser supported option. HLS works by creating several files: and m3u8 file, and a ts file. The m3u8 file is essentially a playlist, telling applications what videos go in what order, and ts files are the actual video files.
I got the HLS stream working in VLC, but when I went to go use it in my browser with VideoJS, it just didn't work. I took a fat guess and thought that this might be because I was on http not https for the HLS stream (my browser might be blocking the insecure requests). So, I set up HTTPS using a cert from LetsEncrypt and nginx with a reverse proxy. The HTTPS part went way smoother than I thought it would. That didn't solve my problem, and VideoJS was still giving me trouble.
I looked in the Javascript console, and found an error about CORS (Cross-Origin-Resource-Sharing). It's essentially a security policy for your browser that each server sets. Finally, I realized that in order to use VideoJS in my browser, I was going to have to add a CORS policy to the HTTPS reverse proxy. And so I did. I used the "add_header" directive from NGINX to change my CORS settings, and it worked!
Here's the final result:
---
Just thought I'd share this quick project with you. It was pretty fun and I learned a lot about streaming protocols and CORS.
I did some research on streaming protocols, and I decided that the best course of action would be to stream to my server with RTMP (old Adobe protocol, using OBS), transcode that RTMP stream into HLS (modern streaming format), and play back that HLS stream with a web library called VideoJS.
At first, I just wanted to get a stream up and running. I used an npm library called node-media-server to create an RTMP stream. This wasn't super difficult to set up: had to do some firewalling and normal stuff, but it didn't give me too much trouble. I used VLC to test if the video stream was up, and it worked! RTMP is a protocol that was created by Adobe, and you need flash player to use it in a browser. Because of this, I needed to transcode RTMP into a different format. HLS seemed to be the most browser supported option. HLS works by creating several files: and m3u8 file, and a ts file. The m3u8 file is essentially a playlist, telling applications what videos go in what order, and ts files are the actual video files.
I got the HLS stream working in VLC, but when I went to go use it in my browser with VideoJS, it just didn't work. I took a fat guess and thought that this might be because I was on http not https for the HLS stream (my browser might be blocking the insecure requests). So, I set up HTTPS using a cert from LetsEncrypt and nginx with a reverse proxy. The HTTPS part went way smoother than I thought it would. That didn't solve my problem, and VideoJS was still giving me trouble.
I looked in the Javascript console, and found an error about CORS (Cross-Origin-Resource-Sharing). It's essentially a security policy for your browser that each server sets. Finally, I realized that in order to use VideoJS in my browser, I was going to have to add a CORS policy to the HTTPS reverse proxy. And so I did. I used the "add_header" directive from NGINX to change my CORS settings, and it worked!
Here's the final result:
---
Just thought I'd share this quick project with you. It was pretty fun and I learned a lot about streaming protocols and CORS.
