Filtro C\u00e1mara M\u00f3vil<\/title>\n <style>\n body {\n margin: 0;\n font-family: system-ui, sans-serif;\n background: #000;\n color: #fff;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n }\n #camera-container {\n position: relative;\n width: 100vw;\n height: 100vh;\n overflow: hidden;\n background: #000;\n }\n video, canvas, img, #threeCanvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n #controls {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(8px);\n padding: 10px;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n align-items: center;\n gap: 8px;\n box-sizing: border-box;\n }\n button, select, input[type=file] {\n background: rgba(255,255,255,0.1);\n border: 1px solid rgba(255,255,255,0.3);\n color: #fff;\n border-radius: 8px;\n padding: 8px 10px;\n font-size: 14px;\n flex: 1;\n }\n input[type=range] {\n width: 100%;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"camera-container\">\n <video id=\"video\" autoplay playsinline><\/video>\n <canvas id=\"mainCanvas\"><\/canvas>\n <canvas id=\"threeCanvas\"><\/canvas>\n <img id=\"overlay\" \/>\n <div id=\"controls\">\n <button id=\"startBtn\">\ud83c\udfa5<\/button>\n <select id=\"filterSelect\">\n <option value=\"none\">Sin filtro<\/option>\n <option value=\"grayscale(100%)\">B\/N<\/option>\n <option value=\"sepia(80%)\">Sepia<\/option>\n <option value=\"contrast(150%)\">Contraste<\/option>\n <option value=\"brightness(1.3)\">Brillo<\/option>\n <\/select>\n <input id=\"frameUpload\" type=\"file\" accept=\"image\/png\">\n <button id=\"snapBtn\">\ud83d\udcf8<\/button>\n <\/div>\n <\/div>\n\n <script>\n const video = document.getElementById('video');\n const canvas = document.getElementById('mainCanvas');\n const ctx = canvas.getContext('2d');\n const overlay = document.getElementById('overlay');\n let stream = null;\n\n async function startCamera() {\n try {\n stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: false });\n video.srcObject = stream;\n await video.play();\n resizeCanvas();\n drawLoop();\n } catch (e) {\n alert('Error c\u00e1mara: ' + e.message);\n }\n }\n\n function resizeCanvas() {\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n }\n\n function drawLoop() {\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n const filter = document.getElementById('filterSelect').value;\n ctx.filter = filter;\n if (overlay.src) ctx.drawImage(overlay, 0, 0, canvas.width, canvas.height);\n requestAnimationFrame(drawLoop);\n }\n\n document.getElementById('startBtn').addEventListener('click', startCamera);\n document.getElementById('snapBtn').addEventListener('click', () => {\n const imgData = canvas.toDataURL('image\/png');\n const link = document.createElement('a');\n link.href = imgData;\n link.download = 'foto.png';\n link.click();\n });\n\n document.getElementById('frameUpload').addEventListener('change', e => {\n const file = e.target.files[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = () => overlay.src = reader.result;\n reader.readAsDataURL(file);\n });\n\n window.addEventListener('resize', resizeCanvas);\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Filtro C\u00e1mara M\u00f3vil \ud83c\udfa5 Sin filtroB\/NSepiaContrasteBrillo \ud83d\udcf8<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1153","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/comments?post=1153"}],"version-history":[{"count":1,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1153\/revisions"}],"predecessor-version":[{"id":1155,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1153\/revisions\/1155"}],"wp:attachment":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/media?parent=1153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1153,"date":"2025-11-06T20:18:27","date_gmt":"2025-11-06T20:18:27","guid":{"rendered":"https:\/\/carnesbrangus.com\/?page_id=1153"},"modified":"2025-11-06T20:18:27","modified_gmt":"2025-11-06T20:18:27","slug":"1153-2","status":"publish","type":"page","link":"https:\/\/carnesbrangus.com\/index.php\/1153-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Filtro C\u00e1mara M\u00f3vil<\/title>\n <style>\n body {\n margin: 0;\n font-family: system-ui, sans-serif;\n background: #000;\n color: #fff;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n }\n #camera-container {\n position: relative;\n width: 100vw;\n height: 100vh;\n overflow: hidden;\n background: #000;\n }\n video, canvas, img, #threeCanvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n #controls {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(8px);\n padding: 10px;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n align-items: center;\n gap: 8px;\n box-sizing: border-box;\n }\n button, select, input[type=file] {\n background: rgba(255,255,255,0.1);\n border: 1px solid rgba(255,255,255,0.3);\n color: #fff;\n border-radius: 8px;\n padding: 8px 10px;\n font-size: 14px;\n flex: 1;\n }\n input[type=range] {\n width: 100%;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"camera-container\">\n <video id=\"video\" autoplay playsinline><\/video>\n <canvas id=\"mainCanvas\"><\/canvas>\n <canvas id=\"threeCanvas\"><\/canvas>\n <img id=\"overlay\" \/>\n <div id=\"controls\">\n <button id=\"startBtn\">\ud83c\udfa5<\/button>\n <select id=\"filterSelect\">\n <option value=\"none\">Sin filtro<\/option>\n <option value=\"grayscale(100%)\">B\/N<\/option>\n <option value=\"sepia(80%)\">Sepia<\/option>\n <option value=\"contrast(150%)\">Contraste<\/option>\n <option value=\"brightness(1.3)\">Brillo<\/option>\n <\/select>\n <input id=\"frameUpload\" type=\"file\" accept=\"image\/png\">\n <button id=\"snapBtn\">\ud83d\udcf8<\/button>\n <\/div>\n <\/div>\n\n <script>\n const video = document.getElementById('video');\n const canvas = document.getElementById('mainCanvas');\n const ctx = canvas.getContext('2d');\n const overlay = document.getElementById('overlay');\n let stream = null;\n\n async function startCamera() {\n try {\n stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: false });\n video.srcObject = stream;\n await video.play();\n resizeCanvas();\n drawLoop();\n } catch (e) {\n alert('Error c\u00e1mara: ' + e.message);\n }\n }\n\n function resizeCanvas() {\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n }\n\n function drawLoop() {\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n const filter = document.getElementById('filterSelect').value;\n ctx.filter = filter;\n if (overlay.src) ctx.drawImage(overlay, 0, 0, canvas.width, canvas.height);\n requestAnimationFrame(drawLoop);\n }\n\n document.getElementById('startBtn').addEventListener('click', startCamera);\n document.getElementById('snapBtn').addEventListener('click', () => {\n const imgData = canvas.toDataURL('image\/png');\n const link = document.createElement('a');\n link.href = imgData;\n link.download = 'foto.png';\n link.click();\n });\n\n document.getElementById('frameUpload').addEventListener('change', e => {\n const file = e.target.files[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = () => overlay.src = reader.result;\n reader.readAsDataURL(file);\n });\n\n window.addEventListener('resize', resizeCanvas);\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Filtro C\u00e1mara M\u00f3vil \ud83c\udfa5 Sin filtroB\/NSepiaContrasteBrillo \ud83d\udcf8<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1153","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/comments?post=1153"}],"version-history":[{"count":1,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1153\/revisions"}],"predecessor-version":[{"id":1155,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1153\/revisions\/1155"}],"wp:attachment":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/media?parent=1153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}