HTML5-Live-Streaming

Question 1

Für die Schule muss ich eine HTML5-Live-Stream-Site einrichten. Sie haben einen Flash-Stream-Player, den sie verwendet haben, aber jetzt möchten sie, dass er stattdessen HTML5 verwendet. Wie kann ich das machen? Ich habe versucht, das Video-Tag zu verwenden, aber es funktioniert nicht. Unten ist der Code, den ich habe. Könnte mich jemand in die richtige Richtung weisen?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Deltion Live Streaming</title>
    <script language="javascript" type="text/javascript" src="https://stackoverflow.com/questions/5858936/swfobject.js"></script>
</head>

<body>  

    <video id="movie" width="460" height="306" preload autoplay>
        <source src="rtmp://fl2.sz.xlcdn.com:80/sz=Deltion_College=lb1"  type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
            <!-- HERE THE CODE FOR THE ALTERNATIVE PLAYER (FLASH) WILL BE! -->
    </video>
</body>
</html>

Question 2

Eine mögliche Alternative dazu:

Verwenden Sie einen Encoder (z. B. VLC oder FFmpeg), um Ihren Eingabestream in das OGG-Format zu paketieren. In diesem Fall habe ich beispielsweise VLC verwendet, um das Bildschirmaufnahmegerät mit diesem Code zu paketieren:

C:Program FilesVideoLANVLCvlc.exe -I dummy screen:// :screen-fps=16.000000 :screen-caching=100 :sout=#transcode{vcodec=theo,vb=800,scale=1, width=600,height=480,acodec=mp3}:http{mux=ogg,dst=127.0.0.1:8080/desktop.ogg} :no-sout-rtp-sap :no-sout-standard-sap :ttl= 1 :sout-halten

Betten Sie diesen Code in eine ein <video> Tag in Ihrer HTML-Seite wie folgt:

<video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay" />

Dies sollte den Zweck erfüllen. Es ist jedoch eine Art schlechte Leistung und der AFAIK MP4-Containertyp sollte von Browsern besser unterstützt werden als OGG.

Question 3

Live-Streaming in HTML5 ist über die Verwendung von Media Source Extensions (MSE) – dem relativ neuen W3C-Standard – möglich: https://www.w3.org/TR/media-source/
MSE ist eine Erweiterung von HTML5 <video> Schild; Das Javascript auf der Webseite kann Audio-/Videosegmente vom Server abrufen und sie zur Wiedergabe an MSE senden. Der Abrufmechanismus kann über HTTP-Anforderungen (MPEG-DASH) oder über WebSockets erfolgen. Ab September 2016 unterstützen alle gängigen Browser auf allen Geräten MSE. iOS ist die einzige Ausnahme.

Für HTML5-Live-Videostreaming mit hoher Latenz (5+ Sekunden) können Sie MPEG-DASH-Implementierungen von video.js oder der Wowza-Streaming-Engine in Betracht ziehen.

Für HTML5-Live-Videostreaming mit geringer Latenz und nahezu in Echtzeit werfen Sie einen Blick auf EvoStream-Medienserver, Unreal-Medienserver und WebRTC.

Question 4

Zunächst müssen Sie einen Media-Streaming-Server einrichten. Sie können Wowza, red5 oder verwenden nginx-rtmp-Modul. Lesen Sie die Dokumentation und die Einrichtung auf dem gewünschten Betriebssystem. Alle Engines unterstützen HLS (Http Live Stream Protocol, das von Apple entwickelt wurde). Sie sollten die Dokumentation für config lesen. Beispiel mit nginx-rtmp-Modul:

rtmp {
    server {
        listen 1935; # Listen on standard RTMP port
        chunk_size 4000;

        application show {
            live on;
            # Turn on HLS
            hls on;
            hls_path /mnt/hls/;
            hls_fragment 3;
            hls_playlist_length 60;
            # disable consuming the stream from nginx as rtmp
            deny play all;
        }
    }
} 

server {
    listen 8080;

    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 /mnt/;
    }
}

Nachdem der Server erfolgreich eingerichtet und konfiguriert wurde. Sie müssen eine Rtmp-Encoder-Software (OBS, Wirecast …) verwenden, um mit dem Streaming wie Youtube oder Twitchtv zu beginnen.

Auf der Clientseite (in Ihrem Fall Browser) können Sie verwenden Videojs oder JWplayer, um Videos für Endbenutzer abzuspielen. Sie können für Videojs Folgendes tun:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Streaming</title>
    <link href="https://vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/5.8/video.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
    <source src="http://localhost:8080/hls/stream.m3u8" type="application/x-mpegURL" />
</video>
<script>
    var player = videojs('#player');
</script>
</body>
</html>

Sie müssen keine anderen Plugins wie Flash hinzufügen (weil wir HLS und nicht rtmp verwenden). Dieser Player kann auch ohne Flash browserübergreifend funktionieren.

Question 5

Im Moment funktioniert es nur in einigen Browsern, und soweit ich sehen kann, haben Sie nicht wirklich eine Datei verlinkt, das würde erklären, warum es nicht abgespielt wird.

aber wie Sie einen Live-Stream möchten (mit dem ich nicht getestet habe)

Sehen Sie sich Streaming über RTSP oder RTP in HTML5 an

und http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/25-HTML5-Video-Resources-You-Might-Have-Missed-74010.aspx

Question 6

Es ist nicht möglich, das RTMP-Protokoll in HTML 5 zu verwenden, da das RTMP-Protokoll nur zwischen dem Server und dem verwendet wird Blitz Spieler. Sie können also die anderen Streaming-Protokolle zum Anzeigen der Streaming-Videos in HTML 5 verwenden.

Question 7

Sie können einen fantastischen Bibliotheksnamen verwenden Videojs. Hier finden Sie weitere nützliche Informationen. Aber mit Schnellstart können Sie so etwas tun:

<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.11/video.min.js"></script>
<video id="Video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="auto"
    height="auto" poster="poster.jpg"
    data-setup='{"techOrder": ["flash", "html5", "other supported tech"], "nativeControlsForTouch": true, "controlBar": { "muteToggle": false, "volumeControl": false, "timeDivider": false, "durationDisplay": false, "progressControl": false } }'>
        <source src="rtmp://{domain_server}/{publisher}" type="rtmp/mp4" />
</video>
<script>
    var player = videojs('Video');
    player.play();
</script>

Question 8

Verwenden Sie ffmpeg + ffserver. Es klappt!!! Sie können eine Konfigurationsdatei für ffserver von ffmpeg.org erhalten und die Werte entsprechend einstellen.