web-dev-qa-db-ja.com

HTML5 WebSocketを使用したWebベースのリアルタイムビデオチャットの実装

HTML5 WebSocketを使用してWebアプリケーションにボイス/ビデオオーバーIPを実装する方法を知っている人はいますか？

これをPHPまたはPython）で実装できたらいいと思います。（残念ながら）現時点では他のプログラミング言語を知らないからです。

良いチュートリアルと、私が支払わなければならない既にビルドされたソリューションがあります。

pdate1：​​
ビデオが追加されたのは、オーディオ/ VoIP関連だけではないためです

pdate2：
最初のHTML5ビデオ会議アプリは既に作成されています。自分の答えを参照してください

pythonvideohtml5audiowebsocket
40
Wouter Dorgelo

HTML5のみを使用する場合は、HTML Media Captureドラフト（利用可能 here ）を実装するブラウザが必要ですマイクから生データにアクセスするため。

このデータを入手したら、ネットワーク経由で送信する必要があります。 Websocketは、サーバーとの十分に高速なラウンドトリップ（ローカルオーディオデータの送信とリモートオーディオデータの受信を同時に行う）を行うHTML5オプションです。

Pythonについて言及しているので、websocketの twisted implementation を調べることをお勧めします。

すべてのクライアントをcallerIDを使用してwebsocketサーバーに「登録」することができるため、サーバーは特定のcallerIDの検索場所を認識できます。

サーバーには、caller1がcaller2を「招待」する「invite」APIが必要です。

コールが設定され、各クライアントが音声データの送信を開始すると、サーバーはこの音声データを相手に送信できるようになります。

音声データを受信すると、ブラウザは、おそらくHTML5オーディオタグを使用して、この音声データをスピーカーで再生する必要があります。

これを行うには、「トリック」を使用せざるを得ない場合があります。websocketサーバーが生のオーディオデータをクライアントに転送する代わりに、2つの「無限」ファイルをシミュレートする必要がある場合があります。

  1. caller1.wav：caller1マイクでキャプチャされたサウンド
  2. caller2.wav：caller2マイクでキャプチャされたサウンド

caller1ブラウザーは、呼び出しが設定されると、caller2.wavをaudio.src属性に追加し（websocketを介してこのイベントがcaller1に通知されます）、できればpythonサーバーが生のオーディオデータをcaller2.wavを受信すると、再生を開始します。

これは、あなたがハックしようとしているクールなプロトタイプのように聞こえます！

あなたの旅に幸運を。

ジェローム・ワグナー

27
Jerome WAGNER

エリクソンが最初のHTML5ビデオ会議アプリを作成したようです。

彼らが使用した技術：

  • デバイス要素とストリームAPIを実装しました（デバイス要素のGUIは現在JavaScript/CSSで記述されています）
  • ストリームURLをメディアバックエンドの対応するパイプラインにマップするMediaStreamManagerを追加しました
  • 関連するメディア処理とトランスポートを制御するMediaStreamTransceiverが追加されました
  • WebSocketプロトコルでのバイナリデータのサポートを追加

参照： labs.ericsson.com ：

YouTubeのビデオ： HTML5を超えて：音声とビデオの会話デモ| Ericsson Labs

残念ながら、エリクソンはdevice_dialog.js（まだ）。

7
Wouter Dorgelo

WebRTCは答えかもしれません： http://www.webrtc.org/running-the-demos（現在のみChrome MediaStreamフラグを有効にしたカナリア）

デモを参照してください： https://apprtc.appspot.com （適切なブラウザーで視聴していることを確認してください）およびコード http://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc /

私が書いている理由は...私は本当に安いAndroidタブレットを持っていて、SkypeもVtokもGoogle Voiceも米国外で利用できません。私はHTML5ベースのソリューションを見つける必要があります。 m Opera Mobile 12を実行して http://html5demos.com/ が正しく動作する

3
Mars Robertson

@ work/gotta迅速に

JavaScriptを確認してください getUserMedia （CanIUse）- [〜＃〜] api [〜＃〜] （W3）

1
Cody

webrtcが今の答えです。

node.jsスタックの場合- http://www.easyrtc.com/ を見ることができます。 IEは、webrtcを機能させるAPIのサポートをまだ構築していません。

0
saurshaz