web-dev-qa-db-ja.com

HTML5ライブストリーミング

学校では、HTML5ライブストリームサイトを設定する必要があります。彼らは使用してきたフラッシュストリームプレーヤーを持っていますが、今では代わりにHTML5を使用したいと考えています。これどうやってするの？ビデオタグを使用してみましたが、機能しません。以下は私が持っているコードです。誰かが私を正しい方向に向けることができますか？

<!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="../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>
html5video-streaminghtml5-video
65
Bernhard

そのための可能な代替案：

  1. エンコーダー（VLCやFFmpegなど）を使用して、入力ストリームをOGG形式にパケット化します。たとえば、この場合、VLCを使用して、次のコードでスクリーンキャプチャデバイスをパケット化しました。

    C：\ Program Files\VideoLAN\VLC\vlc.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：アウトキープ

  2. このコードをHTMLページの<video>タグに埋め込みます：

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

これでうまくいくはずです。しかし、それは一種のパフォーマンスの低下であり、AFAIK MP4コンテナタイプは、OGGよりもブラウザ間で優れたサポートを提供する必要があります。

19
Osi

現時点では、一部のブラウザでのみ機能しますが、ファイルが実際にリンクされていないことがわかるので、それが再生されない理由を説明します。

ただし、ライブストリームが必要な場合（これはテストしていません）

チェックアウト RTSPまたはHTML5のRTPを介したストリーミング

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

14
Richard

HTML5のライブストリーミングは、Media Source Extensions（MSE）を使用して可能です-比較的新しいW3C標準： https://www.w3.org/TR/media-source/ MSEはHTML5 <video>タグの拡張。 WebページのJavaScriptは、サーバーからオーディオ/ビデオセグメントを取得し、それらを再生のためにMSEにプッシュできます。取得メカニズムは、HTTPリクエスト（MPEG-DASH）またはWebSocketsを介して実行できます。 2016年9月現在、すべてのデバイスのすべての主要なブラウザーがMSEをサポートしています。 iOSは唯一の例外です。

高レイテンシ（5秒以上）HTML5ライブビデオストリーミングの場合、video.jsまたはWowzaストリーミングエンジンによるMPEG-DASH実装を検討できます。

低レイテンシ、ほぼリアルタイムのHTML5ライブビデオストリーミングについては、EvoStreamメディアサーバー、Unrealメディアサーバー、およびWebRTCをご覧ください。

11
user1390208

RTMPプロトコルはサーバーとflashプレーヤーの間でのみ使用されるため、HTML 5でRTMPプロトコルを使用することはできません。そのため、他のストリーミングプロトコルを使用して、ストリーミングビデオをHTML streaming5で表示できます。

8
Kalai

まず、メディアストリーミングサーバーをセットアップする必要があります。 Wowza、red5、または nginx-rtmp-module を使用できます。必要なOSでドキュメントとセットアップを読んでください。すべてのエンジンはHLS（Appleによって開発されたHttp Live Streamプロトコル）をサポートしています。 configのドキュメントを読む必要があります。 nginx-rtmp-moduleを使用した例：

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

サーバーがセットアップおよび構成に成功した後。 youtubeやtwitchtvなどのストリーミングを開始するには、rtmpエンコーダソフトウェア（OBS、ワイヤーキャストなど）を使用する必要があります。

クライアント側（あなたの場合はブラウザ）では、 Videojs またはJWplayerを使用して、エンドユーザー向けにビデオを再生できます。 Videojsの場合、次のようなことができます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Streaming</title>
    <link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
    <script src="//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>

フラッシュのような他のプラグインを追加する必要はありません（rtmpではなくHLSを使用しているため）。このプレーヤーは、フラッシュを使用せずにブラウザ間でうまく機能します。

8
ypn

素晴らしいライブラリ名 Videojs を使用できます。ここでより有用な情報を見つけることができます。しかし、クイックスタートを使用すると、次のようなことができます。

<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>
3
ypn

Ffmpeg + ffserverを使用します。できます！！！ ffmpeg.orgからffserverの構成ファイルを取得し、それに応じて値を設定できます。

2
Rajditya Shahdeo