{"id":303864,"date":"2020-05-19T15:00:41","date_gmt":"2020-05-19T15:00:41","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=303864"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=303864","title":{"rendered":"WebRTC. \u0414\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0431\u043b\u0435\u043a\u0434\u0436\u0435\u043a\u043e\u043c \u0438 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0430\u043c\u0438"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/502726\/\"><b>\u0414\u043e\u0440\u043e\u0433\u043e\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c, \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0441\u0430\u043c\u0443 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u043e\u0432.<\/b><\/p>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e: \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0447\u0430\u0442-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0438 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u043a \u043d\u0435\u0439 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u0432 \u043e\u043d\u043b\u0430\u0439\u043d\u0435 \u0441\u0438\u0434\u0438\u0442 \u043d\u0435\u043a\u0438\u0439 \u0412\u0430\u0441\u044f \u0438 \u043e\u043d \u0445\u043e\u0447\u0435\u0442 \u043f\u043e\u0437\u0432\u043e\u043d\u0438\u0442\u044c \u041f\u0435\u0442\u0435, \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0439 \u0444\u0438\u0447\u0438 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f <i>WebSocket<\/i>.<\/p>\n<p>  \u0427\u0442\u043e \u0436, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u043d\u0438\u043c\u0435\u043c \u043d\u0430\u0448 WebSocket \u0441\u0435\u0440\u0432\u0435\u0440, \u043d\u0430\u043c \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 node.js;<br \/>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <b>sockets.js<\/b> \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0442\u0443\u0434\u0430 \u043a\u043e\u0434 \u0441\u043e\u043a\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430:<\/p>\n<pre><code class=\"javascript\">const WebSocketServer = require('websocket').server; const http = require('http');  const server = http.createServer(function(request, response) {  \/\/\u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0438\u0448\u0435\u043c,\u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043e\u043a\u0435\u0442\u044b,\u0430 \u043d\u0435 http }); server.listen(1337, function() {});  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0435\u0431\u0441\u043e\u043a\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 const wsServer = new WebSocketServer({   httpServer: server });  wsServer.on('request', function(request) {   let connection = request.accept(null, request.origin); \/\/\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0441\u043e\u043a\u0435\u0442\u0443 }) <\/code><\/pre>\n<p><a name=\"habracut\"><\/a><br \/>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <b>index.html<\/b> \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0442\u0443\u0434\u0430 \u043a\u043e\u0434 \u0434\u043b\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0441\u043e\u043a\u0435\u0442-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"xml\">     &lt;video autoplay muted height='300' width='300' style=&quot;position:fixed;bottom:0;left:0;z-index: 9999;&quot; src=&quot;&quot; id='my'&gt;           &lt;\/video&gt; &lt;!-- \u043d\u0430\u0448\u0435 \u0432\u0438\u0434\u0435\u043e --&gt;             &lt;video autoplay height='300' width='300' style=&quot;position:fixed;bottom:0;left:300px;z-index: 999999;&quot; src=&quot;&quot; id='not_my'&gt;           &lt;\/video&gt; &lt;!--\u0432\u0438\u0434\u0435\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043d\u0438\u043a\u0430--&gt; <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0444\u0430\u0439\u043b <b>script.js<\/b> \u043a \u043d\u0430\u0448\u0435\u043c\u0443 html \u0444\u0430\u0439\u043b\u0443:<\/p>\n<pre><code class=\"javascript\">  let connection = new WebSocket('ws:\/\/127.0.0.1:1337');\/\/\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0441\u043e\u043a\u0435\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u0443   connection.onopen = function(){ \/\/\u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e,\u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0441\u043e\u043a\u0435\u0442 \u043f\u0440\u0438 \u0435\u0433\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438  } connection.onmessage = function(message){ \/\/\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0442 \u0441\u043e\u043a\u0435\u0442\u0430   } connection.onerror = function (error) {         console.error(error)        \/\/\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f,\u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f       }; <\/code><\/pre>\n<p>  <\/p>\n<h3>\u0418\u0442\u0430\u043a, \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0412\u0430\u0441\u0435 \u0438 \u041f\u0435\u0442\u0435<\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/o7\/et\/no\/o7etnouazbck9mntphu8zdom6ni.jpeg\" alt=\"image\"\/><\/p>\n<p>  \u042d\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u0442\u0430\u043f \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0412\u0430\u0441\u044f \u0441 \u041f\u0435\u0442\u0435\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u044e\u0442\u0441\u044f JSON, \u043e \u0442\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u043b\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0437\u0432\u043e\u043d\u043e\u043a \u0438\u043b\u0438 \u043d\u0435\u0442.\u0422\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u0438 \u0437\u0430\u0445\u043e\u0434\u0435 \u043d\u0430 \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043c\u044b \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c WebSocket \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438 \u0441 \u043d\u0430\u0448\u0438\u043c \u0441\u043e\u043a\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. <\/p>\n<ol>\n<li>\u041c\u044b \u0448\u043b\u0435\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430 \u0441\u043e\u043a\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 JSON \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u0437\u0432\u043e\u043d\u0438\u0442\u044c \u041f\u0435\u0442\u0435 \u0441 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430 \u0412\u0430\u0441\u0438\n<pre><code class=\"javascript\">connection.send(JSON.stringify({ \/\/\u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 })) <\/code><\/pre>\n<\/li>\n<li>\u041d\u0430 \u0441\u043e\u043a\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u044d\u0442\u043e\u0442 JSON \u043f\u0440\u0438\u043d\u044f\u0442\u044c, \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 request, \u043c\u044b \u043d\u0430 \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <b>message<\/b>:\n<pre><code class=\"javascript\">connection.on('message',function(message){ \/\/\u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 message \u0438 \u043e\u0442\u0441\u044b\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u0443 \u0443\u0433\u043e\u0434\u043d\u043e,\u043d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043c \u0432\u0441\u0435 \u0438\u0437 JSON \u0432 JS let self = JSON.parse(message.utf8Data); }) <\/code><\/pre>\n<\/li>\n<\/ol>\n<p>  <\/p>\n<h3>\u041f\u043e\u043e\u0431\u0449\u0430\u0432\u0448\u0438\u0441\u044c \u0438 \u0440\u0435\u0448\u0438\u0432, \u0447\u0442\u043e \u043e\u0431\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440\u0443, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u0438\u0434\u0435\u043e\u0441\u0432\u044f\u0437\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0432 js \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u2014 RTCPeerConnection<\/h3>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/05\/z3\/h4\/05z3h4tof97q9_bctcnmhyz5vuq.jpeg\" alt=\"image\"\/><\/p>\n<p>  \u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c RTCPeerConnection, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0441\u0433\u0435\u043d\u0435\u043d\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c offer \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u043d\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043e\u043f\u044f\u0442\u044c \u0436\u0435 \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0448 \u0441\u043e\u043a\u0435\u0442-\u0441\u0435\u0440\u0432\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u0435\u0433\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u043c answer \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f ice \u043f\u0430\u043a\u0435\u0442\u0430\u043c\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u0431 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u0434\u043b\u044f \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0435\u043e\u0441\u0432\u044f\u0437\u0438.<\/p>\n<h2>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c offer<\/h2>\n<p>  <\/p>\n<pre><code class=\"javascript\">var pc = new RTCPeerConnection();                          var peerConnectionConfig = {               iceServers: [                   {                       urls: 'stun:stun.l.google.com:19302'                   }                 ]             }             pc.onicecandidate = function (event) {               console.log('new ice candidate', event.candidate);                if (event.candidate !== null) {                 connection.send(JSON.stringify({                  \/\/\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c json \u0438 ice \u043f\u0430\u043a\u0435\u0442\u044b                 }))               }           };              navigator.getUserMedia = navigator.getUserMedia ||                          navigator.webkitGetUserMedia ||                          navigator.mozGetUserMedia;                                     navigator.getUserMedia({video: true,audio:true}, function(stream) {               \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u043d\u0435 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 onaddstream \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430,               \/\/ \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0435\u0433\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e.             var my_video = document.getElementById('my')             my_video.srcObject = stream                pc.onaddstream = e =&gt; {                 document.getElementById('not_my').srcObject = e.stream;                 console.log('not stream is added')               }               pc.addStream(stream);                               pc.createOffer(function(offer) {                 pc.setLocalDescription(offer, function() {                   \/\/\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448 offer \u043d\u0430 \u0441\u043e\u043a\u0435\u0442                   }))                 }, e=&gt; console.log(e));               }, e=&gt; console.log(e));             },function (){console.warn(&quot;Error getting audio stream from getUserMedia&quot;)});              \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a             function endCall() {               var videos = document.getElementsByTagName(&quot;video&quot;);               for (var i = 0; i &lt; videos.length; i++) {                 videos[i].pause();               }                            pc.close();             }              function error(err) {               endCall();             }  <\/code><\/pre>\n<p>  <\/p>\n<h2>\u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c offer \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c answer<\/h2>\n<p>  <\/p>\n<pre><code class=\"javascript\">var pc = new RTCPeerConnection();\/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c connection var peerConnectionConfig = { \/\/\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f ice server               iceServers: [                   {                       urls: 'stun:stun.l.google.com:19302'                   }                 ]             }             pc.onicecandidate = function (event) {               console.log('new ice candidate', event.candidate);                if (event.candidate !== null) {                 \/\/\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c ice \u043f\u0430\u043a\u0435\u0442\u044b               }           };               navigator.getUserMedia = navigator.getUserMedia ||                          navigator.webkitGetUserMedia ||                          navigator.mozGetUserMedia;              navigator.getUserMedia({video: true,audio:true}, function(stream) {\/\/\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u0438\u0434\u0435\u043e\u0441\u0432\u044f\u0437\u044c \u0438 \u0430\u0443\u0434\u0438\u043e\u0441\u0432\u044f\u0437\u044c \u0438 \u0432\u0442\u044b\u043a\u0430\u0435\u043c \u0435\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443               var my_video = document.getElementById('my')               my_video.srcObject = stream               console.log('stream is added while offering')                pc.onaddstream = e =&gt; {                 console.log('not my stream is added while offering')                 document.getElementById('not_my').srcObject = e.stream;                                }               pc.addStream(stream);                            pc.setRemoteDescription(new RTCSessionDescription(data.offer), function() {                 pc.createAnswer(function(answer) {                   pc.setLocalDescription(answer, function() {                     \/\/\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0442\u0432\u0435\u0442                   }, e =&gt; console.log(e));                 }, e =&gt; console.log(e));               }, e =&gt; console.log(e));             },function (){console.warn(&quot;Error getting audio stream from getUserMedia&quot;)});           }         } <\/code><\/pre>\n<p>  <\/p>\n<h2>\u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c answer \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a<\/h2>\n<p>  <\/p>\n<pre><code class=\"javascript\">pc.setRemoteDescription(new RTCSessionDescription(data.answer), function() { }, error); <\/code><\/pre>\n<p>  <\/p>\n<h2>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u2014 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c ice \u043f\u0430\u043a\u0435\u0442\u044b<\/h2>\n<p>  <\/p>\n<pre><code class=\"javascript\">pc.addIceCandidate(new RTCIceCandidate(ice))\/\/\u0442\u0443\u0442 ice -  \u0442\u043e\u0442,\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0448\u0435\u043b \u043d\u0430\u043c \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f <\/code><\/pre>\n<\/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=\"https:\/\/habr.com\/ru\/post\/502726\/\"> https:\/\/habr.com\/ru\/post\/502726\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/502726\/\"><b>\u0414\u043e\u0440\u043e\u0433\u043e\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c, \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0441\u0430\u043c\u0443 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u043e\u0432.<\/b><\/p>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e: \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0447\u0430\u0442-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0438 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u043a \u043d\u0435\u0439 \u0432\u0438\u0434\u0435\u043e\u0437\u0432\u043e\u043d\u043a\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u0432 \u043e\u043d\u043b\u0430\u0439\u043d\u0435 \u0441\u0438\u0434\u0438\u0442 \u043d\u0435\u043a\u0438\u0439 \u0412\u0430\u0441\u044f \u0438 \u043e\u043d \u0445\u043e\u0447\u0435\u0442 \u043f\u043e\u0437\u0432\u043e\u043d\u0438\u0442\u044c \u041f\u0435\u0442\u0435, \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0439 \u0444\u0438\u0447\u0438 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f <i>WebSocket<\/i>.<\/p>\n<p>  \u0427\u0442\u043e \u0436, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u043d\u0438\u043c\u0435\u043c \u043d\u0430\u0448 WebSocket \u0441\u0435\u0440\u0432\u0435\u0440, \u043d\u0430\u043c \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 node.js;<br \/>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <b>sockets.js<\/b> \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0442\u0443\u0434\u0430 \u043a\u043e\u0434 \u0441\u043e\u043a\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430:<\/p>\n<pre><code class=\"javascript\">const WebSocketServer = require('websocket').server; const http = require('http');  const server = http.createServer(function(request, response) {  \/\/\u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0438\u0448\u0435\u043c,\u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043e\u043a\u0435\u0442\u044b,\u0430 \u043d\u0435 http }); server.listen(1337, function() {});  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0435\u0431\u0441\u043e\u043a\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 const wsServer = new WebSocketServer({   httpServer: server });  wsServer.on('request', function(request) {   let connection = request.accept(null, request.origin); \/\/\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0441\u043e\u043a\u0435\u0442\u0443 }) <\/code><\/pre>\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-303864","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/303864","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=303864"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/303864\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=303864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=303864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=303864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}