JavaScript スクリプトを通じてビデオ通話を簡単に実装-jsチュートリアル-php.cn

JavaScript スクリプトを通じてビデオ通話を簡単に実装

高洛峰

リリース： 2016-11-26 16:30:57

オリジナル

3879 人が閲覧しました

ビデオチャットルーム

学習を通じて、私自身も簡単なサンプルを作成しました。IE、Firefox、Chrome などの Windows では、数十行の JavaScript スクリプトで簡単にビデオ通話を実装できます。プラットフォーム上の主流ブラウザは問題なく動作します。私の結果を以下に共有します。レイアウトコードは投稿せず、JavaScript スクリプトのみを投稿します。

1. AnyChat for Web SDK ライブラリをロードします

まず、AnyChat for Web SDK ライブラリをロードする必要があります

[html]

2. グローバル変数の定義

[javascript]

var mDefaultServerAddr = "demo.anychat.cn"; // デフォルトのサーバーアドレス

var mDefault ServerPort = 8906; // デフォルトのサーバーポート番号

3. Web ページがロードされた後、プラグインがインストールされているかどうかを確認します。プラグインは最新です

[javascript]

// ページがロードされ初期化されます

function LogicInit() { // 初期化

var NEED_ANYCHAT_APILEVEL = "0"

var errorcode = BRAC_InitSDK(NEED_ANYCHAT_APILEVEL);

if (errorcode == GV_ERR_SUCCESS) // プラグインの初期化が成功しました

document.getElementById("login_div").style.display = "block" // ログインインターフェイスを表示します

else // プラグインはインストールされていないか、プラグインのバージョンが古すぎるため、プラグインのダウンロードインターフェイスが表示されます。ログイン関数を呼び出します

ここではサーバーのアドレスとポートがハードコードされており、ユーザーを入力してログインできます。 name

ログインボタンクリックイベント:

[javascript]

// システムにログインします

function LoginToHall() {

BRAC_Connect (mDefaultServerAddr, mDefaultServerPort) // サーバーに接続します

BRAC_Login(document. getElementById("username").value, "", 0); // システムにログインします。パスワードが空の場合でもログインできます

}

ログイン後、サーバー接続関数が実行されます。最初にトリガーされる

[javascript]

// クライアントはサーバーに接続します。bSuccess は接続が成功したかどうかを示し、errorcode はエラーコードを示します

function OnAnyChatConnect(bSuccess, errorcode) {

if (errorcode == 0) {} // サーバーに正常に接続します

Else Alert ("" Connection Server Failure "); // 接続失敗のプロンプトが表示されます。この時点では、システムはログインシステム関数をトリガーしません

ログインシステムコールバック関数

[javascript

// クライアントはシステムにログインします。dwUserId は自身のユーザー ID 番号を表します。errorcode はログイン結果を表します: 0 成功、それ以外の場合はエラーコードです。エラーコードの定義を参照してください。

function OnAnyChatLoginSystem( dwUserId, errorcode ) {

if (errorcode == 0) { // ログインに成功すると、ロビーインターフェイスが表示され、ログインインターフェイスが非表示になります。失敗した場合は何もせず、現状を維持します

. d("hall_div"). style.display = "block" // ロビーインターフェイスを表示します

}

5.ルームに入る関数

ログインに成功すると、ロビーが表示されます。ロビーには入力ボックスとルームに入るボタンがあります

ルームに入るボタンをクリックして関数を呼び出します

[javascript]

// room

function EnterRoom(){ // カスタムルームに入る

BRAC_EnterRoom(parseInt(document.getElementById("customroomid").value), "", 0); // ルームに入る

}

コールバック関数をトリガーするためにルームに入る

[javascript]

// クライアントがルームに入ります。dwRoomId は入ったルームの ID 番号を示し、エラーコードはルームに入るかどうかを示します: 0 は正常に入力されました。それ以外の場合はエラーコードです

function OnAnyChatEnterRoom(dwRoomId, errorcode) {

if (errorcode) == 0) { // ルームへの入室に成功すると、ルームインターフェースが表示され、ルームへの入室に失敗した場合は何も行われません。 document.getElementById("hall_div").style.display = "none" ; // Lobbyインターフェイスを非表示にします。 document.getElementById("AnyChatLocalVideoDiv"), "ANYCHAT_VIDEO_LOCAL"); s の

BRAC_SetVideoPos(0, document.getElementById ("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE") ;

}

ルームに入ると、オンラインユーザーコールバック関数がトリガーされます

[javascript]

// 現在のルームのオンラインユーザー情報を受け取った後、ルームの後にTriggeredを1回入力します, dwUserCount はオンラインユーザー (自分自身を含む) の数を表し、dwRoomId はルーム ID を表します。 = -1) { // mTargetUserId は、最後のビデオセッションのユーザー ID をカスタム変数として表します BRAC_UserCameraControl(mTargetUserId, 0) // リモートビデオをオフにします

BRAC_U serSpeakControl(mTargetUserId, 0);

mTargetUserId = -1;

}

if (dwUserCount > 1) // この関数では、オンラインユーザーがいるかどうかを判断し、存在する場合はリモートビデオの 1 つを開きます

SetTheVideo();

}

ユーザーがルームから退出するとき、リモートユーザーであるかどうかを判断し、対応する操作を実行します

[javascript]

// ユーザーがルームに入る(退室する)こと、dwUserIdはユーザーID番号を示し、bEnterRoomはそれを示しますユーザーがルームに入る (1) か退出する (0) か

if (mTargetUserId == dwUserId)

mTargetUserId = -1;

BRAC_SendTextMessage(0, 0, document.getElementById ("SendMsg").innerHTML) // メッセージ送信関数を呼び出します Msg: メッセージの内容