:::: MENU ::::
Browsing posts in: Coding

Text Breaker Upper

I got to make something useful! I’m part of a bunch of photography groups on Facebook, and stumbled across this post earlier this evening.

I have no idea about the use case, or why the service he is using doesn’t have the capacity to store strings longer than 325 characters.

Fun fact: MySQL LONGTEXT stores over 4 billion characters.

I knew it would be simple enough to do achieve, so quickly threw together http://breakup.michaelrtm.me/ as a solution. It is a simple form that accepts a “chunk size” and “text”. It automatically delimits by semicolons, though I suppose that could have been optional and set automatically.

I used Laravel (even though it could have been a simple single page script) because I have never needed to set a scheduled task before, and thought this would be a good opportunity to try it out. Turns out it was super simple!

If you’re interested, check out the source here. If you’re one of my not geek friends, and wish to see the main part of the logic, check out this file (I’ve even added a load of comments so you can understand it!)


House Points App

I’ve just released my first ever public github repo!

It’s a little app that I started after my students completed a project where they had to use PowerPoint to design an app to keep track of house points. I threw this together as a small project for myself, and possibly to implement at the school in the future.

It is my first single page application, and implements Vue.js, vuex and vue-router. I want to ditch Bootstrap from the front end and work on the transition animations.

I’ve started to drive out the newest features to the back-end using TDD. Should probably look at testing the front end now. I think I use Dusk for that, but haven’t look at that at all.

Looking for critical feedback on the back-end code if anyone is interested. I’m well aware the front end is messy as all hell.



Setting up HLS live streaming server using OBS, NGINX + nginx-rtmp-module on Windows 10 for a local network

My work is currently undergoing some serious renovations. We have lost 6 classrooms, an art room, the music room and the gym/hall to the renovations, and they’ll be out for at least two terms. This means how I’m delivering my lessons has changed, as I no longer have a music room to operate out of. We also need a plan for how to address the entire school for assemblies and other whole school meetings.

Our sister school in China has over 5000 pupils, and each day they are addressed by an internal CCTV network. At the end of last year I decided that something similar to this would be a good thing to setup at our school to help alleviate the pressure of trying to use a PA system to talk to the students each Monday morning, and would also provide opportunities for my extension Digital Tech kids to have some hands on experience running a live web stream.

Get Nginx

To get started, you are going to need nginx with the RTMP module. You can find that here. (The last free version to be compiled with the RTMP module was 1.7.12.1)

I made two quick batch scripts to start and stop the server, and threw them onto my desktop.

@echo off
title Start Stream
cd /d "C:\nginx"
start nginx
exit

and

@echo off
title Stop Stream
cd /d "C:\nginx"
nginx.exe -s stop
exit

Nginx Configuration

rtmp module configuration

The next step is to simply configure nginx to work as an rtmp server.

rtmp {
    server {
        listen 1935;
        allow play all;
        chunk_size 4000;

        application live {
            live on;
            allow publish all;
            allow play all;
        }
    }
}

After the rtmp module is configured, you can point OBS to stream to

rtmp://127.0.0.1/live/

If, for example, you gave it a stream ID of myawesomestream. You can then access the stream from VLC at

rtmp://127.0.0.1/live/myawesomestream

It was here I discovered that a straight up rtmp server wasn’t going to cut it for what I wanted to do.

Enable HLS

HLS is HTTP Live Streaming. It breaks the stream up into small fragments that are then played seamlessly, unlike the rtmp feed.

application live {
    ...
    #enable HLS
    hls on;
    hls_path "c:/nginx/html/hls";
    hls_fragment 3;
    hls_playlist_length 60;
}

http server configuration

Obviously, to access a HTTP Live stream we are going to need a HTTP server.

Still in our nginx.conf, but below our rtmp module we stick this

http {
    sendfile off;
    tcp_nopush on;
    directio 512;
    include mime.types;
    default_type application/octet-stream;

    server {
        listen 80;

        location / {
            root "c:/nginx/html";
        }

        location /hls {
            # Disable cache
            add_header Cache-Control no-cache;

            # CORS setup
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            add_header 'Access-Control-Allow-Headers' 'Range';

            # allow CORS preflight requests
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Headers' 'Range';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
            }

            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }

            root "c:/nginx/html/";
        }
    }   
}

I’m not going to pretend I know what all of that means. I got most of it from other articles, and it works.

DISCLAIMER

I’m fairly sure the CORS stuff allows for some dodgy cross-browser stuff, so just be aware and use at your own risk. I haven’t had time to fiddle and see what the bare minimum is to get this running. I needed it up!

Now when we push our stream from OBS to

http://127.0.0.1/live

and set our stream key (let’s say the stream key is still myawesomestream)

The HLS playlist can be found at

http://127.0.0.1/hls/myawesomestream.m3u8

Viewing the feed in your web browser

Finally, to access the feed, you’ll need a landing page

Pull in the following scripts

<script src="//vjs.zencdn.net/5.8/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.5.0/videojs-contrib-hls.min.js"></script>

You’ll also need the stylesheet for videojs

<link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">

Then in your body, use a html5 video that points to your m3u8 playlist, and a script to activate the videojs plugin

<video id="player" class="video-js vjs-default-skin height="384" width="680" controls preload="none">
     <source src="http://localhost/hls/stream.m3u8" type="application/x-mpegURL" />
</video>

<script>
    var player = videojs('#player');
</script>

Of course, your video source will need to be the ip address (or host name)  of the nginx server. Any computer on the network should be able to stream to the server.

Final comments

I’m not an expert on this by far, but for all of my searching, I couldn’t find an article or resource for how to do this on Windows. I’m up for any feedback you can give in regards to the efficiency of the setup. This is my first lengthy tutorial, so all feedback would be appreciated! Good luck!

References for this article include (but are not limited to):
https://obsproject.com/forum/resources/how-to-set-up-your-own-private-rtmp-server-using-nginx.50/

and
https://docs.peer5.com/guides/setting-up-hls-live-streaming-server-using-nginx/


A reminder why I shouldn’t judge my skills

ALL THE TIME I judge myself on my ability, or lack-thereof, with coding. I am not a CS major, and never have been. I can hack away at PHP and if you give me long enough I might be able to tell you what some basic Python does… but seeing these posts makes me feel validated for the amount of time I spend on StackOverflow or in the darkest recesses of random bulletin boards looking for an answer.


Coding and Me

I’m actually really nervous to write about coding. I realise very few people will actually read this, so I suppose I shouldn’t stress, but all the same I can’t seem to help it. I know that I certainly won’t have anything amazing to say like some of the people I follow on Twitter!

amiga_500_system_by_amiga1200

I first started programming when I was very young. We got our first computer – an Amiga 500 – in 1991. I would have been 6 at the time.

Continue Reading