Pular para o conteúdo principal

​
Instalação

Para instalar o componente no seu projeto:

​
Via NPM

npm i @doctorassistant/daai-component

​
Via CDN

Alternativamente, você pode incluir o componente diretamente via 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

Após a instalação, importe e utilize o componente: 
import '@doctorassistant/daai-component';

<daai-consultation-recorder
  apiKey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
/>

​
Propriedades

​
Propriedades Obrigatórias

PropriedadeTipoDescrição
apiKeystringChave da API necessária para realizar requisições
professionalstringIdentificador único do profissional que utilizará o componente

​
Propriedades Opcionais

PropriedadeTipoDescrição
specialtystringDefine a especialidade médica para o registro
metadataobjectDados adicionais para recuperação via webhook
telemedicinebooleanAtiva funcionalidade de telemedicina
videoElementHTMLVideoElementReferência para um elemento de vídeo HTML personalizado que será usado para captura durante a consulta de telemedicina
hideTutorialbooleanDesativa o modal de tutorial da telemedicina
maxRecordingTimenumberTempo máximo de gravação em segundos
warningRecordingTimenumberTempo em segundos antes do limite para aviso
reportSchemaobjectEsquema customizado do relatório, conforme especificação da API. Permite definir instruções, schema e exemplos para o relatório gerado.
skipConsultationTypebooleanPula a seleção de tipo de consulta, levando em consideração a propriedade telemedicine e o videoElement.

​
Integração com Vídeo para Telemedicina

A propriedade videoElement permite que você integre o componente com um elemento de vídeo HTML personalizado para consultas de telemedicina. Esta funcionalidade é especialmente útil quando você já possui uma estrutura de videochamada implementada e deseja usar o áudio dessa chamada como fonte para a gravação e transcrição.

​
Como Funciona

Quando você fornece um videoElement, o componente utilizará o stream de áudio deste elemento de vídeo como fonte principal juntamente com o microfone do dispositivo do profissional.

​
Implementação

<body>
  // Elemento de vídeo que será passado para o componente
  <video id="consultation-video" controls style="width: 100%; max-width: 600px; margin-bottom: 20px;">
    <source src="./assets/test.mp4" type="video/mp4">
    <p>Seu navegador não suporta vídeos HTML5.</p>
  </video>

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

  <script>
    // Aguarda o carregamento do DOM
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Passa o elemento de vídeo para o componente
      recorder.videoElement = videoElement;
    });
  </script>
</body>

​
Exemplo Prático com React

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

function ConsultaTelemedicina() {
  const videoRef = useRef(null);
  const recorderRef = useRef(null);
  
  useEffect(() => {
    // Configurar o stream de vídeo (exemplo com WebRTC)
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      });
    
    // Configurar o componente de gravação
    if (recorderRef.current && videoRef.current) {
      recorderRef.current.videoElement = videoRef.current;
    }
  }, []);

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

​
Requisitos Técnicas

  • O elemento de vídeo deve ter um stream ativo (srcObject definido)
  • A propriedade telemedicine deve estar habilitada (true)
  • O stream deve conter pelo menos uma trilha de áudio

​
Eventos

O componente emite os seguintes eventos que podem ser capturados: 
// Início da gravação
onStart = (data) => {
  console.log("Gravação iniciada:", data);
};

// Sucesso na gravação
onSuccess = (data) => {
  console.log("Gravação finalizada com sucesso:", data);
};

// Erro durante a gravação
onError = (error) => {
  console.log("Erro:", error);
};

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

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

​
Especialidades Disponíveis

O componente suporta várias especialidades médicas, sendo elas:

​
Customização

O componente pode ser customizado através de variáveis 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";
}

​
Integração com 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("Sucesso:", response);
      };
      
      recorder.onError = (error) => {
        console.log("Erro:", error);
      };
    }
  }, []);

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

​
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 = 'SUA_API_KEY';
    const professionalId = 'ID_DO_PROFISSIONAL';

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

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

​
Segurança

O componente foi desenvolvido seguindo as melhores práticas de segurança:
  • Criptografia de ponta a ponta
  • Conformidade com HIPAA
  • Controle de acesso
  • Auditoria transparente

​
Limitações de Tempo

Para configurar limites de tempo de gravação: 
<daai-consultation-recorder
  apiKey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  maxRecordingTime={300} // 5 minutos
  warningRecordingTime={30} // Aviso 30 segundos antes
/>

​
Esquema customizado do relatório

A funcionalidade de customização do relatório (report-schema) está disponível apenas a partir da versão 2.3.1 do componente.
Você pode customizar o relatório gerado pelo componente utilizando a propriedade report-schema. Isso permite definir instruções, um schema e exemplos para o relatório, tornando a geração do conteúdo mais flexível e adaptada à sua necessidade.
Dica: É possível testar e validar a configuração do relatório customizado diretamente no backoffice, na aba de transformação nas configurações da aplicação. Assim, você pode experimentar diferentes schemas e exemplos antes de aplicar em produção.
  • O campo schema deve ser um JSON Schema válido, conforme a especificação oficial. Isso garante que o relatório gerado siga a estrutura esperada.
  • O campo fewShots deve conter exemplos que satisfazem o schema definido. Dessa forma, os exemplos servem como referência para o preenchimento correto do relatório.
Por exemplo: 
<daai-consultation-recorder
  apikey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  report-schema='{
    "instructions": "O relatório deve ser escrito em português brasileiro...",
    "schema": {
      "type": "object",
      "required": ["foo", "bar"],
      "properties": {
        "foo": { "type": "integer" },
        "bar": { "type": "string" }
      },
      "additionalProperties": true
    },
    "fewShots": [
      {"foo":1,"bar":"test"},
      {"foo":2,"bar":"test2"}
    ]
  }'
/>

​
Desabilitando a seleção de tipo de consulta

A funcionalidade de desabilitar a seleção de tipo de consulta (skipConsultationType) está disponível em versão de teste na versão 2.4.4-rc.1 do componente.
Você pode desabilitar a seleção de tipo de consulta utilizando a propriedade skipConsultationType. Isso permite que o componente ja inicie a gravação automaticamente, sem a necessidade de selecionar o tipo de consulta.
  • Caso a propriedade telemedicine seja true, o componente irá exibir a caixa de seleção aba do navegador para a seleção da fonte de áudio.
<daai-consultation-recorder
  apikey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  telemedicine
  skip-consultation-type
/>
  • Caso também seja informado um videoElement, o componente irá usar o áudio deste elemento como fonte de áudio diretamente.
<body>
  // Elemento de vídeo que será passado para o componente
  <video id="consultation-video" controls style="width: 100%; max-width: 600px; margin-bottom: 20px;">
    <source src="./assets/test.mp4" type="video/mp4">
    <p>Seu navegador não suporta vídeos HTML5.</p>
  </video>

  <daai-consultation-recorder
    apikey="SUA_API_KEY"
    professional="ID_DO_PROFISSIONAL"
    telemedicine
    skip-consultation-type
  />

  <script>
    // Aguarda o carregamento do DOM
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Passa o elemento de vídeo para o componente
      recorder.videoElement = videoElement;
    });
  </script>
</body>
  • Caso não seja informado nem telemedicine nem videoElement, o componente irá usar o áudio do dispositivo do profissional como fonte de áudio apenas.
<daai-consultation-recorder
  apikey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  skip-consultation-type
/>
⌘I