[Pin to top] using JavaScript scripts to quickly create video chat rooms on webpages

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 and layout with you below Code Instead, only JavaScript scripts are pasted. The following are the features of my development kit :( Development of audio instant messaging applications on browsers )

 

 

1. Supports the development of audio instant messaging applications in Windows browsers
2. Provides javascript API and Script Programming
3. Compatible with mainstream browsers such as IE, chrome, Firefox, 360, and travel
4. Supports interconnection between devices and the Web, such as IOS, Android, and PC.

 

I. Load the anychat for Web SDK Library

First, loadAnychat for Web SDK Library

<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

 
VaR mdefaserverserveraddr = "demo.anychat.cn"; // default server address var mdefaserverserverport = 8906; // default server port number var mselfuserid =-1; // local user idvar mtargetuserid =-1; // target user ID (requesting audio and video from the other party)
 

Iii. Call the initialization Function

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

// Initialize function logicinit () {// initialize var need_anychat_apilevel = "0"; var errorcode = brac_initsdk (need_anychat_apilevel); If (errorcode = gv_err_success) // document. getelementbyid ("login_div "). style. display = "Block"; // display the logon interface else // No plug-in is installed, or the plug-in version is too old, display the plug-in download interface document. getelementbyid ("prompt_div "). style. display = "Block"; // display 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:

// Log on to the system function logtailhall () {brac_connect (mdefaserverserveraddr, mdefaserverserverport); // connect to the server brac_login (document. getelementbyid ("username "). value, "", 0); // log on to the system. If the password is blank, you can log on to the system}
 

 

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

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

 

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

// 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. Refer to the error code to define function onanychatloginsystem (dwuserid, errorcode) {If (errorcode = 0) {// The logon is successful. The Lobby interface is displayed to hide the logon interface. If a failure occurs, do nothing. Keep the original form mselfuserid = dwuserid; document. getelementbyid ("login_div "). style. display = "NONE"; // hide the logon interface document. getelementbyid ("hall_div "). style. display = "Block"; // display Hall interface }}
 

 

V., 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

// 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

// 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, the error code function onanychatenterroom (dwroomid, errorcode) is used) {If (errorcode = 0) {// The room is successfully accessed. The room interface is displayed and the hall interface is hidden. No action document is taken when the room fails to be accessed. getelementbyid ("hall_div "). style. display = "NONE"; // hide the 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"); // sets the remote video display location (not associated with the user, but occupied) brac_setvideopos (0, document. getelementbyid ("anychatremotevideodiv"), "anychat_video_remote ");}}

The online user callback function is triggered when you enter the room.

 
// 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 idfunction onanychatroomonlineuser (dwusercount, dwroomid) of the room) {// 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 the custom variable brac_usercameracontrol (mtargetuserid, 0); // disable the remote video brac_userspeakcontrol (mtargetuserid, 0 ); // disable the remote speech mtargetuserid =-1;} If (dwusercount> 1) // you can use this function to determine whether an online user exists, if yes, open one of the remote videos setthevideo ();}
 

 

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

 
// The user enters (leaves) the room, dwuserid indicates the user ID, and benterroom indicates that the user enters (1) or leaves (0) The function onanychatuseratroom (dwuserid, benterroom) {If (benterroom = 1) if (mtargetuserid =-1) setthevideo (); else {If (mtargetuserid = dwuserid) mtargetuserid =-1 ;}}
 

 

Call the function when sending information

// Send message 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.

 
// 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

// The custom function requests the remote video User Function setthevideo () {var useridlist = brac_getonlineuser (); // obtain all online user IDs brac_usercameracontrol (useridlist [0], 1 ); // request the peer video brac_userspeakcontrol (useridlist [0], 1); // request the peer speech brac_setvideopos (useridlist [0], document. getelementbyid ("anychatremotevideodiv"), "anychat_video_remote"); // sets the remote video display location mtargetuserid = useridlist [0];}
 

 

6. Exit the room

Exit room call Function

 
Function outofroom () {brac_leaveroom (dwroomid );}
 

 

7. Exit the system

Exit System Call Function

 
Function outofsystem () {brac_logout ();}
 

 

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