WebRTC for UWP_ZenDei技術網路在線

首先還是簡單的介紹下webRTC吧： WebRTC，名稱源自網頁實時通信（Web Real-Time Communication）的縮寫，是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術，是谷歌2010年以6820萬美元收購Global IP Solutions公司而獲得的一項技術。2011年5 ...

首先還是簡單的介紹下webRTC吧：

　　WebRTC，名稱源自網頁實時通信（Web Real-Time Communication）的縮寫，是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術，是谷歌2010年以6820萬美元收購Global IP Solutions公司而獲得的一項技術。2011年5月開放了工程的源代碼，在行業內得到了廣泛的支持和應用，成為下一代視頻通話的標準。（摘自百度百科）

　　簡而言之，webrtc就是一種讓瀏覽器獲得更好的音視頻實時通話的技術，現在各大瀏覽器都已經支持。由於是開源的，所以不僅僅局限於瀏覽器，各大平都有相應編譯的版本，包括uwp。

　　介紹完了（雖然你肯定還不明白），那就來談談uwp的實現吧。

　　首先要使用webrtc需要在nuget包管理中搜索並安裝”webrtc“，或者在nuget控制台輸入Install-Package WebRTC。安裝完成後using webrtc_winrt_api;這個命名空間，接下來就可以直接用了。

　　先來說下使用webrtc需要具備的條件：

　　　　1.發送連接信息和打洞信息的伺服器，也就是信令伺服器。不過這個沒有什麼要求，只要可以把信息送到對方就可以了。你可以使用任何協議來完成信令傳輸，比如socket，websocket，http等等。

　　　　2.打洞伺服器IceServer。這個伺服器需要有兩個功能：

　　　　　　1. NAT/防火牆穿越
　　　　　　2. 如果點對點通信建立失敗，可以作為中轉伺服器

　　如果網路條件具備了，那麼請接著往下看：

　　WebRTC這裡提供了三個介面：

　　　　 MediaStream：通過MediaStream的API能夠通過設備的攝像頭及麥克風獲得視頻、音頻的同步流
　　　　 RTCPeerConnection：RTCPeerConnection是WebRTC用於構建點對點之間穩定、高效的流傳輸的組件
　　　　 RTCDataChannel：RTCDataChannel建立一個高吞吐量、低延時的通道，用於傳輸任意數據　

這和web端以及其他平臺是一致的，只不過實現的方法略微不同。

　　下麵來看看如何獲取視頻流以及音頻流：

首先最重要的是初始化

 WebRTC.Initialize(this.Dispatcher);

接下來

            Media = Media.CreateMedia();//創建一個Media對象

            RTCMediaStreamConstraints mediaStreamConstraints = new RTCMediaStreamConstraints() //設置要獲取的流 
            {
                audioEnabled = true,
                videoEnabled = true
            }; 

            var apd = Media.GetAudioPlayoutDevices(); 
            var acd = Media.GetAudioCaptureDevices(); 
            var vcd = Media.GetVideoCaptureDevices(); 
            Media.SelectAudioCaptureDevice(acd[0]);
            Media.SelectAudioPlayoutDevice(apd[0]); 
            Media.SelectVideoDevice(vcd.First(p => p.Location.Panel == Windows.Devices.Enumeration.Panel.Front));//設置視頻捕獲設備
            var mediaStream = await Media.GetUserMedia(mediaStreamConstraints);//獲取視頻流 這裡視頻和音頻是一起傳輸的
            var videotracs = mediaStream.GetVideoTracks();
            var audiotracs = mediaStream.GetAudioTracks();
            var source = Media.CreateMediaSource(videotracs.FirstOrDefault(), mediaStream.Id);//創建播放源
            LocalMediaPlayer.SetMediaStreamSource(source); //設置MediaElement的播放源

現在就已經獲取到了本地視頻了，如果媒體播放控制項的autoplay為true的話，那麼視頻已經開始播放，你將看到自己帥氣的臉龐。

下麵就要開始連接了，首先創建一個RTCPeerconnection並包含你的打洞伺服器IceServer：

　　　　　　  List<RTCIceServer> iceservers = new List<RTCIceServer>()
              {
                    new RTCIceServer {Url="<your server>",Username="<your name>" },
                    new RTCIceServer {Url="<your server>",Username="<your name>" },
                    new RTCIceServer {Url="<your server>",Username="<your name>" },
                    new RTCIceServer {Url="<your server>",Username="<your name>" }
               }; //不一定是這麼多個

            RTCConfiguration configuration = new RTCConfiguration() { BundlePolicy = RTCBundlePolicy.Balanced, IceServers = servers, IceTransportPolicy = RTCIceTransportPolicy.All };
            conn = new RTCPeerConnection(configuration);
            conn.AddStream(mediaStream);
            conn.OnIceCandidate += Conn_OnIceCandidate;
            conn.OnAddStream += Conn_OnAddStream;

接下來開始連接：

　　Step1：視頻通話發起方Creeat一個Offer，設置Peerconnection的LocalDescription，把offer的Sdp發送到視頻通話接收方：

 public async Task CreatOffer() //此時是發起方的操作
        {
            var offer = await conn.CreateOffer();
            await conn.SetLocalDescription(offer);
            await Send_Message(offer.Sdp);
        }

　　Step2：接收方收到Offer消息，此時同發起方一樣，初始化並創建mediaStream，創建peerconnection。設置peerconnection的RemoteDescription，創建一個Answer，設置LocalDescription，發送Answer的Sdp給發起方：

 async public Task CreatAnswer(string offersdp) //此時是接受方的操作
        { 
            var offer = new RTCSessionDescription(RTCSdpType.Offer, offersdp);
            await conn.SetRemoteDescription(offer);
            var answer = await conn.CreateAnswer();
            await conn.SetLocalDescription(answer); 
            await Send_Message(answer.Sdp);    
        }

於此同時，RTCPeerconnection的OnIceCandidate事件會被觸發，發送Candidate的數據到另一端

  private async void Conn_OnIceCandidate(RTCPeerConnectionIceEvent __param0) //此事件接收方和發起方都需要
        {
            var Candidate = __param0.Candidate;
            var candidate = JsonConvert.SerializeObject(Candidate);
            await Send_Message(candidate);
        }

接收到Candidate後將Candidate添加到Peerconnection

  await conn.AddIceCandidate(JsonConvert.DeserializeObject<RTCIceCandidate>(CandidateMsg));//兩邊都與要添加，candidatemsg為收到的信息，而非自己的

當上述過程完成後，Peerconnection的OnAddStream事件會被觸發，這也代表通信建立完成，通話開始。將接收到的stream添加到MEdiaElement：

            var stream = __param0.Stream;
            var videotracks = stream.GetVideoTracks();
            var source = Media.CreateMediaSource(videotracks.FirstOrDefault(), stream.Id); 
            RemoteMediaPlayer.SetMediaStreamSource(source);
            RemoteMediaPlayer.Play();

好了一個完整的WebRTC通話過程就完成了！

讓我們再來回顧一下整個過程：Server代表發起方，Client代表接收方（很顯然這樣稱呼是不正確的）

　　Step1.　　WebRTC.Initialize 　　　　　　　　　　　　　　　Server & Client

　　Step2.　　Media.CreatMedia　　　　　　　　　　　　　　　 Server & Client

　　Step3.　　Media.GetUserMedia　　　　　　　　　　　　　　Server & Client

　　Step4.　　new RTCPeerconnection 　　　　　　　　　　　　Server & Client

　　Step5.　　Conn.AddStream　　　　　　　　　　　　　　　 Server & Client

　　Step6.　　CreatOffer 　　　　　　　　　　　　　　　　　　 Server

　　Step7.　　SetLocalDescription 　　　　　　　　　　　　　　Server

　　Step8.　　Send Offer.Sdp 　　　　　　　　　　　　　　　　 Server

　　Step9.　　SetRemoteDescription 　　　　　　　　　　　　 Client

　　Step10.　　CreatAnswer 　　　　　　　　　　　　　　　　 Client

　　Step11.　　SerLocalDescription 　　　　　　　　　　　　　 Client

　　Step12.　　Send Answer.Sdp 　　　　　　　　　　　　　　 Client

　　Step13.　　Send Candidate 　　　　　　　　　　　　　　　 Server & Client

　　Step14.　　AddCandidate 　　　　　　　　　　　　　　　　 Server & Client