{"id":187270,"date":"2013-07-21T03:50:04","date_gmt":"2013-07-20T23:50:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=187270"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=187270","title":{"rendered":"<span class=\"post_title\">WebRTC PeerConnection \u0438 DataChannel: \u043e\u0431\u043c\u0435\u043d \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t<img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/deb\/a57\/dfd\/deba57dfd758e340ea294ff81d1fbc61.png\" alt=\"image\"\/><\/p>\n<p>  \u041c\u043d\u043e\u0433\u0438\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0435 <a href=\"http:\/\/webrtc.org\">WebRTC<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435. \u041d\u0430 \u0434\u043d\u044f\u0445 \u043c\u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u0438 \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c, \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 P2P-\u0447\u0430\u0442. \u042d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442 \u0443\u0434\u0430\u043b\u0430\u043b\u0441\u044f, \u0438 \u043f\u043e \u043c\u043e\u0442\u0438\u0432\u0430\u043c \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442. \u041d\u0430 \u0425\u0430\u0431\u0440\u0435 \u0443\u0436\u0435 \u0431\u044b\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u0438, \u043e\u0441\u0432\u0435\u0449\u0430\u044e\u0449\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f WebRTC \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432\u0438\u0434\u0435\u043e, \u043e\u0434\u043d\u0430\u043a\u043e \u043c\u0435\u043d\u044f \u0432 \u043f\u0435\u0440\u0432\u0443\u044e (\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e) \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u043c\u0435\u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c\u0438 \u0438\u043b\u0438 \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u0414\u043b\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c RTCPeerConnection (\u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f) \u0438 RTCDataChannel (\u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445). \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f RTCIceCandidate \u0438 RTCSessionDescription, \u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430 DataChannel \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0434\u0430\u0432\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043d\u0443\u0436\u0435\u043d Firefox 19+ \u0438\u043b\u0438 Chrome 25+. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 Firefox &lt; 22 WebRTC \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d (\u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 media.peerconnection.enabled \u0432 true), \u0430 Chrome 25 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441 \u0444\u043b\u0430\u0433\u043e\u043c &#8212;enable-data-channels. \u042f \u043d\u0435 \u0441\u0442\u0430\u043b \u043e\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0438\u0445, \u0438 \u044d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 Firefox 22+ \u0438 Chrome 26+. Opera 15 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 WebRTC \u043d\u0435 \u0438\u043c\u0435\u0435\u0442.<\/p>\n<h4>\u041f\u043e\u0435\u0445\u0430\u043b\u0438<\/h4>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u044d\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u0432 Firefox \u0438 Chrome \u0438\u043c\u0435\u044e\u0442 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b moz \u0438 webkit \u0441\u043e\u043e\u0442\u0432\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0432\u0435\u0434\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a:<\/p>\n<pre><code class=\"javascript\">window._RTCPeerConnection = window.webkitPeerConnection00 || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.RTCPeerConnection || window.PeerConnection; window._RTCIceCandidate = window.webkitRTCIceCandidate || window.mozRTCIceCandidate || window.RTCIceCandidate; window._RTCSessionDescription = window.webkitRTCSessionDescription || window.mozRTCSessionDescription || window.RTCSessionDescription; <\/code><\/pre>\n<p>  \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 Firefox \u0438 Chrome \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<pre><code class=\"javascript\">var browser = {   mozilla: \/firefox\/i.test(navigator.userAgent),   chrome: \/chrom(e|ium)\/i.test(navigator.userAgent) }; <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u0443\u0437\u043d\u0430\u043b\u0438 \u0434\u0440\u0443\u0433 \u043e \u0434\u0440\u0443\u0433\u0435, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u00ab\u0441\u0438\u0433\u043d\u0430\u043b\u044c\u043d\u044b\u0439\u00bb \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c, \u0440\u0435\u0430\u043b\u0438\u0437\u0438\u0430\u0446\u0438\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e WebRTC \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443. \u041e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u0443\u0437\u043d\u0430\u044e\u0442 \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 \u043f\u0440\u044f\u043c\u043e\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435. \u042d\u0442\u0430 \u0441\u0445\u0435\u043c\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u043d\u0430 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u043f\u043e\u0437\u0430\u0438\u043c\u0441\u0442\u0432\u043e\u0432\u0430\u043b <a href=\"http:\/\/habrahabr.ru\/post\/163527\/\">\u043e\u0442\u0441\u044e\u0434\u0430<\/a>:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/75f\/fad\/9d2\/75ffad9d2bfa22aff07d8460f477ef8f.png\" alt=\"image\"\/><\/p>\n<ul>\n<li>\u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 Offer \u0432\u0442\u043e\u0440\u043e\u043c\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0443;<\/li>\n<li>\u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 Answer \u043f\u0435\u0440\u0432\u043e\u043c\u0443;<\/li>\n<li>\u0442\u0435\u043f\u0435\u0440\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u0437\u043d\u0430\u044e\u0442 \u0434\u0440\u0443\u0433 \u043e \u0434\u0440\u0443\u0433\u0435 \u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435.<\/li>\n<\/ul>\n<p>  \u0412 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b WebSocket \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u043d\u0430 node.js. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0447\u0430\u0442, \u0442\u043e \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u043c\u043d\u0438\u0442 \u043e \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0443\u043c\u0435\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 (\u0434\u043b\u044f \u043d\u043e\u0432\u043e\u043f\u0440\u0438\u0431\u044b\u0432\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439).<\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u043e\u0434 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0442.\u043a. \u044d\u0442\u043e \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u0441\u0442\u0430\u0442\u044c\u0438. \u041f\u0443\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u043d\u0430\u0448\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c:<\/p>\n<pre><code class=\"javascript\">var observer = {   \/\/ ...   send: function(evt, data) {     \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0443     this._send(evt, data);   },   on: function(evt, callback) {     \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f (&quot;ICE&quot; \u0438\u043b\u0438 &quot;SDP&quot;, \u0440\u0435\u0447\u044c \u043e \u043d\u0438\u0445 \u043f\u043e\u0439\u0434\u0435\u0442 \u043d\u0438\u0436\u0435)     \/\/ ...   }   \/\/ ... } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<\/h4>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u00a0\u2013\u00a0\u0410\u043b\u0438\u0441\u0430 \u0438 \u0411\u043e\u0431. \u0411\u043e\u0431 \u0437\u0430\u0448\u0435\u043b \u0432 \u0447\u0430\u0442, \u043a\u043e\u0433\u0434\u0430 \u0442\u0430\u043c \u043d\u0438\u043a\u043e\u0433\u043e \u043d\u0435 \u0431\u044b\u043b\u043e, \u0430 \u0410\u043b\u0438\u0441\u0430 \u0437\u0430\u0448\u043b\u0430 \u0447\u0435\u0440\u0435\u0437 \u043c\u0438\u043d\u0443\u0442\u0443 \u0438 \u0441 \u043e\u0442 \u0441\u0438\u0433\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0443\u0437\u043d\u0430\u043b\u0430, \u0447\u0442\u043e \u0411\u043e\u0431 \u043e\u043d\u043b\u0430\u0439\u043d \u0438 \u0436\u0434\u0435\u0442 \u0435\u0435. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0410\u043b\u0438\u0441\u0430 \u0431\u0443\u0434\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0411\u043e\u0431\u0443, \u0430 \u0411\u043e\u0431 \u2013 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0435\u0439.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0410\u043b\u0438\u0441\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 RTCPeerConnection (\u043a\u0430\u043a \u0432\u044b \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0443\u0442\u044c \u0432\u044b\u0448\u0435 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 _RTCPeerConnection). \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043d\u0438\u0436\u0435.<\/p>\n<pre><code class=\"javascript\">var pc, channel; var config = {   iceServers: [{ url: !browser.mozilla ?  &quot;stun:stun.l.google.com:19302&quot; : &quot;stun:23.21.150.121&quot; }] }; var constrains = {   options: [{ DtlsSrtpKeyAgreement: true }, { RtpDataChannels: true }] };  function createPC(isOffer) {   pc = new _RTCPeerConnection(config, constrains);    \/\/ \u0421\u0440\u0430\u0437\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439   pc.onicecandidate = function(evt) {      if(evt.candidate) {       \/\/ \u041a\u0430\u0436\u0434\u044b\u0439 ICE-\u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u0433\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440       observer.send('ICE', evt.candidate);     }   };   pc.onconnection = function() {     \/\/ \u041f\u043e\u043a\u0430 \u044d\u0442\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Firefox     console.log('Connection established');   };   pc.onclosedconnection = function() {     \/\/ \u0418 \u044d\u0442\u043e \u0442\u043e\u0436\u0435. \u0412 Chrome \u043e \u0440\u0430\u0437\u0440\u044b\u0432\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0443\u0437\u043d\u0430\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c     console.log('Disconnected');   };      if(isOffer) {     openOfferChannel();     createOffer();   } else {     openAnswerChannel();   } } <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0410\u043b\u0438\u0441\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 createPC(true); <\/code><\/pre>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0438\u0440\u0435 \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0441\u043a\u0438\u043c <a href=\"http:\/\/ru.wikipedia.org\/wiki\/NAT\">NAT<\/a>, \u0432 WebRTC \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0435\u0433\u043e \u043e\u0431\u0445\u043e\u0434\u0430 (<a href=\"http:\/\/en.wikipedia.org\/wiki\/Interactive_Connectivity_Establishment\">ICE<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/STUN\">STUN<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/TURN\">TURN<\/a>). \u041f\u0435\u0440\u0432\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c <i>config<\/i> \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c STUN \u0438\/\u0438\u043b\u0438 TURN \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432. \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0438. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b STUN-\u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442 Google. \u041a\u0441\u0442\u0430\u0442\u0438, \u0435\u0441\u043b\u0438 \u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043d\u044f\u043b, \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0432 Firefox \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u043e\u043c\u0435\u043d\u043d\u044b\u0445 STUN-\u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043d\u0435\u043c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435. <br \/>  \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <i>constrains<\/i> \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439, \u0432 \u043d\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f. \u041f\u0440\u043e \u043e\u043f\u0446\u0438\u044e <i>DtlsSrtpKeyAgreement<\/i> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"http:\/\/www.webrtc.org\/interop\">\u0437\u0434\u0435\u0441\u044c<\/a>, \u0430 \u043e\u043f\u0446\u0438\u044f <i>RtpDataChannels<\/i>, <a href=\"http:\/\/www.webrtc.org\/chrome\">\u0441\u0443\u0434\u044f \u043f\u043e \u0432\u0441\u0435\u043c\u0443<\/a>, \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f Chrome 25 (\u0438, \u0431\u044b\u0442\u044c \u043c\u043e\u0436\u0435\u0442, \u0435\u0449\u0435 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0432\u0435\u0440\u0441\u0438\u0439). \u0412 28 \u0443 \u043c\u0435\u043d\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0438 \u0431\u0435\u0437 \u043d\u0435\u0435.<\/p>\n<p>  \u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f ICE-\u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u0430\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u0433\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 (\u0432 \u043d\u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0441\u0435\u0442\u0435\u0432\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435, \u0430\u0434\u0440\u0435\u0441 \u0438 \u0434\u0440.). \u041f\u0440\u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 pc.onicecandidate (\u043e\u043d\u043e \u043d\u0430\u0447\u043d\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u0441\u0441\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u043c setLocalDescription, \u043e \u0447\u0435\u043c \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u043d\u0438\u0436\u0435).<\/p>\n<p>  \u0413\u043e\u0442\u043e\u0432\u0438\u043c\u0441\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u044b \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">observer.on('ICE', function(ice) {   \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0438\u0448\u0435\u0434\u0448\u0438\u0439 ICE-\u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442   pc.addIceCandidate(new _RTCIceCandidate(ice)); }); <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u0410\u043b\u0438\u0441\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u0430\u043d\u0430\u043b. \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043a\u0430\u043d\u0430\u043b \u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"javascript\">function openOfferChannel() {   \/\/ \u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u2013 \u0438\u043c\u044f \u043a\u0430\u043d\u0430\u043b\u0430, \u0432\u0442\u043e\u0440\u043e\u0439 - \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 Chrome \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e UDP-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f (non-reliable), \u0430 Firefox \u2013\u00a0\u0438 UDP, \u0438 TCP (reliable)   channel = pc.createDataChannel('RTCDataChannel', browser.chrome ? {reliable: false} : {});   \/\/ \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u043d\u0430\u043b\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c binaryType \u0432 &quot;blob&quot;, \u043d\u043e \u043f\u043e\u043a\u0430 \u044d\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e Firefox (Chrome \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443)   if(browser.mozilla) channel.binaryType = 'blob';    setChannelEvents(); } function setChannelEvents() {   channel.onopen = function() {     console.log('Channel opened');   };   channel.onclose = function() {     console.log('Channel closed');   };   channel.onerror = function(err) {     console.log('Channel error:', err);   };   channel.onmessage = function(e) {     console.log('Incoming message:', e.data);   }; } <\/code><\/pre>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0410\u043b\u0438\u0441\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0411\u043e\u0431\u0443 \u00abOffer\u00bb (\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0435\u0441\u0441\u0438\u0438 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0439 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439, <a href=\"http:\/\/tools.ietf.org\/html\/rfc3264\">SDP<\/a>).<\/p>\n<pre><code class=\"javascript\">function createOffer() {   pc.createOffer(function(offer) {     pc.setLocalDescription(offer, function() {       \/\/ \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u0433\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440       observer.send('SDP', offer);       \/\/ \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0430\u0447\u043d\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 pc.onicecandidate     }, function(err) {       console.log('Failed to setLocalDescription():', err);     });   }, function(err) {     console.log('Failed to createOffer():', err);   }); } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0410\u043b\u0438\u0441\u0430 \u0436\u0434\u0435\u0442 \u0441\u0435\u0441\u0441\u0438\u044e \u0411\u043e\u0431\u0430 \u043e\u0442 \u0441\u0438\u0433\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f setRemoteSDP.<\/p>\n<pre><code class=\"javascript\">function setRemoteSDP(sdp) {   pc.setRemoteDescription(new _RTCSessionDescription(sdp), function() {     if(pc.remoteDescription.type == 'offer') {       \/\/ \u042d\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0443 \u0411\u043e\u0431\u0430       createAnswer();     }   }, function(err) {     console.log('Failed to setRemoteDescription():', err);   }); }  observer.on('SDP', function(sdp) {   if(!pc) {     \/\/ \u041f\u0440\u0438\u0448\u0435\u043b Offer \u043e\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430     \/\/ \u0411\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435     createPC(false);   }   setRemoteSDP(sdp); }); <\/code><\/pre>\n<p>  \u0422\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0411\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0442 \u0441\u0438\u0433\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0441\u0435\u0441\u0441\u0438\u044e \u0410\u043b\u0438\u0441\u044b, \u0441\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 RTCPeerConnection \u0438 \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u043a\u0430\u043d\u0430\u043b (\u044d\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 createPC).<\/p>\n<pre><code class=\"javascript\">function openAnswerChannel() {   pc.ondatachannel = function(e) {     channel = e.channel;     if(browser.mozilla) channel.binaryType = 'blob';      setChannelEvents();   }; } <\/code><\/pre>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0411\u043e\u0431 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u0435\u0441\u0441\u0438\u044e \u0410\u043b\u0438\u0441\u044b, \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0435 \u0410\u043b\u0438\u0441\u0435.<\/p>\n<pre><code class=\"javascript\">function createAnswer() {   pc.createAnswer(function(offer) {     pc.setLocalDescription(offer, function() {       \/\/ \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u0433\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440       observer.send('SDP', offer);     }, function(err) {       console.log('Failed to setLocalDescription():', err);     });   }, function(err) {     console.log('Failed to createAnswer():', err);   }); } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u041e\u0431\u043c\u0435\u043d \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438<\/h4>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f setRemoteDescription() \u0443 \u043e\u0431\u043e\u0438\u0445 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432 \u0438 \u043e\u0431\u043c\u0435\u043d\u0430 ICE-\u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u0430\u043c\u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0410\u043b\u0438\u0441\u043e\u0439 \u0438 \u0411\u043e\u0431\u043e\u043c \u0434\u043e\u043b\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432 Chrome \u0438 Firefox \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 channel.onopen, \u0430 \u0432 Firefox \u2013\u00a0\u0435\u0449\u0435 \u0438 pc.onconnection.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0410\u043b\u0438\u0441\u0430 \u0438 \u0411\u043e\u0431 \u043c\u043e\u0433\u0443\u0442 \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 channel.send():<\/p>\n<pre><code class=\"javascript\">channel.send(&quot;Hi there!&quot;); <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 channel.onmessage.<\/p>\n<h4>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0434\u0438\u0441\u043a\u043e\u043d\u043d\u0435\u043a\u0442\u0430<\/h4>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u0441\u043e\u0435\u0434\u043d\u0438\u0435\u043d\u0438\u0435, \u0432 Firefox \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0434\u0432\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f: pc.onclosedconnection \u0438 channel.onclose. <br \/>  \u0410 \u0432\u043e\u0442 \u0432 Chrome \u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e, \u043e\u0434\u043d\u0430\u043a\u043e \u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 pc \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 iceConnectionState \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u00abdisconnected\u00bb (\u043f\u043e \u043c\u043e\u0438\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f\u043c, \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u0441\u0440\u0430\u0437\u0443, \u0430 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0443\u043d\u0434). \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u0441\u0442\u044b\u043b\u044c, \u043f\u043e\u043a\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0438 \u0432\u044b\u0437\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">if(browser.chrome) {   setInterval(function() {     if(pc.iceConnectionState == &quot;disconnected&quot;) {       console.log(&quot;Disconnected&quot;);     }   }, 1000); } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0422\u0435\u043a\u0443\u0449\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<p>  <\/p>\n<ul>\n<li>\u0425\u043e\u0447\u0443 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c Chrome \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u0438\u043d\u043e\u0439 \u043d\u0435 \u0431\u043e\u043b\u0435\u0435 ~1100 \u0431\u0430\u0439\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0435, \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0447\u0430\u0441\u0442\u044f\u043c\u0438. Firefox \u0443\u0436\u0435 \u0443\u043c\u0435\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u0443 \u043d\u0435\u0433\u043e \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0435\u0442.<\/li>\n<li>\u0415\u0449\u0435 \u043e\u0434\u043d\u0438\u043c \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043a\u0430 Chrome \u0438 Firefox \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 (setRemoteDescription() \u0441 \u0441\u0435\u0441\u0441\u0438\u0435\u0439 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442 \u043e\u0448\u0438\u0431\u043a\u0443, \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f).<\/li>\n<li>\u0422\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0442\u0430\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435, \u0442\u0430\u043a \u0438 \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0412 Firefox \u0441 \u044d\u0442\u0438\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0435\u0442, \u0430 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0441 Chrome \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f: \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043f\u0438\u0448\u0443\u0442, \u0447\u0442\u043e \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f, \u0438 \u0436\u0434\u0443\u0442, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u044f\u0442, \u043e\u0434\u043d\u0430\u043a\u043e \u043c\u043d\u0435 \u0432 Chrome 28 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043a\u0430\u043a \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c, \u0442\u0430\u043a \u0438 \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0438\u0445. \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u044f \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e.<\/li>\n<\/ul>\n<p>  <\/p>\n<h4>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439, \u0438 \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0435\u0435 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435\u043c, \u0445\u043e\u0442\u044c \u0438 \u0441 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f\u043c\u0438.<br \/>  \u0410 \u0432\u043e\u0442 \u0438 <a href=\"http:\/\/luethus.org\/chat\/\">\u0441\u0441\u044b\u043b\u043a\u0430<\/a> \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u0447\u0430\u0442, \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u043b \u043c\u0435\u043d\u044f \u043d\u0430 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e. \u042f \u043f\u0438\u0441\u0430\u043b \u0435\u0433\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0438 \u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f WebRTC, \u0438 \u0432 Chrome \u043e\u043d \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u043e\u043b\u0435\u0435 ~1100 \u0431\u0430\u0439\u0442 (\u0440\u0430\u0437\u0431\u0438\u0432\u043a\u0443 \u044f \u043d\u0435 \u0434\u0435\u043b\u0430\u043b).<\/p>\n<p>  \u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438:  <\/p>\n<ul>\n<li><a href=\"http:\/\/dev.w3.org\/2011\/webrtc\/editor\/webrtc.html\">\u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/a> (\u0442\u0430\u043c \u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432)<\/li>\n<li><a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webrtc\/basics\/\">\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 HTML5 Rocks<\/a><\/li>\n<li>\u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043c\u043e\u0433\u043b\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 <a href=\"https:\/\/github.com\/muaz-khan\/WebRTC-Experiment\">\u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a><\/li>\n<\/ul>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/187270\/\"> http:\/\/habrahabr.ru\/post\/187270\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t<img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/deb\/a57\/dfd\/deba57dfd758e340ea294ff81d1fbc61.png\" alt=\"image\"\/><\/p>\n<p>  \u041c\u043d\u043e\u0433\u0438\u0435 \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0435 <a href=\"http:\/\/webrtc.org\">WebRTC<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435. \u041d\u0430 \u0434\u043d\u044f\u0445 \u043c\u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u0438 \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c, \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 P2P-\u0447\u0430\u0442. \u042d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442 \u0443\u0434\u0430\u043b\u0430\u043b\u0441\u044f, \u0438 \u043f\u043e \u043c\u043e\u0442\u0438\u0432\u0430\u043c \u044f \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442. \u041d\u0430 \u0425\u0430\u0431\u0440\u0435 \u0443\u0436\u0435 \u0431\u044b\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u0438, \u043e\u0441\u0432\u0435\u0449\u0430\u044e\u0449\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f WebRTC \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432\u0438\u0434\u0435\u043e, \u043e\u0434\u043d\u0430\u043a\u043e \u043c\u0435\u043d\u044f \u0432 \u043f\u0435\u0440\u0432\u0443\u044e (\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e) \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u043c\u0435\u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c\u0438 \u0438\u043b\u0438 \u0431\u0438\u043d\u0430\u0440\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-187270","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/187270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=187270"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/187270\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=187270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=187270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=187270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}