var c=Object.defineProperty,m=Object.defineProperties;var u=Object.getOwnPropertyDescriptors;var o=Object.getOwnPropertySymbols;var r=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;var l=(t,a,i)=>a in t?c(t,a,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[a]=i,e=(t,a)=>{for(var i in a||(a={}))r.call(a,i)&&l(t,i,a[i]);if(o)for(var i of o(a))s.call(a,i)&&l(t,i,a[i]);return t},d=(t,a)=>m(t,u(a));var p=(t,a)=>{var i={};for(var n in t)r.call(t,n)&&a.indexOf(n)<0&&(i[n]=t[n]);if(t!=null&&o)for(var n of o(t))a.indexOf(n)<0&&s.call(t,n)&&(i[n]=t[n]);return i};const makeShortcode=t=>function(i){return console.warn("Component "+t+" was not imported, exported, or provided by MDXProvider as global scope"),mdx("div",e({},i))},BookmarkCard=makeShortcode("BookmarkCard"),layoutProps={},MDXLayout="wrapper";function MDXContent(i){var n=i,{components:t}=n,a=p(n,["components"]);return mdx(MDXLayout,d(e(e({},layoutProps),a),{components:t,mdxType:"MDXLayout"}),mdx("p",null,"In this ",mdx("a",e({parentName:"p"},{href:"/blogging/best-blogging-sites/"}),"blog")," post, I will summarize my notes taken while learning the WebRTC technology and its implementations. Because I'm a newbie to the concept, the article can be read as a WebRTC tutorial."),mdx("h2",null,"Introduction to WebRTC API"),mdx("h3",null,"What is WebRTC?"),mdx("p",null,"WebRTC (Real-Time Communication) is a technology that allows your application to send video, voice, and generic data between peers."),mdx("p",null,"In other words, we can build powerful voice and video-communication applications with this open standard."),mdx("p",null,"WebRTC is an open-source project and is also supported by the game-setters of the internet: Apple, Google, Microsoft, and Mozilla."),mdx("h3",null,"What are the benefits of using WebRTC?"),mdx("ul",null,mdx("li",{parentName:"ul"},"It allows audio and video communication to work inside web pages."),mdx("li",{parentName:"ul"},"It will enable direct peer-to-peer communication."),mdx("li",{parentName:"ul"},"It eliminates the need to install plugins and native apps.")),mdx("h3",null,"What platforms can support WebRTC?"),mdx("p",null,"The WebRTC implementation is available as a regular JavaScript API in all modern browsers and native clients for Android and iOS."),mdx("h3",null,"The maturity level of WebRTC"),mdx("p",null,"Its specifications have been published by ",mdx("a",e({parentName:"p"},{href:"https://www.w3.org/"}),"World Wide Web Consortium (W3C)"),". W3C has four maturity levels. ",mdx("a",e({parentName:"p"},{href:"https://en.wikipedia.org/wiki/World_Wide_Web_Consortium#Specification_maturation"}),"The maturity levels of W3C")," in ascending order are:"),mdx("ol",null,mdx("li",{parentName:"ol"},mdx("strong",{parentName:"li"},"Working draft (WD):")," Relatively early stage. ","*","*","*","*","the standard document may have significant differences from its final form. Thus, a considerable number of changes can be made in the future."),mdx("li",{parentName:"ol"},mdx("strong",{parentName:"li"},"Candidate recommendation (CR):")," At this stage, the significant features of the specifications are mostly decided."),mdx("li",{parentName:"ol"},mdx("strong",{parentName:"li"},"Proposed recommendation (PR):")," At this stage, the document is submitted to the W3C Advisory Council for final approval. It rarely causes any significant changes to a standard as it passes to the next phase."),mdx("li",{parentName:"ol"},mdx("strong",{parentName:"li"},"W3C recommendation (REC):")," This is the most mature stage of development. At this point, the standard has undergone extensive review and testing under both theoretical and practical conditions.")),mdx("p",null,"Nearly a decade was past when the first draft of WebRTC was published. Some of the milestones for WebRTC is as follows:"),mdx("ul",null,mdx("li",{parentName:"ul"},"October 2011: the W3C published its first draft for the spec."),mdx("li",{parentName:"ul"},"February 2013: first cross-browser video call."),mdx("li",{parentName:"ul"},"February 2014: first cross-browser data transfers."),mdx("li",{parentName:"ul"},"November 2017: Working Draft to Candidate Recommendation."),mdx("li",{parentName:"ul"},"January 2021: Candidate Recommendation to Recommendation.")),mdx(BookmarkCard,{url:"https://www.cbsofyalioglu.com/blogging/best-blogging-sites/",image:"/posts/best-blogging.webp",title:"Best Platforms to Publish Your Creative Works",description:"The list of best blogging platforms for your creative works. The list includes free and paid platforms.",mdxType:"BookmarkCard"}),mdx("h2",null,"WebRTC API"),mdx("p",null,"WebRTC consists of several interrelated APIs and protocols which work together to achieve this."),mdx("p",null,"It mainly covers two different technologies:"),mdx("ol",null,mdx("li",{parentName:"ol"},"Media capturing"),mdx("li",{parentName:"ol"},"Peer-to-peer connection.")),mdx("p",null,"Also, it has three JavaScript APIs for significant components of WebRTC."),mdx("ol",null,mdx("li",{parentName:"ol"},mdx("a",e({parentName:"li"},{href:"https://developer.mozilla.org/en-US/docs/Web/API/MediaStream"}),mdx("strong",{parentName:"a"},"MediaStream")),": Access the input devices (microphone, webcam) and get a stream of media."),mdx("li",{parentName:"ol"},mdx("a",e({parentName:"li"},{href:"https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection"}),mdx("strong",{parentName:"a"},"RTCPeerConnection")),": Connecting another WebRTC endpoint across the internet and sending audio and video in realtime"),mdx("li",{parentName:"ol"},mdx("a",e({parentName:"li"},{href:"https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel"}),mdx("strong",{parentName:"a"},"RTCDataChannel")),": Ability to do those not just for audio and video but also arbitrary application data")),mdx("p",null,"Those API's are: existed for those three main tasks, respectively:"),mdx("ol",null,mdx("li",{parentName:"ol"},"Acquiring audio and video"),mdx("li",{parentName:"ol"},"Communicating audio and video"),mdx("li",{parentName:"ol"},"Communicating arbitrary data")),mdx("img",{style:{width:"100%",height:"auto"},alt:"WebRTC tasks and JS API",src:"/posts/webrtc-tasks-and-js-api.webp"}),mdx("h2",null,"Simple media stream example"),mdx("p",null,"Before digging deeper into the technical details, I want to show you a simple example."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-jsx"}),`// PROMISES VERSION var constraints = { video: true, audio: true } // MediaStreamConstraints navigator.mediaDevices .getUserMedia(constraints) .then((stream) => { console.log('Got MediaStream:', stream) }) .catch((error) => { console.error('Error accessing media devices.', error) }) // ASYNC/AWAIT VERSION const openMediaDevices = async (constraints) => { return await navigator.mediaDevices.getUserMedia(constraints) } try { const stream = openMediaDevices({ video: true, audio: true }) console.log('Got MediaStream:', stream) } catch (error) { console.error('Error accessing media devices.', error) } `)),mdx("br",null),mdx("p",null,"I'm going to make some minor changes and put the JavaScript code in HTML. Then your browser will render a small rectangle with a button."),mdx("p",null,"If you click the button, you'll see a permission request to open your camera. If you give the permission, then your camera is going to open for you. You'll also find the modified code below."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html"}),`