ptt-button-react

Web Push-To-Talk (PTT) Button SDK on ReactJS

Import and render this PTT Button on your web app and it will work with a self-hosted server out of the box! The button is built with ReactJS, so you can directly import to your React project like the following:

import React from "react"
import ButtonPTT from "ptt-button"

function App() {
  return (
    <div>
      <p>Click and hold to talk</p>
      <ButtonPTT 
        socketURL="wss://your-self-hosted.router.com"
        channelType={0}
        companyName="mycompany"
        userId="mada"
        channelId="mygroup"
        size="32px"
        style={{ background: "red" }}
      />
    </div>
  )
}

To test, open the test page and use the following settings:

• Company name: mycompany
• User ID: mida
• Target user ID: mada
• Target group ID: mygroup
• Router URL: wss://your-self-hosted.router.com

Then test PTT between your web app and the test page. Or even between 2 test pages.

Properties

socketURL

The socket URL you want this button to connnect to. This can be your self-hosted router URL or the public one.

channelType

In number, 0 for group and 1 for private channel.

companyName

In string, a specific company name to distinguish a socket or user from the others. The real socket ID and user ID consumed by the router will be concatenation of the company name and userId below.

userId

In string, a specific user ID to distinguish current user with the other users in the same company name.

channelId

The target channel ID for this button. For private, this is the other userId. For group, this is the group ID.

size

The size of the button with CSS font-size units. Supports 'px', 'em', 'rem', etc.

style

Your custom react CSS style object. It will override the default styling.

Behavior

For private channel you will be able to talk directly by clicking and holding the button. For group channel you need to hover the mouse to the button. This will initiate group joining. Then only you can listen and talk. To leave group, double click on the button.

Self-hosted server

This button needs (self-hosted) PTT server in order it to work.

Need help?

This button may have bugs. If you need help on bugfixing, enhancement, implementation, or consultation, please contact us at forstek-web.vercel.app.