A fully standalone component for managing calls, video calls, screen sharing and more...
Available as component on npm
Available as widget on jsDelivr
flowchart LR
Views[Island] --> Call(Call)
Views[Island] --> Play(Player)
Views[Island] --> Chat(Chat)
Call --> CC{{Simple Call}} --- 1CAComp>Audio Component]
Call --> CCC{{Conference Call}} --- 2CAComp>Audio Component]
Call --> CVC{{Video Call}}
CVC{{Video Call}} --- 3CAComp>Audio Component]
CVC{{Video Call}} --- 3CVComp>Video Component]
CVC{{Video Call}} --- 5CVComp>ScreenSharing component]
Call --> CVS{{Video Sources Call}}
CVS{{Video Sources Call}} --- 4CAComp>Audio Component]
CVS{{Video Sources Call}} --- 4CVComp>Video component]
Play --> PA{{Player Voicemail}} --- 6PComp>Player Component]
Play --> PR{{Player Registration}} --- 6PComp>Player Component]
Chat --> CS{{Single Chat}} --- 7CComp>Chat Component]
Chat --> CG{{Group Chat}} --- 7CComp>Chat Component]
- widget-build - contains the build of the widget version
- widget-example - contains the usage example of the built widget
- dist - contains the component lib build
- src/index.ts - is the entry point for the component lib and exports the React component
- src/index.widget.tsx - is the entry point for the widget that is built as a single js and css file
Install deps
npm install
Run Storybook
touch .env.development.local
echo "CONFIG_TOKEN=$(echo -n "<cti_host>:<cti_username>:<cti_token>:<sip_ext>:<sip_secret>" | base64 -w0)" > .env.development.local
npm run dev
Other environment variables can be specified inside the file above:
# The destination number to be called
DEST_NUMBER=<call_destination_number>
# The announcement id to be reproduced as announcement and base64 audio file
ANNOUNCEMENT_ID=<announcement_id>
# The call recording id to be reproduced
CALL_RECORDING_ID=<call_recording_id>
The main component can be developed using Storybook. Inside the story is rendered the component exported by the final component library.
Tailwind CSS is enable by default.
Run build and start watch
npm run watch
Go to the project directory
cd <local-project>
Link the ./dist directory
npm link <path-to-phone-island/dist>
Build component library
npm run build
Build widget
npm run build:widget
Serve the widget
npm run serve:widget
As you can see the app/component can be built in two ways.
- The component library built with Rollup
- The widget files built with Parcel