Using JavaScript scripts to quickly create a webpage video chat room

Many online users are currently engaged in video chat rooms on the webpage.

After learning, I also made a simple small example. Dozens of lines of JavaScript scripts can easily implement video calls, and I do not need to download a specified browser, because mainstream windows platforms such as IE, firefox, and chrome all pass through, they run perfectly. I will share my achievements with you below, and I will not post the layout code, but the JavaScript script.
The following are the features of my Development Kit: (development of audio instant messaging applications on the browser)

Supports the development of audio instant messaging applications in Windows browsers
Provides JavaScript API and Script Programming
Compatible with mainstream browsers such as IE, Chrome, Firefox, 360, and travel
Supports interconnection between devices and the Web, such as iOS, Android, and PC.

 

I. Load the AnyChat for Web SDK Library

First, you must load the AnyChat for Web SDK library.

[Html]
<Script language = "javascript" type = "text/javascript" src = "./javascript/anychatsdk. js" charset = "GB2312"> </script>
<Script language = "javascript" type = "text/javascript" src = "./javascript/anychatevent. js" charset = "GB2312"> </script>

<Script language = "javascript" type = "text/javascript" src = "./javascript/anychatsdk. js" charset = "GB2312"> </script>
<Script language = "javascript" type = "text/javascript" src = "./javascript/anychatevent. js" charset = "GB2312"> </script>

Ii. global variable definition

Define global variables

[Javascript]
Var mDefaultServerAddr = "demo.anychat.cn"; // default server address
Var mDefaultServerPort = 8906; // default server port number
Var mSelfUserId =-1; // Local User ID
Var mTargetUserId =-1; // target user ID (requesting the audio and video of the other party)

Var mDefaultServerAddr = "demo.anychat.cn"; // default server address
Var mDefaultServerPort = 8906; // default server port number
Var mSelfUserId =-1; // Local User ID
Var mTargetUserId =-1; // target user ID (requesting the audio and video of the other party)

Iii. Call the initialization Function

After the webpage is loaded, check whether plug-ins and plug-ins are installed latest.

[Javascript]
// Page loading complete Initialization
Function LogicInit () {// Initialization
Var NEED_ANYCHAT_APILEVEL = "0 ";
Var errorcode = BRAC_InitSDK (NEED_ANYCHAT_APILEVEL );
If (errorcode = GV_ERR_SUCCESS) // The agent is initialized successfully.
Document. getElementById ("login_div"). style. display = "block"; // The logon page is displayed.
Else // if no plug-in is installed or the plug-in version is too old, the plug-in download interface is displayed.
Document. getElementById ("prompt_div"). style. display = "block"; // display the prompt Layer
}

// Page loading complete Initialization
Function LogicInit () {// Initialization
Var NEED_ANYCHAT_APILEVEL = "0 ";
Var errorcode = BRAC_InitSDK (NEED_ANYCHAT_APILEVEL );
If (errorcode = GV_ERR_SUCCESS) // The agent is initialized successfully.
Document. getElementById ("login_div"). style. display = "block"; // The logon page is displayed.
Else // if no plug-in is installed or the plug-in version is too old, the plug-in download interface is displayed.
Document. getElementById ("prompt_div"). style. display = "block"; // display the prompt Layer
}

4. Call the logon Function

Here, the server address and port are all dead. You can log on by entering the user name.

Click Event on the logon button:

[Javascript]
// Log on to the system
Function logstores Hall (){
BRAC_Connect (mdefaserverserveraddr, mdefaserverserverport); // connect to the server
BRAC_Login (document. getElementById ("username"). value, "", 0); // log on to the system. If the password is empty, you can log on to the system.
}

// Log on to the system
Function logstores Hall (){
BRAC_Connect (mdefaserverserveraddr, mdefaserverserverport); // connect to the server
BRAC_Login (document. getElementById ("username"). value, "", 0); // log on to the system. If the password is empty, you can log on to the system.
}

After the login function is called, the connection to the server function is triggered first.

[Javascript]
// The client connects to the server. bSuccess indicates whether the connection is successful, and errorcode indicates the error code.
Function OnAnyChatConnect (bSuccess, errorcode ){
If (errorcode = 0) {}// server connection successful
Else alert ("failed to connect to the server"); // The connection fails and the system does not trigger logon to the system function.
}

// The client connects to the server. bSuccess indicates whether the connection is successful, and errorcode indicates the error code.
Function OnAnyChatConnect (bSuccess, errorcode ){
If (errorcode = 0) {}// server connection successful
Else alert ("failed to connect to the server"); // The connection fails and the system does not trigger logon to the system function.
}
 

After the connection to the server is successful, the logon system callback function is triggered.

[Javascript]
// Log on to the system from the client. dwUserId indicates your user ID. errorcode indicates that the logon result is: 0. Otherwise, the error code is returned. See Error Code definition.
Function OnAnyChatLoginSystem (dwUserId, errorcode ){
If (errorcode = 0) {// The logon is successful. The Hall interface is displayed to hide the logon interface. If it fails, nothing will be done.
MSelfUserId = dwUserId;
Document. getElementById ("login_div"). style. display = "none"; // hide the logon Interface
Document. getElementById ("hall_div"). style. display = "block"; // display the hall Interface
}
}

// Log on to the system from the client. dwUserId indicates your user ID. errorcode indicates that the logon result is: 0. Otherwise, the error code is returned. See Error Code definition.
Function OnAnyChatLoginSystem (dwUserId, errorcode ){
If (errorcode = 0) {// The logon is successful. The Hall interface is displayed to hide the logon interface. If it fails, nothing will be done.
MSelfUserId = dwUserId;
Document. getElementById ("login_div"). style. display = "none"; // hide the logon Interface
Document. getElementById ("hall_div"). style. display = "block"; // display the hall Interface
}
}

5. Call the function to enter the room

The lobby is displayed after logon. An input box and a button for entering the room are displayed in the lobby.

Click Enter room to call the Function

[Javascript]
// Enter the room
Function EnterRoom () {// enter the custom room
BRAC_EnterRoom (parseInt (document. getElementById ("customroomid"). value), "", 0); // enter the room
}

// Enter the room
Function EnterRoom () {// enter the custom room
BRAC_EnterRoom (parseInt (document. getElementById ("customroomid"). value), "", 0); // enter the room
}

Enter the room to trigger the callback function

[Javascript]
// When the client enters the room, dwRoomId indicates the ID number of the incoming room, And errorcode indicates whether the client enters the room: 0. Otherwise, it indicates an error code.
Function OnAnyChatEnterRoom (dwRoomId, errorcode ){
If (errorcode = 0) {// The room is successfully accessed. The room interface is displayed, and the hall interface is hidden. No action is taken when the room fails to be accessed.
Document. getElementById ("hall_div"). style. display = "none"; // hide the hall Interface
Document. getElementById ("room_div"). style. display = "block"; // display the room Interface
BRAC_UserCameraControl (mSelfUserId, 1); // open the local video
BRAC_UserSpeakControl (mSelfUserId, 1); // enable the local voice
// Set the local video display position
BRAC_SetVideoPos (mSelfUserId, document. getElementById ("AnyChatLocalVideoDiv"), "ANYCHAT_VIDEO_LOCAL ");
// Set the remote video display location (not associated with the user, but occupied the location)
BRAC_SetVideoPos (0, document. getElementById ("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE ");
}
}

// When the client enters the room, dwRoomId indicates the ID number of the incoming room, And errorcode indicates whether the client enters the room: 0. Otherwise, it indicates an error code.
Function OnAnyChatEnterRoom (dwRoomId, errorcode ){
If (errorcode = 0) {// The room is successfully accessed. The room interface is displayed, and the hall interface is hidden. No action is taken when the room fails to be accessed.
Document. getElementById ("hall_div"). style. display = "none"; // hide the hall Interface
Document. getElementById ("room_div"). style. display = "block"; // display the room Interface
BRAC_UserCameraControl (mSelfUserId, 1); // open the local video
BRAC_UserSpeakControl (mSelfUserId, 1); // enable the local voice
// Set the local video display position
BRAC_SetVideoPos (mSelfUserId, document. getElementById ("AnyChatLocalVideoDiv"), "ANYCHAT_VIDEO_LOCAL ");
// Set the remote video display location (not associated with the user, but occupied the location)
BRAC_SetVideoPos (0, document. getElementById ("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE ");
}
}
The online user callback function is triggered when you enter the room.

[Javascript]
// Receives the online user information of the current room, which is triggered once upon entering the room. dwUserCount indicates the number of online users (including their own) and dwRoomId indicates the room ID
Function OnAnyChatRoomOnlineUser (dwUserCount, dwRoomId ){
// Determine whether to disable the previously requested user audio/video data
If (mTargetUserId! =-1) {// mTargetUserId indicates that the user ID of the last video session is a custom variable.
BRAC_UserCameraControl (mTargetUserId, 0); // Disable remote video
BRAC_UserSpeakControl (mTargetUserId, 0); // Disable remote speech
MTargetUserId =-1;
}
If (dwUserCount> 1) // you can use this function to determine whether an online user exists. if yes, a remote video is displayed.
SetTheVideo ();
}

// Receives the online user information of the current room, which is triggered once upon entering the room. dwUserCount indicates the number of online users (including their own) and dwRoomId indicates the room ID
Function OnAnyChatRoomOnlineUser (dwUserCount, dwRoomId ){
// Determine whether to disable the previously requested user audio/video data
If (mTargetUserId! =-1) {// mTargetUserId indicates that the user ID of the last video session is a custom variable.
BRAC_UserCameraControl (mTargetUserId, 0); // Disable remote video
BRAC_UserSpeakControl (mTargetUserId, 0); // Disable remote speech
MTargetUserId =-1;
}
If (dwUserCount> 1) // you can use this function to determine whether an online user exists. if yes, a remote video is displayed.
SetTheVideo ();
}

When a user exits the room, the system determines whether the user is a remote user and performs corresponding operations.

[Javascript]
// The user enters (leaves) the room. dwUserId indicates the user ID, and bEnterRoom indicates that the user enters (1) or leaves (0) the room.
Function OnAnyChatUserAtRoom (dwUserId, bEnterRoom ){
If (bEnterRoom = 1)
If (mTargetUserId =-1) SetTheVideo ();
Else {
If (mTargetUserId = dwUserId)
MTargetUserId =-1;
}
}

// The user enters (leaves) the room. dwUserId indicates the user ID, and bEnterRoom indicates that the user enters (1) or leaves (0) the room.
Function OnAnyChatUserAtRoom (dwUserId, bEnterRoom ){
If (bEnterRoom = 1)
If (mTargetUserId =-1) SetTheVideo ();
Else {
If (mTargetUserId = dwUserId)
MTargetUserId =-1;
}
}

Call the function when sending information

[Javascript]
// Send information
Function SendMessage (){
BRAC_SendTextMessage (0, 0, document. getElementById ("SendMsg"). innerHTML); // call the message sending function Msg: Information Content
Document. getElementById ("ReceiveMsg"). innerHTML + = "I:" + document. getElementById ("SendMsg"). innerHTML + "<br/> ";
Document. getElementById ("SendMsg"). innerHTML = "";
}

// Send information
Function SendMessage (){
BRAC_SendTextMessage (0, 0, document. getElementById ("SendMsg"). innerHTML); // call the message sending function Msg: Information Content
Document. getElementById ("ReceiveMsg"). innerHTML + = "I:" + document. getElementById ("SendMsg"). innerHTML + "<br/> ";
Document. getElementById ("SendMsg"). innerHTML = "";
}

The function is triggered when an online user sends a message.

[Javascript]
// Receives a text message.
Function OnAnyChatTextMessage (dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen ){
Document. getElementById ("ReceiveMsg"). innerHTML + = BRAC_GetUserName (dwFromUserId) + ":" + lpMsgBuf + "<br/>"; // The received message is displayed in the receiving box.
}

// Receives a text message.
Function OnAnyChatTextMessage (dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen ){
Document. getElementById ("ReceiveMsg"). innerHTML + = BRAC_GetUserName (dwFromUserId) + ":" + lpMsgBuf + "<br/>"; // The received message is displayed in the receiving box.
}
 

Custom Functions

[Javascript]
// Customize the function to request a remote video user
Function SetTheVideo (){
Var useridlist = BRAC_GetOnlineUser (); // obtain all online user IDs
BRAC_UserCameraControl (useridlist [0], 1); // request the recipient's video
BRAC_UserSpeakControl (useridlist [0], 1); // request the voice of the other party
BRAC_SetVideoPos (useridlist [0], document. getElementById ("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE"); // you can specify a remote video display location.
MTargetUserId = useridlist [0];
}

// Customize the function to request a remote video user
Function SetTheVideo (){
Var useridlist = BRAC_GetOnlineUser (); // obtain all online user IDs
BRAC_UserCameraControl (useridlist [0], 1); // request the recipient's video
BRAC_UserSpeakControl (useridlist [0], 1); // request the voice of the other party
BRAC_SetVideoPos (useridlist [0], document. getElementById ("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE"); // you can specify a remote video display location.
MTargetUserId = useridlist [0];
}

6. Exit the room

Exit room call Function

[Javascript]
Function OutOfRoom (){
BRAC_LeaveRoom (dwRoomid );
}

Function OutOfRoom (){
BRAC_LeaveRoom (dwRoomid );
}
 

7. Exit the system

Exit System Call Function

[Javascript] v
Function OutOfSystem (){
BRAC_Logout ();
}

Function OutOfSystem (){
BRAC_Logout ();
}
 

Now, a simple video chat room is complete...