janus-svelte

A Svelte wrapper to interact with MeetEcho's Janus Gateway.

Fully typescript-compatible.

Installation

Available now at an npm near you:

``
npm i janus-svelte
`

or

`
yarn add janus-svelte
`

or

`
git clone git@github.com:emdienn/janus-svelte.git
`

Motivation

The javascript SDK for Janus, while comprehensive and powerful, can be very indimiating at first blush. This package
seeks to _svelte-ify_ and simplify the DX of interacting with Janus, hopefully without sacrificing too much flexibility
and power in the process. Out of the gate it won't be feature-complete with all of Janus' plugins, but they'll hopefully
get covered over time if there's interest and need.

janus-svelte is entirely unopinionated about markup and style; with exceptions of a few components like
, components are purely functional in nature and don't contribute to the DOM - it's up to your to
build your app how you want it.

Code Structure

$3

Each functional component in janus-svelte is backed by a corresponding set of helper functions in an adjacent ts/js
file. The motivation here is that if you need the flexibility to ignore the and just go directly for the
code, you can do that: the components are simply svelte wrappers around those functions, exposing data via nested slots
and event dispatches (as we'll see in the examples below.)

- The server/ directory contains the core connection component.
- The plugins/ directory contains a subdirectory for each implemented plugin, each containing one or more components
depending on the plugin's complexity.
- The utils/ directory contains components and scripts that are common to all components.

$3

For ease of use, all components are exposed at the top level of the package, so you can just import everything from the
library to make it available like so:

`html

`

This does result in some long namespace chains, however, so for brevity, it's recommended that if you're drilling into
plugin types and/or behaviours, to alias the plugin directly:

`html

`

The main plugin components, though, are explicitly exported at the top level:

`html





`

$3

Wherever possible, functional components expose properties both via slots and events. This enables you to handle those
variables in the way best served by your application.

`html


{JSON.stringify(error, null, 2)}

Joined room {room}

`html




`

$3

`html



on:attach={handleAttach}
>


Text Room {room} joined

send('hello world!')}>Send to all



`

$3

`html



{janus}
{room}
{username}
{pin}
let:publish
let:peers
on:attach="{handleRoomAttach}"
on:error="{handleError}"
on:join="{handlePeerJoin}"
on:leave="{handlePeerLeave}">


Video room {room} joined

{publish}
{videoOffer}
{audioOffer}
let:stream
on:attach="{handlePublishAttach}"
on:localstream="{handleLocalStream}">




{JSON.stringify(error, null, 2)}








`

Code Walkthrough

$3

`html


{JSON.stringify(error, null, 2)}

Connected to {janus.getServer()}

`html


{JSON.stringify(error, null, 2)}

Connected to {janus.getServer()}

{JSON.stringify(error, null, 2)}

Joined room {room}

`html


{JSON.stringify(error, null, 2)}

Connected to {janus.getServer()}

{JSON.stringify(error, null, 2)}

Joined room {room}

Publish {localFeedId}






`

$3

`html


{JSON.stringify(error, null, 2)}

Connected to {janus.getServer()}

{JSON.stringify(error, null, 2)}

Joined room {room}

Publish {localFeedId}

Bugs and Issues

Please use Github Issues to report any bugs or problems.

Please note that
this package depends heavily on both Janus Gateway (as the backend service) and the javascript/typescript generously
provided by meetecho and notedit. Issues in those underpinning
libraries and/or general Janus usage aren't supported, so please endeavour to ensure that you're submitting an issue for
this package specifically, and not an issue in one of those.

License

MIT