Polymer

Low-Level RTC.io API

<rtc-media 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

<polymer-element name="rtc-person" attributes="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>

<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>

<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>

<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>

<rtc-room roomID="testing"></rtc-room>