C\u00e1mara R\u00e1pida<\/title>\n\n<style>\n * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, sans-serif; }\n\n body {\n background: #000;\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: white;\n }\n\n \/* \ud83d\udd25 Contenedor ajustado autom\u00e1ticamente al tama\u00f1o real del video *\/\n #camera-container {\n position: relative;\n width: 100%;\n max-width: 450px;\n background: black;\n border-radius: 14px;\n overflow: hidden;\n height: auto;\n }\n\n video, img {\n position: absolute;\n top: 0; left: 0;\n width: 100%; \n height: 100%;\n object-fit: cover; \/* Mantiene proporci\u00f3n *\/\n }\n\n #overlay { pointer-events: none; }\n\n #controls {\n margin-top: 12px;\n width: 100%;\n max-width: 450px;\n display: flex;\n justify-content: space-between;\n gap: 10px;\n }\n\n button {\n flex: 1;\n background: rgba(255,255,255,0.15);\n border: 1px solid rgba(255,255,255,0.3);\n padding: 12px;\n border-radius: 10px;\n color: white;\n font-size: 15px;\n font-weight: 600;\n }\n\n #capture { background: #00c853; border: none; }\n\n \/* Vista previa *\/\n #photo-preview {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.9);\n z-index: 100;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n }\n\n #photo-preview img {\n max-width: 90%;\n max-height: 80%;\n border-radius: 12px;\n }\n\n #photo-preview button {\n margin-top: 10px;\n padding: 12px;\n width: 80%;\n max-width: 300px;\n border-radius: 10px;\n border: none;\n font-size: 16px;\n background: #2196f3;\n color: white;\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div id=\"camera-container\">\n <video id=\"video\" autoplay playsinline><\/video>\n <img decoding=\"async\" id=\"overlay\" src=\"\">\n<\/div>\n\n<div id=\"controls\">\n <button id=\"switchCam\">\ud83d\udd04 C\u00e1mara<\/button>\n <button id=\"changeFilter\">\ud83c\udfa8 Filtro<\/button>\n <button id=\"capture\">\ud83d\udcf8<\/button>\n<\/div>\n\n<div id=\"photo-preview\">\n <img id=\"photo-result\">\n <button id=\"close\">Cerrar \u274c<\/button>\n<\/div>\n\n<script>\n const video = document.getElementById(\"video\");\n const overlay = document.getElementById(\"overlay\");\n const switchCam = document.getElementById(\"switchCam\");\n const changeFilter = document.getElementById(\"changeFilter\");\n const capture = document.getElementById(\"capture\");\n const preview = document.getElementById(\"photo-preview\");\n const photoResult = document.getElementById(\"photo-result\");\n const closeBtn = document.getElementById(\"close\");\n\n let stream;\n let facingMode = \"user\";\n\n \/* \ud83d\udd25 Lista de filtros *\/\n const filterList = [\n \"https:\/\/carnesbrangus.com\/wp-content\/uploads\/2025\/11\/A1.webp\",\n \"https:\/\/carnesbrangus.com\/wp-content\/uploads\/2025\/11\/A2.webp\",\n \"https:\/\/carnesbrangus.com\/wp-content\/uploads\/2025\/11\/A3.webp\",\n \"\" \/\/ sin filtro\n ];\n\n \/* Precarga *\/\n const preloaded = [];\n filterList.forEach(src => {\n const img = new Image();\n img.src = src;\n preloaded.push(img);\n });\n\n let currentFilter = 0;\n\n function applyFilter() {\n overlay.src = filterList[currentFilter];\n }\n\n changeFilter.onclick = () => {\n currentFilter = (currentFilter + 1) % filterList.length;\n applyFilter();\n };\n\n async function startCamera() {\n try {\n if (stream) stream.getTracks().forEach(t => t.stop());\n\n stream = await navigator.mediaDevices.getUserMedia({\n video: { facingMode }\n });\n\n video.srcObject = stream;\n\n \/* \ud83d\udd25 Ajusta el contenedor al tama\u00f1o REAL del video *\/\n video.onloadedmetadata = () => {\n const ratio = video.videoHeight \/ video.videoWidth;\n const width = document.getElementById(\"camera-container\").offsetWidth;\n document.getElementById(\"camera-container\").style.height = (width * ratio) + \"px\";\n };\n\n } catch (e) {\n alert(\"No se pudo acceder a la c\u00e1mara: \" + e.message);\n }\n }\n\n switchCam.onclick = () => {\n facingMode = facingMode === \"user\" ? \"environment\" : \"user\";\n startCamera();\n };\n\n \/* \ud83d\udd25 FOTO + DESCARGA AUTOM\u00c1TICA *\/\n capture.onclick = () => {\n const canvas = document.createElement(\"canvas\");\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n\n const ctx = canvas.getContext(\"2d\");\n\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n\n if (overlay.src) {\n ctx.drawImage(overlay, 0, 0, canvas.width, canvas.height);\n }\n\n const imageURL = canvas.toDataURL(\"image\/png\");\n\n \/\/ \ud83d\udce5 Descargar autom\u00e1ticamente\n const link = document.createElement(\"a\");\n link.href = imageURL;\n link.download = \"foto.png\";\n link.click();\n\n \/\/ Vista previa opcional\n photoResult.src = imageURL;\n preview.style.display = \"flex\";\n };\n\n closeBtn.onclick = () => preview.style.display = \"none\";\n\n \/\/ Iniciar c\u00e1mara + primer filtro\n startCamera();\n applyFilter();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>C\u00e1mara R\u00e1pida \ud83d\udd04 C\u00e1mara \ud83c\udfa8 Filtro \ud83d\udcf8 Cerrar \u274c<\/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-1157","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1157","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=1157"}],"version-history":[{"count":10,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1157\/revisions"}],"predecessor-version":[{"id":1301,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1157\/revisions\/1301"}],"wp:attachment":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/media?parent=1157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1157,"date":"2025-11-06T20:43:30","date_gmt":"2025-11-06T20:43:30","guid":{"rendered":"https:\/\/carnesbrangus.com\/?page_id=1157"},"modified":"2025-11-27T22:50:13","modified_gmt":"2025-11-27T22:50:13","slug":"filtro","status":"publish","type":"page","link":"https:\/\/carnesbrangus.com\/index.php\/filtro\/","title":{"rendered":"filtro"},"content":{"rendered":"\n\n\n\n\n\nC\u00e1mara R\u00e1pida<\/title>\n\n<style>\n * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, sans-serif; }\n\n body {\n background: #000;\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: white;\n }\n\n \/* \ud83d\udd25 Contenedor ajustado autom\u00e1ticamente al tama\u00f1o real del video *\/\n #camera-container {\n position: relative;\n width: 100%;\n max-width: 450px;\n background: black;\n border-radius: 14px;\n overflow: hidden;\n height: auto;\n }\n\n video, img {\n position: absolute;\n top: 0; left: 0;\n width: 100%; \n height: 100%;\n object-fit: cover; \/* Mantiene proporci\u00f3n *\/\n }\n\n #overlay { pointer-events: none; }\n\n #controls {\n margin-top: 12px;\n width: 100%;\n max-width: 450px;\n display: flex;\n justify-content: space-between;\n gap: 10px;\n }\n\n button {\n flex: 1;\n background: rgba(255,255,255,0.15);\n border: 1px solid rgba(255,255,255,0.3);\n padding: 12px;\n border-radius: 10px;\n color: white;\n font-size: 15px;\n font-weight: 600;\n }\n\n #capture { background: #00c853; border: none; }\n\n \/* Vista previa *\/\n #photo-preview {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.9);\n z-index: 100;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n }\n\n #photo-preview img {\n max-width: 90%;\n max-height: 80%;\n border-radius: 12px;\n }\n\n #photo-preview button {\n margin-top: 10px;\n padding: 12px;\n width: 80%;\n max-width: 300px;\n border-radius: 10px;\n border: none;\n font-size: 16px;\n background: #2196f3;\n color: white;\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div id=\"camera-container\">\n <video id=\"video\" autoplay playsinline><\/video>\n <img decoding=\"async\" id=\"overlay\" src=\"\">\n<\/div>\n\n<div id=\"controls\">\n <button id=\"switchCam\">\ud83d\udd04 C\u00e1mara<\/button>\n <button id=\"changeFilter\">\ud83c\udfa8 Filtro<\/button>\n <button id=\"capture\">\ud83d\udcf8<\/button>\n<\/div>\n\n<div id=\"photo-preview\">\n <img id=\"photo-result\">\n <button id=\"close\">Cerrar \u274c<\/button>\n<\/div>\n\n<script>\n const video = document.getElementById(\"video\");\n const overlay = document.getElementById(\"overlay\");\n const switchCam = document.getElementById(\"switchCam\");\n const changeFilter = document.getElementById(\"changeFilter\");\n const capture = document.getElementById(\"capture\");\n const preview = document.getElementById(\"photo-preview\");\n const photoResult = document.getElementById(\"photo-result\");\n const closeBtn = document.getElementById(\"close\");\n\n let stream;\n let facingMode = \"user\";\n\n \/* \ud83d\udd25 Lista de filtros *\/\n const filterList = [\n \"https:\/\/carnesbrangus.com\/wp-content\/uploads\/2025\/11\/A1.webp\",\n \"https:\/\/carnesbrangus.com\/wp-content\/uploads\/2025\/11\/A2.webp\",\n \"https:\/\/carnesbrangus.com\/wp-content\/uploads\/2025\/11\/A3.webp\",\n \"\" \/\/ sin filtro\n ];\n\n \/* Precarga *\/\n const preloaded = [];\n filterList.forEach(src => {\n const img = new Image();\n img.src = src;\n preloaded.push(img);\n });\n\n let currentFilter = 0;\n\n function applyFilter() {\n overlay.src = filterList[currentFilter];\n }\n\n changeFilter.onclick = () => {\n currentFilter = (currentFilter + 1) % filterList.length;\n applyFilter();\n };\n\n async function startCamera() {\n try {\n if (stream) stream.getTracks().forEach(t => t.stop());\n\n stream = await navigator.mediaDevices.getUserMedia({\n video: { facingMode }\n });\n\n video.srcObject = stream;\n\n \/* \ud83d\udd25 Ajusta el contenedor al tama\u00f1o REAL del video *\/\n video.onloadedmetadata = () => {\n const ratio = video.videoHeight \/ video.videoWidth;\n const width = document.getElementById(\"camera-container\").offsetWidth;\n document.getElementById(\"camera-container\").style.height = (width * ratio) + \"px\";\n };\n\n } catch (e) {\n alert(\"No se pudo acceder a la c\u00e1mara: \" + e.message);\n }\n }\n\n switchCam.onclick = () => {\n facingMode = facingMode === \"user\" ? \"environment\" : \"user\";\n startCamera();\n };\n\n \/* \ud83d\udd25 FOTO + DESCARGA AUTOM\u00c1TICA *\/\n capture.onclick = () => {\n const canvas = document.createElement(\"canvas\");\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n\n const ctx = canvas.getContext(\"2d\");\n\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n\n if (overlay.src) {\n ctx.drawImage(overlay, 0, 0, canvas.width, canvas.height);\n }\n\n const imageURL = canvas.toDataURL(\"image\/png\");\n\n \/\/ \ud83d\udce5 Descargar autom\u00e1ticamente\n const link = document.createElement(\"a\");\n link.href = imageURL;\n link.download = \"foto.png\";\n link.click();\n\n \/\/ Vista previa opcional\n photoResult.src = imageURL;\n preview.style.display = \"flex\";\n };\n\n closeBtn.onclick = () => preview.style.display = \"none\";\n\n \/\/ Iniciar c\u00e1mara + primer filtro\n startCamera();\n applyFilter();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>C\u00e1mara R\u00e1pida \ud83d\udd04 C\u00e1mara \ud83c\udfa8 Filtro \ud83d\udcf8 Cerrar \u274c<\/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-1157","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1157","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=1157"}],"version-history":[{"count":10,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1157\/revisions"}],"predecessor-version":[{"id":1301,"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/pages\/1157\/revisions\/1301"}],"wp:attachment":[{"href":"https:\/\/carnesbrangus.com\/index.php\/wp-json\/wp\/v2\/media?parent=1157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}