# rtc-glue
> A simple library for writing WebRTC applications an in HTML-centric way
Latest version **0.10.3** (published 2014-06-30) · Apache 2.0 license · 0 weekly downloads
## Install
```sh
npm install rtc-glue
pnpm add rtc-glue
yarn add rtc-glue
bun add rtc-glue
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.10.3 |
| Published | 2014-06-30 |
| First published | 2013-10-24 |
| Weekly downloads | 0 |
| License | Apache 2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Damon Oehlman |
| Maintainers | damonoehlman |
| Keywords | webrtc, rtc.io, html |
## Links
- npm: https://www.npmjs.com/package/rtc-glue
- Repository: https://github.com/rtc-io/rtc-glue
- Issues: https://github.com/rtc-io/rtc-glue/issues
- npm.io page: https://npm.io/package/rtc-glue
## Dependencies (10)
- [cog](https://npm.io/package/cog.md) ^1
- [eve](https://npm.io/package/eve.md) ~0.4.1
- [fdom](https://npm.io/package/fdom.md) ^0.8.0
- [async](https://npm.io/package/async.md) ~0.9
- [rtc-core](https://npm.io/package/rtc-core.md) ^2.0.0
- [rtc-media](https://npm.io/package/rtc-media.md) ^1
- [rtc-tools](https://npm.io/package/rtc-tools.md) ^2
- [rtc-signaller](https://npm.io/package/rtc-signaller.md) ^2.0.0
- [sdp-transform](https://npm.io/package/sdp-transform.md) ~0.6.0
- [rtc-captureconfig](https://npm.io/package/rtc-captureconfig.md) ^1
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 0.10.3 (latest) — 2014-06-30
- 0.10.2 — 2014-04-01
- 0.10.1 — 2014-04-01
- 0.9.0 — 2014-03-10
- 0.8.1 — 2014-02-20
- 0.8.0 — 2014-01-22
- 0.7.4 — 2014-01-06
- 0.7.3 — 2014-01-06
- 0.7.2 — 2014-01-06
- 0.7.0 — 2014-01-02
- 0.6.0 — 2013-12-06
- 0.5.5 — 2013-12-04
- 0.5.4 — 2013-11-28
- 0.5.2 — 2013-11-27
- 0.5.1 — 2013-11-27
- … 17 more at https://npm.io/package/rtc-glue/versions
## README
# rtc-glue
Glue is a high-level approach to building WebRTC applications. It is
primarily designed for web application coders who would prefer to spend
their time in HTML and CSS rather than JS.
[](https://nodei.co/npm/rtc-glue/)
[](https://github.com/badges/stability-badges)
## Deprecated
We are starting to see quite a bit of promise around
[Web Components](http://webcomponents.org/), and there has even been some
interesting work done incorporating rtc.io as a webcomponents layer in
the [interconnect](https://github.com/interconnectapp) project.
While glue provided an interesting view on what a declarative approach to
WebRTC might have looked like, the future is most likely in using Web
Components to achieve this.
## Example Usage
Glue works by looking for HTML tags that follow particular conventions
with regards to named attributed, etc. For instance, consider the
following HTML:
```html
```
It is then possible to tweak the `getUserMedia` constraints using some
flags in the `rtc-capture` attribute:
```html
```
For those who prefer using separate attributes, you can achieve similar
behaviour using the `rtc-resolution` (or `rtc-res`) attribute:
```html
```
## Conferencing Example
The following is a simple example of conferencing using some hosted rtc.io
signalling:
```html
```
## Getting Glue
Primarily glue is designed for use in a standalone situation, and thus
comes pre-packaged in a UMDjs
[distribution](https://github.com/rtc-io/rtc-glue/tree/master/dist). If
you prefer working with browserify, then it will still work quite nicely
and you should just `npm install rtc-glue` like you would with other
modules of the rtc.io suite.
## Running the Examples
This module of the [rtc.io](https://rtc.io/) suite is a little different
to others in that it comes with a ready to run js file. Simply start
a webserver in the root of the directory after cloning. If you are looking
for a good one, I'd recommend [st](https://github.com/isaacs/st).
## Targeted Media Capture
The draft
[Media Capture spec](http://dev.w3.org/2011/webrtc/editor/getusermedia.html)
introduces the ability to query media devices on the machine. This is
currently available through the `MediaStreamTrack.getSources` function.
If available then you can target the capture of a particular input device
through the use of a numbered device capture specification. For example:
```html
```
Would atttempt to capture the 2nd (0-indexed) camera available on the
machine (if it is able to query devices). The following is a larger
example:
```html
```
## On Custom Attributes
While we haven't 100% decided we are leaning towards the use of custom
`rtc-*` attributes for influencing the behaviour of the `rtc-glue` library.
While currently this is in violation with the HTML5 spec, it is an area
of active discussion in W3C land (given [AngularJS](http://angularjs.org/)
has adopted the `ng-*` attributes and is proving popular).
### Document Metadata
In the `rtc-glue` library we use document level `` tags to provide
glue with configuration information. There are a number of configurable
options, each which is used in the form of:
```html
```
#### rtc-room
A custom room that new conversations will be created in. If not specified
this will default to a value of `auto`.
#### rtc-role
In some conference scenarios, different participants are assigned different
roles (e.g. student/teacher, consultant/customer, etc). By specifying the
`rtc-role` metadata you this role information will be announced as part
of the `rtc-quickconnect` initialization.
#### rtc-data
From version `0.9` of glue you can also specify one or more `rtc-data` meta
tags that are used to specify data channels that you want configured for
your application. When a connection is established between peers, the
connections are created with the appropriate data channels.
When the data channel is open and available for communication a
`:open` glue event is triggered (consistent with the behaviour
of the [rtc-quickconnect](https://github.com/rtc-io/rtc-quickconnect))
module.
An example of using data channels is shown below:
```html
```
## Reference
### Element Attributes
#### rtc-capture
The presence of the `rtc-capture` attribute in a `video` or `audio` element
indicates that it is a getUserMedia capture target.
#### rtc-peer
To be completed.
### Internal Functions
#### initPeer(el)
Handle the initialization of a rtc-remote target
#### initCapture(el)
Handle the initialization of an rtc-capture target
## Events
Glue uses [eve](https://github.com/adobe-webplatform/eve) under the hood,
and exposes a simple interface to eve events through the `glue.events`
interface.
If using eve directly these events are namespaced with the prefix of
`glue.` to avoid event name clashes on the bus, but you can use the
`glue.events` endpoint to attach to eve without the namespace if you prefer.
For example:
```js
var glue = require('rtc-glue');
var eve = require('eve');
eve.once('glue.ready', function() {
// will be triggered when glue has initialized
});
glue.events.once('ready', function() {
// will also be triggered once ready, and equivalent to glue.ready
// when directly using eve
});
// listen for connected events
// NOTE: only trigger when a page has valid peer elements
glue.events.once('connected', function(signaller) {
console.log('connected');
signaller.on('color', function(data) {
console.log('received color notification: ', arguments);
});
signaller.send('/color', {
src: signaller.id,
color: 'blue'
});
});
```
### SessionManager
The SessionManager class assists with interacting with the signalling
server and creating peer connections between valid parties. It uses
eve to create a decoupled way to get peer information.
#### announce()
Announce ourselves on the signalling channel
#### broadcast(stream)
Broadcast a stream to our connected peers.
#### getStreamData(stream, callback)
Given the input stream `stream`, return the data for the stream. The
provided `callback` will not be called until relevant data is held by
the session manager.
#### tagStream(stream, targetId, data)
The tagStream is used to pass stream identification information along to the
target peer. This information is useful when a particular remote media
element is expecting the contents of a particular capture target.
## License(s)
### Apache 2.0
Copyright 2014 National ICT Australia Limited (NICTA)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
---
_Source: https://npm.io/package/rtc-glue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._