Consultation Recorder

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

Propriedade	Tipo	Descrição
`apiKey`	string	Chave da API necessária para realizar requisições
`professional`	string	Identificador único do profissional que utilizará o componente

Propriedades Opcionais

Propriedade	Tipo	Descrição
`specialty`	string	Define a especialidade médica para o registro
`metadata`	object	Dados adicionais para recuperação via webhook
`telemedicine`	boolean	Ativa funcionalidade de telemedicina
`videoElement`	HTMLVideoElement	Referência para um elemento de vídeo HTML personalizado que será usado para captura durante a consulta de telemedicina
`hideTutorial`	boolean	Desativa o modal de tutorial da telemedicina
`maxRecordingTime`	number	Tempo máximo de gravação em segundos
`warningRecordingTime`	number	Tempo em segundos antes do limite para aviso
`reportSchema`	object	Esquema customizado do relatório, conforme especificação da API. Permite definir instruções, schema e exemplos para o relatório gerado.
`skipConsultationType`	boolean	Pula 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.5.0 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
/>

Enviando dados para prescrição médica

O componente pode ser configurado para enviar dados para prescrição médica utilizando a propriedade prescription-data. Isso permite que você envie dados adicionais para que a prescrição médica seja gerada com base nos dados enviados.

A funcionalidade de envio de dados para prescrição médica (prescription-data) está disponível para teste a partir da versão 2.5.0 do componente.

Mevo

Para a plataforma MEVO, você deve enviar os seguintes dados:

provider: “MEVO”
externalReference: Identificador único na plataforma MEVO

<daai-consultation-recorder
  apikey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  prescription-data='{"provider": "MEVO", "externalReference": "IDENTIFICADOR_UNICO"}'
/>

Memed

A funcionalidade de envio de dados para prescrição médica para a plataforma Memed (prescription-data) está disponível para teste a partir da versão 2.6.0-rc.0 do componente.

Para a plataforma Memed, você deve enviar os seguintes dados:

provider: “MEMED”
token: Token de autenticação da plataforma Memed para o profissional
patient: Que é um objeto com os seguintes campos:
- externalId: Identificador único do paciente na plataforma Memed
- name: Nome do paciente
- email: Email do paciente
- phone: Telefone do paciente
- document: CPF do paciente (somente números - opcional)

<daai-consultation-recorder
  apikey="SUA_API_KEY"
  professional="ID_DO_PROFISSIONAL"
  prescription-data='{"provider": "MEMED", "token": "TOKEN_DE_AUTENTICACAO", "patient": {"externalId": "IDENTIFICADOR_UNICO", "name": "NOME_DO_PACIENTE", "email": "EMAIL_DO_PACIENTE", "phone": "TELEFONE_DO_PACIENTE", "document": "CPF_DO_PACIENTE"}}'
/>

Ao finalizar a gravação, o componente irá enviar os dados para a prescrição médica da o sdk de prescrição médica da Memed, que irá gerar a prescrição médica com base nos dados resultantes da gravação.

Primeiros Passos

Referência da API

Componentes Web

Instalação

Via NPM

Via CDN

Uso Básico

Propriedades

Propriedades Obrigatórias

Propriedades Opcionais

Integração com Vídeo para Telemedicina

Como Funciona

Implementação

Exemplo Prático com React

Requisitos Técnicas

Eventos

Especialidades Disponíveis

Customização

Integração com Frameworks

React

Vue

Segurança

Limitações de Tempo

Esquema customizado do relatório

Desabilitando a seleção de tipo de consulta

Enviando dados para prescrição médica

Mevo

Memed

​Instalação

​Via NPM

​Via CDN

​Uso Básico

​Propriedades

​Propriedades Obrigatórias

​Propriedades Opcionais

​Integração com Vídeo para Telemedicina

​Como Funciona

​Implementação

​Exemplo Prático com React

​Requisitos Técnicas

​Eventos

​Especialidades Disponíveis

​Customização

​Integração com Frameworks

​React

​Vue

​Segurança

​Limitações de Tempo

​Esquema customizado do relatório

​Desabilitando a seleção de tipo de consulta

​Enviando dados para prescrição médica

​Mevo

​Memed

Instalação

Via NPM

Via CDN

Uso Básico

Propriedades

Propriedades Obrigatórias

Propriedades Opcionais

Integração com Vídeo para Telemedicina

Como Funciona

Implementação

Exemplo Prático com React

Requisitos Técnicas

Eventos

Especialidades Disponíveis

Customização

Integração com Frameworks

React

Vue

Segurança

Limitações de Tempo

Esquema customizado do relatório

Desabilitando a seleção de tipo de consulta

Enviando dados para prescrição médica

Mevo

Memed