|
| 1 | +# Krisp Javascript SDK |
| 2 | + |
| 3 | +Welcome to the Krisp JS SDK! |
| 4 | + |
| 5 | +In this README file you can find JS SDK overview and installation options. |
| 6 | +Find more details in the [documentaiton](https://sdk-docs.krisp.ai/docs/getting-started-js). |
| 7 | + |
| 8 | +## Overview |
| 9 | + |
| 10 | +Krisp provides a JS SDK with an out-of-the-box application architecture that allows developers and teams to integrate AI-powered speech clarity features in real-time communication applications. The SDK receives audio buffers in chunks then processes them in a dedicated worker thread on top of WebAssembly. |
| 11 | + |
| 12 | +## Package Structure |
| 13 | + |
| 14 | +``` |
| 15 | +├── dist # Main JS SDK files |
| 16 | +│ ├── assets |
| 17 | +│ │ └── bvc-allowed.txt |
| 18 | +│ ├── krispsdk.d.ts |
| 19 | +│ ├── krispsdk.js |
| 20 | +│ ├── krispsdk.mjs |
| 21 | +│ ├── usermedia.d.ts |
| 22 | +│ ├── usermedia.js |
| 23 | +│ ├── usermedia.mjs |
| 24 | +│ ├── krispsdk.d.ts |
| 25 | +│ ├── krispsdk.es5.js |
| 26 | +│ ├── krispsdk.js |
| 27 | +│ ├── krispsdk.mjs |
| 28 | +│ └── models |
| 29 | +│ ├── model_16.kef |
| 30 | +│ ├── model_32.kef |
| 31 | +│ ├── model_8.kef |
| 32 | +│ ├── model_bvc.kef |
| 33 | +│ └── model_inbound_8.kef |
| 34 | +| └── model_rt.kef |
| 35 | +├── reference-apps # Reference applications |
| 36 | +│ ├── audioElement |
| 37 | +│ │ ├── app.js |
| 38 | +│ │ ├── index.html |
| 39 | +│ │ └── style.css |
| 40 | +│ ├── bvcAudioElement |
| 41 | +│ │ ├── app.js |
| 42 | +│ │ ├── index.html |
| 43 | +│ │ ├── style.css |
| 44 | +│ │ └── ui.mjs |
| 45 | +│ └── callingApp |
| 46 | +│ │ ├── app.js |
| 47 | +│ │ ├── index.html |
| 48 | +│ │ └── style.css |
| 49 | +│ └── deviceChange |
| 50 | +│ │ ├── app.js |
| 51 | +│ │ ├── index.html |
| 52 | +│ │ ├── style.css |
| 53 | +│ │ └── ui.mjs |
| 54 | +| └── withPreloadState |
| 55 | +| ├── app.js |
| 56 | +| ├── index.html |
| 57 | +| └── style.css |
| 58 | +├── package.json |
| 59 | +├── LICENSE.md |
| 60 | +└── README.md |
| 61 | +``` |
| 62 | + |
| 63 | +## Installation |
| 64 | + |
| 65 | +Once you've extracted the folder, the KrispSDK files that you can include in your project will be in the /dist directory. |
| 66 | +You have to serve Krisp models from server and load them dynamically. The models are located in /dist/models directory. |
| 67 | + |
| 68 | +## NPM dependency |
| 69 | + |
| 70 | +You can pack KrispSDK files as a npm package and include in your project. |
| 71 | + |
| 72 | +Using this method, you can import the KrispSDK SDK using ES Module or TypeScript syntax: |
| 73 | + |
| 74 | +``` |
| 75 | +import KrispSDK from '@krispai/javascript-sdk'; |
| 76 | +``` |
| 77 | + |
| 78 | +### Installation Steps |
| 79 | + |
| 80 | +1. Open your terminal or command prompt. |
| 81 | +2. Navigate to the package directory. |
| 82 | +3. pack the library |
| 83 | + |
| 84 | +``` |
| 85 | +npm pack |
| 86 | +``` |
| 87 | + |
| 88 | +4. move generated library archive to your project |
| 89 | +5. install as a dependency |
| 90 | + |
| 91 | +``` |
| 92 | +npm install ./krispai-javascript-sdk-${VERSION}.tgz |
| 93 | +``` |
| 94 | + |
| 95 | +## Import as a module |
| 96 | + |
| 97 | +In case you are not using npm you can directly import '/dist/krispsdk.mjs' in your project |
| 98 | + |
| 99 | +``` |
| 100 | +import KrispSDK from '/dist/krispsdk.mjs'; |
| 101 | +``` |
| 102 | + |
| 103 | +## Include via script tag |
| 104 | + |
| 105 | +You can copy /dist/krispsdk.es5.js file into your project and then provide a link to it in your html. For example: |
| 106 | + |
| 107 | +``` |
| 108 | +<script type="text/javascript" src="/dist/krispsdk.es5.js"></script> |
| 109 | +``` |
| 110 | + |
| 111 | +Using this method, you can access the SDK through the browser global: |
| 112 | + |
| 113 | +``` |
| 114 | +const krispSDK = new KrispSDK({ |
| 115 | + params: { |
| 116 | + useBVC: true, |
| 117 | + debugLogs: false, |
| 118 | + models: { |
| 119 | + model8: '/dist/models/model_8.kef', |
| 120 | + model16: '/dist/models/model_16.kef', |
| 121 | + model32: '/dist/models/model_32.kef', |
| 122 | + modelBVC: { |
| 123 | + url: '/dist/models/model_32.kef', |
| 124 | + preload: true |
| 125 | + } |
| 126 | + }, |
| 127 | + inboundModels: { |
| 128 | + model8: '/dist/models/model_inbound_8.kef', |
| 129 | + }, |
| 130 | + bvc: { |
| 131 | + allowedDevices: '/dist/assets/bvc-allowed.txt', // This is mandatory |
| 132 | + } |
| 133 | + } |
| 134 | +}); |
| 135 | +
|
| 136 | +await krispSDK.init(); |
| 137 | +
|
| 138 | +const audioContext = new AudioContext(); |
| 139 | +
|
| 140 | +const stream = await navigator.mediaDevices.getUserMedia({ |
| 141 | + audio: true |
| 142 | +}); |
| 143 | +
|
| 144 | +const filterNode = await krispSDK.createNoiseFilter({ |
| 145 | + audioContext, |
| 146 | + stream, // make sure to add stream here |
| 147 | + isInbound: false |
| 148 | +}); |
| 149 | +
|
| 150 | +const source = audioContext.createMediaStreamSource(stream); |
| 151 | +
|
| 152 | +source.connect(filterNode).connect(audioContext.destination); |
| 153 | +
|
| 154 | +filterNode.addEventListener('ready', () => { |
| 155 | + filterNode.enable() |
| 156 | +}); |
| 157 | +``` |
0 commit comments