首先還是簡單的介紹下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