videojsを使ってrtmpのライブストリームを再生する方法?

私はOBSを使って、ライブストリームをローカルのrtmpサーバ(node-rtsp-rtmp-server)にプッシュしています。 で、VLCメディアプレーヤーでうまく動作しています。 私はちょうどそれをウェブページに置きたいと思い、私はvideojsを見つけました。 これは動作せず、Specified "type" -attribute "rtmp/mp4" is not supported.を返します。 それは私のrtmpサーバーがこのWebページからの要求を受け入れなかったようです。 だから私は何を逃したか? 以下は私のコードです。

<head>
    <meta charset="utf-8">
    <link href="./video-js-6.0.0/video-js.css" rel="stylesheet">
    <script src="./video-js-6.0.0/video.js"></script>
    <script src="./video-js-6.0.0/videojs-flash.min.js"></script>
    <script>
        videojs.options.flash.swf = "./video-js-6.0.0/video-js.swf"
    </script>
</head>
<body>
   <video  id='vid' class='video-js' controls height=300 width=600>
      <source src="rtmp://127.0.0.1:1935/live/pokemon" type="rtmp/mp4"/>
    </video>
    <script>
        var player = videojs('vid');
    </script>
</body>


   Stream Player 

  <script src="video.js"></script>
  <script>videojs.options.flash.swf = "video-js.swf";</script>



   <amp-video 
     id="livestream" 
     class="video-js vjs-default-skin vjs-big-play-centered"
     controls 
     autoplay
     preload="auto" 
     data-setup='{"techorder" : ["flash","html5] }'>

   </amp-video>


data-setup techorder パラメータは、videojs が flash を使用するために必要なようです。

もしそれがうまくいかない場合は、あなたのjavascriptファイルがすべて正常であることを確認してください。video.jsのバージョン6からは、デフォルトでフラッシュをサポートしなくなりました。https://docs.videojs.com/tutorial-faq.html#q-how-can-i-play-rtmp-video-in-videojs

サーバーにnginxを使用しています。

https://obsproject.com/forum/resources/how-to-set-up-your-own-private-rtmp-server-using-nginx.50/です。

https://github.com/arut/nginx-rtmp-moduleです。

video.js と video-js.css ファイルに CDN を使用する場合は、head を次のように置き換えます。



<script src="https://vjs.zencdn.net/5.19/video.js"></script>

注:フラッシュよりもHLSやDASHを学んだ方が時間を有効に使えます。

解説 (0)

RTMPサーバからWebページにストリームを公開するには、2つの方法があります。

  1. RTMPストリームをFlashプレーヤーに埋め込む(Strobe、JwPlayer、FlowPlayer)。
  2. Wowza Streaming Engine などのストリーミングサーバーを使用して、HTML5 形式 (HLS または MPEG DASH) でストリームを配信します。
解説 (1)

ブラウザはRTMPをサポートしていません。 ブラウザ内でRTMPストリームに接続する唯一の方法は、Flashを使用することです。

Media Source ExtensionsでサポートされているDASHなど、より互換性の高い配信プロトコルの利用をご検討ください。

解説 (1)