Consultation Recorder

Installation

To install the component in your project:

Via NPM

npm i @doctorassistant/daai-component

Via CDN

Alternatively, you can include the component directly via CDN:

<script
  src="https://cdn.jsdelivr.net/npm/@doctorassistant/daai-component@latest/dist/web-components/web-components.esm.js"
  type="module"
></script>

Basic Usage

After installation, import and use the component:

import '@doctorassistant/daai-component';

<daai-consultation-recorder
  apiKey="YOUR_API_KEY"
  professional="PROFESSIONAL_ID"
/>

Properties

Required Properties

Property	Type	Description
`apikey`	string	API key required to make requests
`professional`	string	Unique identifier of the professional who will use the component

Optional Properties

Property	Type	Description
`specialty`	string	Defines the medical specialty for the record
`metadata`	object	Additional data for webhook retrieval
`telemedicine`	boolean	Enables telemedicine functionality
`videoElement`	HTMLVideoElement	Reference to a custom HTML video element that will be used for capture during telemedicine consultation
`hideTutorial`	boolean	Disables the telemedicine tutorial modal
`maxRecordingTime`	number	Maximum recording time in seconds
`warningRecordingTime`	number	Time in seconds before the limit for warning
`reportSchema`	object	Custom report schema, according to API specification. Allows defining instructions, schema and examples for the generated report.
`skipConsultationType`	boolean	Skips the consultation type selection, taking into account the `telemedicine` and `videoElement` properties.

Video Integration for Telemedicine

The videoElement property allows you to integrate the component with a custom HTML video element for telemedicine consultations. This functionality is especially useful when you already have an implemented video call structure and want to use the audio from that call as a source for recording and transcription.

How It Works

When you provide a videoElement, the component will use the audio stream from this video element as the primary source along with the professional’s device microphone.

Implementation

<body>
  // Video element that will be passed to the component
  <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="your-api-key" 
    professional="12345" 
    telemedicine="true">
  </daai-consultation-recorder>

  <script>
    // Wait for DOM loading
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Pass the video element to the component
      recorder.videoElement = videoElement;
    });
  </script>
</body>

Practical Example with React

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

function TelemedicineConsultation() {
  const videoRef = useRef(null);
  const recorderRef = useRef(null);
  
  useEffect(() => {
    // Configure video stream (example with WebRTC)
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      .then(stream => {
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      });
    
    // Configure recording component
    if (recorderRef.current && videoRef.current) {
      recorderRef.current.videoElement = videoRef.current;
    }
  }, []);

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

Technical Requirements

The video element must have an active stream (srcObject defined)
The telemedicine property must be enabled (true)
The stream must contain at least one audio track

Events

The component emits the following events that can be captured:

// Start of recording
onStart = (data) => {
  console.log("Recording started:", data);
};

// Recording success
onSuccess = (data) => {
  console.log("Recording completed successfully:", data);
};

// Error during recording
onError = (error) => {
  console.log("Error:", error);
};

// Component events
onEvent = (event) => {
  console.log("Event:", event);
};

// Remaining time warning
onWarningRecordingTime = () => {
  console.log("Remaining time warning");
};

Available Specialties

The component supports various medical specialties, which are:

Customization

The component can be customized through CSS variables:

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";
}

Framework Integration

React

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

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

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

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 = 'YOUR_API_KEY';
    const professionalId = 'PROFESSIONAL_ID';

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

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

Security

The component was developed following security best practices:

End-to-end encryption
HIPAA compliance
Access control
Transparent auditing

Time Limitations

To configure recording time limits:

<daai-consultation-recorder
  apiKey="YOUR_API_KEY"
  professional="PROFESSIONAL_ID"
  maxRecordingTime={300} // 5 minutes
  warningRecordingTime={30} // Warning 30 seconds before
/>

Custom report schema

The report customization functionality (report-schema) is only available from component version 2.3.1 onwards.

You can customize the report generated by the component using the report-schema property. This allows you to define instructions, a schema and examples for the report, making the content generation more flexible and adapted to your needs.

Tip: You can test and validate the custom report configuration directly in the backoffice, in the transformation tab in the application settings. This way, you can experiment with different schemas and examples before applying them in production.

The schema field must be a valid JSON Schema, according to the official specification. This ensures that the generated report follows the expected structure.
The fewShots field must contain examples that satisfy the defined schema. This way, the examples serve as a reference for the correct filling of the report.

For example:

<daai-consultation-recorder
  apikey="YOUR_API_KEY"
  professional="PROFESSIONAL_ID"
  report-schema='{
    "instructions": "The report should be written in Brazilian Portuguese...",
    "schema": {
      "type": "object",
      "required": ["foo", "bar"],
      "properties": {
        "foo": { "type": "integer" },
        "bar": { "type": "string" }
      },
      "additionalProperties": true
    },
    "fewShots": [
      {"foo":1,"bar":"test"},
      {"foo":2,"bar":"test2"}
    ]
  }'
/>

Disabling consultation type selection

The consultation type selection disabling functionality (skipConsultationType) is available as a test feature in component version 2.5.0.

You can disable the consultation type selection using the skipConsultationType property. This allows the component to start recording automatically, without the need to select the consultation type.

If the telemedicine property is true, the component will display the browser tab selection box for selecting the audio source.

<daai-consultation-recorder
  apikey="YOUR_API_KEY"
  professional="PROFESSIONAL_ID"
  telemedicine
  skip-consultation-type
/>

If the videoElement property is also provided, the component will use the audio from this element as the primary source.

<body>
  // Video element that will be passed to the component
  <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="YOUR_API_KEY"
    professional="PROFESSIONAL_ID"
    telemedicine
    skip-consultation-type
  />

  <script>
    // Wait for DOM loading
    document.addEventListener('DOMContentLoaded', function () {
      const recorder = document.querySelector('daai-consultation-recorder');
      const videoElement = document.getElementById('consultation-video');
      // Pass the video element to the component
      recorder.videoElement = videoElement;
    });
  </script>
</body>

If neither telemedicine nor videoElement is provided, the component will use the audio from the professional’s device as the primary source.

<daai-consultation-recorder
  apikey="YOUR_API_KEY"
  professional="PROFESSIONAL_ID"
  skip-consultation-type
/>

Sending data for prescription

The component can be configured to send data for prescription using the prescription-data property. This allows you to send additional data so that the prescription is generated based on the sent data.

The prescription data sending functionality (prescription-data) is available for test from component version 2.5.0.

Mevo

For the MEVO platform, you must send the following data:

provider: “MEVO”
externalReference: Unique identifier in the MEVO platform

<daai-consultation-recorder
  apikey="YOUR_API_KEY"
  professional="PROFESSIONAL_ID"
  prescription-data='{"provider": "MEVO", "externalReference": "UNIQUE_IDENTIFIER"}'
/>

Memed

The prescription data sending functionality for the Memed platform (prescription-data) is available for test from component version 2.6.0-rc.0.

For the Memed platform, you must send the following data:

provider: “MEMED”
token: Authentication token for the Memed platform for the professional
patient: That is an object with the following fields:
- externalId: Unique identifier of the patient in the Memed platform
- name: Name of the patient
- email: Email of the patient
- phone: Phone of the patient
- document: Document of the patient (only numbers - optional)

<daai-consultation-recorder
  apikey="YOUR_API_KEY"
  professional="PROFESSIONAL_ID"
  prescription-data='{"provider": "MEMED", "token": "AUTHENTICATION_TOKEN", "patient": {"externalId": "UNIQUE_IDENTIFIER", "name": "PATIENT_NAME", "email": "PATIENT_EMAIL", "phone": "PATIENT_PHONE", "document": "PATIENT_DOCUMENT"}}'
/>

When the recording is finished, the component will send the data to the prescription medical sdk of Memed, which will generate the prescription medical based on the data resulting from the recording.

Getting Started

API Reference

Web Components

Installation

Via NPM

Via CDN

Basic Usage

Properties

Required Properties

Optional Properties

Video Integration for Telemedicine

How It Works

Implementation

Practical Example with React

Technical Requirements

Events

Available Specialties

Customization

Framework Integration

React

Vue

Security

Time Limitations

Custom report schema

Disabling consultation type selection

Sending data for prescription

Mevo

Memed

​Installation

​Via NPM

​Via CDN

​Basic Usage

​Properties

​Required Properties

​Optional Properties

​Video Integration for Telemedicine

​How It Works

​Implementation

​Practical Example with React

​Technical Requirements

​Events

​Available Specialties

​Customization

​Framework Integration

​React

​Vue

​Security

​Time Limitations

​Custom report schema

​Disabling consultation type selection

​Sending data for prescription

​Mevo

​Memed

Installation

Via NPM

Via CDN

Basic Usage

Properties

Required Properties

Optional Properties

Video Integration for Telemedicine

How It Works

Implementation

Practical Example with React

Technical Requirements

Events

Available Specialties

Customization

Framework Integration

React

Vue

Security

Time Limitations

Custom report schema

Disabling consultation type selection

Sending data for prescription

Mevo

Memed