Implementieren Sie Videoanrufe ganz einfach über JavaScript-Skripte

Video-Chat-Raum

Durch das Lernen habe ich auch selbst ein einfaches Beispiel erstellt, um Videoanrufe problemlos zu implementieren, da IE, Firefox , Chrome und andere gängige Browser auf Windows-Plattformen funktionieren alle einwandfrei und laufen einwandfrei. Ich werde meine Ergebnisse unten mit Ihnen teilen. Ich werde nicht den Layout-Code veröffentlichen, sondern nur das JavaScript-Skript.

1. Laden Sie die AnyChat for Web SDK-Bibliothek

Zuerst müssen Sie die AnyChat for Web SDK-Bibliothek

[html]

laden

2 Variablendefinition

Globale Variablen definieren

[javascript]

var mDefaultServerAddr = "demo.anychat.cn"; // Standardserveradresse

var mDefaultServerPort = 8906 ;                                                und ob es so ist die neueste

[javascript]

// Laden der Seite abgeschlossen Initialisierung

function LogicInit() { // Initialisierung

var NEED_ANYCHAT_APILEVEL = "0";

var errorcode = BRAC_InitSDK(NEED_ANYCHAT_APILEVEL);

if (errorcode == GV_ERR_SUCCESS) // Initialisierung des Plug-Ins erfolgreich

document.getElementById("login_div"). style.display = "block"; // Anmeldeschnittstelle anzeigen

else // Das Plug-in ist nicht installiert oder die Plug-in-Version ist zu alt, die Plug-in-Download-Schnittstelle wird angezeigt

document.getElementById("prompt_div").style.display = "block"; // Anzeige der Eingabeaufforderungsebene

[javascript]

// Beim System anmelden

function LoginToHall() {

BRAC_Connect(mDefaultServerAddr, mDefaultServerPort); // Mit dem Server verbinden

BRAC_Login(document.getElementById(" Benutzername").value, "", 0); // Melden Sie sich beim System an. Sie können sich auch anmelden, wenn das Passwort leer ist

}

Nachher Beim Aufrufen der Anmeldefunktion wird zunächst die Verbindungsserverfunktion ausgelöst

[javascript]

// Der Client stellt eine Verbindung zum Server her. bSuccess gibt an, ob die Verbindung erfolgreich ist, und errorcode gibt den Fehlercode an

function OnAnyChatConnect(bSuccess, errorcode) {

if (errorcode == 0) { } // Verbindung zum Server erfolgreich herstellen

else warning("Verbindung zum Server fehlgeschlagen "); //Verbinden Wenn fehlgeschlagen, löst das System die Anmeldesystemfunktion nicht aus

}

Nach erfolgreicher Verbindung mit dem Server wird die Anmeldesystem-Rückruffunktion

[javascript

// Der Client meldet sich beim System an, dwUserId stellt seine eigene Benutzer-ID-Nummer dar, Fehlercode stellt das Anmeldeergebnis dar: 0 erfolgreich, andernfalls handelt es sich um einen Fehlercode, siehe Fehlercodedefinition

function OnAnyChatLoginSystem(dwUserId, errorcode ) {

if (errorcode == 0) { // Anmeldung erfolgreich, Anzeige der Lobby-Oberfläche und Ausblenden der Anmeldeoberfläche. Wenn es fehlschlägt, tun Sie nichts und behalten Sie den Status Quo bei.

mSelfUserId = dwUserId;

document.getElementById("login_div").style.display = "none"; interface

document.getElementById("hall_div").style.display = "block"; //Anzeige der Lobby-Schnittstelle

}

}

5. Rufen Sie die Funktion „Raum betreten“ auf

Nach erfolgreicher Anmeldung wird die Lobby angezeigt. In der Lobby befindet sich ein Eingabefeld und eine Schaltfläche „Raum betreten“. Schaltfläche „Raum betreten“, um die Funktion aufzurufen

[javascript ]

// Raum betreten

function EnterRoom(){ // Benutzerdefinierten Raum betreten

BRAC_EnterRoom(parseInt(document.getElementById("customroomid").value), "", 0); //Betreten Sie den Raum

}

Eintreten der Raum Rückruffunktion auslösen

[javascript]

// Der Client betritt den Raum, dwRoomId gibt die ID-Nummer des eingegebenen Raums an, Fehlercode gibt an, ob der Raum betreten werden soll: 0 für erfolgreichen Eintritt , sonst handelt es sich um einen Fehlercode

function OnAnyChatEnterRoom(dwRoomId, errorcode) {

if (errorcode == 0) { // Wenn der Raum erfolgreich betreten wurde, wird die Raumoberfläche angezeigt und die Lobby-Schnittstelle ist ausgeblendet; es wird keine Aktion durchgeführt, wenn der Raum nicht betreten werden kann

document.getElementById("hall_div").style.display = "none" //Die Lobby-Schnittstelle ausblenden

document.getElementById ("Room_div"). Style.Display = "Block"; );                    BRAC_SetVideoPos(0, document.getElementById("AnyChatRemoteVideoDiv") , „ANYCHAT_VIDEO_REMOTE“); 🎜>

Eintreten Beim Betreten eines Raums wird die Online-Benutzerrückruffunktion ausgelöst

[javascript]

// Nach Erhalt der Online-Benutzerinformationen des aktueller Raum, es wird einmal nach dem Betreten des Raums ausgelöst. dwUserCount stellt die Anzahl der Online-Benutzer dar (einschließlich Ihnen selbst). // Bestimmen Sie, ob die zuvor angeforderten Audio- und Videodaten des Benutzers geschlossen werden müssen -1) { // mTargetUserId stellt die Benutzer-ID der letzten Videositzung als benutzerdefinierte Variable dar BRAC_UserCameraControl(mTargetUserId, 0); // Remote-Video ausschalten

BRAC_UserSpeakControl(mTargetUserId, 0); // Remote Voice ausschalten

mTargetUserId = -1;

if (dwUserCount > 1) // Stellen Sie fest, ob in dieser Funktion Online-Benutzer vorhanden sind. Öffnen Sie dann eines der Remote-Videos.

SetTheVideo();

Wann Ein Benutzer verlässt den Raum, stellt fest, ob es sich um einen Remote-Benutzer handelt und führt entsprechende Vorgänge aus

[javascript]

// Der Benutzer betritt (verlässt) den Raum, dwUserId gibt die Benutzer-ID-Nummer an, bEnterRoom gibt an, ob der Benutzer den Raum betritt (1) oder verlässt (0)

function OnAnyChatUserAtRoom(dwUserId, bEnterRoom) {

if (bEnterRoom == 1)

if (mTargetUserId == -1) SetTheVideo();

else {

if (mTargetUserId == dwUserId)

mTargetUserId = -1;

}

}

Nachricht senden Funktion aufrufen

[Javascript]

// Nachricht senden

Funktion SendMessage () {

BRAC_SendTextMessage(0, 0, document.getElementById(" SendMsg").innerHTML); //Funktion zum Senden von Nachrichten aufrufen Msg: Nachrichteninhalt

document.getElementById("ReceiveMsg ").innerHTML += "Me:" + document.getElementById("SendMsg").innerHTML + "
";

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

}

Empfangen Wenn ein Online-Benutzer eine Nachricht sendet, empfängt die Funktion

[javascript]

/ eine Textnachricht

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

document.getElementById("ReceiveMsg").innerHTML += BRAC_GetUserName(dwFromUserId) + "：" + lpMsgBuf + "
" // Die empfangene Nachricht wird im Empfangsfeld angezeigt

}

Benutzerdefinierte Funktion

[javascript ]

//Benutzerdefinierte Funktion zum Anfordern von Remote-Videobenutzern

function SetTheVideo() {

var useridlist = BRAC_GetOnlineUser(); // Alle Online-Benutzer-IDs abrufen

BRAC_UserCameraControl (useridlist[0], 1); // Video der anderen Partei anfordern

BRAC_UserSpeakControl(useridlist[0], 1); // Stimme der anderen Partei anfordern

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

6. Raum verlassen

Raumruffunktion verlassen

[javascript]

Funktion OutOfRoom(){                                                                                                                                                            🎜>}

7. Verlassen Sie das System

Beenden Sie die Systemaufruffunktion

[Javascript]

Funktion OutOfSystem(){  

BRAC_Logout ();

}

An diesem Punkt ist der einfache Video-Chatraum fertig...

Einfacher Screenshot :

Login-Schnittstelle:

Lobby-Schnittstelle:

Raum-Schnittstelle: