Saltar al contenido principal

​
Instalación

Para instalar el componente en tu proyecto:

​
Vía NPM

npm i @doctorassistant/daai-component

​
Vía CDN

Alternativamente, puedes incluir el componente directamente vía CDN: 
<script
  src="https://cdn.jsdelivr.net/npm/@doctorassistant/daai-component@latest/dist/web-components/web-components.esm.js"
  type="module"
></script>

​
Uso Básico

Después de la instalación, importa y utiliza el componente: 
import '@doctorassistant/daai-component';

<daai-consultation-recorder
  apiKey="TU_API_KEY"
  professional="ID_DEL_PROFESIONAL"
/>

​
Propiedades

​
Propiedades Obligatorias

PropiedadTipoDescripción
apiKeystringClave de la API necesaria para realizar solicitudes
professionalstringIdentificador único del profesional que utilizará el componente

​
Propiedades Opcionales

PropiedadTipoDescripción
specialtystringDefine la especialidad médica para el registro
metadataobjectDatos adicionales para recuperación vía webhook
telemedicinebooleanActiva funcionalidad de telemedicina
videoElementHTMLVideoElementReferencia a un elemento de video HTML personalizado que será usado para captura durante la consulta de telemedicina
hideTutorialbooleanDesactiva el modal de tutorial de la telemedicina
maxRecordingTimenumberTiempo máximo de grabación en segundos
warningRecordingTimenumberTiempo en segundos antes del límite para aviso
reportSchemaobjectEsquema personalizado del reporte, conforme especificación de la API. Permite definir instrucciones, schema y ejemplos para el reporte generado.
skipConsultationTypebooleanPula la selección de tipo de consulta, teniendo en cuenta las propiedades telemedicine y videoElement.

​
Integración con Video para Telemedicina

La propiedad videoElement permite que integres el componente con un elemento de video HTML personalizado para consultas de telemedicina. Esta funcionalidad es especialmente útil cuando ya tienes una estructura de videollamada implementada y deseas usar el audio de esa llamada como fuente para la grabación y transcripción.

​
Cómo Funciona

Cuando proporcionas un videoElement, el componente utilizará el stream de audio de este elemento de video como fuente principal junto con el micrófono del dispositivo del profesional.

​
Implementación

<body>
  // Elemento de video que será pasado al componente
  <video id="consultation-video" controls style="width: 100%; max-width: 600px; margin-bottom: 20px;">
    <source src="./assets/test.mp4" type="video/mp4">
    <p>Tu navegador no soporta videos HTML5.</p>
  </video>

  <daai-consultation-recorder
    apikey="tu-api-key" 
    professional="12345" 
    telemedicine="true">
  </daai-consultation-recorder>

  <script>
    // Espera la carga del DOM
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Pasa el elemento de video al componente
      recorder.videoElement = videoElement;
    });
  </script>
</body>

​
Ejemplo Práctico con React

import React, { useRef, useEffect } from 'react';
import '@doctorassistant/daai-component';

function ConsultaTelemedicina() {
  const videoRef = useRef(null);
  const recorderRef = useRef(null);
  
  useEffect(() => {
    // Configurar el stream de video (ejemplo con WebRTC)
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      });
    
    // Configurar el componente de grabación
    if (recorderRef.current && videoRef.current) {
      recorderRef.current.videoElement = videoRef.current;
    }
  }, []);

  return (
    <div>
      <video 
        ref={videoRef} 
        id="videollamada"
        autoPlay 
        muted 
        width="640" 
        height="480"
      />
      
      <daai-consultation-recorder
        ref={recorderRef}
        apiKey="TU_API_KEY"
        professional="ID_DEL_PROFESIONAL"
        telemedicine={true}
      />
    </div>
  );
}

​
Requisitos Técnicos

  • El elemento de video debe tener un stream activo (srcObject definido)
  • La propiedad telemedicine debe estar habilitada (true)
  • El stream debe contener al menos una pista de audio

​
Eventos

El componente emite los siguientes eventos que pueden ser capturados: 
// Inicio de la grabación
onStart = (data) => {
  console.log("Grabación iniciada:", data);
};

// Éxito en la grabación
onSuccess = (data) => {
  console.log("Grabación finalizada con éxito:", data);
};

// Error durante la grabación
onError = (error) => {
  console.log("Error:", error);
};

// Eventos del componente
onEvent = (event) => {
  console.log("Evento:", event);
};

// Aviso de tiempo restante
onWarningRecordingTime = () => {
  console.log("Aviso de tiempo restante");
};

​
Especialidades Disponibles

El componente soporta varias especialidades médicas, siendo ellas:

​
Personalización

El componente puede ser personalizado a través de variables CSS: 
daai-consultation-recorder {
  --recorder-primary-color: #ff0000;
  --recorder-secondary-color: #808080;
  --recorder-success-color: #00ff00;
  --recorder-error-color: #ff0000;
  --recorder-background-color: #ffffff;
  --recorder-border-color: #000000;
  --recorder-text-color: #000000;
  --recorder-button-radius: 4px;
  --recorder-border-radius: 8px;
  --recorder-large-device-height: 52px;
  --recorder-small-device-height: 120px;
  --recorder-font-family: "Arial, sans-serif";
}

​
Integración con Frameworks

​
React

import "@doctorassistant/daai-component";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    const recorder = document.getElementById("recorder");
    
    if (recorder) {
      recorder.onSuccess = (response) => {
        console.log("Éxito:", response);
      };
      
      recorder.onError = (error) => {
        console.log("Error:", error);
      };
    }
  }, []);

  return (
    <daai-consultation-recorder
      id="recorder"
      apiKey="TU_API_KEY"
      professional="ID_DEL_PROFESIONAL"
    />
  );
}

​
Vue

<template>
  <daai-consultation-recorder
    ref="recorder"
    :apiKey="apiKey"
    :professional="professionalId"
  />
</template>

<script>
import { onMounted, ref } from 'vue';
import '@doctorassistant/daai-component';

export default {
  setup() {
    const recorder = ref(null);
    const apiKey = 'TU_API_KEY';
    const professionalId = 'ID_DEL_PROFESIONAL';

    onMounted(() => {
      if (recorder.value) {
        recorder.value.onSuccess = (response) => {
          console.log('Éxito:', response);
        };
      }
    });

    return {
      recorder,
      apiKey,
      professionalId
    };
  }
};
</script>

​
Seguridad

El componente fue desarrollado siguiendo las mejores prácticas de seguridad:
  • Cifrado de extremo a extremo
  • Conformidad con HIPAA
  • Control de acceso
  • Auditoría transparente

​
Limitaciones de Tiempo

Para configurar límites de tiempo de grabación: 
<daai-consultation-recorder
  apiKey="TU_API_KEY"
  professional="ID_DEL_PROFESIONAL"
  maxRecordingTime={300} // 5 minutos
  warningRecordingTime={30} // Aviso 30 segundos antes
/>

​
Esquema personalizado del reporte

La funcionalidad de personalización del reporte (report-schema) está disponible solo a partir de la versión 2.3.1 del componente.
Puedes personalizar el reporte generado por el componente utilizando la propiedad report-schema. Esto permite definir instrucciones, un schema y ejemplos para el reporte, haciendo la generación del contenido más flexible y adaptada a tu necesidad.
Consejo: Es posible probar y validar la configuración del reporte personalizado directamente en el backoffice, en la pestaña de transformación en las configuraciones de la aplicación. Así, puedes experimentar diferentes schemas y ejemplos antes de aplicar en producción.
  • El campo schema debe ser un JSON Schema válido, conforme a la especificación oficial. Esto garantiza que el reporte generado siga la estructura esperada.
  • El campo fewShots debe contener ejemplos que satisfagan el schema definido. De esta forma, los ejemplos sirven como referencia para el llenado correcto del reporte.
Por ejemplo: 
<daai-consultation-recorder
  apikey="TU_API_KEY"
  professional="ID_DEL_PROFESIONAL"
  report-schema='{
    "instructions": "El reporte debe ser escrito en español...",
    "schema": {
      "type": "object",
      "required": ["foo", "bar"],
      "properties": {
        "foo": { "type": "integer" },
        "bar": { "type": "string" }
      },
      "additionalProperties": true
    },
    "fewShots": [
      {"foo":1,"bar":"test"},
      {"foo":2,"bar":"test2"}
    ]
  }'
/>

​
Deshabilitando la selección de tipo de consulta

La funcionalidad de deshabilitación de la selección de tipo de consulta (skipConsultationType) está disponible como una funcionalidad de prueba en la versión 2.5.0 del componente.
Puedes deshabilitar la selección de tipo de consulta utilizando la propiedad skipConsultationType. Esto permite que el componente inicie la grabación automáticamente, sin la necesidad de seleccionar el tipo de consulta.
  • Si la propiedad telemedicine es true, el componente mostrará la caja de selección de pestañas del navegador para seleccionar la fuente de audio.
<daai-consultation-recorder
  apikey="TU_API_KEY"
  professional="ID_DEL_PROFESIONAL"
  telemedicine
  skip-consultation-type
/>
  • Si la propiedad videoElement también es proporcionada, el componente usará el audio de este elemento como fuente principal.
<body>
  // Elemento de video que será pasado al componente
  <video id="consultation-video" controls style="width: 100%; max-width: 600px; margin-bottom: 20px;">
    <source src="./assets/test.mp4" type="video/mp4">
    <p>Your browser does not support HTML5 videos.</p>
  </video>

  <daai-consultation-recorder
    apikey="TU_API_KEY"
    professional="ID_DEL_PROFESIONAL"
    telemedicine
    skip-consultation-type
  />

  <script>
    // Espera la carga del DOM
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Pasa el elemento de video al componente
      recorder.videoElement = videoElement;
    });
  </script>
</body>
  • Si no se proporciona ni telemedicine ni videoElement, el componente usará el audio del dispositivo del profesional como fuente principal.
<daai-consultation-recorder
  apikey="TU_API_KEY"
  professional="ID_DEL_PROFESIONAL"
  skip-consultation-type
/>

​
Enviando datos para prescripción

El componente puede ser configurado para enviar datos para prescripción utilizando la propiedad prescription-data. Esto permite que se envíen datos adicionales para que la prescripción se genere basado en los datos enviados.
La funcionalidad de envío de datos para prescripción (prescription-data) está disponible para prueba a partir de la versión 2.5.0 del componente.

​
Mevo

Para la plataforma MEVO, debe enviar los siguientes datos:
  • provider: “MEVO”
  • externalReference: Identificador único en la plataforma MEVO
<daai-consultation-recorder
  apikey="TU_API_KEY"
  professional="ID_DEL_PROFESIONAL"
  prescription-data='{"provider": "MEVO", "externalReference": "IDENTIFICADOR_UNICO"}'
/>