Skip to main content

​
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

PropertyTypeDescription
apikeystringAPI key required to make requests
professionalstringUnique identifier of the professional who will use the component

​
Optional Properties

PropertyTypeDescription
specialtystringDefines the medical specialty for the record
metadataobjectAdditional data for webhook retrieval
telemedicinebooleanEnables telemedicine functionality
videoElementHTMLVideoElementReference to a custom HTML video element that will be used for capture during telemedicine consultation
hideTutorialbooleanDisables the telemedicine tutorial modal
maxRecordingTimenumberMaximum recording time in seconds
warningRecordingTimenumberTime in seconds before the limit for warning
reportSchemaobjectCustom report schema, according to API specification. Allows defining instructions, schema and examples for the generated report.
skipConsultationTypebooleanSkips 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.4.4-rc.1.
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
/>
⌘I