Quick Start

Introduction

To perform an agile and effortless deployment, check out the Quick Integration Components. These web components integrate the full functionality of the API along with a user interface that enables interaction with the system.

The Invox Dictation SDK offers essential functionalities for user authentication, speech recognition initiation and termination, and configuring the editor to display the results of speech recognition. For detailed information on these functions, please refer to the JavaScript API documentation.

This section will guide you through the development of the essential functionality required to establish a connection with the dictation service, perform dictation, and display the results in a text editor.

Integration Scenarios

Depending on your specific deployment needs, you have the flexibility to use either one or both services for testing and developing your integration. For more information on the available options, please refer to the Integration Scenarios section.

Folder Structure

The folder and file structure for this example is straightforward. Create a root folder named invox-quick-start that includes the following files:

.
|-- invox-quick-start/
    |-- opus/                 <- Opus Audio Library required for Remote Dictation Service
    |-- invox.min.js
    |-- index.html

The crucial aspect is to have the opus/ folder and its content at the same level as the invox.min.js file. Please remember to include this audio library in order to connect to the Remote Dictation Service.
The full code of this example will be located in the index.html file.

Full Code

The following code includes all the necessary components to execute the example:

<!DOCTYPE html>
<html lang="EN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <meta http-equiv='pragma' content='no-cache'>

    <!-- Invox Dictation SDK-->
    <script type="text/javascript" src="invox.min.js" charset="UTF-8"></script>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
    <main class="m-2">
        <button class="btn btn-primary" onclick="DoLogin()">Login</button>
        <button class="btn btn-secondary" onclick="DoLogout()">Logout</button>
        <button class="btn btn-danger" onclick="SwitchDictation()">Switch Dictation</button>
        <textarea id="invox-textarea-1" class="form-control mt-2" placeholder="Recognized text..."></textarea>
    </main>
    <script>
        async function DoLogin() {
            const credentials = {
                user: "provided_username",
                password: "provided_password"
            }

            const connectToLocal = {
                host: "localhost",
                port: "8443",
                useDictationService: false
            }

            const connectToRemote = {
                host: "dev.invoxmedical.com/v2.8.3",
                port: "8443",
                useDictationService: true
            }

            try {
                await INVOX.Login(credentials, connectToLocal);
                INVOX.LogInfo("Local Dictation Service connected successfully.");
            } catch (error) {
                INVOX.LogWarn("Local Dictation Service not found. Trying to connect to Remote Dictation Service...");
                try {
                    await INVOX.Login(credentials, connectToRemote);
                    INVOX.LogInfo("Remote Dictation Service connected successfully.");
                } catch (error) {
                    INVOX.LogError("Remote Dictation Service not found. Make sure that connection parameters are correct.");
                }
            }
        }

        async function DoLogout() {
            try {
                await INVOX.Logout()
                INVOX.LogInfo("Session closed successfully")
            } catch(error) {
                INVOX.LogError(error.message)
            }
        }

        function SwitchDictation() {
            try {
                INVOX.SwitchDictation()
            } catch(error) {
                INVOX.LogError(error.message)
            }
        }

        document.addEventListener(INVOX.eventTypeReport.LOGIN_ERROR, (event) => {
            INVOX.LogError(event.detail)
            alert(event.detail)
        })

        document.addEventListener(INVOX.eventTypeReport.LOGIN_SUCCESS, (event) => {
            INVOX.LogInfo(event.detail)
            try {
                INVOX.SetTextWriter(INVOX.TextAreaTextWriter)
                const textareaElement = document.getElementById("invox-textarea-1")
                INVOX.SetWriterTarget(textareaElement)
            } catch(error) {
                INVOX.LogError(error.message)
            }
        })

        document.addEventListener(INVOX.eventTypeReport.NOT_CUSTOMIZED_COMPONENTS, (event) => {
            INVOX.LogWarn(event.detail)
        })
    </script>
</body>
</html>

Log in

To initiate the login process, you need to pass user credentials and connection data to the Login function.

Please refer to the Essential functions section for a comprehensive list of available methods and functionalities.

HTML

<button class="btn btn-primary" onclick="DoLogin()">Login</button>

JavaScript

The following code attempts connection to the Local Dictation Service first. If no service is found locally, it tries to connect to the Remote Dictation Service. This approach allows for automated integration with both services.

async function DoLogin() {
    const credentials = {
        user: "provided_username",
        password: "provided_password"
    }

    const connectToLocal = {
        host: "localhost",
        port: "8443",
        useDictationService: false
    }

    const connectToRemote = {
        host: "dev.invoxmedical.com/v2.8.3",
        port: "8443",
        useDictationService: true
    }

    try {
        await INVOX.Login(credentials, connectToLocal);
        INVOX.LogInfo("Local Dictation Service connected successfully.");
    } catch (error) {
        INVOX.LogWarn("Local Dictation Service not found. Trying Remote...");
        try {
            await INVOX.Login(credentials, connectToRemote);
            INVOX.LogInfo("Remote Dictation Service connected successfully.");
        } catch (error) {
            INVOX.LogError("Could not connect to any Dictation Service.");
        }
    }
}

INVOX Medical allows to subscribe to a certain events related to the authentication process.

Please refer to the Capture Internal Events section for a comprehensive list of available methods and functionalities.

document.addEventListener(INVOX.eventTypeReport.LOGIN_ERROR, (event) => {
    INVOX.LogError(event.detail)
    alert(event.detail)
})

document.addEventListener(INVOX.eventTypeReport.LOGIN_SUCCESS, (event) => {
    INVOX.LogInfo(event.detail)
})

document.addEventListener(INVOX.eventTypeReport.NOT_CUSTOMIZED_COMPONENTS, (event) => {
    INVOX.LogWarn(event.detail)
})

Set writing location

It is crucial to configure the Writer after a successful login, using the promise returned by Login or by handling the LOGIN_SUCCESS event.

After successfully logging in and prior to starting the dictation, the writing area must be configured to display the recognition results. This will be achieved by creating a simple text box using the HTML element TextArea, with the identifier invox-textarea-1.

Please refer to the Writer functions section for a comprehensive list of available methods and functionalities.

HTML

TextArea Target

<textarea id="invox-textarea-1" class="form-control" placeholder="Recognized text..."></textarea>

JavaScript

To enable writing of dictation results in a text box, you need to configure a TextWriter. The INVOX Medical SDK provides the TextAreaTextWriter for this purpose. To specify the TextAreaTextWriter, use the provided method and set the target element as the HTML element representing the text box where the output will be displayed.

Please refer to the Writing in other components section for a comprehensive list of available methods and functionalities.

document.addEventListener(INVOX.eventTypeReport.LOGIN_SUCCESS, () => {
    try {
        INVOX.SetTextWriter(INVOX.TextAreaTextWriter)
        const textareaElement = document.getElementById("invox-textarea-1")
        INVOX.SetWriterTarget(textareaElement)
    } catch(error) {
        INVOX.LogError(error.message)
    }
})

Start or stop speech recognition

To start and stop speech you can create a button that executes INVOX.SwitchDictation.

Please refer to the Dictation functions section for a comprehensive list of available methods and functionalities.

HTML

<button class="btn btn-danger" onclick="SwitchDictation()">Switch Dictation</button>

JavaScript

function SwitchDictation() {
    try {
        INVOX.SwitchDictation()
    } catch(error) {
        INVOX.LogError(error.message)
    }
}

Log out

HTML

<button class="btn btn-secondary" onclick="DoLogout()">Logout</button>

JavaScript

async function DoLogout() {
    try {
        await INVOX.Logout()
        INVOX.LogInfo("Session closed successfully")
    } catch(error) {
        INVOX.LogError(error.message)
    }
}

Next Steps

Take a look at the Quick Integration Components for a streamlined integration experience. 🔗
Refer to the JavaScript API documentation to explore all the available methods. 🔗
Learn how to build your own Text Writer for customizing the text output in your editor. 🔗

Getting StartedDocker deployment examples

Getting StartedUpgrade Guide