{"id":6103,"date":"2022-03-29T10:04:14","date_gmt":"2022-03-29T09:04:14","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=6103"},"modified":"2022-07-25T08:35:45","modified_gmt":"2022-07-25T07:35:45","slug":"webrtc-peer-to-peer","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/webrtc-peer-to-peer\/","title":{"rendered":"WebRTC peer-to-peer"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.ttgtmedia.com\/rms\/onlineimages\/how_webrtc_works-f_mobile.png\" alt=\"What is WebRTC and how is it used?\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.html5rocks.com\/en\/tutorials\/webrtc\/basics\/#simpleRTCPeerConnectionExample\">https:\/\/www.html5rocks.com\/en\/tutorials\/webrtc\/basics\/#simpleRTCPeerConnectionExample<\/a><\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"javascript\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">\/ handles JSON.stringify\/parse\nconst signaling = new SignalingChannel();\nconst constraints = {audio: true, video: true};\nconst configuration = {iceServers: [{urls: 'stuns:stun.example.org'}]};\nconst pc = new RTCPeerConnection(configuration);\n\n\/\/ Send any ice candidates to the other peer.\npc.onicecandidate = ({candidate}) => signaling.send({candidate});\n\n\/\/ Let the \"negotiationneeded\" event trigger offer generation.\npc.onnegotiationneeded = async () => {\n  try {\n    await pc.setLocalDescription(await pc.createOffer());\n    \/\/ Send the offer to the other peer.\n    signaling.send({desc: pc.localDescription});\n  } catch (err) {\n    console.error(err);\n  }\n};\n\n\/\/ Once remote track media arrives, show it in remote video element.\npc.ontrack = (event) => {\n  \/\/ Don't set srcObject again if it is already set.\n  if (remoteView.srcObject) return;\n  remoteView.srcObject = event.streams[0];\n};\n\n\/\/ Call start() to initiate.\nasync function start() {\n  try {\n    \/\/ Get local stream, show it in self-view, and add it to be sent.\n    const stream =\n      await navigator.mediaDevices.getUserMedia(constraints);\n    stream.getTracks().forEach((track) =>\n      pc.addTrack(track, stream));\n    selfView.srcObject = stream;\n  } catch (err) {\n    console.error(err);\n  }\n}\n\nsignaling.onmessage = async ({desc, candidate}) => {\n  try {\n    if (desc) {\n      \/\/ If you get an offer, you need to reply with an answer.\n      if (desc.type === 'offer') {\n        await pc.setRemoteDescription(desc);\n        const stream =\n          await navigator.mediaDevices.getUserMedia(constraints);\n        stream.getTracks().forEach((track) =>\n          pc.addTrack(track, stream));\n        await pc.setLocalDescription(await pc.createAnswer());\n        signaling.send({desc: pc.localDescription});\n      } else if (desc.type === 'answer') {\n        await pc.setRemoteDescription(desc);\n      } else {\n        console.log('Unsupported SDP type.');\n      }\n    } else if (candidate) {\n      await pc.addIceCandidate(candidate);\n    }\n  } catch (err) {\n    console.error(err);\n  }\n};<\/pre><\/div>\n\n\n\n<p><a href=\"https:\/\/webrtc.github.io\/samples\/src\/content\/peerconnection\/channel\/\">https:\/\/webrtc.github.io\/samples\/src\/content\/peerconnection\/channel\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/www.html5rocks.com\/en\/tutorials\/webrtc\/basics\/#simpleRTCPeerConnectionExample https:\/\/webrtc.github.io\/samples\/src\/content\/peerconnection\/channel\/<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4,1],"tags":[],"class_list":["post-6103","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/6103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=6103"}],"version-history":[{"count":2,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/6103\/revisions"}],"predecessor-version":[{"id":6105,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/6103\/revisions\/6105"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=6103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=6103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=6103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}