Polymer

Discussion.

Learn about Web Components here.

Low-Level RTC.io API

<rtc-media capture="camera" resultStream="{{myStream}}" resultStreamURI="{{myStreamURI}}"/>
<rtc-video src="{{myStreamURI}}" resultVideo="{{myVideo}}"/>
<rtc-videoproc src="{{myVideo}}" resultImageURI="{{snapshotURI}}" filter="bw" mime="image/jpeg" fps="0.5" greedy />

High-Level Interconnect API

<!--
# The RTC Person
This is a view and model representing each person within the chat room.
Each person has a name, a video stream, and a low-bandwidth snapshot stream.
When the video stream is enabled, the low-bandwidth snapshot stream should
  be disabled and vice versa.
-->
<polymer-element name="rtc-person" attributes="talking streaming name muted streamURI snapshotURI">
	<template>
		<div class="person">
			<label id="name">{{name}}</label>
			<video id="video" class="hidden" src="{{streamURI}}" />
			<img id="image" class="hidden" src="{{snapshotURI}}" />
		</div>
	</template>
	<style>
		.person {
			box-sizing: border-box;
			width: 320px;
			height: 240px;
			background: black;
			display: inline-block;
			position: relative;
			border: 1px solid black;
		}
		label {
			position: absolute;
			width: 100%;
			background: black;
			background: rgba(0,0,0,0.8);
			color: white;
			bottom: 0;
			left: 0;
		}
		.hidden {
			display: none;
		}
	</style>
	<script>
		Polymer.register('rtc-person', {
			streaming: false,
			muted: false,
			streamURI: null,
			snapshotURI: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
			streamingChanged: function(oldValue, newValue){
				var vid = this.$.video;
				var img = this.$.image;

				if ( newValue ) {
					vid.className = 'hidden';
					vid.pause();
					img.className = '';
				} else {
					vid.className = '';
					vid.play();
					img.className = 'hidden';
				}
			},
			mutedChanged: function(oldValue, newValue){
				var vid = this.$.video;

				if ( newValue ) {
					vid.setAttribute('muted', '');
				} else {
					vid.removeAttribute('muted');
				}
			}
		});
	</script>
</polymer-element>

<!--
# The RTC Peer
This is a view and model representing each remote peer within the chat room.
Each peer has a peerID which denotes where we should get the stream from.
Essentially this is just a remote wrapper around rtc-person.
-->
<polymer-element name="rtc-peer" attributes="peerID streaming muted">
	<template>
		<rtc-person streamURI="{{streamURI}}" snapshotURI="{{snapshotURI}}" streaming="{{streaming}}" muted="{{muted}}" />
	</rtc-person>
	<script>
		Polymer.register('rtc-person', {
			streamURI: null,
			snapshotURI: null,
			peerIDChanged: function(oldValue, newValue){
				if ( newValue ) {
					// fetch the stream and snapshot for the peerID
				}
			}
		});
	</script>
</polymer-element>

<!--
# The RTC Room Panel
This is the display for our people within the chat room.
Talking people are arranged first. They will be displayed big (TODO).
Then it is ourself. Then the people streaming whom aren't muted.
Then the people streaming whom are muted.
Then finally, everyone else (the people in snapshot mode).
-->
<polymer-element name="rtc-room-panel">
	<template>
		<content select="[talking]"></content>
		<content select="rtc-person"></content>
		<content select="rtc-peer[streaming]:not([muted])"></content>
		<content select="rtc-peer[streaming][muted]"></content>
		<content select="*"></content>
	</template>
	<script>Polymer.register('rtc-room-panel');</script>
</polymer-element>

<!--
# The RTC Room
This handles our connection to the room, and our connections to our peers.
It also handles management of the streams, snapshots, etc.
It's the logic behind the RTC Room Panel view.
-->
<polymer-element name="rtc-room" attributes="roomID">
	<template>
		<rtc-room-panel>
			<rtc-person id="me" streaming muted capture="camera"></rtc-person>
			<rtc-peer peerID="..." streaming></rtc-peer>
			<rtc-peer peerID="..."></rtc-peer>
			<rtc-peer peerID="..."></rtc-peer>
			<rtc-peer peerID="..."></rtc-peer>
		</rtc-room-panel>
	</template>
	<script>
		Polymer.register('rtc-room', {
			roomID: null
		});
	</script>
</polymer-element>

<!--
# The RTC App & Room Initialised
This is us initialising our room and it working with all the magic.
-->
<rtc-app signaller="http://rtc.io/switchboard/">
	<rtc-room roomID="testing"></rtc-room>
</rtc-app>