広告を表示せずに自社サイトでHDビデオ放送用のUstream.tvを飼いならす

私は、以下の機能のためにあなたの興味を引くかもしれないサイトでライブHDビデオ放送を整理する私の経験を提供します：

• ゼロの経済的費用と広告の欠如
• 訪問者の流入に対する抵抗
• 高解像度ビデオ

それともちょっとしたハックがあるからです。 説明されている機能が少なくとも相互に排他的であると思われる場合は、カットをお願いします！



そもそも、一般的なサイトでのライブビデオのブロードキャストに関するいくつかの紹介的な言葉です（このトピックに慣れていない場合は、お気軽にスキップしてください）。



サイトページのカメラから「写真」を見るには、いくつかの方法があります。

最初の最も簡単な方法は、内蔵Webサーバーと「ホワイト」IPアドレスを備えたIPカメラを使用することです。







次に、サイトページで、ゲストがIPカメラのライブビデオを表示するためのページを含むiframeを挿入する必要があります。



利点は非常に「おいしい」です。

• 年中無休のパソコンは不要
• モビリティ-IPカメラはコンパクトで、WiFi経由で接続できます
• サードパーティのサービスとリソースに依存しない
• TFカードにブロードキャストを記録する機能

しかし、そのようなソリューションの範囲は非常に狭いままであるという欠点があります。

• 同時に最大2〜8人の視聴者
• 1点から生じる信頼性の低さ：攻撃者がビデオブロードキャストで12ページを開くだけで十分であり、（通常の）カメラは新しいリクエストへの応答を停止します。

独自のビデオサーバーを使用したソリューションは、柔軟性と信頼性が向上しています。 任意のソースからのビデオをエンコードし、ストリームをメディアサーバーに転送します。メディアサーバーでは、特別なソフトウェア（Adobe Flash Streaming Server、Wowza、Erlyvideo、Red5など）がビデオを全員に配信します。 回路は次のようなものです。







いくつかの利点

• ビデオソースを選択する際の柔軟性
• 閲覧者の数は、サイトが配置されているサーバーの容量にのみ依存します
• 無制限のTFカードビデオ録画

...欠点による相殺以上

• 実装の複雑さ
• ほとんどのソフトウェアソリューションは有料です。
• 安価な仮想ホスティングサイトの条件で実装することはほとんど不可能
• 突然の訪問者の流入に対する不適切

...ライブビデオの遅延を最小限に抑える必要があり、複雑さとコストの問題が背景に消えつつある、このようなソリューションのプロフェッショナルビデオブロードキャストのニッチを決定します。



一般的なサイトで最も興味深いソリューションは、メディアサーバーが大規模なデータセンターの施設にあり、ビデオブロードキャストがサービスとして提供されている場合です。 スキーム：







利点：

• 突然の負荷の急激な増加はひどいものではありません。 言い換えると、（非常に）人気のあるリソースへのリンクを公開しても、システムがクラッシュすることはありません。
• サービスは、できるだけ簡単に使用できるようにします。 サイトにブロードキャストを挿入する問題を含みます。
• ビデオ録画
• 既製の分析
• 放送は、かなりの視聴者がいる放送サービスのウェブサイトで同時に実行できます。

主な欠点は1つです。このようなサービスでは、ビデオブロードキャストは二次的なタスクです。 プライマリ-利益を上げる。 したがって、可能な場合はいつでも「ホイールのスティック」が挿入されます。HD品質が必要な場合-有料、広告なし-追加料金。 ウェブサイトにブロードキャストを挿入し、プレーヤーをカスタマイズする機能も有料サービスパッケージに含まれていることがよくあります。



すべてのサービス業界と同様に、新興企業サービスは定期的に登場し、すべてを無料で/安価にのみ提供していることに言及する価値があります。 私の意見では、このようなダンプサービスは計算なしで作成されたもので、すぐには負荷に対応せず、 stickamのように考慮されるのを待っています。 またはその逆：明確な計算があり、最初のダンピングは視聴者を引き付けるために無料（安い）サービスで実行され、その後、厳格な収益化ポリシーが追求され、すべてが突然支払われてバナーになります。 したがって、私は長年にわたって運用されているサービスのみを考慮し、「そのような機能は現在支払われています」または「改善中です！」という驚きのメールを送信しません 最も適切でない瞬間にサイトのコードを更新してください。



無料で手頃な価格の安価な放送サービスパッケージを考慮して、ustream.tvに決めました。 サービスの無料パッケージであっても、彼は次のような素晴らしい品質を兼ね備えています。

• ビデオのサイズに対する人為的な制限の欠如。 ビデオをストリーミングできるかどうかは、ビットレートとコーデックによって異なります。 2013年にサービスが私から受け入れた最大ビットレートは、VP6コーデックで2.5 Mbps（2011年に6 Mbps）です。 そして、ビデオのサイズはどうなります-サービスは重要ではありません。 1x1と1920x1080の両方が問題なくブロードキャストされます。
• サードパーティリソースへのビデオブロードキャストの挿入に関する制限の欠如
• 外部ビデオソースのサポート

唯一の欠点-（無料パッケージで）ビデオの上に広告を表示する-は簡単に回避できます。

それで、あなたのサイトで高品質のビデオ放送を得るために何をする必要がありますか？

ustream.tvに登録したら 、ユーザーメニューで[ダッシュボード]を選択します







次に、「 その他 」ボタンでリストを開き、「 リモート 」を選択します



「RTMP URL」と「Stream Key」を覚えておいてください。







次に、Adobe Flash Media Live Encoderをダウンロードしてインストールします（Adobe Webサイトでの登録が必要です）。



Adobe Flash Mediaライブエンコーダーのメインウィンドウで、コピーしたアドレス「RTMP URL」を「FMS URL」フィールドに貼り付け、「Stream key」を「Stream」に貼り付けます







ブロードキャストする前に構成する必要がある主なパラメーター：



デバイスはビデオソースです。 ソースは、Webカメラだけでなく、他のDirectShow互換デバイス（TVチューナー、ビデオキャプチャカード、デバイスのソフトウェアエミュレーションなど）でもかまいません。 「仮想ウェブカメラ」のリクエストに応じて、システムに仮想ウェブカメラを表示するプログラム（「ManyCam」など）を選択できます。ビデオソースは、ビデオファイル、実際のウェブカメラ、画像、デスクトップなど、何でもかまいません。 n。 「オンザフライ」で切り替えます。 また、ソースは、RTSP、MJPEG、およびその他の種類のビデオストリームをWebカメラから仮想DirectShowデバイスに変換するIPカメラドライバーを選択できます。 このようなドライバーは、たとえば、webcam 7プログラムのWebサイトで入手できます。



形式 -圧縮のタイプ（h.264 / VP6）。 VP6の使用をお勧めします-これにより、サイトはより高いビットレートを受け入れます。



フレームレート -1秒あたりのフレーム数。



ビットレート - ビットレート （圧縮率）。 より高いビットレート-より良い画像-リアルタイムからのより多くの遅延。 256から2048の値をお勧めします。それ以上では、ブロードキャストが行われない場合があります。



[ スタート]をクリックします-ブロードキャストが実行されています！ ustream Webサイトで、「 Go to Channel 」 リンクを使用して、ブロードキャストページに移動し、「Share」、「<>」、「Copy to Clipboard」をクリックします。 これで、サイトのページに挿入するコードができました。

<iframe width="480" height="302" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct" scrolling="no" frameborder="0" style="border: 0px none transparent;"> </iframe> <br /><a href="http://www.ustream.tv/" style="padding: 2px 0px 4px; width: 400px; background: #ffffff; display: block; color: #000000; font-weight: normal; font-size: 10px; text-decoration: underline; text-align: center;" target="_blank">Broadcasting live with Ustream</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

終了タグの後の部分をすぐに破棄し、 autoplay=true



キーを追加してブロードキャストを自動的に開始し、 iframe



タグのwidth



（幅）とheight



（高さ）の値を必要な値に変更して、必要なビデオサイズを設定します。 次のようになります：

 <iframe width="1920" height="1080" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コピーしたコードをサイトのページに貼り付けると、既に有効なビデオブロードキャストを受信しますが、ブロードキャストが開かれたときに最大22秒の広告の形でボーナスが提供されます。







およびポップアップビデオバナー







良くない。 サービスが広告を表示しないようにするには、「貧しい親relative」として自己紹介する必要があります。サービスを表示するには、ビデオが非常に小さく、広告を載せるのも恥ずかしいです。 ビデオのサイズを、たとえば96x65ピクセルに変更します。

 <iframe width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

広告は奇跡的に消えます！ ただし、放送の意味は（この解像度で）。 したがって、少しだまされた直後に、「マスクをリセット」する必要があります-ビデオサイズを通常の値に戻します。 これは、javascriptに役立ちます。 iframe



を任意のid



（例では「UstreamIframe」）に割り当て、小さなスクリプトでコードを補完します。

 <iframe id="UstreamIframe" width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe> <script> document.getElemetntById('UstreamIframe').style.cssText = "width:1920px;height:1080px;"; </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

できた！ ビデオがあり、広告はありません。 しかし、テストによると、他のタスクで負荷が低いか重い負荷のプロセッサで作業する場合、フラッシュは小さなビデオサイズを修正できない場合がありますが、javascriptを使用して通常の値にすぐに拡大します。 「額に」解決策はタイマーを追加することです。これにより、DOM要素が描画された後にローラーサイズが返されますが、これは実用的な解決策ですが「真」ではありません。 ustreamサーバーとのフラッシュ接続を初期化した直後にサイズを返すのが正しいでしょう。 これを行うには、ustream APIを使用する必要があります。これは、無料パッケージでも利用できるためです。 APIを接続するために必要なのは、外部スクリプトをhead



セクションに追加することだけです。

  <script src="http://static.ustream.tv/js/libs/ustream-embedapi.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、Flashが広告を表示する必要がないことをustreamサーバーに通知するときに呼び出される別の関数のサイズを変更します。

 <iframe id="UstreamIframe" width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe> <script> function restoreSize() { document.getElemetntById('UstreamIframe').style.cssText = "width:1920px;height:1080px;"; } //    API Ustream $ustreamAPI = UstreamEmbed('UstreamIframe'); $ustreamAPI.addListener('playing', restoreSize); </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは広告と戦うのに十分ですが、ロゴリンクとボタンを備えた「独自の」Ustreamコントロールパネルがあり、誰でもコードを取得して自分に貼り付けることができます。 CSSツールと既に接続されているAPIを扱うのは簡単です。 iframe



をdiv



でラップし、意図的にiframe



の高さをdiv



の高さよりも大きくして、Ustreamの下部パネルが正確に合わないようにします。 次に、CSS overflow



プロパティのおかげで、表示されなくなります。

 <div> <iframe id="UstreamIframe" width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="margin-top: -96px;border: 0px none transparent;"></iframe> </div> <script> $videoW = 1920; //   $videoH = 1080; //   window.skipAd = function () { $extraH = 200; $barH = 32; //   Ustream $videoContainer.style.height = ($videoH+$extraH)+"px"; $videoContainer.style.width = $videoW+"px"; $videoContainer.style.marginTop = "-"+($extraH/2-$barH/2)+"px"; $videoContainer.parentNode.style.width = $videoW; $videoContainer.parentNode.style.height = $videoH; } $videoContainer = document.getElementById('UstreamIframe'); $videoContainer.parentNode.style.overflow = 'hidden'; //   CSS $ustreamAPI = UstreamEmbed('UstreamIframe'); $ustreamAPI.addListener('playing', skipAd); </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、「makeweights」のないきれいなビデオができました。 良くないこと-ビデオを制御する機能がまだ必要です。 Ustream APIを使用すると、必要なアクション用の独自のコントロールを簡単に作成できます。 たとえば、ページコードに「一時停止」、「再生」、「ミュート/ミュート解除」ボタンを追加します。

 <button onclick="$ustreamAPI.callMethod('play')"> [ > ] Play </button> <button onclick="$ustreamAPI.callMethod('pause')"> [ || ] Pause </button> <button onclick="$ustreamAPI.callMethod('volume', 0)"> [ ? ] Mute </button> <button onclick="$ustreamAPI.callMethod('volume', 100)"> [ )) ] Unmute </button>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

...そしてすぐに動作します。 コマンドの完全なリストについては、Ustream Embed APIの公式ドキュメントを参照してください。

デモ

完全にコンパイルされたデモページ（クロスドメインポリシーのため、localhostでは動作しません！）：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Video stream demo</title> <script src="http://static.ustream.tv/js/libs/ustream-embedapi.js"></script> </head> <body> <div> <iframe id=UstreamIframe width="96" height="65" src="http://www.ustream.tv/embed/11435186?v=3&autoplay=true&wmode=direct&adfree=1" scrolling="no" frameborder="0" style="margin-top: -96px;border : 0px none transparent;"></iframe> </div> <button onclick="$ustreamAPI.callMethod('play')">[ > ] Play</button> <button onclick="$ustreamAPI.callMethod('pause')">[ || ] Pause</button> <button onclick="$ustreamAPI.callMethod('volume', 0)">[ ? ] Mute</button> <button onclick="$ustreamAPI.callMethod('volume', 100)">[ )) ] Unmute</button> <script> $videoW = 1920; //   $videoH = 1080; //   window.restoreSize = function () { $extraH = 200; $barH = 32; $videoContainer.style.height = ($videoH+$extraH)+"px"; $videoContainer.style.width = $videoW+"px"; $videoContainer.style.marginTop = "-"+($extraH/2-$barH/2)+"px"; $videoContainer.parentNode.style.width = $videoW; $videoContainer.parentNode.style.height = $videoH; } $videoContainer = document.getElementById('UstreamIframe'); $videoContainer.parentNode.style.overflow = 'hidden'; $ustreamAPI = UstreamEmbed('UstreamIframe'); $ustreamAPI.addListener('playing', restoreSize); </script> </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サイトでSSLを使用している場合は、ustreamのビデオアドレスにhttpsを追加する必要もあります（https：//www.ustream.tv/embed/123 ...）



私はもう2年間Ustream.tvサービスを使用していますが、奇妙なことに、条件を厳しくしていません。 おそらく、負荷が増加したため、サーバーが2.5 Mbit / sを超えるストリームを受信することはほとんどなかったため、信頼性のために、2 Mbit / sを超えないストリームを使用します。



提示された経験が、あなたのウェブサイトまたはソーシャルネットワークのページで高品質のビデオ放送を作成するのに役立つことを願っています！