├── .babelrc ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── example ├── .gitignore ├── package.json ├── public │ ├── favicon.png │ ├── global.css │ └── index.html ├── rollup.config.js ├── src │ ├── Conference │ │ ├── Conference.svelte │ │ └── index.js │ ├── Participant │ │ ├── Participant.svelte │ │ └── index.js │ ├── SampleApp.svelte │ └── main.js └── yarn.lock ├── images └── screenshot.png ├── package.json ├── rollup.config.js ├── src ├── components │ ├── Audio │ │ ├── Audio.svelte │ │ └── index.js │ ├── Mirror │ │ ├── ContinueButton │ │ │ ├── ContinueButton.svelte │ │ │ └── index.js │ │ ├── DeviceSelector │ │ │ ├── DeviceSelector.svelte │ │ │ ├── Select │ │ │ │ ├── Select.svelte │ │ │ │ └── index.js │ │ │ ├── images │ │ │ │ ├── audio-enabled.svg │ │ │ │ ├── speaker-icon.svg │ │ │ │ └── video-enabled.svg │ │ │ └── index.js │ │ ├── Mirror.svelte │ │ ├── images │ │ │ ├── audio-disabled.svg │ │ │ ├── audio-enabled.svg │ │ │ ├── settings.svg │ │ │ ├── video-disabled.svg │ │ │ └── video-enabled.svg │ │ └── index.js │ └── Video │ │ ├── Video.svelte │ │ └── index.js ├── index.js ├── jitsi │ ├── canAutoPermit.js │ ├── init.js │ └── tracks.js ├── main.js ├── stores │ ├── ConferencesStore.js │ ├── ConnectionStore.js │ ├── DeviceListStore.js │ ├── ElementTrackStore.js │ ├── LocalTracksStore.js │ └── ParticipantsStore.js └── utils │ ├── events.js │ ├── groupBy.js │ ├── hasAncestor.js │ ├── omit.js │ ├── ready.js │ └── uuid.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/env"], 3 | "plugins": ["@babel/transform-runtime"] 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .cache 3 | dist/ 4 | node_modules/ 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "svelteSortOrder": "scripts-markup-styles" 5 | } 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 relm-us 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jitsi-svelte 2 | 3 | This library allows you to easily create your own custom [Jitsi](https://jitsi.org/jitsi-meet/) client, in the [Svelte](https://svelte.dev/) framework. 4 | 5 | Jitsi is a free, open-source, web-based video conferencing app that has a handy library called lib-jitsi-meet. However, there are quite a few intricacies to getting it working well, and if you're writing a Svelte3-based app, there is some additional complexity in getting all of the events to work together. 6 | 7 | `jitsi-svelte` simplifies all of this and provides the svelte stores you need to build a web-based video conferencing app. It also provides Svelte components for Audio, and Video, among others. We use it at [Relm](http://www.relm.us) to power our social virtual world. 8 | 9 |
10 | Simplified Cam/Mic Setup 11 |
12 | 13 | We were inspired by Whereby's intro screen and created what we call the "Mirror" component that mimics their UX & design. This `Mirror` can reduce the code you need to write to give a robust setup screen experience for your users. 14 | 15 | # Getting Started 16 | 17 | See the `example/` folder for a sample app that uses `jitsi-svelte`. 18 | 19 | In general, you need to create a ConnectionStore via `createConnectionStore` and supply a `JitsiConfig` as the parameter; then, join a conference (at this point, the user will see others who've already entered the room), and use a `Mirror` component to let the user configure their mic and camera before entering the room. 20 | 21 | ```javascript 22 | import { createConnectionStore, DEFAULT_JITSI_CONFIG, Mirror } from 'jitsi-svelte' 23 | 24 | import Conference from './Conference' 25 | 26 | const connection = createConnectionStore(DEFAULT_JITSI_CONFIG, 'jitsi-svelte-test') 27 | 28 | connection.conferences.join('jitsi-svelte-test') 29 | 30 | // NEXT: use Mirror svelte component (see SampleApp.svelte) 31 | ``` 32 | 33 | # License 34 | 35 | MIT 36 | 37 | # What is Relm? 38 | 39 | Relm is a social universe--a kinder, gentler online community. It's an experiment in mixing a game world with work meetings. Come visit sometime! https://www.relm.us 40 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jitsi-svelte-example", 3 | "version": "1.0.0", 4 | "description": "Example app using jitsi-svelte", 5 | "repository": "https://github.com/relm-us/jitsi-svelte", 6 | "author": "Duane Johnson", 7 | "license": "MIT", 8 | "private": false, 9 | "devDependencies": { 10 | "@babel/core": "^7.11.6", 11 | "@babel/plugin-transform-runtime": "^7.11.5", 12 | "@babel/preset-env": "^7.11.5", 13 | "@rollup/plugin-commonjs": "^14.0.0", 14 | "@rollup/plugin-image": "^2.0.5", 15 | "@rollup/plugin-node-resolve": "^8.0.0", 16 | "rollup": "^2.3.4", 17 | "rollup-plugin-livereload": "^2.0.0", 18 | "rollup-plugin-svelte": "^6.0.0", 19 | "rollup-plugin-terser": "^7.0.0", 20 | "svelte": "^3.29.0" 21 | }, 22 | "dependencies": { 23 | "jitsi-svelte": "0.3.0", 24 | "sirv-cli": "^1.0.0" 25 | }, 26 | "scripts": { 27 | "build": "rollup -c", 28 | "dev": "rollup -c -w", 29 | "start": "sirv public" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /example/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/relm-us/jitsi-svelte/dc3fb2440c503c2e54d8f64368a3c1f291593ca3/example/public/favicon.png -------------------------------------------------------------------------------- /example/public/global.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | color: #333; 9 | margin: 0; 10 | padding: 8px; 11 | box-sizing: border-box; 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 13 | } 14 | 15 | a { 16 | color: rgb(0,100,200); 17 | text-decoration: none; 18 | } 19 | 20 | a:hover { 21 | text-decoration: underline; 22 | } 23 | 24 | a:visited { 25 | color: rgb(0,80,160); 26 | } 27 | 28 | label { 29 | display: block; 30 | } 31 | 32 | input, button, select, textarea { 33 | font-family: inherit; 34 | font-size: inherit; 35 | -webkit-padding: 0.4em 0; 36 | padding: 0.4em; 37 | margin: 0 0 0.5em 0; 38 | box-sizing: border-box; 39 | border: 1px solid #ccc; 40 | border-radius: 2px; 41 | } 42 | 43 | input:disabled { 44 | color: #ccc; 45 | } 46 | 47 | button { 48 | color: #333; 49 | background-color: #f4f4f4; 50 | outline: none; 51 | } 52 | 53 | button:disabled { 54 | color: #999; 55 | } 56 | 57 | button:not(:disabled):active { 58 | background-color: #ddd; 59 | } 60 | 61 | button:focus { 62 | border-color: #666; 63 | } 64 | -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Jitsi Svelte 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /example/rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte' 2 | import resolve from '@rollup/plugin-node-resolve' 3 | import commonjs from '@rollup/plugin-commonjs' 4 | import image from '@rollup/plugin-image' 5 | import livereload from 'rollup-plugin-livereload' 6 | import { terser } from 'rollup-plugin-terser' 7 | 8 | const production = !process.env.ROLLUP_WATCH 9 | 10 | function serve() { 11 | let server 12 | 13 | function toExit() { 14 | if (server) server.kill(0) 15 | } 16 | 17 | return { 18 | writeBundle() { 19 | if (server) return 20 | server = require('child_process').spawn( 21 | 'npm', 22 | ['run', 'start', '--', '--dev'], 23 | { 24 | stdio: ['ignore', 'inherit', 'inherit'], 25 | shell: true, 26 | } 27 | ) 28 | 29 | process.on('SIGTERM', toExit) 30 | process.on('exit', toExit) 31 | }, 32 | } 33 | } 34 | 35 | export default { 36 | input: 'src/main.js', 37 | output: { 38 | sourcemap: true, 39 | format: 'iife', 40 | name: 'app', 41 | file: 'public/build/bundle.js', 42 | }, 43 | plugins: [ 44 | svelte({ 45 | // enable run-time checks when not in production 46 | dev: !production, 47 | // we'll extract any component CSS out into 48 | // a separate file - better for performance 49 | css: (css) => { 50 | css.write('bundle.css') 51 | }, 52 | }), 53 | 54 | // If you have external dependencies installed from 55 | // npm, you'll most likely need these plugins. In 56 | // some cases you'll need additional configuration - 57 | // consult the documentation for details: 58 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 59 | resolve({ 60 | browser: true, 61 | dedupe: ['svelte'], 62 | }), 63 | commonjs(), 64 | image(), 65 | 66 | // In dev mode, call `npm run start` once 67 | // the bundle has been generated 68 | !production && serve(), 69 | 70 | // Watch the `public` directory and refresh the 71 | // browser on changes when not in production 72 | !production && livereload('public'), 73 | 74 | // If we're building for production (npm run build 75 | // instead of npm run dev), minify 76 | production && terser(), 77 | ], 78 | watch: { 79 | clearScreen: false, 80 | }, 81 | } 82 | -------------------------------------------------------------------------------- /example/src/Conference/Conference.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 |
Conference Room: {conferenceId}
16 |
Status: {$status}
17 |
18 | Participants: 19 | {#each Object.entries($participants) as [participantId, participant], key} 20 | 21 | {/each} 22 |
23 |
24 | 25 | 31 | -------------------------------------------------------------------------------- /example/src/Conference/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Conference.svelte' 2 | -------------------------------------------------------------------------------- /example/src/Participant/Participant.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 38 | 39 | 40 | 41 | 42 | 51 | 52 | 53 | 54 | 55 | 64 | 65 |
Local:{$participant.isLocal}
Jitsi ID:{$participant.jid}
Role:{$participant.role}
Audio Level:{$participant.audioLevel}
Audio:{$participant.audioEnabled ? 'enabled' : 'disabled'} 30 | {#if $participant.audioEnabled} 31 | 33 | {:else} 34 | 36 | {/if} 37 |
Video:{$participant.videoEnabled ? 'enabled' : 'disabled'} 43 | {#if $participant.videoEnabled} 44 | 46 | {:else} 47 | 49 | {/if} 50 |
Desktop:{$participant.desktopEnabled ? 'enabled' : 'disabled'} 56 | {#if $participant.desktopEnabled} 57 | 59 | {:else} 60 | 62 | {/if} 63 |
66 |
67 |
68 | {#if $participant.video} 69 |
70 |
72 | {/if} 73 | {#if $participant.desktop} 74 |
75 |
77 | {/if} 78 |
79 |
80 | 81 | 113 | -------------------------------------------------------------------------------- /example/src/Participant/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Participant.svelte' 2 | -------------------------------------------------------------------------------- /example/src/SampleApp.svelte: -------------------------------------------------------------------------------- 1 | 27 | 28 | {#if mirrorPage} 29 |
30 |

You're about to join a video meeting

31 | (mirrorPage = false)} /> 32 |
33 | {/if} 34 |
{$connection ? 'Connected' : 'Not Connected'}
35 | 36 | {#each Object.entries($conferences) as [conferenceId, conference], key} 37 | 38 | 41 | {/each} 42 | 43 | 51 | 52 | 63 | -------------------------------------------------------------------------------- /example/src/main.js: -------------------------------------------------------------------------------- 1 | import SampleApp from './SampleApp.svelte' 2 | 3 | const app = new SampleApp({ 4 | target: document.body, 5 | }) 6 | 7 | export default app 8 | -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/relm-us/jitsi-svelte/dc3fb2440c503c2e54d8f64368a3c1f291593ca3/images/screenshot.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jitsi-svelte", 3 | "version": "0.4.0", 4 | "description": "Reactive svelte3 stores for lib-jitsi-meet", 5 | "keywords": [ 6 | "svelte" 7 | ], 8 | "repository": "https://github.com/relm-us/jitsi-svelte", 9 | "author": "Duane Johnson", 10 | "license": "MIT", 11 | "private": false, 12 | "main": "dist/index.js", 13 | "module": "dist/index.mjs", 14 | "files": [ 15 | "src", 16 | "dist" 17 | ], 18 | "devDependencies": { 19 | "@babel/core": "^7.11.6", 20 | "@babel/plugin-transform-runtime": "^7.11.5", 21 | "@babel/preset-env": "^7.11.5", 22 | "@rollup/plugin-image": "^2.0.5", 23 | "@rollup/plugin-node-resolve": "^9.0.0", 24 | "rollup": "^2.29.0", 25 | "rollup-plugin-svelte": "^6.0.1", 26 | "svelte": "^3.29.0" 27 | }, 28 | "dependencies": { 29 | "keycode-js": "^3.1.0" 30 | }, 31 | "svelte": "src/index.js", 32 | "scripts": { 33 | "build": "rollup --config", 34 | "prepublishOnly": "npm run build" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte' 2 | import resolve from '@rollup/plugin-node-resolve' 3 | import image from '@rollup/plugin-image' 4 | 5 | import pkg from './package.json' 6 | 7 | const name = pkg.name 8 | .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3') 9 | .replace(/^\w/, (m) => m.toUpperCase()) 10 | .replace(/-\w/g, (m) => m[1].toUpperCase()) 11 | 12 | export default { 13 | input: 'src/index.js', 14 | output: [ 15 | { file: pkg.module, format: 'es' }, 16 | { file: pkg.main, format: 'umd', name }, 17 | ], 18 | plugins: [svelte(), resolve(), image()], 19 | } 20 | -------------------------------------------------------------------------------- /src/components/Audio/Audio.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 28 | 29 |