{"id":83843,"date":"2022-09-28T07:49:58","date_gmt":"2022-09-28T05:49:58","guid":{"rendered":"https:\/\/rmarketingdigital.com\/puede-que-ya-lo-sepas\/"},"modified":"2020-09-17T03:18:05","modified_gmt":"2020-09-17T06:18:05","slug":"puede-que-ya-lo-sepas","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/puede-que-ya-lo-sepas\/","title":{"rendered":"You may already know"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/puede-que-ya-lo-sepas\/#%C2%BFPara-que-sirve\" >What is it for?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/puede-que-ya-lo-sepas\/#Solicitando-una-sesion\" >Requesting a session<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/puede-que-ya-lo-sepas\/#Una-propiedad-de-conveniencia\" >A property of convenience<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/puede-que-ya-lo-sepas\/#Entrar-en-una-sesion\" >Enter a session<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/puede-que-ya-lo-sepas\/#Espacios-de-referencia\" >Reference spaces<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/puede-que-ya-lo-sepas\/#Ejecutando-un-bucle-de-cuadro\" >Running a frame loop<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/puede-que-ya-lo-sepas\/#Conclusion\" >conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          If you&#039;ve already used the WebXR Device API, you&#039;ve already come most of the way.\n        <\/p>\n<p>\n          <time>February 13, 2020<\/time><\/p>\n<\/header>\n<p>The WebXR Device API shipped last fall in Chrome 79. As stated then, the API implementation in Chrome is a work in progress. Chrome is happy to announce that some of the work is done. In Chrome 81, two new features have arrived:<\/p>\n<p>This article covers augmented reality. If you have already used the WebXR Device API, you will be happy to know that there is very little new to learn. Entering a WebXR session is basically the same. Running a frame loop is basically the same. The differences lie in settings that allow content to be displayed appropriately for augmented reality. If you are unfamiliar with the basics of WebXR, you should read my previous posts on the WebXR appliance API, or at least be familiar with the topics covered there. You must know how to request and enter a session, and you must know how to loop frames.<\/p>\n<p>For information on positioning tests, see the companion article Positioning Virtual Objects in Real-World Views. The code in this article is based on the immersive AR session example (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/immersive-ar-session.html\">manifestation<\/a><br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/immersive-web\/webxr-samples\/blob\/master\/immersive-vr-session.html\">source<\/a>) from Immersive Web Working Group&#039;s <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/\">WebXR Device API Samples<\/a>.<\/p>\n<p>Before diving into the code, you should use the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/immersive-ar-session.html\">Immersive Augmented Reality Session Sample<\/a><br \/>\nat least once. You will need a modern Android phone with Chrome 81 or later.<\/p>\n<h2 id=\"what's-it-useful-for\"><span class=\"ez-toc-section\" id=\"%C2%BFPara-que-sirve\"><\/span>What is it for? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Augmented reality will be a valuable addition to many new or existing web pages by allowing them to implement AR use cases without leaving the browser. For example, you can help people learn on educational sites and allow potential buyers to view items in your home while they shop.<\/p>\n<p>Consider the second use case. Imagine the simulation of placing a life-size representation of a virtual object in a real scene. Once placed, the image remains on the selected surface, appears the size it would have if the actual item were on that surface, and allows the user to move around it, as well as closer to or further from it. This gives viewers a deeper understanding of the object than is possible with a two-dimensional image.<\/p>\n<p>I&#039;m getting a little ahead of myself. To actually do what I&#039;ve described, you need AR functionality and some means of detecting surfaces. This article covers the first one. The accompanying article on the WebXR Success Test API (linked above) covers the latter.<\/p>\n<h2 id=\"requesting-a-session\"><span class=\"ez-toc-section\" id=\"Solicitando-una-sesion\"><\/span>Requesting a session <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Requesting a session is very similar to what you have seen before. First find out if the type of session you want is available on the current device by calling<br \/>\n<code>xr.isSessionSupported ()<\/code>. Instead of asking <code>&#039;immersive-vr&#039;<\/code> as before, request <code>&#039;immersive-ar&#039;<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>navigator<span class=\"token punctuation\">.<\/span>xr<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token keyword\">const<\/span> supported <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> navigator<span class=\"token punctuation\">.<\/span>xr<span class=\"token punctuation\">.<\/span><span class=\"token function\">isSessionSupported<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;immersive-ar&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>supported<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    xrButton<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'click'<\/span><span class=\"token punctuation\">,<\/span> onButtonClicked<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    xrButton<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token string\">'Enter AR'<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    xrButton<span class=\"token punctuation\">.<\/span>enabled <span class=\"token operator\">=<\/span> supported<span class=\"token punctuation\">;<\/span> <\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>As before, this enables an &#039;Enter AR&#039; button. When the user clicks on it, call<br \/>\n<code>xr.requestSession ()<\/code>, also happening <code>&#039;immersive-ar&#039;<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">let<\/span> xrSession <span class=\"token operator\">=<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">onButtonClicked<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>xrSession<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">    navigator<span class=\"token punctuation\">.<\/span>xr<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestSession<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;immersive-ar&#039;<\/span><span class=\"token punctuation\">)<\/span><\/mark><br><span class=\"highlight-line\">    <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">session<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      xrSession <span class=\"token operator\">=<\/span> session<span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">      xrSession<span class=\"token punctuation\">.<\/span>isImmersive <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">      xrButton<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token string\">'Exit AR'<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token function\">onSessionStarted<\/span><span class=\"token punctuation\">(<\/span>xrSession<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">end<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"a-convenience-property\"><span class=\"ez-toc-section\" id=\"Una-propiedad-de-conveniencia\"><\/span>A property of convenience <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You probably noticed that I highlighted two lines in the last code sample. the <code>XRSession<\/code> the object appears to have a property called <code>isImmersive<\/code>. This is a convenience property that I have created myself and is not part of the specification. I&#039;ll use it later to make decisions about what to show the viewer. Why is this property not part of the API? Because your application may need to track this property differently, the spec authors decided to keep the API clean.<\/p>\n<h2 id=\"entering-a-session\"><span class=\"ez-toc-section\" id=\"Entrar-en-una-sesion\"><\/span>Enter a session <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Remember that <code>onSessionStarted ()<\/code> it looked like in my previous article:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">onSessionStarted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">xrSession<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'end'<\/span><span class=\"token punctuation\">,<\/span> onSessionEnded<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">let<\/span> canvas <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'canvas'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>gl <span class=\"token operator\">=<\/span> canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'webgl'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> xrCompatible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p>xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">updateRenderState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>baseLayer<span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">XRWebGLLayer<\/span><span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">,<\/span> gl<span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p>xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestReferenceSpace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;local-floor&#039;<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">refSpace<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>xrRefSpace <span class=\"token operator\">=<\/span> refSpace<span class=\"token punctuation\">;<\/span><br>xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>I need to add a few things to account for the rendering of augmented reality. Turn off the background First, I&#039;m going to determine if I need the background. This is the first place where I will use my convenience property.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">onSessionStarted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">xrSession<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'end'<\/span><span class=\"token punctuation\">,<\/span> onSessionEnded<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">.<\/span>isImmersive<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token function\">removeBackground<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token punctuation\">}<\/span><\/mark><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">let<\/span> canvas <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'canvas'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  gl <span class=\"token operator\">=<\/span> canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'webgl'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> xrCompatible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">updateRenderState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    baseLayer<span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">XRWebGLLayer<\/span><span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">,<\/span> gl<span class=\"token punctuation\">)<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  refSpaceType <span class=\"token operator\">=<\/span> xrSession<span class=\"token punctuation\">.<\/span>isImmersive <span class=\"token operator\">?<\/span> <span class=\"token string\">&#039;local&#039;<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">'viewer'<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestReferenceSpace<\/span><span class=\"token punctuation\">(<\/span>refSpaceType<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">refSpace<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"reference-spaces\"><span class=\"ez-toc-section\" id=\"Espacios-de-referencia\"><\/span>Reference spaces <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>My previous articles went through the reference spaces. The sample I&#039;m describing uses two of them, so it&#039;s time to correct that omission.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>A full explanation of the reference spaces would be longer than I can provide here. I&#039;m only going to talk about reference spaces when it comes to augmented reality.<\/p>\n<\/div>\n<p>A reference space describes the relationship between the virtual world and the user&#039;s physical environment. It does this by:<\/p>\n<ul>\n<li>Specify the origin of the coordinate system used to express positions in the virtual world.<\/li>\n<li>Specify whether the user is expected to move within that coordinate system.<\/li>\n<li>If that coordinate system has preset limits. (The examples shown here do not use coordinate systems with preset limits.)<\/li>\n<\/ul>\n<p>For all reference spaces, the X coordinate expresses left and right, Y expresses up and down, and Z expresses forward and backward. Positive values are correct, up and back, respectively.<\/p>\n<p>The coordinates returned by <code>XRFrame.getViewerPose ()<\/code> depend on what is requested<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XRReferenceSpace#Reference_space_types\">reference space type<\/a>. More on that when we get to the frame loop. At this point, we must select a reference type that is appropriate for augmented reality. Again this uses my convenience property.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><mark class=\"highlight-line highlight-line-active\"><span class=\"token keyword\">let<\/span> refSpaceType<\/mark><br><span class=\"highlight-line\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">onSessionStarted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">xrSession<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'end'<\/span><span class=\"token punctuation\">,<\/span> onSessionEnded<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">.<\/span>isImmersive<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token function\">removeBackground<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">let<\/span> canvas <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'canvas'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  gl <span class=\"token operator\">=<\/span> canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'webgl'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> xrCompatible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">updateRenderState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    baseLayer<span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">XRWebGLLayer<\/span><span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">,<\/span> gl<span class=\"token punctuation\">)<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\"><\/mark><br><mark class=\"highlight-line highlight-line-active\">  refSpaceType <span class=\"token operator\">=<\/span> xrSession<span class=\"token punctuation\">.<\/span>isImmersive <span class=\"token operator\">?<\/span> <span class=\"token string\">&#039;local&#039;<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">'viewer'<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestReferenceSpace<\/span><span class=\"token punctuation\">(<\/span>refSpaceType<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">refSpace<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>If you have visited the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/immersive-ar-session.html\">Immersive Augmented Reality Session Sample<\/a><br \/>\nYou will notice that initially the scene is static and not augmented reality. You can drag and slide your finger to move around the scene. If you click &quot;START AR&quot;, the background disappears and you can move around the scene by moving the device. The modes use different types of reference spaces. The highlighted text above shows how it is selected. Use the following reference types:<\/p>\n<p><code>local<\/code>  - The native origin is in the viewer&#039;s position at the time of the session creation. This means that the experience does not necessarily have a well defined floor and the exact position of the origin may vary depending on the platform. Although there are no preset limits for the space, it is expected that the content can be viewed without movement other than rotation. As you can see from our own AR example, some movement is possible within space.<\/p>\n<p><code>viewer<\/code>  - Most frequently used for content presented online on the page, this space follows the display device. When passed to getViewerPose it does not provide tracking and therefore always reports a pose at the origin unless the application modifies it with <code>XRReferenceSpace.getOffsetReferenceSpace ()<\/code>. The sample uses this to enable touch panning of the camera.<\/p>\n<h2 id=\"running-a-frame-loop\"><span class=\"ez-toc-section\" id=\"Ejecutando-un-bucle-de-cuadro\"><\/span>Running a frame loop <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Conceptually, nothing changes from what I did in the virtual reality session described in my previous articles. Pass the reference space type to <code>XRFrame.getViewerPose ()<\/code>. Return <code>XRViewerPose<\/code> will be for the current reference space type. Using<br \/>\n<code>viewer<\/code> as the default value allows a page to display content previews before user consent for AR or VR is requested. This illustrates an important point: online content uses the same frame loop as immersive content, reducing the amount of code that must be maintained.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">onXRFrame<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">hrTime<span class=\"token punctuation\">,<\/span> xrFrame<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">let<\/span> xrSession <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span>session<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token keyword\">let<\/span> xrViewerPose <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span><span class=\"token function\">getViewerPose<\/span><span class=\"token punctuation\">(<\/span>refSpaceType<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>xrViewerPose<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>conclusion <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This series of articles only covers the basics of implementing immersive content on the web. The Immersive Web Working Group introduces many more capabilities and use cases. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/\">WebXR Device API Samples<\/a>. We also just published a test success article that explains an API for detecting surfaces and placing virtual elements in a real-world camera view. Check them out and watch the web.dev blog for more articles in the coming year.<\/p>\n<p>Photo by <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@davidgrdm\">David grandmougin<\/a> in <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/\">Unsplash<\/a><\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>If you&#039;ve already used the WebXR Device API, you&#039;ve already come most of the way. February 13, 2020 WebXR device API shipped on\u2026<\/p>","protected":false},"author":1,"featured_media":83844,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83843","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Puede que ya lo sepas - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Si ya ha utilizado la API de dispositivo WebXR, ya ha recorrido la mayor parte del camino. 13 de febrero de 2020 La API del dispositivo WebXR se envi\u00f3 el\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/sie-konnen-bereits-wissen\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Puede que ya lo sepas\" \/>\n<meta property=\"og:description\" content=\"Si ya ha utilizado la API de dispositivo WebXR, ya ha recorrido la mayor parte del camino. 13 de febrero de 2020 La API del dispositivo WebXR se envi\u00f3 el\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/sie-konnen-bereits-wissen\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-28T05:49:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Puede que ya lo sepas\",\"datePublished\":\"2022-09-28T05:49:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/\"},\"wordCount\":1355,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero2-3532617.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/\",\"name\":\"Puede que ya lo sepas - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero2-3532617.jpg\",\"datePublished\":\"2022-09-28T05:49:58+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Si ya ha utilizado la API de dispositivo WebXR, ya ha recorrido la mayor parte del camino. 13 de febrero de 2020 La API del dispositivo WebXR se envi\u00f3 el\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero2-3532617.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero2-3532617.jpg\",\"width\":1200,\"height\":800,\"caption\":\"hero2-3532617-8674538-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Puede que ya lo sepas - R Marketing Digital","description":"If you&#039;ve already used the WebXR Device API, you&#039;ve already come most of the way. February 13, 2020 WebXR device API shipped on","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/sie-konnen-bereits-wissen\/","og_locale":"en_US","og_type":"article","og_title":"Puede que ya lo sepas","og_description":"Si ya ha utilizado la API de dispositivo WebXR, ya ha recorrido la mayor parte del camino. 13 de febrero de 2020 La API del dispositivo WebXR se envi\u00f3 el","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/sie-konnen-bereits-wissen\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-28T05:49:58+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Puede que ya lo sepas","datePublished":"2022-09-28T05:49:58+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/"},"wordCount":1355,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/","name":"Puede que ya lo sepas - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg","datePublished":"2022-09-28T05:49:58+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"If you&#039;ve already used the WebXR Device API, you&#039;ve already come most of the way. February 13, 2020 WebXR device API shipped on","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg","width":1200,"height":800,"caption":"hero2-3532617-8674538-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/83843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=83843"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/83843\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/83844"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=83843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=83843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=83843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}