|
1 | | -# softphone-vendor-headsets |
| 1 | +# Softphone Vendor Headsets |
2 | 2 |
|
3 | | -Softphone integrations for vendor specific headset hardware and software |
| 3 | +### Overview |
| 4 | +This library's goal is to abstract all the different headset implementations behind a single interface. |
4 | 5 |
|
5 | | -This project was bootstrapped with [TSDX](https://github.com/jaredpalmer/tsdx). |
| 6 | +This project has a [React](https://github.com/facebook/react/) test app bootstrapped with [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html). |
| 7 | + |
| 8 | +At this moment (12/10/2021) there are three supported vendors already handled with this library: |
| 9 | +- Plantronics/Poly |
| 10 | +- Sennheiser/EPOS |
| 11 | +- Jabra |
| 12 | + |
| 13 | +### Installation |
| 14 | + |
| 15 | +``` sh |
| 16 | +# npm |
| 17 | +npm install --save softphone-headset-vendors |
| 18 | +# yarn |
| 19 | +yarn softphone-headset-vendors |
| 20 | +``` |
| 21 | + |
| 22 | +### Documentation |
| 23 | +#### Structure and flow |
| 24 | +- The consuming app will first above anything else hit the HeadsetService (`headsets.ts`). |
| 25 | +- From there, the service will determine what vendor is currently selected out of the supported vendors above. This will also be a hub to call the proper functions that correspond with app to headset events (More on that later) |
| 26 | +- Once the desired vendor has been determined, an instance of that vendor's adapter/service will be created. This adapter will interact with the service or sdk the vendor requires to communicate information to and from the headset. |
| 27 | +- If an event is received from the headset itself, the vendor adapters will emit an event that `headset.ts` is listening for. This event will then be passed to the consuming app to properly reflect the state on screen to match that of the headset |
| 28 | + |
| 29 | +**Example 1 - User clicks mute in the consuming app**: |
| 30 | +- From the consuming app, the user clicks on an on-screen mute button |
| 31 | +- The consuming app calls headsetService.mute(...) |
| 32 | +- Which is passed to the corresponding function of the vendor adapter that aligns with the selected device (for example, plantronics.ts -> setMute(true)) |
| 33 | +- This function will then send a message to the headset itself |
| 34 | +- The user will then see the light on their device that represents the "muted" state light up. |
| 35 | + |
| 36 | +**Example 2 - User presses the mute button from the headset**: |
| 37 | +- From the headset, the user presses the button which corresponds to mute |
| 38 | +- This is then received by the vendor instance (for example sennheiser.ts) |
| 39 | +- This event is then sent to `headset.ts` which in turn lets the consuming app know so that the screen properly reflect the state of the headset |
| 40 | + |
| 41 | +#### WebHID |
| 42 | +One of our supported vendors has began working with a technology known as [WebHID][1]. This is a relatively newer technology with a lot of promise but with its own caveats as well - https://wicg.github.io/webhid/ |
| 43 | +- At this moment, WebHID only works with Chromium browsers (Google Chrome/Microsoft Edge). Keep this in mind when developing and using the vendors we currently support |
| 44 | +- In order to use WebHID, you must grant permissions for the site you are currently on. There is a function that must be called that causes a popup to show on screen where the user is then required to select their device and approve its use for WebHID purposes. This function MUST be called with user action (i.e. clicking a button). The solution we currently have in place is after the `user` takes the `action` of changing and selecting a new microphone, we check if it is the specific vendor that supports WebHID, then we emit an event that a consuming app should listen for and then fire the WebHID consent function |
| 45 | + |
| 46 | +### Contributing |
| 47 | +This repo uses [Jest][3] for tests and code coverage |
| 48 | + |
| 49 | +To get started in development: |
| 50 | +```sh |
| 51 | +npm install |
| 52 | +cd react-app |
| 53 | +yarn start |
| 54 | +``` |
| 55 | +Then navigate to https://localhost:8443 to see the test app. This way you can see the effects of the events from the headset on the app and vice versa. |
| 56 | + |
| 57 | +### Testing |
| 58 | +Run the tests using `npm run test:watch` or `npm run test:coverage`. Both commands should be run in the folder. |
| 59 | +- `test:watch` will rerun the tests after changes to the code or the test itself |
| 60 | +- `test:coverage` will run the test suites and produce a report on coverage of the code |
| 61 | + |
| 62 | +**Important Note**: Out of the box, the test scripts will not work on Windows machines. A developer will more than likely need to make modifications to the scripts in the package.json as well as the shell scripts found in the `scripts` folder. If you do not want to modify the scripts out of the box, using a Linux instance seemed to help. The author of the library used an Ubuntu instance |
| 63 | + |
| 64 | +[1]: https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API |
| 65 | +[2]: https://wicg.github.io/webhid/ |
| 66 | +[3]: https://jestjs.io/en/ |
0 commit comments