Easily implement video calls using JavaScript scripts

Source: Internet
Author: User

After learning about the video chat room, I also made a simple small example. Dozens 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. 1. to load the AnyChat for Web SDK library, you must first 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> 2. Define the global variable [javascript] var mdefadefaserveraddr =" demo.anychat.cn "; // The default server address var mDefaultServerPort = 8906; // Default server port number var mSelfUserId =-1; // Local User ID var mTargetUserId =-1; // target user ID (requesting audio and video from the other party) 3. Call the initialization function. After the webpage is loaded, check whether the plug-in and plug-in are installed. [javascript] // The page loading is complete. initialize the function LogicInit () {// initialize var NEED_ANYCHAT_APILEVEL = "0"; var errorcode = BRAC_InitSDK (NEED_ANYCHAT_APILEVEL); if (errorcode = GV_ERR_SUCCESS) // The file is successfully initialized. getElementById ("login_div "). style. display = "block"; // display the logon interface else // No plug-in is installed or plug-in The version is too old. The document on the plug-in download page is displayed. getElementById ("prompt_div "). style. display = "block"; // display prompt layer} 4. The server address and port used to call the logon function are all dead. Enter the user name to log on and click the event: [javascript] // 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 null, you can also log on.} after calling the logon function, the connection to the server function [javascript] will be triggered first. // connect the client to the server, bSuccess indicates whether the connection is successful, and errorcode indicates the error code fu Nction OnAnyChatConnect (bSuccess, errorcode) {if (errorcode = 0) {} // else alert ("failed to connect to the server"); // a message indicating connection failure is displayed, at this time, the system will not trigger logon to the system function} after the connection to the server is successful, the logon system callback function will be triggered [javascript // client logon to the system, dwUserId indicates your user ID, errorcode indicates the logon result: 0 success. Otherwise, it is an error code. Refer to the error code to define function OnAnyChatLoginSystem (dwUserId, errorcode) {if (errorcode = 0) {// logon successful. The Hall interface is displayed, hide the logon page. 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} 5. Call the function to log on to the room and display the hall, in the hall, just enter a box and click the enter room button to call the function [javascript] // enter the function EnterRoom () {// enter the custom room BRAC_EnterRoom (parseInt (document. getElementById ("customroomid "). value), "", 0); // enter the room}. The callback function [javascript] // When the client enters the room, dwRoomId indicates the ID number of the incoming room, And errorcode indicates whether to enter the room: 0 indicates that the incoming room is successful; otherwise, the 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 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") ;}when you enter the room, the online user callback function [javascript] will be triggered. // you will receive the online user information of the current room, triggered once upon entering the room. dwUserCount indicates the number of online users (including the user) 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 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, determine whether the user is a remote user, and perform 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 function OnAnyChatUserAtRoom (dwUserId, bEnterRoom) {if (bEnterRoom = 1) if (mTargetUserId =-1) SetTheVideo (); else {if (mTargetUserId = dwUserId) mTargetUserId =-1 ;}} call the function [javascript] when sending information // 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 = "";} When an online user sends a message, the function [javascript] // receives the text message function OnAnyChatTextMessage (dwFromUserId, dwToUserId, bSecret, lpMsgBuf, dwLen) {document. getElementById ("ReceiveMsg "). innerHTML + = BRAC_GetUserName (dwFromUserId) + ":" + lpMsgBuf + "<br/> "; // display received information to the receiving box} custom function [javascript] // User function SetTheVideo () {var useridlist = BRAC_GetOnlineUser () of the remote video user request (); // obtain all online user IDs BRAC_UserCameraControl (useridlist [0], 1); // request the peer video BRAC_UserSpeakControl (useridlist [0], 1 ); // request the speech BRAC_SetVideoPos (useridlist [0], document. getElementById ("AnyChatRemoteVideoDiv"), "ANYCHAT_VIDEO_REMOTE"); // sets the remote video display location mTargetUserId = useridlist [0];} 6. Exit the room and call the function [javascript] function OutOfRoom () {BRAC_LeaveRoom (dwRoomid);} 7. Exit the system and call the function [javascript] function OutOfSystem () {BRAC_Logout ();} Now, a simple video chat room is complete... example: logon interface: Hall interface: Room interface:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.