Part of Eyevinn Open Intercom Solution
Eyevinn Open Intercom is a low latency, web based, open source, high quality, voice-over-ip intercom solution. It is designed to be used in broadcast and media production environments, where low latency and high quality audio are critical. The solution is built on top of WebRTC technology and provides a user-friendly interface for managing intercom channels and users.
- Open Intercom Server running and reachable
Available as an open web service in Eyevinn Open Source Cloud. Read this documentation to quickly get started with the hosted solution.
Pre-requisites: Node v20, Yarn Classic
yarn to install packages
cp .env.local.sample .env.local to set up the local environment (do not skip!)
To use a local Open Intercom Server, set the environment variable VITE_BACKEND_URL=http://0.0.0.0:8000/
Decide whether or not debug mode should be on or not VITE_DEBUG_MODE=true
Choose desired level of logging VITE_DEV_LOGGER_LEVEL=3
LOGGER LEVELS
0 = no logs
1 = basic logs
2 = colored logs
3 = data logs
yarn dev to start a dev server
To develop using a server hosted by Open Source Cloud, you need to provide a bearer token (service access token) in the Authorization header. The environment should be set to:
export VITE_BACKEND_URL=https://<instance>.eyevinn-intercom-manager.auto.prod.osaas.io/
export OSC_ACCESS_TOKEN=<personal-access-token>
The <personal-access-token> is found in the settings menu in the user interface. To get the service access token you run the following command in your terminal.
% npx -y @osaas/cli service-access-token eyevinn-intercom-manager
<service-access-token>If you are developing against an intercom manager in OSC dev environment you use the <personal-access-token> that you have in the development environment and run the following instead.
% npx -y @osaas/cli --env dev service-access-token eyevinn-intercom-manager
<service-access-token>You also need to update the VITE_BACKEND_URL to point to your instance in OSC dev.
export VITE_BACKEND_URL=https://<instance>.eyevinn-intercom-manager.auto.dev.osaas.io/Then you start the dev server with the VITE_BACKEND_API_KEY environment variable set. Either on the comand line or stored in the shell with export VITE_BACKEND_API_KEY=<service-access-token>. The token expires after a while so you might need to refresh the token using the same command above.
% VITE_BACKEND_API_KEY=<service-access-token> yarn devAs the Open Source Cloud platform apply same-origin principle you need to disable that check in your browser when developing locally. Example below on how to start Chrome on MacOS with this check disabled.
% open -a Google\ Chrome --args --disable-web-security --user-data-dir="/tmp"Build local Docker image
docker build -t intercom-frontend:dev
Run container on port 8000 and with intercom manager on https://<intercom-manager-url>/
docker run --rm -d -p 8000:8000 \
-e PORT=8000 \
-e MANAGER_URL=https://<intercom-manager-url>/ \
--name=frontend \
intercom-frontend:dev
Then the app is available at http://localhost:8000/
Stop container
docker stop frontend
| Script | What it does |
|---|---|
yarn dev |
Start Vite dev server with HMR |
yarn build |
Type-check and build for production |
yarn start |
Serve the production build locally |
yarn test |
Run unit tests (Vitest) |
yarn test:watch |
Run unit tests in watch mode |
yarn lint |
Run ESLint on src/ |
yarn pretty |
Format all files with Prettier |
yarn typecheck |
Type-check without emitting (tsc --noEmit) |
End-to-end tests use Playwright. CI runs a focused subset; locally you get additional screen sizes and devices.
| Project | Browser | Viewport | CI | Local |
|---|---|---|---|---|
chromium-13inch |
Chromium | 1280×800 | — | ✓ |
chromium-15inch |
Chromium | 1440×900 | ✓ | ✓ |
chromium-17inch |
Chromium | 1920×1080 | — | ✓ |
firefox-15inch |
Firefox | 1440×900 | ✓ | ✓ |
webkit-15inch |
WebKit (Safari) | 1440×900 | ✓ | ✓ |
mobile-iphone-se |
WebKit | 375×667 | ✓ | ✓ |
mobile-iphone-14 |
WebKit | 390×844 | — | ✓ |
| Script | What it does |
|---|---|
yarn e2e |
Run all projects (4 in CI, 7 locally) |
yarn e2e:ui |
Interactive Playwright debugger |
yarn e2e:headed |
All projects with visible browser windows |
yarn e2e:chromium |
Chromium 15" only |
yarn e2e:firefox |
Firefox 15" only |
yarn e2e:webkit |
WebKit 15" only |
yarn e2e:mobile |
Both mobile devices |
yarn e2e:report |
Open last HTML test report |
Contributions are welcome.
The project uses feature branches, and a rebase merge strategy.
Make sure you have git pull set to rebase mode:
git config pull.rebase true
Optionally, you can add the --global flag to the above command.
To start working on a new feature: git checkout -b <feature branch name>.
This project uses conventional commits.
Read Using Git with Discipline.
Read How to Write a Commit Message.
A commit should:
- contain a single change set (smaller commits are better)
- pass tests, linting, and typescript checks
- not be broken
Along with enabling time saving automation, it enables extremely powerful debug workflows via git bisect, making bug hunting a matter of minutes. There are a number of articles out there on the magic of bisecting.
Basic structure of a commit message:
<type>[optional scope]: <title starting with verb in infinitive>
[optional body]
[optional footer]
Try to describe what was added or changed, instead of describing what the code does. Example:
fix(seek): rewrite calculation in seek module // bad, the consumer does not know what issue this fixes
fix(seek): stop player from freezing after seek // good, the consumer understands what is now working again
Join our community on Slack where you can post any questions regarding any of our open source projects. Eyevinn's consulting business can also offer you:
- Further development of this component
- Customization and integration of this component into your platform
- Support and maintenance agreement
Contact sales@eyevinn.se if you are interested.
Eyevinn Technology help companies in the TV, media, and entertainment sectors optimize costs and boost profitability through enhanced media solutions. We are independent in a way that we are not commercially tied to any platform or technology vendor. As our way to innovate and push the industry forward, we develop proof-of-concepts and tools. We share things we have learn and code as open-source.
With Eyevinn Open Source Cloud we enable to build solutions and applications based on Open Web Services and avoid being locked in with a single web service vendor. Our open-source solutions offer full flexibility with a revenue share model that supports the creators.
Read our blogs and articles here:
Want to know more about Eyevinn, contact us at info@eyevinn.se!