Consultation Recorder

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

Propiedad	Tipo	Descripción
`apiKey`	string	Clave de la API necesaria para realizar solicitudes
`professional`	string	Identificador único del profesional que utilizará el componente

Propiedades Opcionales

Propiedad	Tipo	Descripción
`specialty`	string	Define la especialidad médica para el registro
`metadata`	object	Datos adicionales para recuperación vía webhook
`telemedicine`	boolean	Activa funcionalidad de telemedicina
`videoElement`	HTMLVideoElement	Referencia a un elemento de video HTML personalizado que será usado para captura durante la consulta de telemedicina
`hideTutorial`	boolean	Desactiva el modal de tutorial de la telemedicina
`maxRecordingTime`	number	Tiempo máximo de grabación en segundos
`warningRecordingTime`	number	Tiempo en segundos antes del límite para aviso
`reportSchema`	object	Esquema personalizado del reporte, conforme especificación de la API. Permite definir instrucciones, schema y ejemplos para el reporte generado.
`skipConsultationType`	boolean	Pula 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"}'
/>

Memed

La funcionalidad de envío de datos para prescripción para la plataforma Memed (prescription-data) está disponible para prueba a partir de la versión 2.6.0-rc.0 del componente.

Para la plataforma Memed, debe enviar los siguientes datos:

provider: “MEMED”
token: Token de autenticación de la plataforma Memed para el profesional
patient: Que es un objeto con los siguientes campos:
- externalId: Identificador único del paciente en la plataforma Memed
- name: Nombre del paciente
- email: Email del paciente
- phone: Teléfono del paciente
- document: Documento del paciente (sólo números - opcional)

<daai-consultation-recorder
  apikey="TU_API_KEY"
  professional="ID_DEL_PROFESIONAL"
  prescription-data='{"provider": "MEMED", "token": "TOKEN_DE_AUTENTICACION", "patient": {"externalId": "IDENTIFICADOR_UNICO", "name": "NOMBRE_DEL_PACIENTE", "email": "EMAIL_DEL_PACIENTE", "phone": "TELEFONO_DEL_PACIENTE", "document": "DOCUMENTO_DEL_PACIENTE"}}'
/>

Al finalizar la grabación, el componente enviará los datos para la prescripción médica de la o sdk de prescripción médica de Memed, que generará la prescripción médica con base en los datos resultantes de la grabación.

Primeros Pasos

Referencia de API

Componentes Web

Instalación

Vía NPM

Vía CDN

Uso Básico

Propiedades

Propiedades Obligatorias

Propiedades Opcionales

Integración con Video para Telemedicina

Cómo Funciona

Implementación

Ejemplo Práctico con React

Requisitos Técnicos

Eventos

Especialidades Disponibles

Personalización

Integración con Frameworks

React

Vue

Seguridad

Limitaciones de Tiempo

Esquema personalizado del reporte

Deshabilitando la selección de tipo de consulta

Enviando datos para prescripción

Mevo

Memed

​Instalación

​Vía NPM

​Vía CDN

​Uso Básico

​Propiedades

​Propiedades Obligatorias

​Propiedades Opcionales

​Integración con Video para Telemedicina

​Cómo Funciona

​Implementación

​Ejemplo Práctico con React

​Requisitos Técnicos

​Eventos

​Especialidades Disponibles

​Personalización

​Integración con Frameworks

​React

​Vue

​Seguridad

​Limitaciones de Tiempo

​Esquema personalizado del reporte

​Deshabilitando la selección de tipo de consulta

​Enviando datos para prescripción

​Mevo

​Memed

Instalación

Vía NPM

Vía CDN

Uso Básico

Propiedades

Propiedades Obligatorias

Propiedades Opcionales

Integración con Video para Telemedicina

Cómo Funciona

Implementación

Ejemplo Práctico con React

Requisitos Técnicos

Eventos

Especialidades Disponibles

Personalización

Integración con Frameworks

React

Vue

Seguridad

Limitaciones de Tiempo

Esquema personalizado del reporte

Deshabilitando la selección de tipo de consulta

Enviando datos para prescripción

Mevo

Memed