WPF + WCF step-by-step creation of audio chat rooms (4): video sessions

First 3ArticleI have implemented some functions of the audio chat room, including text chats, shared whiteboards, and voice chats. This article describes the technical points of video session implementation.

In silerlight4, the camera and sound collection functions have been integrated, but there is no directly usable control in wpf4. It can also be seen that the DesktopProgramThe general trend of web programs. If you want to use Silverlight to implement a similar audio chat room, I will list some materials for your reference.

1. Your first step to the Silverlight voice/video chatting Client/Server

2. Accessing Web camera and microphone

3. Record the audio into a wave file

4. Playback the wave file in Silverlight

5. Using the g.711 Codec

6. Convert encode and decode Silverlight

The above are the solutions and materials for implementing Silverlight. This article is implemented using WPF + WCF. Listing silerlight is convenient for everyone to compare.

Video sessions are implemented in the same way as voice calls. The difference between them is that one is to get data through a microphone, and the other is to get data through a camera. Below I used wf4 to draw a flowchart (This flowchart is only used to illustrate the problem and is not used in the program ).

Implementation

As mentioned above, WPF does not integrate the camera function like silerlight. How can we achieve camera in WPF? This is also the first problem to be solved. I found an open-source WPF webcam control on codeplex after Google. The address is webcam Control for WPF.

Add a form and use this control on the form. The layout is as follows.

Note: videos from the local machine are displayed on the left and videos from the other party are displayed on the right. Modify the constructor of the form;

 
PrivateIpendpoint _ serverendpoint;PrivateUdpclient _ socket;PublicWebcamplayerform (ipendpoint serverendpoint,StringCaller,StringCallee ){
 

 
}
 

like voice chat, I use udpclient for data transmission. I feel that udpclient is easy to use. _ Serverendpoint is the address of the WCF Service, and _ socket is used for video data transmission. On the client, I used two system. Windows. Threading. dispatchertimer threads. I planned to directly use two threads to find some inexplicable thread problems. Two dispatchertimer, one used to start and receive video data from the WCF Service, and the other used to send their video data to the WCF Service. Code :

System. Windows. Threading. dispatchertimer mydispatchertimer =NewSystem. Windows. Threading. dispatchertimer (); mydispatchertimer. interval =NewTime span (0, 0, 0, 0, 1000); mydispatchertimer. Tick + =NewEventhandler (capturevideo); mydispatchertimer. Start (); system. Windows. Threading. dispatchertimer mydispatchertimer2 =NewSystem. Windows. Threading. dispatchertimer (); mydispatchertimer2.interval =NewTimespan (0, 0, 0, 0, 1000); mydispatchertimer2.tick + =NewEventhandler (playvideo); mydispatchertimer2.start ();
 

 
Capturevideo is used to capture data from the camera and send it to the WCF Service through udpclient. The Code is as follows.
 

Private VoidCapturevideo (ObjectSender, eventargs e ){Try{Byte[] Bytes;If(Webcamplayer. currentbitmap! =Null) {Bytes = convertimagesourcetobytearray (webcamplayer. currentbitmap );// Webcamplayer. currentbitmap_ Socket. Send (bytes, bytes. length, _ serverendpoint );}}Catch(Exception ){}}
 

 

In the capturevideo method above, video data is first forwarded to the WCF Service and forwarded to the other party by the WCF Service. In the WCF Service, a udpclient accepts data by using listen (), the Code is as follows:

         Private   Void Listen (){ Try { While ( True ) {Ipendpoint sender = New Ipendpoint (IPaddress. Any, 0 ); // If (sender. tostring ()! = "0.0.0.0: 0 ")                      //{                          Byte [] Received = udplistener. Receive (Ref Sender ); If (! _ Users. Contains (sender) {_ users. Add (sender );} Foreach (Ipendpoint endpoint In _ Users ){ If (! Endpoint. Equals (sender) {_ udpsender. Send (received, received. length, endpoint );}} //} }} Catch (Exception e ){}}

The listen () method in the WCF Service sends the received data to the client of the other party. The playvideo method is provided on the client to receive and play the video data from the WCF. The Code is as follows:

         Private   Void Playvideo ( Object Sender, eventargs e ){ Try { Lock (_ Socket ){ If (_ Socket. Available! = 0) {ipendpoint endpoint = New Ipendpoint (IPaddress. Any, 0 );Byte [] Received = _ socket. Receive ( Ref Endpoint); image1.source = convertbytearraytoimagesource (received );}}} Catch {} Since the data format obtained from the camera is imagesource, we need to convert it to byte [] for transmission. The conversion code is as follows:

         /// <Summary>          /// Converts an <see CREF = "imagesource"/> to an array of bytes.          /// </Summary>          /// <Param name = "image"> <see CREF = "imagesource"/> to convert. </param>          /// <Returns> array of bytes. </returns>         Public    Byte [] Convertimagesourcetobytearray (imagesource image ){ // Declare Variables              Byte [] Result = Null ; // Use a memory stream to convert              Using (Memorystream = New Memorystream ()){ // Get right Encoder Required bitmapencoder encoder = New Jpegbitmapencoder ();// Get right frame                  If (Image Is Bitmapsource) {encoder. frames. Add (bitmapframe. Create (bitmapsource) image ));} // Now set some encoder values Encoder. qualitylevel = 100; encoder. Save (memorystream ); // Now convert Result = memorystream. toarray ();} // Return result              Return Result ;}

The data received from the WCF Service isByte[] Format, we need to convert it to imagesource, the Code is as follows:

        /// <Summary>          /// Converts an array of bytes to a <see CREF = "imagesource"/>.          /// </Summary>          /// <Param name = "bytes"> bytes to convert. </param>          /// <Returns> <see CREF = "imagesource"/>. </returns>          Public Imagesource convertbytearraytoimagesource ( Byte [] Bytes ){ // Declare Variables Imagesource result = Null ; // Validate input             If (Bytes. Length = 0) Return   Null ; // Create memory stream-it seems that if you clean up or dispose              // The memory stream, you cannot display the image any longer Memorystream = New Memorystream (bytes ); // Assign to bitmap image Bitmapimage = New Bitmapimage (); bitmapimage. begininit (); bitmapimage. streamsource = memorystream; bitmapimage. endinit ();// Assign bitmap to Image Source Result = bitmapimage; // Return result              Return Result;} after completing these operations in the previous article, we can implement the video session function.

 
Effect:
 

 
1. Select video with Xiaohua:
 

 

2. Xiaohua received the request:

3. Video:

 

I demonstrated it on a computer, so only one side displays data. However, I tested it with two laptops, and the results were also good.

Summary:

The main technologies used are: WCF, WPF, and udpclient. An open-source control webcam Control for WPF is also used. This program has been debugged for one day.

Because the blog space is insufficient, the code will be uploaded to codeplex after a while.

Related Articles:

WPF + WCF step by step create an audio chat room (1): Overview WPF + WCF step by step create an audio chat room (2 ): text Chat and whiteboard sharing WPF + WCF step by step create audio chat room (3): Voice chat WPF + WCF step by step create audio chat room (4): video session