Android IOS WebRTC Audio Video Development Summary (vii)

The previous series of summary is to say webrtc how to download, compile, develop, some people may be a bit foggy, WEBRTC is not used for cross-browser development, how I said these with the browser does not have any relationship, actually look at the following structure diagram, you will understand ( This series of articles reproduced please indicate the source: Http://www.cnblogs.com/lingyunhu).

What I said earlier is encapsulated in browser, such as audio and video capture, encoding, transmission, echo cancellation, and packet loss retransmission. So if you want to integrate these features into your product, you have to understand these things.

If you only want to do browser-based video Call function, above these you can not understand, but also do not need to download compiled WEBRTC code, because the implementation of these functions required by the JS Interface browser has been to help you achieve, you only need to simply call, we first see the implementation of such a function mainly involved in what steps?

1, signaling Interaction: Start a video call before the initiator and the receiver need some interaction, such as notifying each other to start the video, receive video, video parameter negotiation (SDP information), NAT address Exchange, this process we call the signaling interaction, WEBRTC does not define the standard signaling format, You can use either SIP or XMPP, or you can use a custom signaling format, and the simplest way is to use WebSocket or XMLHttpRequest, a custom format to complete the signaling interaction process.

2, get local video stream: Navigator.getusermedia (Constraints, Successcallback, errorcallback);

Navigator.getusermedia = Navigator.getusermedia | | Navigator.webkitgetusermedia | | navigator.mozgetusermedia;//Callback to being called in case of Success...function Successcallback (gotstream) {video.src = W Indow.  Url.createobjecturl (stream); Start playing video Video.play ();}  Callback to being called in case of Failure...function Errorcallback (error) {Console.log ("Navigator.getusermedia Error:", Error);} Constraints object for low resolution Videovar qvgaconstraints = {video: {mandatory: {maxwidth:320, MA xheight:240}}};//Constraints object for standard resolution Videovar vgaconstraints = {video: {mandatory: {m axwidth:640, maxheight:480}}};//Constraints object for high resolution Videovar hdconstraints = {video: {mans Datory: {minwidth:1280, minheight:960}}};function getmedia (constraints) {if (!!  Stream) {video.src = null; Stream.stop ();} Navigator.getusermedia (Constraints, Successcallback, errorcallback);}

3. Use the Rtcpeerconnection object to exchange media stream data between browsers.

1 function call () {2 log ("Starting call");3 4 //Note well:getvideotracks () and Getaudiotracks () is not currently supported in Firefox ...5 //... just use them with Chrome6 if (navigator.webkitgetusermedia) {7 //Log info about video and audio device in use8 if (localstream.getvideotracks (). length > 0) {9 log (' Using video device: ' + localstream.getvideotracks () [0].label);Ten       } One if (localstream.getaudiotracks (). length > 0) { A log (' Using audio device: ' + localstream.getaudiotracks () [0].label); -       } -   } the    - //Chrome - if (navigator.webkitgetusermedia) { - rtcpeerconnection = webkitrtcpeerconnection; + //Firefox - }else if (navigator.mozgetusermedia) { + rtcpeerconnection = mozrtcpeerconnection; A rtcsessiondescription = mozrtcsessiondescription; at rtcicecandidate = mozrtcicecandidate; -   } - log ("Rtcpeerconnection object:" + rtcpeerconnection); -    - //This is a optional configuration string, associated with NAT traversal setup - var servers = null; in  - //Create The local Peerconnection object to localpeerconnection = new rtcpeerconnection (servers); + log ("Created local Peer Connection object Localpeerconnection"); - //ADD a handler associated with ICE protocol events the localpeerconnection.onicecandidate = gotlocalicecandidate; *  $ //Create The remote Peerconnection objectPanax Notoginseng remotepeerconnection = new rtcpeerconnection (servers); - log ("Created remote Peer Connection object Remotepeerconnection"); the //ADD a handler associated with ICE protocol events ... + remotepeerconnection.onicecandidate = gotremoteicecandidate; A //... and a second handler to be activated as soon as the remote stream becomes available the remotepeerconnection.onaddstream = Gotremotestream; +  - //ADD the local stream (as returned by Getusermedia () to the local peerconnection $ Localpeerconnection.addstream (localstream); $ log ("Added Localstream to Localpeerconnection"); -    - //We ' re all set! Create an offer to being ' sent ' to the callee as soon as the local SDP was ready the Localpeerconnection.createoffer (gotlocaldescription, onsignalingerror); - }Wuyi  the function Onsignalingerror (error) { - Console.log (' Failed to create signaling message: ' + error.name '); Wu } -  About //Handler to is called when the ' local ' SDP becomes available $ function Gotlocaldescription (description) { - //ADD The local description to the local peerconnection - localpeerconnection.setlocaldescription (description); - log ("offer from localpeerconnection: \ n" + DESCRIPTION.SDP); A    + //... do the same with the ' Pseudo-remote ' peerconnection the //Note well:this is the and that would have changed if you want the communicating peers to become - //Remote (which calls for the setup of a proper signaling channel) $ remotepeerconnection.setremotedescription (description); the    the //Create The Answer to the received offer based on the ' local ' description the Remotepeerconnection.createanswer (gotremotedescription, onsignalingerror); the } -  in //Handler to is called when the ' remote ' SDP becomes available the function Gotremotedescription (description) { the //Set the ' remote ' description as the local description of the remote peerconnection About remotepeerconnection.setlocaldescription (description); the log ("Answer from remotepeerconnection: \ n" + DESCRIPTION.SDP); the //Conversely, set the ' remote ' description as the remote description of the local peerconnection the localpeerconnection.setremotedescription (description); + } -  the //Handler to be called as soon as the remote stream becomes availableBayi function Gotremotestream (event) { the //Associate The remote video element with the retrieved stream the if (window. URL) { - //Chrome - remotevideo.src = window. Url.createobjecturl (event.stream); the } else { the //Firefox the remotevideo.src = Event.stream; the   }   - log ("Received remote Stream"); the } the  the //Handler to be called whenever a new local ICE candidate becomes available94 function Gotlocalicecandidate (event) { the if (event.candidate) { the //ADD candidate to the remote peerconnection the remotepeerconnection.addicecandidate (New Rtcicecandidate (event.candidate));98 log ("Local ICE candidate: \ n" + event.candidate.candidate); About   } - }101 102 //Handler to be called whenever a new ' remote ' ICE candidate becomes available103 function Gotremoteicecandidate (event) {104 if (event.candidate) { the //ADD candidate to the local peerconnection106 localpeerconnection.addicecandidate (New Rtcicecandidate (event.candidate));107 log ("Remote ICE candidate: \ n" + event.candidate.candidate);108}

This is basically the main object that is involved in the video call on the browser.

corresponding to the mobile phone is WEBRTC after the successful compilation of apprtcdemo.apk.

Android IOS WebRTC Audio Video Development Summary (vii)