2017-04-07 19 views
4

ライブストリームをローカルのrtmpサーバー(node-rtsp-rtmp-server)、 にプッシュするためにOBSを使用しており、VLCメディアプレーヤーでうまく動作します。 私はちょうどそれをウェブページに入れたいと思います。私はvideojsを見つけました。 動作しませんでした。指定された "type"属性 "rtmp/mp4"はサポートされていません。 私のrtmpサーバーはこのWebページからのリクエストを敬遠してくれなかったようです。 私は何を逃したのですか? ここに私のコードです:videojsを使用してrtmpライブストリームを再生する方法

<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> 
+0

私は同じ問題を抱えています。どうやらvideojsにはバージョン6.0からのFlash Playerがなくなり、RTMPを再生できないことを意味します(ソケットなしでRTMPを開く方法がないため、プラグインなしのソケットはありません) – pqnet

答えて

1

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

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

1

WebページへのRTMPサーバーからストリームをパブリッシュするには、2つのオプションがあります:

  1. には、FlashプレーヤーでRTMPストリーム(ストロボ、JwPlayer、FlowPlayer)
  2. はHTML5でストリームを配信埋め込みますWowzaストリーミングエンジンのようなストリーミングサーバを使用して、フォーマット(HLSまたはMPEG DASH)あなたのストリームがすでにH264とAAC
2

でエンコードされていない場合、これはまた、これは私

<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" width="600" height="300" 
    data-setup='{"techorder" : ["flash"] }'> 
     <source src="rtmp://10.0.0.35:1935/live/test" type="rtmp/mp4"> 
    </video> 
</center> 
</body> 
</html> 

はあなたがあなたのタイプでは「/」タイプミスがあるかもしれないように見えるためにどのような作品であるトランスコーディングが必要な場合があります。 videojsがフラッシュを使用するには、data-setup techorderパラメータが必要であると思われます。

その場合、javascriptファイルがすべて適切であることを確認してください。

私のサーバーには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

-1

VLCメディアプレーヤーを使用している場合、それが動作する場合、それはあなたのRTMPサーバーがOKであることを意味します。 ブラウザのサポートが点滅するかどうかをチェックする必要があります。 ChromeとFirefoxの最新バージョンでは、デフォルトで自動的にフラッシュがブロックされることがわかったので、私たちはウェブサイト上のフラッシュを許可するだけで問題を解決できました。 video.jsとvideojs-flashに間違いはありませんでした。 Plzは添付のスクリーンショットを参照してください。 enter image description here

+0

この回答はありませんサイトの所有者を実際に助けます(ユーザーがサイトに特別なアクセス許可を与えることを期待していないため、このような特別なアクセス許可を求めるのは難しいため)。現代のブラウザでは、正当な理由でFlashコンテンツを信頼できないという問題があります。 – Ghedipunk