Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@sbeleidy
sbeleidy committed May 21, 2016
1 parent d025534 commit d393e40
Show file tree
Hide file tree
Showing 4 changed files with 212 additions and 33 deletions.
5 changes: 5 additions & 0 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
root = true

[*]
indent_style = space
indent_size = 2
21 changes: 13 additions & 8 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,32 @@
{
"name": "webrtc-video",
"version": "1.0.7",
"version": "0.0.1",
"authors": [
"Anonymous <anonymous@example.com>"
"Will in China <email.will.in.china@gmail.com>",
"Saad Elbeleidy <sbeleidy90@gmail.com>"
],
"description": "An element providing a solution to no problem in particular.",
"description": "An element displaying video from a user's stream",
"keywords": [
"web-component",
"polymer",
"seed"
"seed",
"webrtc",
"getUserMedia"
],
"main": "webrtc-video.html",
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/<USERNAME>/seed-element/",
"license": "MIT",
"homepage": "https://github.com/convoo/webrtc-video",
"ignore": [
"/.*",
"/test/"
],
"dependencies": {
"polymer": "Polymer/polymer#^1.2.0"
"polymer": "Polymer/polymer#^1.2.0",
"webrtc-stream": "^0.0.1",
"live-video": "^0.0.2"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"web-component-tester": "^4.0.0"
}
}
}
68 changes: 60 additions & 8 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,70 @@
<!doctype html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>webrtc-video Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../webrtc-video.html">
</head>
<body unresolved>
</head>
<body unresolved>
<dom-module id="demo">
<template is="dom-bind" id="demo-template">
<p>An example of <code>&lt;webrtc-video&gt;</code>:</p>
<webrtc-video></webrtc-video>
</template>
<template is="dom-bind" id="demo-template">

<div style="padding: 10px; margin:5px;">
You can edit the &#60;webrtc-video&#62; element by updating the following inputs:<br>
<label>Debug</label><input type="checkbox" checked="{{debug::change}}"><br>
<label>Canvas</label><input type="checkbox" checked="{{canvas::change}}"><br>
<label>Mute</label><input type="checkbox" checked="{{mute::change}}"><br>
<label>Disable</label><input type="checkbox" checked="{{disable::change}}"><br>
<label>Mirror</label><input type="checkbox" checked="{{mirror::change}}"><br>
<label>Maintain Aspect Ratio</label><input type="checkbox" checked="{{ar::change}}"><br>
<label>Width</label><input type="number" value="{{width::input}}" min="0"><br>
<label>Height</label><input type="number" value="{{height::input}}" min="0"><br>
<label>Volume</label><input type="range" min="0" max="1" step="0.05" value="{{volume::change}}"><br>
<label>CSS Filter</label>
<select value="{{filter::change}}">
<option value="">None</option>
<option value="grayscale">Grayscale</option>
<option value="blur">Blur</option>
<option value="sepia">Sepia</option>
<option value="tint">Tint</option>
<option value="inkwell">Inkwell</option>
<option value="hue-rotate">Hue Rotate</option>
<option value="invert">Invert</option>
<option value="saturate">Saturate</option>
<option value="sharpen">Sharpen</option>
</select><br>

<label>Canvas Filter</label>
<select value="{{canvasFilter::change}}">
<option value="">None</option>
<option value="grayscale">Grayscale</option>
<option value="blur">Blur</option>
<option value="sepia">Sepia</option>
<option value="tint">Tint</option>
<option value="inkwell">Inkwell</option>
<option value="hue-rotate">Hue Rotate</option>
<option value="invert">Invert</option>
<option value="saturate">Saturate</option>
<option value="sharpen">Sharpen</option>
</select><br>
</div>

<webrtc-video
debug="{{debug}}"
canvas= "{{canvas}}"
mute="{{mute}}"
disable="{{disable}}"
mirror="{{mirror}}"
width="{{width}}"
height="{{height}}"
volume="{{volume}}"
css-filter="{{filter}}"
canvas-filter="{{canvasFilter}}"
maintain-aspect-ratio="{{ar}}"></webrtc-video>

</template>
</dom-module>
</body>
</body>
</html>
151 changes: 134 additions & 17 deletions webrtc-video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<link rel="import" href="../live-video/live-video.html">

<!--
An element providing access to a user's getUserMedia stream and displaying the video
An element displaying video from a user's stream
Example:
Expand All @@ -15,30 +15,147 @@

<dom-module id="webrtc-video">
<template>
<style>
<style>
:host {
display: block;
box-sizing: border-box;
width: 400px;
height: 400px;
display: block;
box-sizing: border-box;
}
</style>
<webrtc-stream stream="{{stream}}"></webrtc-stream>
<p>{{stream}}</p>
<live-video
src$="{{stream}}"
width="200"
height="200"
mirror="false"
mute="false"
disable="false"
>
</live-video>
<live-video
src="{{stream}}"
debug="{{debug}}"
canvas= "{{canvas}}"
mute="{{mute}}"
disable="{{disable}}"
mirror="{{mirror}}"
width="{{width}}"
height="{{height}}"
volume="{{volume}}"
css-filter="{{cssFilter}}"
canvas-filter="{{canvasFilter}}"
fps = {{fps}}
maintain-aspect-ratio="{{maintainAspectRatio}}"></live-video>
</template>

<script>
Polymer({
is: 'webrtc-video',
is: 'webrtc-video',
properties: {
/**
* `width` indicates the width of the video display,
*/
width: {
type: Number,
value:320,
notify: true,
reflectToAttribute: true,
},

/**
* `height` indicates the height of the video display,
*/
height: {
type: Number,
value:180,
notify: true,
reflectToAttribute: true,
},

/**
* `mirror` indicates whether the video display is mirrored.
*/
mirror: {
type:Boolean,
notify: true,
reflectToAttribute: true,
},

/**
* `mute` indicates whether the audio is muted on the video display,
*/
mute: {
type:Boolean,
notify: true,
reflectToAttribute: true,
},

/**
* `disable` indicates whether the video is stopped,
*/
disable: {
type:Boolean,
notify: true,
reflectToAttribute: true
},
/**
* `maintain-aspect-ratio` indicates whether the video will keep the source's aspect ratio or use entered height and width.
* Initially, if selected, the height/width will be set to 0.75. In order to work off of the video source this must be used
* later on.
*/
maintainAspectRatio: {
type:Boolean,
notify: true,
reflectToAttribute: true,
},
/**
* `src` is the source of the video,
*/
src: {
type:String,
notify: true,
reflectToAttribute: true
},
/**
* `volume` is a value between 0 and 1 specifying the volume of the video player,
*/
volume: {
type: Number,
notify: true,
reflectToAttribute: true,
},
/**
* `debug` displays the debug values for the video feed,
*/
debug: {
type:Boolean,
notify: true,
reflectToAttribute: true
},
/**
* `filter` specifies the active filter on the video display, Available options are: grayscale, blur, sepia, tint, inkwell, hue-rotate, invert, saturate, sharpen
*/
cssFilter: {
type:String,
notify: true,
reflectToAttribute: true,
},
/**
* `canvasFilter` specifies the active filter on the canvas display, Available options are: grayscale, blur, sepia, tint, inkwell, hue-rotate, invert, saturate, sharpen
*/
canvasFilter: {
type:String,
notify: true,
reflectToAttribute: true,
},
/**
* `canvas` specifies whether you are using a canvas or html video element
*/
canvas: {
type:Boolean,
notify: true,
reflectToAttribute: true
},
/**
* `fps` (frames per second) specifies the number of images (frames) that are sent to the canvas per second
* Requires canvas set to true.
*/
fps: {
type:Number,
notify: true,
reflectToAttribute: true
},
}
});
</script>
</dom-module>

0 comments on commit d393e40

Please sign in to comment.