{"version":"1.0","provider_name":"Cloudinary Blog","provider_url":"https:\/\/cloudinary.com\/blog","title":"An Introductory Guide to WebXR","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"HTKZrOo4Fj\"><a href=\"https:\/\/cloudinary.com\/blog\/guest_post\/an-introductory-guide-to-webxr\/\">An Introductory Guide to WebXR<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/cloudinary.com\/blog\/guest_post\/an-introductory-guide-to-webxr\/embed#?secret=HTKZrOo4Fj\" width=\"600\" height=\"338\" title=\"&#8220;An Introductory Guide to WebXR&#8221; &#8212; Cloudinary Blog\" data-secret=\"HTKZrOo4Fj\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script type=\"text\/javascript\">\n\/* <![CDATA[ *\/\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n\/* ]]> *\/\n<\/script>\n","thumbnail_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681922303\/Web_Assets\/blog\/dbf6f01ce609a335985984e19ae134f703ca257b-1721x771-1_28128c5118\/dbf6f01ce609a335985984e19ae134f703ca257b-1721x771-1_28128c5118.png?_i=AA&w=600","thumbnail_width":600,"thumbnail_height":269,"description":"XR stands for Extended Reality. WebXR Device API provides access to input and output capabilities commonly associated with Virtual Reality (VR) and Augmented Reality (AR) devices. It allows you develop and host VR and AR experiences on the web. In this post, we will be learning about WebXR, how it works on the browser, and how to build our first VR application with React and WebXR.","author_url":"https:\/\/cloudinary.com\/blog\/author\/christian_nwamba","author_name":"Christian Nwamba"}