Video Chat demo

Esframework demo-entry demo, a simple instant messaging system (with source code) is a simple text chat demo Based on esframework. Now, we will base on this demo, use omcs to add QQ-like video chat functions. The implementation of the text-based chat function will not be repeated here. Here we will focus on the implementation of the video chat function. The video chat function to be implemented in this demo can be divided into the following features:

(1) One party initiates a video conversation request. After the other party agrees, the video conversation can start.

(2) During the Dialogue, either party can hang up to terminate the dialogue.

(3) When any party loses line during the conversation, the conversation will be automatically terminated.

(4) double-click the video window to display the video in full screen. Press ESC to exit the full screen.

(5) Use a signal strength display to display the quality of the current channel.

After the demo is run, it is shown as follows:

1. Information Type Definition

 

Based on the previous information type definition informationtypes, we need to add several types of information to complete video conversation requests, hanging up, and other functions.

Public static class informationtypes {// <summary> // text chat Information 0 /// </Summary> Public const int chat = 0; /// <summary> /// video request 1 /// </Summary> Public const int videorequest = 1; /// <summary> /// response result 2 of the video request /// </Summary> Public const int videoresult = 2; /// <summary> /// notify the recipient to hang up the video connection 3 /// </Summary> Public const int closevideo = 3; /// <summary> /// notifies a friend of the network cause, resulting in video interruption // </Summary> Public const int netreasonclosevideo = 4 ;}

Since several new information types related to the video conversation function are equivalent to a command and do not require complex content, you do not need to define the Protocol body of the information.

 

Ii. Implement video display controls

 

During video dialog, the video of the other side is displayed on the surface of a panel, and the video of the other side is displayed in the lower right corner of the control. Therefore, we combine these two controls to form a unified videoviewer, as shown below:

Then, when implementing videoviewer, We instantiate two dynamiccameraconnector, A microphoneconnector, and a channelqualitydisplayer.

(1) Two dynamiccameraconnector instances, one used to connect to the other's camera and the other used to connect to its own camera. Set the two panels on the videoviewer to the corresponding camera connector instance through the setviewer method of dynamiccameraconne.

(2) The microphoneconnector instance is used to connect to the microphone of the other party.

(3) The channelqualitydisplayer instance is used to display the channel quality from the channel to the other party.

For details about how to use these connector components, refer
Omcs development manual (02)-multimedia connector.

When double-clicking a large panel, you need to display the video in full screen. Therefore, we have defined a fullscreenform, which is similar to videoviewer. However, when fullscreenform is displayed, You need to dynamically change the control surface drawn by the above two dynamiccameraconnector instances. Therefore, fullscreenform exposes the bigpanel and smallpanel attributes to set them to dynamiccameraconnector when appropriate. This is why the dynamiccameraconnector component is used, rather than the cameraconnecontrol.

 

Iii. Video conversation process

 

Now, let's briefly describe the key points for implementing the video conversation process. For more details, refer to the source code.

(1) The initiator sends informationtypes. videorequest type information to the other party to request a video conversation.

(2) After receiving the request, the receiver prompts the user to agree or reject the request. After the user selects the request, informationtypes will be sent. the videoresult type information is sent to the requester. The content of the information is a bool value. True indicates consent, and false indicates rejection.

(3) The initiator receives a reply. If the reply is rejected, a prompt is displayed on the interface. If the reply is agreed, go to (4 ).

(4) First, let's talk about the receiver. If you agree to the video, immediately call the Connect Method of dynamiccameraconnector and microphoneconneto connect to the camera and microphone of the other party.

(5) Upon receiving the consent from the other party, the initiator immediately calls the Connect Method of dynamiccameraconnector and microphoneconnector to connect to the receiver's camera and microphone.

(6) When one party clicks the end button, information of informationtypes. closevideo type is sent to the other party, and the disconnect method of dynamiccameraconnector and microphoneconneis called to disconnect the device from the other party.

(7) When the other party receives information of the informationtypes. closevideo type, it also calls the disconnect method of dynamiccameraconnector and microphoneconneto disconnect.

(8) If you receive a disconnection event or a friend disconnection event, you can use a similar process of hanging up the conversation.

 

4. Deployment

 

This demo is built based on esframework and omcs. Therefore, this demo can be split into two parts: one is the business logic function implemented by esframework (for example, the preceding video dialog process) is a multimedia function implemented by omcs. For the server deployment of this demo, two servers need to be deployed, one is the application server of the business logic implemented by esframework, and the other is the multimedia server provided by omcs. The overall structure is shown in:

To facilitate testing, we also included the omcs server project in the demo solution.

 

5. Download

 

Video Chat demo source code

Note: When implementing a similar video system based on omcs, you must carefully consider the State synchronization of the two connections (in this demo, instant access to the esframework server and connection to the omcs server), this demo is very simple to handle this. For detailed analysis, refer to omcs development manual (04)-precautions in the secondary development process.

 

Read
More articles in the omcs development manual series.

Download the free version of omcs and demo source code