{"id":2798,"date":"2023-03-11T01:16:53","date_gmt":"2023-03-11T01:16:53","guid":{"rendered":"https:\/\/turismobaterno.es\/?page_id=2798"},"modified":"2023-08-16T19:56:12","modified_gmt":"2023-08-16T18:56:12","slug":"borrador-automatico","status":"publish","type":"page","link":"https:\/\/turismobaterno.es\/?page_id=2798","title":{"rendered":"Lectura QR"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.19.1″ _module_preset=”default” global_colors_info=”{}”] Lector de QR<\/title><!-- [et_pb_line_break_holder] --> <\/p>\n<style><!-- [et_pb_line_break_holder] --> body {<!-- [et_pb_line_break_holder] --> margin: 0;<!-- [et_pb_line_break_holder] --> display: flex;<!-- [et_pb_line_break_holder] --> justify-content: center;<!-- [et_pb_line_break_holder] --> align-items: center;<!-- [et_pb_line_break_holder] --> height: 80vh;<!-- [et_pb_line_break_holder] --> background-color: #f0f0f0;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> #cameraContainer {<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> width: 80vw;<!-- [et_pb_line_break_holder] --> height: 80vw;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> #videoElement {<!-- [et_pb_line_break_holder] --> width: 80%;<!-- [et_pb_line_break_holder] --> height: width();<!-- [et_pb_line_break_holder] --> object-fit: cover;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> #canvasElement {<!-- [et_pb_line_break_holder] --> display: none;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> #scanButton {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> bottom: 20px;<!-- [et_pb_line_break_holder] --> left: 40%;<!-- [et_pb_line_break_holder] --> transform: translateX(-50%);<!-- [et_pb_line_break_holder] --> padding: 10px 20px;<!-- [et_pb_line_break_holder] --> background-color: #007bff;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> border: none;<!-- [et_pb_line_break_holder] --> border-radius: 15px;<!-- [et_pb_line_break_holder] --> cursor: pointer;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <\/style>\n<p><!-- [et_pb_line_break_holder] --><\/head><!-- [et_pb_line_break_holder] --><body><!-- [et_pb_line_break_holder] --> <\/p>\n<div><!-- [et_pb_line_break_holder] --> <\/p>\n<div id=\"cameraContainer\"><!-- [et_pb_line_break_holder] --> <video id=\"videoElement\" playsinline autoplay><\/video><!-- [et_pb_line_break_holder] --> <canvas id=\"canvasElement\"><\/canvas><!-- [et_pb_line_break_holder] --> <button id=\"scanButton\">Escanear QR<\/button><!-- [et_pb_line_break_holder] --> <\/div>\n<p><!-- [et_pb_line_break_holder] --> <\/p>\n<div id=\"resultContainer\"><\/div>\n<p><!-- [et_pb_line_break_holder] --> <\/div>\n<p><!-- [et_pb_line_break_holder] --> <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsqr\/dist\/jsQR.js\"><\/script><!-- [et_pb_line_break_holder] --> <script><!-- [et_pb_line_break_holder] --> const videoElement = document.getElementById('videoElement');<!-- [et_pb_line_break_holder] --> const canvasElement = document.getElementById('canvasElement');<!-- [et_pb_line_break_holder] --> const resultContainer = document.getElementById('resultContainer');<!-- [et_pb_line_break_holder] --> const scanButton = document.getElementById('scanButton');<!-- [et_pb_line_break_holder] --> const cameraContainer = document.getElementById('cameraContainer');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> let stream = null;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function startCamera() {<!-- [et_pb_line_break_holder] --> navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })<!-- [et_pb_line_break_holder] --> .then(mediaStream => {<!-- [et_pb_line_break_holder] --> stream = mediaStream;<!-- [et_pb_line_break_holder] --> videoElement.srcObject = stream;<!-- [et_pb_line_break_holder] --> videoElement.play();<!-- [et_pb_line_break_holder] --> cameraContainer.style.display = 'block';<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> .catch(err => {<!-- [et_pb_line_break_holder] --> console.error(err);<!-- [et_pb_line_break_holder] --> cameraContainer.style.display = 'block';<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function stopCamera() {<!-- [et_pb_line_break_holder] --> if (stream) {<!-- [et_pb_line_break_holder] --> stream.getTracks().forEach(track => track.stop());<!-- [et_pb_line_break_holder] --> stream = null;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> cameraContainer.style.display = 'none';<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function openLinkInSameTab(url) {<!-- [et_pb_line_break_holder] --> window.location.href = url;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function tick() {<!-- [et_pb_line_break_holder] --> canvasElement.width = videoElement.videoWidth;<!-- [et_pb_line_break_holder] --> canvasElement.height = videoElement.videoWidth;<!-- [et_pb_line_break_holder] --> canvasElement.getContext('2d').drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);<!-- [et_pb_line_break_holder] --> const imageData = canvasElement.getContext('2d').getImageData(0, 0, canvasElement.width, canvasElement.height);<!-- [et_pb_line_break_holder] --> const code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' });<!-- [et_pb_line_break_holder] --> if (code) {<!-- [et_pb_line_break_holder] --> openLinkInSameTab(code.data);<!-- [et_pb_line_break_holder] --> stopCamera();<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> requestAnimationFrame(tick);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> scanButton.addEventListener('click', () => {<!-- [et_pb_line_break_holder] --> startCamera();<!-- [et_pb_line_break_holder] --> tick();<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> startCamera();<!-- [et_pb_line_break_holder] --> <\/script><!-- [et_pb_line_break_holder] --><\/body><!-- [et_pb_line_break_holder] --><\/html><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.19.1″ _module_preset=”default” background_color=”#FFFFFF” positioning=”fixed” position_origin_f=”bottom_center” z_index=”350″ width=”100%” max_width=”2560px” height=”70px” custom_padding=”0px|||||” global_module=”2810″ global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.19.1″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″][et_pb_code _builder_version=”4.19.1″ _module_preset=”default” positioning=”fixed” position_origin_f=”bottom_center” vertical_offset=”10px” z_index=”500″ text_orientation=”center” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″]<\/p>\n<div class=\"et_pb_button_module_wrapper et_pb_button_0_wrapper et_pb_module\"><!-- [et_pb_line_break_holder] -->\t<a class=\"et_pb_button et_pb_button_0 et_pb_bg_layout_light\" href=\"javascript: history.go(-1)\">Atr\u00e1s<\/a><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-2798","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/pages\/2798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/turismobaterno.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2798"}],"version-history":[{"count":12,"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/pages\/2798\/revisions"}],"predecessor-version":[{"id":3232,"href":"https:\/\/turismobaterno.es\/index.php?rest_route=\/wp\/v2\/pages\/2798\/revisions\/3232"}],"wp:attachment":[{"href":"https:\/\/turismobaterno.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}