{"id":34813,"date":"2025-12-10T14:51:21","date_gmt":"2025-12-10T13:51:21","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=34813"},"modified":"2025-12-10T16:27:50","modified_gmt":"2025-12-10T15:27:50","slug":"crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/","title":{"rendered":"Crea aplicaciones de IA que ven, escuchen y respondan \u2014 \u00a1en menos de 30 minutos!"},"content":{"rendered":"\n<p>Entonces, quieres crear una IA que observe un video en tiempo real, escuche a los usuarios y responda con voz natural. Suena genial, \u00bfverdad? Ahora intenta construirlo.<\/p>\n\n\n\n<p>Vas a necesitar una API de reconocimiento de voz (<em>speech-to-text<\/em>), un modelo de visi\u00f3n, un modelo de lenguaje, un servicio de s\u00edntesis de voz (<em>text-to-speech<\/em>), WebRTC para transmisi\u00f3n en tiempo real y WebSockets para comunicaci\u00f3n de baja latencia. Luego tendr\u00e1s que unir todo, rezar para que la latencia se mantenga por debajo de dos segundos y depurar el caos as\u00edncrono cuando el audio y el video se desincronizan.<\/p>\n\n\n\n<p><strong>Lo hemos vivido. Precisamente por eso creamos Orga AI.<\/strong><\/p>\n\n\n\n<p>SDKs unificados. Un flujo de API sin fricciones. Visi\u00f3n, voz y conversaci\u00f3n, procesadas juntas en menos de 700 milisegundos. Soporte para m\u00e1s de 40 idiomas desde el primer momento. Y s\u00ed, puedes tenerlo funcionando en menos de 30 minutos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-que-es-orga-ai\"><a href=\"https:\/\/codemo.tech\/orga-plataforma-es\" target=\"_blank\" rel=\"noreferrer noopener\">\u00bfQu\u00e9 es Orga AI?<\/a><\/h2>\n\n\n\n<p>Orga AI es una plataforma de IA conversacional en tiempo real. Los usuarios encienden su c\u00e1mara, hablan de forma natural y muestran a la IA lo que est\u00e1 ocurriendo. La IA observa, escucha y responde con su voz, en su propio idioma.<\/p>\n\n\n\n<p>As\u00ed es como funciona:<br><strong>Usuario<\/strong> (apuntando la c\u00e1mara del tel\u00e9fono): \u201cMi hub inteligente no se conecta. La luz sigue parpadeando en naranja.\u201d<br><strong>Orga AI<\/strong> (observando el patr\u00f3n de parpadeo): \u201cVeo ese parpadeo naranja: tu hub perdi\u00f3 la configuraci\u00f3n de red. Mu\u00e9strame la parte trasera y te guiar\u00e9 para reiniciarlo.\u201d<\/p>\n\n\n\n<p>Nada de escribir, capturas de pantalla o \u201cpor favor describe tu problema en detalle\u201d. La IA ve el problema y explica la soluci\u00f3n como lo har\u00eda un compa\u00f1ero.<\/p>\n\n\n\n<p>Esa es la experiencia que puedes ofrecer con Orga.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-primeros-pasos-con-los-sdks-de-orga\"><strong>Primeros pasos con los SDKs de Orga<\/strong><\/h2>\n\n\n\n<p>Orga ofrece un conjunto de SDKs, desde el cliente hasta el servidor, que trabajan juntos para conectar tu aplicaci\u00f3n con nuestras APIs.<\/p>\n\n\n\n<p>Los SDKs de cliente de Orga se integran con cualquier framework basado en React. Elige tu stack y sigue los pasos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-next-js-fastest-setup\">Next.js (Fastest Setup)<\/h3>\n\n\n\n<p>Nuestro starter de Next.js crea una aplicaci\u00f3n completa con video, audio y conversaci\u00f3n con IA ya integrados.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>npx<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>@orga-ai<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>\/create-orga-next-app my-app\ncd my-app\nnpm install\nnpm run dev<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">small<\/span>&gt;<\/span>Code language: CSS (css)<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">small<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Abre <strong><code>localhost:3000<\/code>.<\/strong> Ver\u00e1s una demo funcionando: vista previa de la c\u00e1mara, entrada de voz y respuestas de la IA. Personaliza la personalidad, conecta tu l\u00f3gica y l\u00e1nzalo.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-backend-proxy-node\"><strong>Backend Proxy (Node)<\/strong><\/h3>\n\n\n\n<p>Para mantener tu clave API segura, primero necesitar\u00e1s crear un peque\u00f1o servicio de backend. Este backend act\u00faa como un proxy entre tu aplicaci\u00f3n y Orga. Su funci\u00f3n es obtener los servidores ICE y un <em>token<\/em> ef\u00edmero desde la API de Orga. Tu SDK de cliente (React o React Native) llamar\u00e1 a este endpoint antes de establecer su propia conexi\u00f3n.<br><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>import<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> 'dotenv\/config';\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>import<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> express <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>from<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> 'express';\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>import<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> cors <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>from<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> 'cors';\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>import<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> { OrgaAI } <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>from<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> '@orga-ai\/node';\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>const<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> app = express();\napp.use(cors()); <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>const<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> orga = <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>new<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> OrgaAI({\napiKey: process.env.ORGA_API_KEY!\n});\napp.get('\/api\/orga-client-secrets', <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>async<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> (_req, res) =&gt; {\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>try<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> {\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>const<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> { ephemeralToken, iceServers } = <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>await<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> orga.getSessionConfig();\nres.json({ ephemeralToken, iceServers });\n} <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>catch<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> (error) {\nconsole.error('Failed to get session config:', error);\nres.status(500).json({ error: 'Internal server error' });\n}\n});\napp.listen(5000, () =&gt; console.log('Proxy running on http:\/\/localhost:5000'));<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Una vez que este endpoint del backend est\u00e9 en funcionamiento, tu SDK de frontend podr\u00e1 llamarlo para obtener la configuraci\u00f3n de la sesi\u00f3n. No es necesario exponer tu clave API en el cliente.<\/p>\n\n\n\n<p>Eso es todo por el backend. A continuaci\u00f3n, veremos c\u00f3mo llamar a este endpoint desde el frontend y establecer la conexi\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>React (Vite, CRA, or Your Own Setup)<\/strong><\/h3>\n\n\n\n<p>\u00bfYa tienes un proyecto en React? Solo incorpora el SDK.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code><strong>npm<\/strong> <strong>install<\/strong> <strong>@orga-ai<\/strong>\/react<\/code><small>Code language: CSS (css)<\/small><\/pre>\n\n\n\n<p>Al configurar el <em>provider<\/em>, aqu\u00ed es donde le indicas al SDK del cliente qu\u00e9 endpoint del backend debe llamar. Ese endpoint devuelve el <em>token<\/em> ef\u00edmero y los servidores ICE, que el SDK utiliza para establecer una conexi\u00f3n segura con Orga, sin exponer nunca tu clave API.<br><br><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>'use client' \n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>import<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> { OrgaAI, OrgaAIProvider } <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>from<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> '@orga-ai\/react';\nOrgaAI.init({\nlogLevel: 'debug',\nmodel: 'orga-1-beta',\nvoice: 'alloy',\nfetchSessionConfig: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>async<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> () =&gt; {\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>const<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> res = <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>await<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> fetch('http:\/\/localhost:5000\/api\/orga-client-secrets');\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>if<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> (!res.ok) <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>throw<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>new<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> Error('Failed to fetch session config');\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>const<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> { ephemeralToken, iceServers } = <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>await<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> res.json();\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>return<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> { ephemeralToken, iceServers };\n},\n});\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>export<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>function<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>OrgaClientProvider<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>({ children }: { children: React.ReactNode }) {\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>return<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span> {children};\n}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Luego, envuelve tu aplicaci\u00f3n con el <em>provider<\/em>:<br><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">&lt;code&gt;&lt;strong&gt;import&lt;\/strong&gt; type { ReactNode } &lt;strong&gt;from&lt;\/strong&gt; <span class=\"hljs-string\">'react'<\/span>;\n&lt;strong&gt;import&lt;\/strong&gt; { OrgaClientProvider } &lt;strong&gt;from&lt;\/strong&gt; <span class=\"hljs-string\">'.\/providers\/OrgaClientProvider'<\/span>;\n&lt;strong&gt;export&lt;\/strong&gt; &lt;strong&gt;<span class=\"hljs-keyword\">default<\/span>&lt;\/strong&gt; &lt;strong&gt;<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt; &lt;<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-title\">RootLayout<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-params\">({ children }: { children: ReactNode })<\/span> <\/span>{\n&lt;strong&gt;<span class=\"hljs-keyword\">return<\/span>&lt;\/strong&gt; (\n&lt;&lt;strong&gt;html&lt;\/strong&gt; lang=<span class=\"hljs-string\">\"en\"<\/span>&gt;\n&lt;&lt;strong&gt;body&lt;\/strong&gt;&gt;\n&lt;&lt;strong&gt;OrgaClientProvider&lt;\/strong&gt;&gt;{children}&lt;\/&lt;strong&gt;OrgaClientProvider&lt;\/strong&gt;&gt;\n&lt;\/&lt;strong&gt;body&lt;\/strong&gt;&gt;\nTypeScript\n&lt;\/&lt;strong&gt;html&lt;\/strong&gt;&gt;\n);\n}&lt;\/code&gt;&lt;small&gt;Code language: JavaScript (javascript)&lt;\/small&gt;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Ahora est\u00e1s listo para crear tu archivo principal e importar el <em>hook<\/em> <code>useOrgaAI<\/code>. Este te proporciona todo lo que necesitas: <strong><code>startSession()<\/code>, <code>endSession()<\/code><\/strong> y el estado en tiempo real, como <code>connectionState<\/code>.<br><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">&lt;code&gt;<span class=\"hljs-string\">'use client'<\/span>\n \n&lt;strong&gt;import&lt;\/strong&gt; {\n  useOrgaAI,\n  OrgaVideo,\n  OrgaAudio,\n} &lt;strong&gt;from&lt;\/strong&gt; <span class=\"hljs-string\">'@orga-ai\/react'<\/span>;\n \n&lt;strong&gt;export&lt;\/strong&gt; &lt;strong&gt;<span class=\"hljs-keyword\">default<\/span>&lt;\/strong&gt; &lt;strong&gt;<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt; &lt;<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-title\">Home<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-params\">()<\/span> <\/span>{\n  &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; {\n    startSession,\n    endSession,\n    connectionState,\n    toggleCamera,\n    toggleMic,\n    isCameraOn,\n    isMicOn,\n    userVideoStream,\n    aiAudioStream,\n  } = useOrgaAI();\n \n  &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; isConnected = connectionState === <span class=\"hljs-string\">'connected'<\/span>;\n  &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; isIdle = connectionState === <span class=\"hljs-string\">'disconnected'<\/span>;\n \n  &lt;strong&gt;<span class=\"hljs-keyword\">return<\/span>&lt;\/strong&gt; (\n    &lt;&lt;strong&gt;main&lt;\/strong&gt; className=<span class=\"hljs-string\">\"mx-auto flex max-w-2xl flex-col gap-6 p-8\"<\/span>&gt;\n      &lt;&lt;strong&gt;header&lt;\/strong&gt;&gt;\n        &lt;&lt;strong&gt;h1&lt;\/strong&gt; className=<span class=\"hljs-string\">\"text-3xl font-bold\"<\/span>&gt;Orga React SDK Quick Start&lt;\/&lt;strong&gt;h1&lt;\/strong&gt;&gt;\n        &lt;&lt;strong&gt;p&lt;\/strong&gt; className=<span class=\"hljs-string\">\"text-gray-600\"<\/span>&gt;Status: {connectionState}&lt;\/&lt;strong&gt;p&lt;\/strong&gt;&gt;\n      &lt;\/&lt;strong&gt;header&lt;\/strong&gt;&gt;\n \n      &lt;&lt;strong&gt;section&lt;\/strong&gt; className=<span class=\"hljs-string\">\"grid grid-cols-2 gap-4\"<\/span>&gt;\n        &lt;&lt;strong&gt;button&lt;\/strong&gt;\n          className=<span class=\"hljs-string\">\"rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50\"<\/span>\n          disabled={!isIdle}\n          onClick={() =&gt; startSession()}\n        &gt;\n          Start Session\n        &lt;\/&lt;strong&gt;button&lt;\/strong&gt;&gt;\n        &lt;&lt;strong&gt;button&lt;\/strong&gt;\n          className=<span class=\"hljs-string\">\"rounded bg-red-600 px-4 py-2 text-white disabled:opacity-50\"<\/span>\n          disabled={!isConnected}\n          onClick={() =&gt; endSession()}\n        &gt;\n          End Session\n        &lt;\/&lt;strong&gt;button&lt;\/strong&gt;&gt;\n        &lt;&lt;strong&gt;button&lt;\/strong&gt;\n          className=<span class=\"hljs-string\">\"rounded border px-4 py-2 disabled:opacity-50\"<\/span>\n          disabled={!isConnected}\n          onClick={toggleCamera}\n        &gt;\n          {isCameraOn ? <span class=\"hljs-string\">'Camera On'<\/span> : <span class=\"hljs-string\">'Camera Off'<\/span>}\n        &lt;\/&lt;strong&gt;button&lt;\/strong&gt;&gt;\n        &lt;&lt;strong&gt;button&lt;\/strong&gt;\n          className=<span class=\"hljs-string\">\"rounded border px-4 py-2 disabled:opacity-50\"<\/span>\n          disabled={!isConnected}\n          onClick={toggleMic}\n        &gt;\n          {isMicOn ? <span class=\"hljs-string\">'Mic On'<\/span> : <span class=\"hljs-string\">'Mic Off'<\/span>}\n        &lt;\/&lt;strong&gt;button&lt;\/strong&gt;&gt;\n      &lt;\/&lt;strong&gt;section&lt;\/strong&gt;&gt;\n \n      &lt;&lt;strong&gt;OrgaVideo&lt;\/strong&gt; stream={userVideoStream} className=<span class=\"hljs-string\">\"h-64 w-full rounded bg-black\"<\/span> \/&gt;\n      &lt;&lt;strong&gt;OrgaAudio&lt;\/strong&gt; stream={aiAudioStream} \/&gt;\n    &lt;\/&lt;strong&gt;main&lt;\/strong&gt;&gt;\n  );\n}\n&lt;\/code&gt;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><strong>React Native (Expo)<\/strong><\/h3>\n\n\n\n<p>\u00bfVas a desarrollar para m\u00f3vil? Mismo API, rendimiento nativo.<\/p>\n\n\n\n<p>La configuraci\u00f3n es casi id\u00e9ntica al ejemplo de React, con solo algunas diferencias en c\u00f3mo se importa e inicializa el SDK.<\/p>\n\n\n\n<p>Instala las dependencias requeridas:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code><strong>npm<\/strong> <strong>install<\/strong> <strong>@orga-ai<\/strong>\/react-native react-native-webrtc react-native-incall-manager<\/code><small>Code language: CSS (css)<\/small><\/pre>\n\n\n\n<p>Con Expo, aseg\u00farate de actualizar el app.json para solicitar acceso a la c\u00e1mara y al micr\u00f3fono.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">&lt;code&gt;{\n  <span class=\"hljs-string\">\"expo\"<\/span>: {\n    <span class=\"hljs-string\">\"ios\"<\/span>: {\n      <span class=\"hljs-string\">\"infoPlist\"<\/span>: {\n        <span class=\"hljs-string\">\"NSCameraUsageDescription\"<\/span>: <span class=\"hljs-string\">\"Allow $(PRODUCT_NAME) to access your camera\"<\/span>,\n        <span class=\"hljs-string\">\"NSMicrophoneUsageDescription\"<\/span>: <span class=\"hljs-string\">\"Allow $(PRODUCT_NAME) to access your microphone\"<\/span>\n      }\n    },\n    <span class=\"hljs-string\">\"android\"<\/span>: {\n      <span class=\"hljs-string\">\"permissions\"<\/span>: &#91;\n        <span class=\"hljs-string\">\"android.permission.CAMERA\"<\/span>,\n        <span class=\"hljs-string\">\"android.permission.RECORD_AUDIO\"<\/span>\n      ]\n    }\n  }\n}\n&lt;<span class=\"hljs-regexp\">\/code&gt;&lt;small&gt;Code language: JSON \/<\/span> <span class=\"hljs-built_in\">JSON<\/span> <span class=\"hljs-keyword\">with<\/span> Comments (json)&lt;<span class=\"hljs-regexp\">\/small&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Al configurar el provider, aqu\u00ed es donde le indicas al SDK del cliente qu\u00e9 endpoint del backend debe llamar. Ese endpoint devuelve el token ef\u00edmero y los servidores ICE, que el SDK utiliza para establecer una conexi\u00f3n segura con Orga, sin exponer nunca tu clave API.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">&lt;code&gt;&lt;strong&gt;import&lt;\/strong&gt; { Stack } &lt;strong&gt;from&lt;\/strong&gt; <span class=\"hljs-string\">'expo-router'<\/span>;\n&lt;strong&gt;import&lt;\/strong&gt; { OrgaAI, OrgaAIProvider } &lt;strong&gt;from&lt;\/strong&gt; <span class=\"hljs-string\">'@orga-ai\/react-native'<\/span>;\n \nOrgaAI.init({\n  logLevel: <span class=\"hljs-string\">'debug'<\/span>,\n  model: <span class=\"hljs-string\">'orga-1-beta'<\/span>,\n  voice: <span class=\"hljs-string\">'alloy'<\/span>,\n  fetchSessionConfig: &lt;strong&gt;async&lt;\/strong&gt; () =&gt; {\n    &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; response = &lt;strong&gt;await&lt;\/strong&gt; fetch(<span class=\"hljs-string\">'http:\/\/localhost:5000\/api\/orga-client-secrets'<\/span>);\n    &lt;strong&gt;<span class=\"hljs-keyword\">if<\/span>&lt;\/strong&gt; (!response.ok) &lt;strong&gt;<span class=\"hljs-keyword\">throw<\/span>&lt;\/strong&gt; &lt;strong&gt;<span class=\"hljs-keyword\">new<\/span>&lt;\/strong&gt; Error(<span class=\"hljs-string\">'Failed to fetch session config'<\/span>);\n    &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; { ephemeralToken, iceServers } = &lt;strong&gt;await&lt;\/strong&gt; response.json();\n    &lt;strong&gt;<span class=\"hljs-keyword\">return<\/span>&lt;\/strong&gt; { ephemeralToken, iceServers };\n  },\n});\n \n&lt;strong&gt;export&lt;\/strong&gt; &lt;strong&gt;<span class=\"hljs-keyword\">default<\/span>&lt;\/strong&gt; &lt;strong&gt;<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt; &lt;<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-title\">RootLayout<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-params\">()<\/span> <\/span>{\n  &lt;strong&gt;<span class=\"hljs-keyword\">return<\/span>&lt;\/strong&gt; (\n    &lt;&lt;strong&gt;OrgaAIProvider&lt;\/strong&gt;&gt;\n      &lt;&lt;strong&gt;Stack&lt;\/strong&gt; \/&gt;\n    &lt;\/&lt;strong&gt;OrgaAIProvider&lt;\/strong&gt;&gt;\n  );\n}\n&lt;\/code&gt;&lt;small&gt;Code language: JavaScript (javascript)&lt;\/small&gt;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Ahora est\u00e1s listo para crear tu archivo principal e importar el hook <strong>useOrgaAI<\/strong>. Este te proporciona todo lo que necesitas: <strong>startSession(),<\/strong> <strong>endSession() y<\/strong> el estado en tiempo real, como connectionState.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">&lt;code&gt;&lt;strong&gt;import&lt;\/strong&gt; { StyleSheet, View } &lt;strong&gt;from&lt;\/strong&gt; <span class=\"hljs-string\">'react-native'<\/span>;\n&lt;strong&gt;import&lt;\/strong&gt; {\n  OrgaAICameraView,\n  OrgaAIControls,\n  useOrgaAI,\n} &lt;strong&gt;from&lt;\/strong&gt; <span class=\"hljs-string\">'@orga-ai\/react-native'<\/span>;\n \n&lt;strong&gt;export&lt;\/strong&gt; &lt;strong&gt;<span class=\"hljs-keyword\">default<\/span>&lt;\/strong&gt; &lt;strong&gt;<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt; &lt;<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-title\">HomeScreen<\/span>&lt;\/<span class=\"hljs-title\">strong<\/span>&gt;<span class=\"hljs-params\">()<\/span> <\/span>{\n  &lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; {\n    connectionState,\n    isCameraOn,\n    isMicOn,\n    userVideoStream,\n    startSession,\n    endSession,\n    toggleCamera,\n    toggleMic,\n    flipCamera,\n  } = useOrgaAI();\n \n  &lt;strong&gt;<span class=\"hljs-keyword\">return<\/span>&lt;\/strong&gt; (\n    &lt;&lt;strong&gt;View&lt;\/strong&gt; style={styles.container}&gt;\n      &lt;&lt;strong&gt;OrgaAICameraView&lt;\/strong&gt;\n        streamURL={userVideoStream?.toURL()}\n        containerStyle={styles.cameraContainer}\n        style={{ width: <span class=\"hljs-string\">'100%'<\/span>, height: <span class=\"hljs-string\">'100%'<\/span> }}\n      &gt;\n        &lt;&lt;strong&gt;OrgaAIControls&lt;\/strong&gt;\n          connectionState={connectionState}\n          isCameraOn={isCameraOn}\n          isMicOn={isMicOn}\n          onStartSession={startSession}\n          onEndSession={endSession}\n          onToggleCamera={toggleCamera}\n          onToggleMic={toggleMic}\n          onFlipCamera={flipCamera}\n        \/&gt;\n      &lt;\/&lt;strong&gt;OrgaAICameraView&lt;\/strong&gt;&gt;\n    &lt;\/&lt;strong&gt;View&lt;\/strong&gt;&gt;\n  );\n}\n \n&lt;strong&gt;<span class=\"hljs-keyword\">const<\/span>&lt;\/strong&gt; styles = StyleSheet.create({\n  container: { flex: <span class=\"hljs-number\">1<\/span>, backgroundColor: <span class=\"hljs-string\">'#0f172a'<\/span> },\n  cameraContainer: { width: <span class=\"hljs-string\">'100%'<\/span>, height: <span class=\"hljs-string\">'100%'<\/span> },\n});\n&lt;\/code&gt;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>A diferencia de React para web, desarrollar con React Native y Expo introduce algunos detalles espec\u00edficos de m\u00f3viles. WebRTC y el audio requieren acceso nativo a la c\u00e1mara y al micr\u00f3fono del dispositivo, por lo que tendr\u00e1s que configurar los permisos en tu <code>app.json<\/code>.<\/p>\n\n\n\n<p><strong>Nota:<\/strong> Debido a que Orga depende de m\u00f3dulos nativos, el SDK no funcionar\u00e1 dentro de Expo Go. Necesitar\u00e1s usar un cliente de desarrollo (<em>dev client<\/em>).<\/p>\n\n\n\n<p>Al desarrollar localmente, ten en cuenta que tu endpoint del backend debe ser accesible desde tu dispositivo m\u00f3vil. Usa la IP de tu red local (por ejemplo, <code>http:\/\/192.168.x.x:5000<\/code>) o una herramienta de t\u00fanel como ngrok al hacer pruebas.<\/p>\n\n\n\n<p>Para gu\u00edas de configuraci\u00f3n m\u00e1s detalladas, pasos de soluci\u00f3n de problemas y ejemplos completos para React, React Native y Node, consulta nuestra documentaci\u00f3n completa. Encontrar\u00e1s todo lo necesario para pasar de la configuraci\u00f3n inicial a una aplicaci\u00f3n lista para producci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-que-puedes-construir\"><strong>\u00bfQu\u00e9 puedes construir?<\/strong><\/h2>\n\n\n\n<p>Orga no suena a robot. La voz es natural. La cadencia se siente humana. Los usuarios olvidan que est\u00e1n hablando con una IA, por lo que se expresan libremente y conf\u00edan en las respuestas. As\u00ed es como funciona:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Soporte al cliente.<\/strong> Un usuario muestra su router. La IA detecta una luz roja en el puerto 3 y dice: \u201cEse puerto tiene un fallo de hardware. Prueba con otro cable.\u201d Nada de \u201cdescribe tu problema\u201d. La IA simplemente lo ve.<\/li>\n\n\n\n<li><strong>Accesibilidad.<\/strong> Un usuario con discapacidad visual sostiene su tel\u00e9fono en una cafeter\u00eda. \u201c\u00bfQu\u00e9 hay en el men\u00fa?\u201d La IA lee la pizarra en voz alta. M\u00e1s tarde: \u201c\u00bfEst\u00e1 lista mi caf\u00e9?\u201d Detecta la taza con su nombre en el mostrador.<\/li>\n\n\n\n<li><strong>Servicio de campo.<\/strong> Un t\u00e9cnico apunta su tel\u00e9fono a un panel de control desconocido. \u201c\u00bfD\u00f3nde est\u00e1 el interruptor de reinicio?\u201d La IA lo encuentra detr\u00e1s de una peque\u00f1a cubierta a la izquierda y lo gu\u00eda paso a paso, sin necesidad de usar las manos.<\/li>\n<\/ol>\n\n\n\n<p>Si tus usuarios necesitan mostrar algo y hablar sobre ello, Orga fue creado para eso.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-hazlo-tuyo-con-un-system-prompt\"><strong>Hazlo tuyo con un System Prompt<\/strong><\/h2>\n\n\n\n<p>Cada agente de Orga comienza con un <em>system prompt<\/em>. Es simplemente un texto que indica a la IA c\u00f3mo comportarse. \u00bfQuieres un representante de soporte amable? \u00bfUn verificador de seguridad estricto? \u00bfUn tutor paciente?<\/p>\n\n\n\n<p>Solo escr\u00edbelo.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Eres un t\u00e9cnico de HomeHelp.<br>Habla con calma. Cuando los usuarios muestren un dispositivo averiado, identifica primero el modelo y luego gu\u00edalos en la reparaci\u00f3n.<br>Si ves cables expuestos o da\u00f1os por agua, ind\u00edcales que llamen a un profesional.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-empieza-a-construir-hoy\"><strong>Empieza a construir hoy<\/strong><\/h2>\n\n\n\n<p>Crea una cuenta gratuita en <a href=\"https:\/\/platform.orga-ai.com\">platform.orga-ai.com<\/a> para construir y probar un prototipo completo.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Reg\u00edstrate en <a href=\"https:\/\/platform.orga-ai.com\">platform.orga-ai.com<\/a><\/li>\n\n\n\n<li>Obt\u00e9n tu clave API desde el panel de control<\/li>\n\n\n\n<li>Ejecuta el comando inicial para tu framework<\/li>\n\n\n\n<li>Consulta la documentaci\u00f3n en <a href=\"https:\/\/docs.orga-ai.com\">docs.orga-ai.com<\/a><\/li>\n<\/ul>\n\n\n\n<p>Ya has pasado suficiente tiempo conectando servicios. Ahora construye el producto.<\/p>\n\n\n\n<p><strong>\u00bfQu\u00e9 vas a crear?<\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Entonces, quieres crear una IA que observe un video en tiempo real, escuche a los usuarios y responda con voz natural. Suena genial, \u00bfverdad? Ahora intenta construirlo. Vas a necesitar una API de reconocimiento de voz (speech-to-text), un modelo de visi\u00f3n, un modelo de lenguaje, un servicio de s\u00edntesis de voz (text-to-speech), WebRTC para transmisi\u00f3n&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/\">Read more<\/a><\/p>\n","protected":false},"author":177,"featured_media":34839,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10598],"tags":[10664],"collections":[13012],"class_list":{"0":"post-34813","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-inteligencia-artificial","8":"tag-ia","9":"collections-top-of-the-week-es","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Crea aplicaciones de IA que ven, escuchen y respondan \u2014 \u00a1en menos de 30 minutos! - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Entonces, quieres crear una IA que observe un video en tiempo real, escuche a los usuarios y responda con voz natural. Suena genial, \u00bfverdad? Ahora intenta construirla.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crea aplicaciones de IA que ven, escuchen y respondan \u2014 \u00a1en menos de 30 minutos!\" \/>\n<meta property=\"og:description\" content=\"Entonces, quieres crear una IA que observe un video en tiempo real, escuche a los usuarios y responda con voz natural. Suena genial, \u00bfverdad? Ahora intenta construirla.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-10T13:51:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-10T15:27:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Natalia de Pablo Garcia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Natalia de Pablo Garcia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/\"},\"author\":{\"name\":\"Natalia de Pablo Garcia\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/2450f8e4083152e4feaea1ada456aeee\"},\"headline\":\"Crea aplicaciones de IA que ven, escuchen y respondan \u2014 \u00a1en menos de 30 minutos!\",\"datePublished\":\"2025-12-10T13:51:21+00:00\",\"dateModified\":\"2025-12-10T15:27:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/\"},\"wordCount\":1283,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png\",\"keywords\":[\"IA\"],\"articleSection\":[\"Inteligencia Artificial\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/\",\"name\":\"Crea aplicaciones de IA que ven, escuchen y respondan \u2014 \u00a1en menos de 30 minutos! - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png\",\"datePublished\":\"2025-12-10T13:51:21+00:00\",\"dateModified\":\"2025-12-10T15:27:50+00:00\",\"description\":\"Entonces, quieres crear una IA que observe un video en tiempo real, escuche a los usuarios y responda con voz natural. Suena genial, \u00bfverdad? Ahora intenta construirla.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inteligencia Artificial\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Crea aplicaciones de IA que ven, escuchen y respondan \u2014 \u00a1en menos de 30 minutos!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/2450f8e4083152e4feaea1ada456aeee\",\"name\":\"Natalia de Pablo Garcia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/Untitled-design-100x100.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/Untitled-design-100x100.jpg\",\"caption\":\"Natalia de Pablo Garcia\"},\"sameAs\":[\"www.linkedin.com\/in\/nataliadepablo\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/natalia-de-pablo-garcia\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Crea aplicaciones de IA que ven, escuchen y respondan \u2014 \u00a1en menos de 30 minutos! - Codemotion Magazine","description":"Entonces, quieres crear una IA que observe un video en tiempo real, escuche a los usuarios y responda con voz natural. Suena genial, \u00bfverdad? Ahora intenta construirla.","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:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/","og_locale":"en_US","og_type":"article","og_title":"Crea aplicaciones de IA que ven, escuchen y respondan \u2014 \u00a1en menos de 30 minutos!","og_description":"Entonces, quieres crear una IA que observe un video en tiempo real, escuche a los usuarios y responda con voz natural. Suena genial, \u00bfverdad? Ahora intenta construirla.","og_url":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2025-12-10T13:51:21+00:00","article_modified_time":"2025-12-10T15:27:50+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png","type":"image\/png"}],"author":"Natalia de Pablo Garcia","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Natalia de Pablo Garcia","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/"},"author":{"name":"Natalia de Pablo Garcia","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/2450f8e4083152e4feaea1ada456aeee"},"headline":"Crea aplicaciones de IA que ven, escuchen y respondan \u2014 \u00a1en menos de 30 minutos!","datePublished":"2025-12-10T13:51:21+00:00","dateModified":"2025-12-10T15:27:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/"},"wordCount":1283,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png","keywords":["IA"],"articleSection":["Inteligencia Artificial"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/","url":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/","name":"Crea aplicaciones de IA que ven, escuchen y respondan \u2014 \u00a1en menos de 30 minutos! - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png","datePublished":"2025-12-10T13:51:21+00:00","dateModified":"2025-12-10T15:27:50+00:00","description":"Entonces, quieres crear una IA que observe un video en tiempo real, escuche a los usuarios y responda con voz natural. Suena genial, \u00bfverdad? Ahora intenta construirla.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/crea-aplicaciones-de-ia-que-vean-escuchen-y-respondan\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Inteligencia Artificial","item":"https:\/\/www.codemotion.com\/magazine\/es\/inteligencia-artificial\/"},{"@type":"ListItem","position":3,"name":"Crea aplicaciones de IA que ven, escuchen y respondan \u2014 \u00a1en menos de 30 minutos!"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/2450f8e4083152e4feaea1ada456aeee","name":"Natalia de Pablo Garcia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/Untitled-design-100x100.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/Untitled-design-100x100.jpg","caption":"Natalia de Pablo Garcia"},"sameAs":["www.linkedin.com\/in\/nataliadepablo"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/natalia-de-pablo-garcia\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-600x600.png","author_info":{"display_name":"Natalia de Pablo Garcia","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/natalia-de-pablo-garcia\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png",1920,1080,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-300x169.png",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-768x432.png",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-1536x864.png",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080.png",1920,1080,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-100x100.png",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/12\/orga_image_1920x1080-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Natalia de Pablo Garcia","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/natalia-de-pablo-garcia\/"},"uagb_comment_info":0,"uagb_excerpt":"Entonces, quieres crear una IA que observe un video en tiempo real, escuche a los usuarios y responda con voz natural. Suena genial, \u00bfverdad? Ahora intenta construirlo. Vas a necesitar una API de reconocimiento de voz (speech-to-text), un modelo de visi\u00f3n, un modelo de lenguaje, un servicio de s\u00edntesis de voz (text-to-speech), WebRTC para transmisi\u00f3n&#8230;&hellip;","lang":"es","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/34813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/177"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=34813"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/34813\/revisions"}],"predecessor-version":[{"id":34841,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/34813\/revisions\/34841"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/34839"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=34813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=34813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=34813"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=34813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}