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.

Quick start example basic page

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",
                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.");
                }
            }
        }

        function DoLogout() {
            INVOX.Logout()
                .then(() => 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, () => {
            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>

Import resources

Import the Invox Dictation SDK library into the header:

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

Log in

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

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",
        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.");
        }
    }
}

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.

HTML

TextArea Target

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

JavaScript

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

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

function DoLogout() {
    INVOX.Logout()
        .then(() => INVOX.LogInfo("Session closed successfully"))
        .catch((error) => INVOX.LogError(error.message))
}

Getting StartedDocker deployment examples

Integration ScenariosIntroduction