It is easy to realize text chat on Web pages, but it is troublesome to realize video chat. Here, we will implement a simple web version of video chat Demo, which can support all types of browsers.
In addition to the video chat function, this Demo also includes the following functions:
1. Online and offline notification: assuming that all users are friends, any user online will appear in other people's friend list, and offline will be removed from the friend list.
2. The disconnection and reconnection will be performed automatically after the line is dropped.
3. When a user with the same name logs in, it will crowd out the front users.
4. Text chat between all online users.
5. Video chat with online friends.
1, Demo running effect
Let's see the final effect of the Demo first!
2, JS implementation process
1. Realize account login
The login interface is as follows:
When you open the video chat demo web page, a login interface will appear. Enter the IP and account number of the video server (you can use the randomly generated one), and click the login button to log in to the video chat server.
Call the initialize method of RapidPassiveEngine() of ESFramework framework and the initialize method of Multimedia manager of OMCS framework to complete login.
After successful login, it will automatically enter the main user interface.
//OMCS login
$('#Singin').bind("click", function () {
this.multimediaManager = MultimediaManagerFactory.GetSingleton();
var id = document.getElementById("userID").value;//User id
var posw = document.getElementById("logonPassword").value;//User password
var serverIP = document.getElementById("serverIP").value;//ip address
// var serverPort = document.getElementById("serverPort").value;// port
try {
if (this.multimediaManager.Connected() == true) {
this.multimediaManager.Initialize(id, posw, serverIP, 9900);
} else {
alert("Login failed");
console.log("Multi-Media webSocket Not connected yet");
}
}
catch (ex) {
console.log(ex);
}
})
//ESFramework login
$('#Singin').bind("click", function () {
engine.initialize({
serverIP: serverIP,//Server IP
serverPort: serverPort,//Server port
userID: userID,//Login user name
useWss: false,
logonPassword: hex_md5(logonPassword),//Password after md5
heartBeat: 5000,//Heartbeat interval (unit: ms)
callBackTimeout: 5000,//Callback method timeout (unit: ms)
maxLengthOfUserID: 11,//Set maximum length of user name
customizeHandler: new CustomizeHandler(),//User defined message processor
loginResutCallBack: function (loginResult) {//Login result callback method
if (loginResult.logonResult == 0) {//Login succeeded
$("#chatBox").html(" login to server succeeded ");
document.getElementById('loginid').innerHTML = 'Current account number '+userID;
document.getElementById('login').style.display = 'none';
document.getElementById('main').style.display = 'block'
//esf login
engine.ContactsOutter.addEventListener(new contractsListener());//Registered contact event
engine.BasicOutter.addEventListener(new basicListener());//Register base events
});
};2. Realize text chat
The most basic requirement for using the communication framework is to send and receive information. The bottom layer of the ESFramework(WebSocket) has encapsulated all operations related to sending and receiving information for us, After the RapidPassiveEngine is new, the RapidPassiveEngine object instantiates the customeouter property. After the initialize function of the object is called, you can call the relevant functions in the customeouter to send messages and process the received information after implementing the customehandler.
The Web side can receive information, large data blocks, and synchronous calls from other clients or servers.
(1) Send text chat messages
When sending text chat messages, you can call send() in customizeouter to operate. Before sending, click the online user to change the value of targetUser, so as to bind the object you want to send messages.
//Select chat object
function selectUser(userid) {
var selfid = document.getElementById('userID').value;
targetUser = userid;
$("#chatBox").html(" in conversation with "+ userid +"... ");
var shows = document.getElementById('showfather').children;
//console.log(shows);
for (var i= 0; i < shows.length; i++) {
if (shows[i].id != (userid + 'show')) {
shows[i]. className='othershow'
}
document.getElementById(userid + 'show').className = 'shownow'
}
}When sending information, you can customize different parameters to judge different message types.
//Send message
$("#btn").bind("click", function () {
if ($(".bottomtext").val() == "") {
alert("Cannot send an empty message~");
return;
}
else if (targetUser.length == 0) {
alert("Target user not selected~");
return;
}
else {
value = $(".bottomtext").val();
var selfid=document.getElementById('userID').value;
appendContent("own", value，selfid);
$(".bottomtext").val("");
var time = [];
var info = util.getbytes(value);
//The following is the protocol body defined with the server
var stream = new OStream(time);
var bodyLen = 4 + 4 + info.length + 4;
stream.writeInt32(bodyLen);
stream.writeInt32(info.length);
stream.write(info);
stream.writeInt32(1);//Total seconds between sending time and 00:00:00, January 1, 2016
engine.CustomizeOutter.send(0, stream.getBytesArray(), targetUser);
}
})(2) Process text chat messages
When we receive information from other online users or servers, we can obtain and process the information by implementing the customehandler interface.
When we call the initialize method when the user logs in, we can automatically process the received information. We can perform different operations by judging the information type.
function CustomizeHandler() {
this.handleInformation = function (sourceUserID, informationType, info) {
if (informationType == 0)//Chat message
{
} else if (informationType == 1)//Video message
{
} else if (informationType == 2) {
} else if (informationType == 3) {
}(3) Render text chat messages
Render the information in the page through the appendOtherContent and appendContent functions, and render the received information to different chat windows through different object oppositeids. And switch to the window of the user sending the information by selecting user.
function appendContent(sendName, content, OppositeID) {
Time = getTime();
$("#" + OppositeID).append('<div class="selfstyle"><p class="selfname">' + sendName + ":" + Time + '</p><p>' + content + '</p></div>');
$("#" + OppositeID).animate({ scrollTop: 99999 });
}
function appendOtherContent(sendName, content, OppositeID) {
Time = getTime();
selectUser(OppositeID);
var showid = OppositeID + 'show'
$("#" + showid).append('<div class="otherstyle"><p class="othername">' + sendName + ":" + Time + '</p><p>' + content + '</p></div>');
$("#" + showid).animate({ scrollTop: 99999 });3. Realize video chat
The video chat function allows you to conduct video chat with online users on the server and connect the camera and microphone through the OMCS service plug-in. Therefore, the OMCS video service Web plug-in must be opened before use.
(1) After clicking video chat, first send the video connection request data with message type 1 to the other party through the send of customizeouter. At the same time, open the video chat window and open your own camera and microphone connection
(2) After receiving the video connection request with data type 1, the video connection object displays the chat box to accept the video connection, and you can choose to accept or reject it
When the video connection object chooses to accept video chat, it will connect its own camera microphone and the other party's camera microphone at the same time;
When the other party refuses, the request to close the video connection.
After selection, a message with message type 2 will be sent to the video initiator.
(3) After receiving the reply with data 2, the video initiator will judge whether the other party's choice is to accept or reject. If it accepts, it will start connecting the other party's camera. If it refuses, it will close its own camera microphone and video connection window.
(4) When one party closes or disconnects, it will send a message of type 3 to the other party. After receiving the message of type 3, it will disconnect its camera and microphone.
During the connection process, you can also control the opening and closing of your camera microphone through the controls of the video chat window.
The time of sending video request is as follows (accept, reject and close the same)
$('#videomic').bind('click', function () {
if (targetUser.length == 0) {
alert("No video chat user selected~");
return;
} else {
value = 'null';
console.log(value);
document.getElementById('VideoMic').style.display = 'block';
document.getElementById('VideoHeardTxt').innerHTML = 'Connecting...';
document.getElementById('VideoSelf').src = 'img/video.jpg'
document.getElementById('VideoOther').src = 'img/head.jpg'
ConnertVideoSelf(userID, 'VideoSelf')
appendContent(selfid, "I sent a video request");
var time = [];
var info = util.getbytes(value);
//The following is the protocol body defined with the server
var stream = new OStream(time);
var bodyLen = 4 + 4 + info.length + 4;
stream.writeInt32(bodyLen);
stream.writeInt32(info.length);
stream.write(info);
stream.writeInt32(1);//Total seconds between sending time and 00:00:00, January 1, 2016
var userID = document.getElementById('userID').value;
engine.CustomizeOutter.send(1, null, targetUser);
}
})Video microphone connection events are as follows
var microphoneConnector, dynamicCameraConnector;
var cameraArr = [];
var micArr = [];
function Connectvideo(destID, whichimg) {
var a = document.getElementById(whichimg);
this.dynamicCameraConnector = new DynamicCameraConnector();
this.dynamicCameraConnector.ConnectEnded = connectEnded; //Successful connection listening
this.dynamicCameraConnector.Disconnected = disconnected; //Connection shutdown listening
this.dynamicCameraConnector.OwnerOutputChanged = videoOutput;
this.dynamicCameraConnector.SetAutoReconnect(true);
this.dynamicCameraConnector.AutoReconnectSucceed = videocl;
this.dynamicCameraConnector.SetViewer(a);
this.dynamicCameraConnector.BeginConnect(destID);//Start Camera Connection
cameraArr.push(this.dynamicCameraConnector);
this.microphoneConnector = new MicrophoneConnector();
this.microphoneConnector.ConnectEnded = microphone;
this.microphoneConnector.OwnerOutputChanged = micOutput;
this.microphoneConnector.SetAutoReconnect(true);
this.microphoneConnector.AutoReconnectSucceed = miccl;
this.microphoneConnector.BeginConnect(destID);//Start microphone connection
micArr.push(this.microphoneConnector);
}Several features of video chat:
(1) One party initiates a video conversation request and the other party agrees to start the video conversation.
(2) During the dialogue, either party can hang up to terminate the dialogue.
(3) During the dialogue, if either party drops the line, the dialogue will be automatically terminated.
(4) Click the smaller video window in the lower right corner to enlarge the video display window.
(5) The Web version of video chat can communicate with the pc version of video chat.
3, Web video chat Demo source download
1. Video chat Demo Web source code (JavaScript)
2. Video chat Demo server + PC source code
When running the Web side of this Demo, if the OMCS video service Web plug-in has not been installed, the Web page will automatically prompt for download and installation.
After installation, refresh the Web page, and you will be prompted to start the plug-in. After clicking agree to start, refresh the Web page again to log in normally. The Web plug-in runs in the form of tray, as shown in the following figure:
If you don't want to compile the server and PC client by yourself, you can directly download the deployment version that I have compiled and can run directly: VideoChat.Exe.rar
The server in the deployment version compressed package can be placed on the server of the public network, and double-click exe to run. The PC client can run the PC client test by modifying the IP in the VideoChat.exe.config configuration file to the IP of the public network server.
In this way, PC client and Web client can communicate with each other for text chat and video chat.
IV matters needing attention
1. First deploy the server to the server, double-click exe to run it, and then log in to the Web and PC client for testing.
2. One computer can only run one Demo Web terminal.
3. When testing video chat, it is better for two users to be in different rooms to prevent sound interference.
4. When chatting with online users in the web version, the chat content is not saved in the cloud, so the record will be cleared after the user goes offline.