web-dev-qa-db-ja.com

videojsを使用してrtmpライブストリームを再生する方法は？

OBSを使用してライブストリームをローカルのrtmpサーバー（node-rtsp-rtmp-server）にプッシュしていますが、VLCメディアプレーヤーで正常に動作します。私はそれをウェブページに入れたいだけで、videojsを見つけました。動作せず、戻ります指定された“ type” -attribute“ rtmp/mp4”はサポートされていません。私の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>
video.jslive-streaming
8
Natsu
<html>
<head>
  <title> Stream Player </title>
  <link href="video-js.css" rel="stylesheet" type="text/css">
  <script src="video.js"></script>
  <script>videojs.options.flash.swf = "video-js.swf";</script>
</head>
<body>
 <center>
   <video 
     id="livestream" 
     class="video-js vjs-default-skin vjs-big-play-centered"
     controls 
     autoplay
     preload="auto" 
     data-setup='{"techorder" : ["flash","html5] }'>
     <source src="rtmp://127.0.0.1:1935/live/test" type="rtmp/mp4">
   </video>
 </center>
</body>
</html>

Videojsがフラッシュを使用するには、data-setup techorderパラメーターが必要と思われます。

それでもうまくいかない場合は、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を使用する場合は、ヘッドを

<!--The latest versions of video.js no longer support flash or rtmp-->
<link href="https://vjs.zencdn.net/5.19/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.19/video.js"></script>

注：フラッシュよりもHLSまたはDASHの学習に費やす方が良い

4
SuiriuS

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

  1. rTMPストリームをFlashプレーヤー（Strobe、JwPlayer、FlowPlayer）に埋め込みます
  2. wowza Streaming Engineなどをサポートするストリーミングサーバーを使用して、HTML5形式（HLSまたはMPEG DASH）でストリームを配信します。ストリームがまだH264およびAACでエンコードされていない場合は、トランスコーディングが必要になる場合があります
2
TopReseller

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

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

1
Brad

Vlcメディアプレーヤーの使用時に機能する場合は、rtmpサーバーが正常であることを意味します。ブラウザがフラッシュをサポートしているかどうかを確認する必要があります。 chromeの最新バージョンとFirefoxはデフォルトで自動的にフラッシュをブロックすることに気付きました。ウェブサイトでフラッシュを許可するだけで問題を修正できました。video.jsおよびvideojs- flash。Plzは添付のスクリーンショットを参照してください。 enter image description here

0
Qijin