{"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\/fr\/dev\/puede-que-ya-lo-sepas\/","title":{"rendered":"Vous savez peut-\u00eatre d\u00e9j\u00e0"},"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\">Table des mati\u00e8res<\/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=\"Basculer la table des mati\u00e8res\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Basculer<\/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\/fr\/dev\/puede-que-ya-lo-sepas\/#%C2%BFPara-que-sirve\" >Pourquoi est-ce?<\/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\/fr\/dev\/puede-que-ya-lo-sepas\/#Solicitando-una-sesion\" >Demander une 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\/fr\/dev\/puede-que-ya-lo-sepas\/#Una-propiedad-de-conveniencia\" >Une propri\u00e9t\u00e9 de commodit\u00e9<\/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\/fr\/dev\/puede-que-ya-lo-sepas\/#Entrar-en-una-sesion\" >Entrez une 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\/fr\/dev\/puede-que-ya-lo-sepas\/#Espacios-de-referencia\" >Espaces de r\u00e9f\u00e9rence<\/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\/fr\/dev\/puede-que-ya-lo-sepas\/#Ejecutando-un-bucle-de-cuadro\" >Ex\u00e9cution d&#039;une boucle d&#039;image<\/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\/fr\/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>          Si vous avez d\u00e9j\u00e0 utilis\u00e9 l&#039;API WebXR Device, vous avez d\u00e9j\u00e0 fait la plupart du temps.\n        <\/p>\n<p>\n          <time>13 f\u00e9vrier 2020<\/time><\/p>\n<\/header>\n<p>L&#039;API WebXR Device a \u00e9t\u00e9 livr\u00e9e \u00e0 l&#039;automne dernier dans Chrome 79. Comme indiqu\u00e9 \u00e0 l&#039;\u00e9poque, la mise en \u0153uvre de l&#039;API dans Chrome est un travail en cours. Chrome est heureux d&#039;annoncer qu&#039;une partie du travail est termin\u00e9e. Dans Chrome 81, deux nouvelles fonctionnalit\u00e9s sont arriv\u00e9es:<\/p>\n<p>Cet article traite de la r\u00e9alit\u00e9 augment\u00e9e. Si vous avez d\u00e9j\u00e0 utilis\u00e9 l&#039;API WebXR Device, vous serez heureux de savoir qu&#039;il y a tr\u00e8s peu de nouveaut\u00e9s \u00e0 apprendre. Entrer dans une session WebXR est fondamentalement le m\u00eame. L&#039;ex\u00e9cution d&#039;une boucle d&#039;image est fondamentalement la m\u00eame. Les diff\u00e9rences r\u00e9sident dans les param\u00e8tres qui permettent d&#039;afficher le contenu de mani\u00e8re appropri\u00e9e pour la r\u00e9alit\u00e9 augment\u00e9e. Si vous n&#039;\u00eates pas familier avec les bases de WebXR, vous devriez lire mes articles pr\u00e9c\u00e9dents sur l&#039;API de l&#039;appliance WebXR, ou au moins vous familiariser avec les sujets abord\u00e9s ici. Vous devez savoir comment demander et entrer dans une session, et vous devez savoir comment boucler des images.<\/p>\n<p>Pour plus d&#039;informations sur les tests de positionnement, consultez l&#039;article compl\u00e9mentaire Positionnement d&#039;objets virtuels dans des vues du monde r\u00e9el. Le code de cet article est bas\u00e9 sur l&#039;exemple de session immersive AR (<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\">Fontaine<\/a>) du groupe de travail Immersive Web <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/\">Exemples d&#039;API de p\u00e9riph\u00e9rique WebXR<\/a>.<\/p>\n<p>Avant de plonger dans le code, vous devez utiliser le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/immersive-ar-session.html\">Exemple de session de r\u00e9alit\u00e9 augment\u00e9e immersive<\/a><br \/>\nau moins une fois. Vous aurez besoin d&#039;un t\u00e9l\u00e9phone Android moderne avec Chrome 81 ou version ult\u00e9rieure.<\/p>\n<h2 id=\"what's-it-useful-for\"><span class=\"ez-toc-section\" id=\"%C2%BFPara-que-sirve\"><\/span>Pourquoi est-ce? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La r\u00e9alit\u00e9 augment\u00e9e sera un ajout pr\u00e9cieux \u00e0 de nombreuses pages Web nouvelles ou existantes en leur permettant de mettre en \u0153uvre des cas d&#039;utilisation de RA sans quitter le navigateur. Par exemple, vous pouvez aider les gens \u00e0 apprendre sur des sites \u00e9ducatifs et permettre aux acheteurs potentiels de voir des articles chez vous pendant qu&#039;ils font leurs achats.<\/p>\n<p>Consid\u00e9rez le deuxi\u00e8me cas d&#039;utilisation. Imaginez la simulation de placer une repr\u00e9sentation grandeur nature d&#039;un objet virtuel dans une sc\u00e8ne r\u00e9elle. Une fois plac\u00e9e, l&#039;image reste sur la surface s\u00e9lectionn\u00e9e, appara\u00eet \u00e0 la taille qu&#039;elle aurait si l&#039;\u00e9l\u00e9ment r\u00e9el \u00e9tait sur cette surface et permet \u00e0 l&#039;utilisateur de se d\u00e9placer autour d&#039;elle, ainsi que de s&#039;en rapprocher ou de s&#039;en \u00e9loigner. Cela donne aux t\u00e9l\u00e9spectateurs une compr\u00e9hension plus profonde de l&#039;objet que ce qui est possible avec une image bidimensionnelle.<\/p>\n<p>Je prends un peu d&#039;avance sur moi-m\u00eame. Pour faire ce que j&#039;ai d\u00e9crit, vous avez besoin de la fonctionnalit\u00e9 AR et de certains moyens de d\u00e9tecter les surfaces. Cet article couvre le premier. L&#039;article d&#039;accompagnement sur l&#039;API WebXR Success Test (lien ci-dessus) couvre ce dernier.<\/p>\n<h2 id=\"requesting-a-session\"><span class=\"ez-toc-section\" id=\"Solicitando-una-sesion\"><\/span>Demander une session <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Demander une session est tr\u00e8s similaire \u00e0 ce que vous avez vu auparavant. V\u00e9rifiez d&#039;abord si le type de session souhait\u00e9 est disponible sur l&#039;appareil actuel en appelant<br \/>\n<code>xr.isSessionSupported ()<\/code>. Au lieu de demander <code>&#039;immersive-vr&#039;<\/code> comme avant, demandez <code>&#039;immersif-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\">si<\/span> <span class=\"token punctuation\">(<\/span>navigateur<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\">attendre<\/span> navigateur<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;immersif-ar&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">  <span class=\"token keyword\">si<\/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>Comme pr\u00e9c\u00e9demment, cela active un bouton \u00abEntrer AR\u00bb. Lorsque l&#039;utilisateur clique dessus, appelez<br \/>\n<code>xr.requestSession ()<\/code>, se passe aussi <code>&#039;immersif-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\">laisser<\/span> xrSession <span class=\"token operator\">=<\/span> <span class=\"token keyword\">nul<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token keyword\">une fonction<\/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\">si<\/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\">    navigateur<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;immersif-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>isImmersif <span class=\"token operator\">=<\/span> <span class=\"token boolean\">vrai<\/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\">finir<\/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>Une propri\u00e9t\u00e9 de commodit\u00e9 <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Vous avez probablement remarqu\u00e9 que j&#039;ai mis en \u00e9vidence deux lignes dans le dernier exemple de code. Les <code>XRSession<\/code> l&#039;objet semble avoir une propri\u00e9t\u00e9 appel\u00e9e <code>isImmersif<\/code>. Il s&#039;agit d&#039;une propri\u00e9t\u00e9 de commodit\u00e9 que j&#039;ai cr\u00e9\u00e9e moi-m\u00eame et qui ne fait pas partie de la sp\u00e9cification. Je l&#039;utiliserai plus tard pour d\u00e9cider de ce que je vais montrer au spectateur. Pourquoi cette propri\u00e9t\u00e9 ne fait-elle pas partie de l&#039;API? \u00c9tant donn\u00e9 que votre application peut avoir besoin de suivre cette propri\u00e9t\u00e9 diff\u00e9remment, les auteurs de la sp\u00e9cification ont d\u00e9cid\u00e9 de garder l&#039;API propre.<\/p>\n<h2 id=\"entering-a-session\"><span class=\"ez-toc-section\" id=\"Entrar-en-una-sesion\"><\/span>Entrez une session <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Souviens-toi que <code>onSessionStarted ()<\/code> cela ressemblait \u00e0 mon article pr\u00e9c\u00e9dent:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">une fonction<\/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\">laisser<\/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\">vrai<\/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\">'local-floor'<\/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>Je dois ajouter quelques \u00e9l\u00e9ments pour rendre compte du rendu de la r\u00e9alit\u00e9 augment\u00e9e. D\u00e9sactiver l&#039;arri\u00e8re-plan Tout d&#039;abord, je vais d\u00e9terminer si j&#039;ai besoin de l&#039;arri\u00e8re-plan. C&#039;est le premier endroit o\u00f9 j&#039;utiliserai ma propri\u00e9t\u00e9 de commodit\u00e9.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">une fonction<\/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\">si<\/span> <span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">.<\/span>isImmersif<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\">laisser<\/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\">vrai<\/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>isImmersif <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>Espaces de r\u00e9f\u00e9rence <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Mes articles pr\u00e9c\u00e9dents sont pass\u00e9s par les espaces de r\u00e9f\u00e9rence. L&#039;exemple que je d\u00e9cris en utilise deux, il est donc temps de corriger cette omission.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Une explication compl\u00e8te des espaces de r\u00e9f\u00e9rence serait plus longue que ce que je peux fournir ici. Je ne parlerai d&#039;espaces de r\u00e9f\u00e9rence qu&#039;en mati\u00e8re de r\u00e9alit\u00e9 augment\u00e9e.<\/p>\n<\/div>\n<p>Un espace de r\u00e9f\u00e9rence d\u00e9crit la relation entre le monde virtuel et l&#039;environnement physique de l&#039;utilisateur. Il le fait en:<\/p>\n<ul>\n<li>Sp\u00e9cifiez l&#039;origine du syst\u00e8me de coordonn\u00e9es utilis\u00e9 pour exprimer les positions dans le monde virtuel.<\/li>\n<li>Sp\u00e9cifiez si l&#039;utilisateur doit se d\u00e9placer dans ce syst\u00e8me de coordonn\u00e9es.<\/li>\n<li>Si ce syst\u00e8me de coordonn\u00e9es a des limites pr\u00e9d\u00e9finies. (Les exemples pr\u00e9sent\u00e9s ici n&#039;utilisent pas de syst\u00e8mes de coordonn\u00e9es avec des limites pr\u00e9d\u00e9finies.)<\/li>\n<\/ul>\n<p>Pour tous les espaces de r\u00e9f\u00e9rence, la coordonn\u00e9e X exprime la gauche et la droite, Y exprime le haut et le bas et Z exprime l&#039;avant et l&#039;arri\u00e8re. Les valeurs positives sont correctes, respectivement vers le haut et vers l&#039;arri\u00e8re.<\/p>\n<p>Les coordonn\u00e9es renvoy\u00e9es par <code>XRFrame.getViewerPose ()<\/code> d\u00e9pend de ce qui est demand\u00e9<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XRReferenceSpace#Reference_space_types\">type d&#039;espace de r\u00e9f\u00e9rence<\/a>. Plus d&#039;informations \u00e0 ce sujet lorsque nous arrivons \u00e0 la boucle de trame. \u00c0 ce stade, nous devons s\u00e9lectionner un type de r\u00e9f\u00e9rence adapt\u00e9 \u00e0 la r\u00e9alit\u00e9 augment\u00e9e. Encore une fois, cela utilise ma propri\u00e9t\u00e9 de commodit\u00e9.<\/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\">laisser<\/span> refSpaceType<\/mark><br><span class=\"highlight-line\"><span class=\"token keyword\">une fonction<\/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\">si<\/span> <span class=\"token punctuation\">(<\/span>session<span class=\"token punctuation\">.<\/span>isImmersif<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\">laisser<\/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\">vrai<\/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>isImmersif <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>Si vous avez visit\u00e9 le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/immersive-ar-session.html\">Exemple de session de r\u00e9alit\u00e9 augment\u00e9e immersive<\/a><br \/>\nVous remarquerez qu&#039;au d\u00e9part la sc\u00e8ne est en r\u00e9alit\u00e9 statique et non augment\u00e9e. Vous pouvez faire glisser et faire glisser votre doigt pour vous d\u00e9placer dans la sc\u00e8ne. Si vous cliquez sur &quot;START AR&quot;, l&#039;arri\u00e8re-plan dispara\u00eet et vous pouvez vous d\u00e9placer dans la sc\u00e8ne en d\u00e9pla\u00e7ant l&#039;appareil. Les modes utilisent diff\u00e9rents types d&#039;espaces de r\u00e9f\u00e9rence. Le texte en surbrillance ci-dessus montre comment il est s\u00e9lectionn\u00e9. Utilisez les types de r\u00e9f\u00e9rence suivants:<\/p>\n<p><code>local<\/code>  - L&#039;origine native est \u00e0 la position du spectateur au moment de la cr\u00e9ation de la session. Cela signifie que l&#039;exp\u00e9rience n&#039;a pas forc\u00e9ment un plancher bien d\u00e9fini et que la position exacte de l&#039;origine peut varier en fonction de la plate-forme. Bien qu&#039;il n&#039;y ait pas de limites pr\u00e9d\u00e9finies pour l&#039;espace, on s&#039;attend \u00e0 ce que le contenu puisse \u00eatre visualis\u00e9 sans mouvement autre que la rotation. Comme vous pouvez le voir dans notre propre exemple de RA, certains mouvements sont possibles dans l&#039;espace.<\/p>\n<p><code>t\u00e9l\u00e9spectateur<\/code>  - Plus fr\u00e9quemment utilis\u00e9 pour le contenu pr\u00e9sent\u00e9 en ligne sur la page, cet espace suit le dispositif d&#039;affichage. Lorsqu&#039;il est pass\u00e9 \u00e0 getViewerPose, il ne fournit pas de suivi et signale donc toujours une pose \u00e0 l&#039;origine \u00e0 moins que l&#039;application ne la modifie avec <code>XRReferenceSpace.getOffsetReferenceSpace ()<\/code>. L&#039;exemple l&#039;utilise pour activer le panoramique tactile de la cam\u00e9ra.<\/p>\n<h2 id=\"running-a-frame-loop\"><span class=\"ez-toc-section\" id=\"Ejecutando-un-bucle-de-cuadro\"><\/span>Ex\u00e9cution d&#039;une boucle d&#039;image <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Conceptuellement, rien ne change par rapport \u00e0 ce que j&#039;ai fait lors de la session de r\u00e9alit\u00e9 virtuelle d\u00e9crite dans mes articles pr\u00e9c\u00e9dents. Passez le type d&#039;espace de r\u00e9f\u00e9rence \u00e0 <code>XRFrame.getViewerPose ()<\/code>. Retour <code>XRViewerPose<\/code> sera pour le type d&#039;espace de r\u00e9f\u00e9rence actuel. Utilisant<br \/>\n<code>t\u00e9l\u00e9spectateur<\/code> comme valeur par d\u00e9faut, permet \u00e0 une page d&#039;afficher des aper\u00e7us de contenu avant que le consentement de l&#039;utilisateur pour la RA ou la RV ne soit demand\u00e9. Cela illustre un point important: le contenu en ligne utilise la m\u00eame boucle de trame que le contenu immersif, ce qui r\u00e9duit la quantit\u00e9 de code \u00e0 conserver.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">une fonction<\/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\">laisser<\/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\">laisser<\/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\">si<\/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>Cette s\u00e9rie d&#039;articles ne couvre que les bases de la mise en \u0153uvre de contenu immersif sur le Web. Le groupe de travail Web immersif pr\u00e9sente de nombreuses autres fonctionnalit\u00e9s et cas d&#039;utilisation. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/\">Exemples d&#039;API de p\u00e9riph\u00e9rique WebXR<\/a>. Nous venons \u00e9galement de publier un article sur la r\u00e9ussite des tests qui explique une API pour d\u00e9tecter des surfaces et placer des \u00e9l\u00e9ments virtuels dans une vue de cam\u00e9ra r\u00e9elle. Consultez-les et regardez le blog web.dev pour plus d&#039;articles dans l&#039;ann\u00e9e \u00e0 venir.<\/p>\n<p>photo par <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@davidgrdm\">David Grandmougin<\/a> au <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>Si vous avez d\u00e9j\u00e0 utilis\u00e9 l&#039;API WebXR Device, vous avez d\u00e9j\u00e0 fait la majeure partie du chemin. 13 f\u00e9vrier 2020 L&#039;API WebXR Device est livr\u00e9e le\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\/fr\/dev\/sie-konnen-bereits-wissen\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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\":\"fr-FR\"},{\"@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\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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":"Si vous avez d\u00e9j\u00e0 utilis\u00e9 l&#039;API WebXR Device, vous avez d\u00e9j\u00e0 fait la plupart du temps. 13 f\u00e9vrier 2020 API de p\u00e9riph\u00e9rique WebXR exp\u00e9di\u00e9e le","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\/fr\/dev\/sie-konnen-bereits-wissen\/","og_locale":"fr_FR","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\/fr\/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":"fr-FR"},{"@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 vous avez d\u00e9j\u00e0 utilis\u00e9 l&#039;API WebXR Device, vous avez d\u00e9j\u00e0 fait la plupart du temps. 13 f\u00e9vrier 2020 API de p\u00e9riph\u00e9rique WebXR exp\u00e9di\u00e9e le","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@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":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","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":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@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\/fr\/wp-json\/wp\/v2\/posts\/83843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=83843"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83843\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/83844"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=83843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=83843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=83843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}