"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", h4: "h4", h5: "h5", hr: "hr", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {BookmarkCard} = _components; if (!BookmarkCard) _missingMdxReference("BookmarkCard", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["In this ", _jsx(_components.a, { href: "/blogging/best-blogging-sites/", children: "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."] }), "\n", _jsx(_components.h2, { children: "Introduction to WebRTC API" }), "\n", _jsx(_components.h3, { children: "What is WebRTC?" }), "\n", _jsx(_components.p, { children: "WebRTC (Real-Time Communication) is a technology that allows your application to send video, voice, and generic data between peers." }), "\n", _jsx(_components.p, { children: "In other words, we can build powerful voice and video-communication applications with this open standard." }), "\n", _jsx(_components.p, { children: "WebRTC is an open-source project and is also supported by the game-setters of the internet: Apple, Google, Microsoft, and Mozilla." }), "\n", _jsx(_components.h3, { children: "What are the benefits of using WebRTC?" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "It allows audio and video communication to work inside web pages." }), "\n", _jsx(_components.li, { children: "It will enable direct peer-to-peer communication." }), "\n", _jsx(_components.li, { children: "It eliminates the need to install plugins and native apps." }), "\n"] }), "\n", _jsx(_components.h3, { children: "What platforms can support WebRTC?" }), "\n", _jsx(_components.p, { children: "The WebRTC implementation is available as a regular JavaScript API in all modern browsers and native clients for Android and iOS." }), "\n", _jsx(_components.h3, { children: "The maturity level of WebRTC" }), "\n", _jsxs(_components.p, { children: ["Its specifications have been published by ", _jsx(_components.a, { href: "https://www.w3.org/", children: "World Wide Web Consortium (W3C)" }), ". W3C has four maturity levels. ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/World_Wide_Web_Consortium#Specification_maturation", children: "The maturity levels of W3C" }), " in ascending order are:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "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."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Candidate recommendation (CR):" }), " At this stage, the significant features of the specifications are mostly decided."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "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."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "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."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Nearly a decade was past when the first draft of WebRTC was published. Some of the milestones for WebRTC is as follows:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "October 2011: the W3C published its first draft for the spec." }), "\n", _jsx(_components.li, { children: "February 2013: first cross-browser video call." }), "\n", _jsx(_components.li, { children: "February 2014: first cross-browser data transfers." }), "\n", _jsx(_components.li, { children: "November 2017: Working Draft to Candidate Recommendation." }), "\n", _jsx(_components.li, { children: "January 2021: Candidate Recommendation to Recommendation." }), "\n"] }), "\n", _jsx(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." }), "\n", _jsx(_components.h2, { children: "WebRTC API" }), "\n", _jsx(_components.p, { children: "WebRTC consists of several interrelated APIs and protocols which work together to achieve this." }), "\n", _jsx(_components.p, { children: "It mainly covers two different technologies:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Media capturing" }), "\n", _jsx(_components.li, { children: "Peer-to-peer connection." }), "\n"] }), "\n", _jsx(_components.p, { children: "Also, it has three JavaScript APIs for significant components of WebRTC." }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/MediaStream", children: _jsx(_components.strong, { children: "MediaStream" }) }), ": Access the input devices (microphone, webcam) and get a stream of media."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection", children: _jsx(_components.strong, { children: "RTCPeerConnection" }) }), ": Connecting another WebRTC endpoint across the internet and sending audio and video in realtime"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel", children: _jsx(_components.strong, { children: "RTCDataChannel" }) }), ": Ability to do those not just for audio and video but also arbitrary application data"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Those API's are: existed for those three main tasks, respectively:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Acquiring audio and video" }), "\n", _jsx(_components.li, { children: "Communicating audio and video" }), "\n", _jsx(_components.li, { children: "Communicating arbitrary data" }), "\n"] }), "\n", _jsx("img", { alt: "WebRTC tasks and JS API" }), "\n", _jsx(_components.h2, { children: "Simple media stream example" }), "\n", _jsx(_components.p, { children: "Before digging deeper into the technical details, I want to show you a simple example." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// PROMISES VERSION\nvar constraints = { video: true, audio: true } // MediaStreamConstraints\n\nnavigator.mediaDevices\n .getUserMedia(constraints)\n .then((stream) => {\n console.log('Got MediaStream:', stream)\n })\n .catch((error) => {\n console.error('Error accessing media devices.', error)\n })\n\n// ASYNC/AWAIT VERSION\nconst openMediaDevices = async (constraints) => {\n return await navigator.mediaDevices.getUserMedia(constraints)\n}\n\ntry {\n const stream = openMediaDevices({ video: true, audio: true })\n console.log('Got MediaStream:', stream)\n} catch (error) {\n console.error('Error accessing media devices.', error)\n}\n" }) }), "\n", _jsx("br", {}), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

\n\t

\n\t\t

\n\t\t\n\t

\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: "Now, we can proceed the next phase and make our hands dirty." }), "\n", _jsx(BookmarkCard, { url: "https://www.cbsofyalioglu.com/blogging/generate-income/", image: "/posts/best-tools-to-generate-income-from-your-blog.webp", title: "Best ways to generate income from your blog", description: "Generating income from your blog. The best methods and tools to monetize it." }), "\n", _jsx(_components.h2, { children: "Media Devices" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API", children: "The Media Stream API" }), " is the top-level API, and it provides interfaces and methods for working with streams. I'm not going to explain every technique and property but focus on the MediaDevices API."] }), "\n", _jsx(_components.p, { children: "You'll remember the function that requested your permission to open your camera. Let's look at its components and their brief definitions." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "navigator.mediaDevices.getUserMedia(constraints)\n" }) }), "\n", _jsx(_components.p, { children: "According to MDN:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Navigator Object" }), ": ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/Navigator", children: "The Navigator interface" }), " represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities. You can retrieve the read-only ", _jsx(_components.code, { children: "navigator" }), " object by ", _jsx(_components.code, { children: "window.navigtor" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MediaDevices Objects:" }), " ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices", children: "The mediaDevices read-only property" }), " returns a MediaDevices object, which provides access to connected media input devices like cameras and microphones, as well as screen sharing. You can access it by ", _jsx(_components.code, { children: "navigator.mediaDevices" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "getUserMedia Method" }), ": ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia", children: "The MediaDevices.getUserMedia() method" }), " prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media."] }), "\n"] }), "\n", _jsx(_components.p, { children: "![[static/img/media-stream-getusermedia2.webp]]" }), "\n", _jsx(_components.h2, { children: "The MediaDevices interface" }), "\n", _jsx(_components.p, { children: "We are going to use this object to obtain access to any hardware source of media data. The object has 5 methods and also one event listener property:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "ondevicechange (event)" }), "\n", _jsx(_components.li, { children: "enumerateDevices()" }), "\n", _jsx(_components.li, { children: "getMediaDisplay()" }), "\n", _jsx(_components.li, { children: "getUserMedia()" }), "\n", _jsx(_components.li, { children: "getSupportedConstraints()" }), "\n", _jsx(_components.li, { children: "selectAudioOutput()" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Since those are out of scope, I'm not going to mention ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/selectAudioOutput", children: "selectAudioOutput method" }), "."] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "1) Listen device changes (devicechange)" }), "\n", _jsx(_components.p, { children: "We can also add an event listener to the object to listen to device changes." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Listen for changes to media devices and update the list accordingly\nnavigator.mediaDevices.addEventListener('devicechange', (event) => {\n // We will fill later here\n})\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "2) Querying media devices (enumerateDevices)" }), "\n", _jsxs(_components.p, { children: ["In many cases, we need to check all the connected cameras and microphones to provide useful feedback to users. To do that, we use ", _jsx(_components.code, { children: "navigator.mediaDevices.enumerateDevices()" }), " method. This will return a promise that resolves to an array of ", _jsx(_components.code, { children: "MediaDevicesInfo" }), ".\nEach ", _jsx(_components.code, { children: "MediaDevicesInfo" }), " contains a property named kind with the value ", _jsx(_components.code, { children: "audioinput" }), ", ", _jsx(_components.code, { children: "audiooutput" }), ", or ", _jsx(_components.code, { children: "videoinput" }), ", indicating what type of media device it is."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// types: audioinput, audiooutput, videoinput\nasync function getConnectedDevices(type) {\n const devices = await navigator.mediaDevices.enumerateDevices()\n return devices.filter((device) => device.kind === type)\n}\n\nconst videoCameras = getConnectedDevices('videoinput')\nconsole.log('Cameras found:', videoCameras)\n" }) }), "\n", _jsx(_components.p, { children: "You can also inspect your device by executing the below code in your browser console." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Copy and paste the below code to your browser console\nasync function getAllConnectedDevices() {\n const devices = await navigator.mediaDevices.enumerateDevices();\n return devices\n}\n\ntry {\n\tconst myDevices = await getAllConnectedDevices()\n\tconsole.log(myDevices)\n} catch (e){\n\tconsole.error(e)\n}\n\n// Prints\n(3) [InputDeviceInfo, InputDeviceInfo, MediaDeviceInfo]\n0: InputDeviceInfo\ndeviceId: \"\"\ngroupId: \"c075ad655df0e7c197c0f3c97b8d6e41be9013axx12861679450fabaeddb9dbc78\"\nkind: \"audioinput\"\nlabel: \"\"\n[[Prototype]]: InputDeviceInfo\n1: InputDeviceInfo\ndeviceId: \"f659dfbfea91d3fb0f7e59b1b8d6e41be9013axx128616799b6f312815800c1bbbc1c8c9\"\ngroupId: \"556ef68b73e43bfc259574e0bf0785d0c32160671c2232b8d6e41be9013axx128616798\"\nkind: \"videoinput\"\nlabel: \"FaceTime HD Camera (Built-in) (05ac:8514)\"\n[[Prototype]]: InputDeviceInfo\n2: MediaDeviceInfo\ndeviceId: \"\"\ngroupId: \"b8d6e41be9013axx1286167999de5dfdcfc91d6d0ef57d7d429c9d5c81631d56b3636f9789fadff\"\nkind: \"audiooutput\"\nlabel: \"\"\n[[Prototype]]: MediaDeviceInfo\nlength: 3\n[[Prototype]]: Array(0)\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "3) Sharing/recording display (getDisplayMedia)" }), "\n", _jsx(_components.p, { children: "The method is for sharing your display or some part of it." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/posts/get-display-media.webp", alt: "getDisplayMedia screenshot" }) }), "\n", _jsxs(_components.p, { children: ["The method prompts the user to select a display or portion of a collection (such as a window) to capture the contents. In this way, it can produce MediaStream. The resulting stream can then be recorded using the ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API", children: "MediaStream Recording API" }), "."] }), "\n", _jsxs(_components.p, { children: ["It is clear that the getDisplayMedia method can be used for nefarious activities against the user. For this reason, some ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#privacy_and_security", children: "precautions are taken the browsers" }), " as follows:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["The permissions acquired from the user is not persisted like how it is in the ", _jsx(_components.code, { children: "getUserMedia()" }), " method. Therefore, the user must be prompted every time."] }), "\n", _jsxs(_components.li, { children: ["The call to ", _jsx(_components.code, { children: "getDisplayMedia()" }), " must be made from code running in response to a user action, such as in an event handler."] }), "\n", _jsx(_components.li, { children: "The specified constraints can't be used to limit the options available to the user. Instead, they must be applied after the user chooses a source, to generate output that matches the constraints." }), "\n", _jsx(_components.li, { children: "Browsers are encouraged to warn users about sharing displays or windows that contain browsers and keep a close eye on what other content might be getting captured and shown to other users." }), "\n"] }), "\n", _jsx(_components.p, { children: "The function below optionally takes a constraints parameter and returns a promise that resolves to a MediaStream." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// In order to record or share the media stream\nnavigator.mediaDevices.getDisplayMedia(constraints) // constraints is optional\n" }) }), "\n", _jsxs(_components.p, { children: ["The constraints for ", _jsx(_components.code, { children: "getDisplayMedia()" }), " differ from the constraints that are used for regular media input."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "const constraints = {\n video: {\n cursor: 'always' | 'motion' | 'never',\n displaySurface: 'application' | 'browser' | 'monitor' | 'window',\n },\n}\n" }) }), "\n", _jsx(_components.h3, { children: "4) Acquiring audio and video (getUserMedia)" }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "getUserMedia()" }), " function is responsible for acquiring audio and video. The function does two things:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Prompts the user for permission to use media input." }), "\n", _jsx(_components.li, { children: "Produces a MediaStream." }), "\n"] }), "\n", _jsx(_components.p, { children: "The other important things to know are:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["It takes only one argument: a ", _jsx(_components.code, { children: "MediaStreamConstraints" }), " object. (we will cover it soon)"] }), "\n", _jsx(_components.li, { children: "When the function runs, it returns a Promise that resolves to a MediaStream with tracks containing the requested media types." }), "\n", _jsx(_components.li, { children: "Because users are not required to choose, the returned promise may be neither resolved nor rejected." }), "\n", _jsxs(_components.li, { children: ["It is important to note that the ", _jsx(_components.code, { children: "getUserMedia()" }), " function is available only in secure contexts (", _jsx(_components.code, { children: "HTTPS" }), ", ", _jsx(_components.code, { children: "file:///" }), ", ", _jsx(_components.code, { children: "localhost" }), "). Otherwise, the ", _jsx(_components.code, { children: "navigator.mediaDevices" }), " returns ", _jsx(_components.code, { children: "undefined" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "I said that the method only takes one parameter. Let's look at this constraints parameter closer." }), "\n", _jsx(_components.h4, { children: "Constraints" }), "\n", _jsxs(_components.p, { children: ["It is a ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints", children: "MediaTrackConstraints" }), " object and allows us to specify and constrain the requested media. In other words, this object allows us to specify the media we requested."] }), "\n", _jsx(_components.p, { children: "For instance, minimum video resolution or the camera type we need must be defined in this object. Therefore, there are plenty of constraint properties we need to understand." }), "\n", _jsx(_components.p, { children: "Before starting with a simple example, there are essential things to know about constraints object:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "The constraints object can have audio and video properties. Either or both must be specified." }), "\n", _jsxs(_components.li, { children: ["If the browser cannot find all media tracks with the specified types that meet the constraints given, then the returned promise is rejected with ", _jsx(_components.code, { children: "NotFoundError DOMException" }), "."] }), "\n", _jsxs(_components.li, { children: ["Giving ", _jsx(_components.code, { children: "true" }), " to any of those properties means that it is necessarily required. If one cannot be included, then the method results in an error."] }), "\n", _jsxs(_components.li, { children: ["Aside from giving ", _jsx(_components.code, { children: "true" }), ", an object can give additional constraints to specify requirements: ", _jsx(_components.code, { children: "min" }), ", ", _jsx(_components.code, { children: "max" }), ", ", _jsx(_components.code, { children: "exact" }), ", ", _jsx(_components.code, { children: "ideal" }), "."] }), "\n"] }), "\n", _jsx(_components.h5, { children: "An Example constraints object" }), "\n", _jsx(_components.p, { children: "To give an idea, an example for constraints object can be:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Example constraints\n{\n\taudio: true, // Mandatory constraint\n\tvideo: {\n width: {\n\t\t\tmin: 1024, // Mandatory constraint\n\t\t\tideal: 1280, // Not Mandatory\n\t\t\tmax: 1920 // Mandatory constraint\n\t\t},\n height: {\n\t\t\texact: 1080 // Mandatory constraint\n\t\t}\n }\n}\n" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// The resolution you provide (with the keywords: min, max, exact)\n// must be supported by the selected camera\n\n// ✅ This works on my computer\nconst hdConstraints = {\n video: { width: { min: 1280 }, height: { min: 720 } },\n}\n// ✅ This works also\nconst vgaConstraints = {\n video: { width: { exact: 640 }, height: { exact: 480 } },\n}\n\n// ❌ This doesn't work on my computer\nconst invalidConstraints = {\n video: { width: { min: 2048 }, height: { min: 720 } },\n}\n" }) }), "\n", _jsx(_components.h5, { children: _jsx(_components.strong, { children: "Constraint types" }) }), "\n", _jsxs(_components.p, { children: ["The following ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints#constraints", children: "constraint types" }), " are used to specify a constraint for a property."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ConstrainBoolean:" }), " Its value may either be set to a Boolean (", _jsx(_components.code, { children: "true" }), " or ", _jsx(_components.code, { children: "false" }), ") or an object containing (", _jsx(_components.strong, { children: _jsx(_components.code, { children: "exact" }) }), " or ", _jsx(_components.code, { children: "ideal" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ConstrainDouble:" }), " Its value may either be set to a a ", _jsx(_components.code, { children: "double-precision floating-point number" }), " or an object containing (", _jsx(_components.code, { children: "max" }), ", ", _jsx(_components.code, { children: "min" }), ", ", _jsx(_components.code, { children: "exact" }), ", ", _jsx(_components.code, { children: "ideal" }), ")"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ConstrainDOMString" }), ": Its value may either be set to a ", _jsx(_components.code, { children: "string" }), ", an ", _jsx(_components.code, { children: "array of strings" }), ", or an object containing (", _jsx(_components.strong, { children: _jsx(_components.code, { children: "exact" }) }), " or ", _jsx(_components.code, { children: "ideal" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ConstrainULong" }), ": Its value may either be set to an ", _jsx(_components.code, { children: "integer number" }), " or an object containing (", _jsx(_components.code, { children: "max" }), ", ", _jsx(_components.code, { children: "min" }), ", ", _jsx(_components.code, { children: "exact" }), ", ", _jsx(_components.code, { children: "ideal" }), ")"] }), "\n"] }), "\n", _jsx(_components.h5, { children: "Some examples of constraints" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ja", children: "// on mobile devices, the following will prefer the front camera // (if one is available) over the rear one\n{ audio: true, video: { facingMode: \"user\" } }\n\n// To _require_ the rear camera, use\n{ audio: true, video: { facingMode: { exact: \"environment\" } } }\n\n\n// If you have a `deviceId` from mediaDevices.enumerateDevices(), // you can use it to request a specific device:\n{ video: { deviceId: myPreferredCameraDeviceId } }\n\n// to _require_ the specific camera, you would use:\n{ video: { deviceId: { exact: myExactCameraOrBustDeviceId } } }\n" }) }), "\n", _jsx(_components.h4, { children: "Exceptions" }), "\n", _jsxs(_components.p, { children: ["| Exception (DOMException) | Details |\n| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| NotFoundError | Thrown if no media tracks of the type specified were found that satisfy the given constraints. |\n| NotReadableError | Although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or Web page level which prevented access to the device. |\n| OverconstrainedError | Resulted in no candidate devices. |\n| SecurityError | Thrown if user media support is disabled on the Document |\n| TypeError | Thrown if the list of constraints specified is empty, or has all constraints set to ", _jsx(_components.code, { children: "false" }), ". Als thrown in non-secure context |\n| | |"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "5) Constrainable properties of user agent (getSupportedConstraints)" }), "\n", _jsxs(_components.p, { children: ["Because only constraints supported by the user agent are included in the list, each of these Boolean properties has the value ", _jsx(_components.code, { children: "true" }), "."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "let supportedConstraints = navigator.mediaDevices.getSupportedConstraints()\nconsole.log(supportedConstraints)\n\n/*\n{\n\"aspectRatio\": true,\n\"autoGainControl\": true,\n\"brightness\": true,\n\"channelCount\": true,\n\"colorTemperature\": true,\n\"contrast\": true,\n\"deviceId\": true,\n\"echoCancellation\": true,\n\"exposureCompensation\": true,\n\"exposureMode\": true,\n\"exposureTime\": true,\n\"facingMode\": true,\n\"focusDistance\": true,\n\"focusMode\": true,\n\"frameRate\": true,\n\"groupId\": true,\n\"height\": true,\n\"iso\": true,\n\"latency\": true,\n\"noiseSuppression\": true,\n\"pan\": true,\n\"pointsOfInterest\": true,\n\"resizeMode\": true,\n\"sampleRate\": true,\n\"sampleSize\": true,\n\"saturation\": true,\n\"sharpness\": true,\n\"tilt\": true,\n\"torch\": true,\n\"whiteBalanceMode\": true,\n\"width\": true,\n\"zoom\": true\n}\n*/\n" }) }), "\n", _jsx(_components.p, { children: "The next step will be reviewing peer connections." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }