Hopp til innhald

Fagstoff

Nettlesaravspelar for strøyming

Når vi set opp ein lokal strøymeserver, bør det vere lett for brukarane å kople seg til for å følge videostraumen. For å få til det kan vi lage ei HTML-side med nettlesaravspelar for video.
Nettlesar med videoavspelar som står klar til avspeling. Skjermbilete.
Opne bilete i eit nytt vindauge

1. Legg til konfigurasjon for HTML-støtte

Opne Nginx-konfigurasjon i editor.

sudo nano /etc/nginx/nginx.conf

Fjern den nedste sløyfeparentesen "}" i konfigurasjonen og kopier inn konfigurasjonen nedst i dokumentet.

Legg til HTML-konfigurasjon

1#konfigurasjon for førespurnader etter nettside
2        server {
3                listen 80; #portnummer, 80 er standard for web
4                location / {
5                        try_files $uri $uri/ =404;
6
7                root /var/www/html;
8                #prioriteringsliste, viss inga fil er spesifisert i førespurnaden
9                index index.html index.htm index.nginx-debian.html;
10                }
11        }
12}

Trykk tastane Ctrl + X for å gå ut av editoren. Stadfest lagring av endringane.

2. Restart Nginx

Restart Nginx for at ny konfigurasjon skal bli teken i bruk.

sudo systemctl restart nginx

Ved feil bruker du statuskommandoen under for feilsøking.

sudo systemctl status nginx

Bruk tastane Ctrl + Z for å komme ut av statusoversikta.

3. Teste standardnettside

Nettlesarutklipp med teksten "Welcome to nginx!" øvst. Skjermbilete.
Opne bilete i eit nytt vindauge

Tidlegare i Nginx-installasjonen testa du standard-HTML-sida som kjem med Nginx.

Etter at du byrja å lage din eigen konfigurasjon, vart denne sida utilgjengeleg. No har du lagt til ny konfigurasjon som gjer at sida igjen er tilgjengeleg.

Gå i nettlesaren og skriv inn IP-adressa til strøymeserveren din.

4. Lag statisk nettside for nettbasert strøymeavspelar

Det finst ei rekke nettlesarbaserte avspelarar for videostraumar, i denne guiden blir Video.js brukt.

I dette oppsettet blir sjølve videoavspelaren henta direkte frå sidene til Video.js-prosjektet. For oppsett som er utan nettilgang må Video.js-filene blir lasta ned på strøymeserveren. Det går vi ikkje gjennom i denne guiden.

Lag HTML-side for avspelaren.

sudo nano /var/www/html/index.html

Kopier inn og juster HTML-koden til oppsettet ditt. Spesielt IP-adressa etter "source src=" må bytast til IP-adressa til serveren din.

Enkel index.html-side

1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset=utf-8 />
5		<title>Strøymetest</title>
6		<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
7		<script src="https://unpkg.com/video.js/dist/video.js"></script>
8		<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
9	</head>
10	<body>
11		<video id="video1" class="video-js vjs-fluid vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'>
12		<source src="http://192.168.1.25:8080/stream.m3u8" type="application/x-mpegURL">
13	</video>
14  
15	<script>
16		var player = videojs('video1');
17		player.responsive(true);
18		player.play();
19		</script>	
20  
21</body>
22</html>

Trykk tastane Ctrl + X for å gå ut. Stadfest lagring av endringane.

5. Teste nettlesaravspelar

For testen treng du ein aktiv RTMP-videostraum frå OBS eller eit anna strøymeprogram til serveren din. Sjekk at straumen inn mot serveren din er aktiv før du går vidare.

Maskina du prøver å opne straum frå, kan vere den same som du strøymer ut med, eller det kan vere ei anna maskin som er på det same lokale nettverket som serveren din.

Nettlesarvindauge med fullskjermavspelar som viser eit landskapsbilete med fjord og høge fjell. Skjermbilete.
Opne bilete i eit nytt vindauge

Gå i nettlesaren på ei maskin som er kopla til det same nettverket som strøymeserveren din. Skriv inn IP-adressa på serveren din.

Viss oppsettet fungerer, vil du få opp ein nettlesaravspelar som du kan starte for å kople deg til videostraumen du har sett opp.

Ein enkelt strøymeserver vil ikkje kunne betene veldig mange sjåarar samtidig. Derfor bør du teste grundig før eventuell strøyming.

Ved feil

Viss videostraumen ikkje vil starte i nettlesaravspelaren, kan du sjekke ut følgande moglege feilkjelder og triks.

Er maskina du prøver å spele av med, i det same nettverket som strøymeserveren din?

Har maskina du prøver å spele av frå, tilgang til internett?

Sjekk at du har ein aktiv RTMP-videostraum frå OBS til serveren din.

Sjekk HTML-koden i Index.html-fila på serveren.

Restart videostraumen frå OBS til strøymeserveren.

Sjekk at Nginx-konfigurasjonen er rett. Forsøk gjerne med ein restart av Nginx-webserveren.

CC BY-SASkrive av Tron Bårdgård.
Sist fagleg oppdatert 27.03.2022

Læringsressursar

Enkeltressursar for oppsett av strøymeserver