@intron_health/intron_transcriber_streaming

v1.0.3

Published

a month ago

helper library to run the intron transcription widget.

Downloads

0High
0Medium
0Low

intron_health

Intron Health Transcribe Widget

A versatile and easy-to-use widget for transcribing audio, compatible with various JavaScript environments and frameworks.

Transcribe Widget

Features

Cross-Platform Compatibility: Works seamlessly with Node.js, browsers, and various frameworks like React and Vue.js.
Multiple Module Support: Available in CommonJS, ES Modules, and UMD formats.
Easy Integration: Simple API to initialize and configure the widget.
Customizable UI: Options to customize button text and position.

Installation

Install the package via npm:

npm @intron_health/intron_transcriber_streaming

Usage

General Usage

Import the loadIntronTranscribeWidget function and initialize the widget with your configuration options. Import the css files to style the component too

import { loadIntronTranscribeWidget } from "intron_transcriber_streaming";

loadIntronTranscribeWidget(
  parentElement=document.getElementById("transcription-widget"),
  apiKey="your-api-key-here",
  userId="id of user"
);

In React

import React, { useEffect } from "react";
import { loadIntronTranscribeWidget } from "intron_transcriber_streaming";

function App() {
  useEffect(() => {
    const parentElement = document.getElementById("transcription-widget");
    loadIntronTranscribeWidget(
      parentElement,
      apiKey="your-api-key-here",
      userId="id of user"
    );
  }, []);

  return <div id="transcription-widget"></div>;
}

export default App;

In Vue.js

<template>
  <div ref="transcriptionWidget"></div>
</template>

<script>
import { loadIntronTranscribeWidget } from "intron_transcriber_streaming";

export default {
  mounted() {
    loadIntronTranscribeWidget(
      parentElement=this.$refs.transcriptionWidget,
      apiKey="your-api-key-here",
      userId="id of user"
    );
  },
};
</script>

In Plain HTML/JavaScript

Include the UMD build via a <script> tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Transcribe Widget Test</title>
    <!-- Replace with the correct path to your UMD build -->
    <script src="node_modules/intron_transcriber_streaming/dist/intron_transcriber_widget.umd.js"></script>
  </head>
  <body>
    <div id="transcription-widget"></div>
    <script>
      const { loadIntronTranscribeWidget } = IntronTranscriberWidget;
      window.onload = function () {
        loadIntronTranscribeWidget(
          parentElement=document.getElementById("transcription-widget"),
          apiKey="your-api-key-here",
          userId="id of user"
        );
      };
    </script>
  </body>
</html>

API

`loadIntronTranscribeWidget(options)`

Initializes the transcribe widget with the specified options.

Parameters

parentElement HTMLElement: Required. The DOM element where the widget will be rendered.
apiKey string: Required. Your API key for authentication.
userId string: Required. id/email of the registered user.
options Object: Configuration options.
- serviceUrl string: Optional. url to transcription service.

Example

loadIntronTranscribeWidget(
  parentElement=document.getElementById("transcription-widget"),
  apiKey="your-api-key-here",
  userId="id of user"
);

License

This project is licensed under the MIT License.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme