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

ビデオ チャット ルーム

学習を通じて、私自身も簡単なサンプルを作成しました。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: メッセージの内容

ドキュメント.getElementById("ReceiveMsg").innerHTML += "Me:" + document.getElementById("SendMsg").innerHTML + "
";

document.getElementById("SendMsg").innerHTML = " ";

}

この関数は、オンライン ユーザーから情報を受信するときにトリガーされます

[javascript]

/ / テキスト メッセージを受信します

function OnAnyChatTextMessage(dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen) {

document.getElementById("ReceiveMsg").innerHTML += BRAC_GetUserName(dwFromUserId) + "：" + lpMsgB uf + "
" // 受信した情報が受信ボックスに表示されます

}

カスタム関数

[javascript]

//リモートビデオユーザーをリクエストするカスタム関数

function SetTheVideo() {

var useridlist = BRAC_GetOnlineUser() // すべてのオンラインユーザー ID を取得します

BRAC_UserCameraControl(useridlist[0], 1); // 他のユーザー ID をリクエストします相手のビデオ

BRAC_UserSpeakControl(useridlist[0], 1); // 相手の音声を要求

BRAC_SetVideoPos(useridlist[0], document.getElementById("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE") // リモートビデオの表示を設定location

mTargetUserId = useridlist[0];

}

6. 部屋を出る

function

[javascript]

function OutOfRoom(){

}

を呼び出して部屋を出る

セブン、システムを終了

システムコール関数を終了

[javascript]

function OutOfSystem(){

BRAC_Logout()

}

これで簡易ビデオチャットルームは完成です...

簡単なスクリーンショットの例:

ログインインターフェース:

ロビーインターフェース:

ルームインターフェース: