Commit ccf0dd2e authored by Daniel Dertoni's avatar Daniel Dertoni
Browse files

Merge branch 'release/0.3.0'

No related merge requests found
Showing with 711 additions and 554 deletions
+711 -554
main.less 0 → 100644
.call-ring {
position: absolute;
top: 35%;
left: ~"calc(50% - 77px)";
.pulse {
width: 150px;
height: 150px;
border: 5px solid rgb(69, 90, 100);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background-color:rgb(84,110,122);
z-index: 10;
position: absolute;
-webkit-animation: viber 1.75s ease-out;
-moz-animation: viber 1.75s ease-out;
animation: viber 1.75s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.pulse md-icon{
opacity: 0.8;
font-size: 66px;
height: 96px;
width: 96px;
line-height: 1;
margin: 25px;
}
.dot {
border: 20px solid #464646;
background: transparent;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 100%;
height: 500px;
width: 500px;
-webkit-animation: pulse 1.75s ease-out;
-moz-animation: pulse 1.75s ease-out;
animation: pulse 1.75s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: -185px;//(metade do .dot - metade do pulse + metade da borda)
left: -185px;
z-index: 1;
opacity: 0;
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(0);
opacity: 0.0;
}
25% {
-moz-transform: scale(0);
opacity: 0.1;
}
50% {
-moz-transform: scale(0.1);
opacity: 0.3;
}
75% {
-moz-transform: scale(0.5);
opacity: 0.5;
}
100% {
-moz-transform: scale(1);
opacity: 0.0;
}
}
@-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
15% {
-webkit-transform: scale(0.2);
opacity: 0.1;
}
45% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}
@-moz-keyframes viber {
0% {
-moz-transform: scale(0);
opacity: 0.0;
}
5% {
-moz-transform: scale(0);
opacity: 0.1;
}
10% {
-moz-transform: scale(0.1);
opacity: 0.3;
}
15% {
-moz-transform: scale(0.5);
opacity: 0.5;
}
100% {
-moz-transform: scale(1);
opacity: 0.0;
}
}
@-webkit-keyframes "viber" {
0% {
-webkit-transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
}
15% {
-webkit-transform: scale(1);
}
20% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
}
}
}
This diff is collapsed.
{
"name": "webrtc-core",
"version": "0.2.0",
"description": "Angular webrtc component and nextRTC service",
"private": true,
"scripts": {
"postinstall": "typings install"
},
"repository": {
"type": "git",
"url": "https://git.tecgraf.puc-rio.br/gis-evolutix/webrtc-core.git"
},
"author": "Tecgraf/PUC-Rio",
"bugs": {
"url": "https://git.tecgraf.puc-rio.br/gis-evolutix/webrtc-core/issues"
},
"homepage": "https://git.tecgraf.puc-rio.br/gis-evolutix/webrtc-core",
"peerDependencies": {
"angular": "~1.5.0",
"jquery": "^3.1.1",
"typescript": "^2.0.3",
"properties-service":"git+https://git@git.tecgraf.puc-rio.br/gis-web/properties-service#0.1.0"
}
}
{
"name": "webrtc-core",
"version": "0.3.0",
"description": "Angular webrtc component and nextRTC service",
"private": true,
"scripts": {
"postinstall": "typings install"
},
"repository": {
"type": "git",
"url": "https://git.tecgraf.puc-rio.br/gis-evolutix/webrtc-core.git"
},
"author": "Tecgraf/PUC-Rio",
"bugs": {
"url": "https://git.tecgraf.puc-rio.br/gis-evolutix/webrtc-core/issues"
},
"homepage": "https://git.tecgraf.puc-rio.br/gis-evolutix/webrtc-core",
"peerDependencies": {
"angular": "~1.5.0",
"jquery": "^3.1.1",
"typescript": "^2.0.3",
"properties-service":"git+https://git@git.tecgraf.puc-rio.br/gis-web/properties-service#0.1.0"
}
}
ring-tone.mp3 0 → 100644
File added
<div layout="column" layout-align="center center">
<div flex style="width:640px; height:480px; display:block; background-color: #333; margin:10px; position:relative;" >
<video id="localVideo" autoplay width="160" height="120" ng-show="$ctrl.showLocal" style="position:absolute; bottom:10px; right:10px; z-index: 2;"></video>
<video id="remoteVideo" height="480" flex="100" autoplay ng-show="$ctrl.showRemote" style="position: relative;z-index: 1;margin: 0 auto;display: inherit;"></video>
<div style="position:absolute; bottom:10px; width: 100%; height: 90px;" layout="row" layout-align="center center">
<md-button ng-if="$ctrl.incomingCall" ng-click="$ctrl.answer()" ng-style="{'background-color': '#42bd41'}" class="md-fab" style="z-index: 2;">
<md-icon class="material-icons" style="color:white;">call</md-icon>
</md-button>
<md-button ng-if="$ctrl.incomingCall" ng-click="$ctrl.reject()" class="md-fab md-warn" style="z-index: 2;">
<md-icon class="material-icons" style="color:white;">call_end</md-icon>
</md-button>
<md-button ng-if="$ctrl.calling" ng-click="$ctrl.cancel()" class="md-fab md-warn" style="z-index: 2;">
<md-icon class="material-icons" style="color:white;">call_end</md-icon>
</md-button>
<md-button ng-if="$ctrl.onCall" ng-click="$ctrl.hangUp()" class="md-fab md-warn" style="z-index: 2;">
<md-icon class="material-icons" style="color:white;">call_end</md-icon>
</md-button>
</div>
</div>
<div layout="column" layout-align="center center">
<div flex style="width:640px; height:480px; display:block; background-color: #333; margin:10px; position:relative;" >
<video id="localVideo" autoplay width="160" height="120" ng-show="$ctrl.showLocal" style="position:absolute; bottom:10px; right:10px; z-index: 3;"></video>
<video id="remoteVideo" height="480" flex="100" autoplay ng-show="$ctrl.showRemote" style="position: relative;z-index: 1;margin: 0 auto;display: inherit;"></video>
<div ng-if="$ctrl.incomingCall" style="z-index: 2;">
<div class="call-ring">
<div class="dot"></div>
<div class="pulse">
<md-icon class="material-icons" md-svg-src="{{$ctrl.iconPath}}"></md-icon>
</div>
</div>
</div>
<div style="position:absolute; bottom:10px; width: 100%; height: 90px;" layout="row" layout-align="center center">
<md-button ng-if="$ctrl.incomingCall" ng-click="$ctrl.answer()" ng-style="{'background-color': '#42bd41'}" class="md-fab" style="z-index: 2;">
<md-icon class="material-icons" style="color:white;">call</md-icon>
</md-button>
<md-button ng-if="$ctrl.incomingCall" ng-click="$ctrl.reject()" class="md-fab md-warn" style="z-index: 2;">
<md-icon class="material-icons" style="color:white;">call_end</md-icon>
</md-button>
<md-button ng-if="$ctrl.calling" ng-click="$ctrl.cancel()" class="md-fab md-warn" style="z-index: 2;">
<md-icon class="material-icons" style="color:white;">call_end</md-icon>
</md-button>
<md-button ng-if="$ctrl.onCall" ng-click="$ctrl.hangUp()" class="md-fab md-warn" style="z-index: 2;">
<md-icon class="material-icons" style="color:white;">call_end</md-icon>
</md-button>
</div>
</div>
</div>
\ No newline at end of file
/// <reference path="declarations.d.ts" />
import "./nextRTC.ts";
import {NextRTC} from './nextRTC';
import * as angular from 'angular';
export class WebrtcComponent {
callTo: string;
incomingCallEvent: any;
localVideo: HTMLElement;
remoteVideo: HTMLElement;
showLocal: boolean;
showRemote: boolean;
incomingCall: boolean;
onCall: boolean;
calling: boolean;
currentConvId: string;
answerConvId: string;
answerTo: string;
constructor(private nextRTC: NextRTC,
private $scope: ng.IScope,
private $timeout: ng.ITimeoutService) {
this.localVideo = document.getElementById('localVideo');
this.remoteVideo = document.getElementById('remoteVideo');
this.showLocal = false;
this.showRemote = false;
this.onCall = false;
this.incomingCall = false;
this.calling = false;
//When you make a call and it's answered
this.nextRTC.on('joined', (event) => {
this.$scope.$apply(() => {
this.calling = false;
this.onCall = true;
});
});
//When you receive a call and answer it
this.nextRTC.on('newJoined', (event) => {
this.$scope.$apply(() => {
this.incomingCall = false;
this.onCall = true;
this.showLocal = true;
});
});
this.nextRTC.on('rejected', (event) => {
this.$timeout(() => {
this.onClose();
}, 2000);
});
this.nextRTC.on('canceled', (event) => {
this.$scope.$apply(() => {
this.onLostCall({event: event});
this.onClose();
});
});
this.nextRTC.on('incomingCall', (event) => {
this.$scope.$apply(() => {
this.onLostCall({event: event});
this.nextRTC.reject(event.content, event.from, null);
});
});
this.nextRTC.on('left', (event) => {
this.$scope.$apply(() => {
this.nextRTC.release(event.from);
this.onClose();
});
});
this.nextRTC.on('localStream', (stream) => {
this.$scope.$apply(() => {
this.localVideo["srcObject"] = stream.stream;
this.localVideo["muted"] = true;
this.showLocal = true;
});
});
this.nextRTC.on('remoteStream', (stream) => {
this.$scope.$apply(() => {
this.remoteVideo["srcObject"] = stream.stream;
this.showRemote = true;
});
});
this.nextRTC.on('error', (event) => {
});
}
$onInit() {
if(this.callTo != null) {
this.nextRTC.callUser(this.callTo, null);
this.currentConvId = this.callTo;
this.calling = true;
}
else if(this.incomingCallEvent != null) {
this.answerTo = this.incomingCallEvent.from;
this.answerConvId = this.incomingCallEvent.content;
this.currentConvId = this.incomingCallEvent.content;
this.incomingCall = true;
}
}
answer() {
this.nextRTC.answerCall(this.answerConvId, this.answerTo, null);
this.onAnswer({convId: this.answerConvId});
}
reject() {
this.nextRTC.reject(this.answerConvId, this.answerTo, null);
this.onClose();
}
cancel() {
this.nextRTC.cancel(this.currentConvId, null);
this.onClose();
}
hangUp() {
this.nextRTC.leave(this.currentConvId, null);
this.onClose();
}
onClose() {
}
onLostCall(event) {
}
onAnswer(convId) {
}
}
angular
.module('webrtc.component', ['imports','nextrtc'])
.component('webrtc', {
template: require('./webrtc.component.html'),
controller: WebrtcComponent,
bindings: {
callTo: '<',
incomingCallEvent: '<',
onClose: '&',
onLostCall: '&',
onAnswer: '&'
}
/// <reference path="declarations.d.ts" />
import "./nextRTC.ts";
import {NextRTC} from './nextRTC';
import * as angular from 'angular';
import "./main.less";
const ringtonePath = require('file!webrtc-core/ring-tone.mp3');
export class WebrtcComponent {
callTo: string;
incomingCallEvent: any;
iconPath: string;
localVideo: HTMLElement;
remoteVideo: HTMLElement;
ringtone: HTMLAudioElement;
showLocal: boolean;
showRemote: boolean;
incomingCall: boolean;
onCall: boolean;
calling: boolean;
currentConvId: string;
answerConvId: string;
answerTo: string;
constructor(private nextRTC: NextRTC,
private $scope: ng.IScope) {
this.localVideo = document.getElementById('localVideo');
this.remoteVideo = document.getElementById('remoteVideo');
this.ringtone = new Audio(ringtonePath);
this.ringtone.loop = true;
this.showLocal = false;
this.showRemote = false;
this.onCall = false;
this.incomingCall = false;
this.calling = false;
//When you make a call and it's answered
this.nextRTC.on('joined', (event) => {
this.$scope.$apply(() => {
this.calling = false;
this.onCall = true;
});
});
//When you receive a call and answer it
this.nextRTC.on('newJoined', (event) => {
this.$scope.$apply(() => {
this.incomingCall = false;
this.onCall = true;
this.showLocal = true;
});
});
this.nextRTC.on('rejected', (event) => {
this.onClose();
this.nextRTC.clearLocalStream();
});
this.nextRTC.on('canceled', (event) => {
this.$scope.$apply(() => {
this.onLostCall({event: event});
this.onClose();
});
});
this.nextRTC.on('incomingCall', (event) => {
this.$scope.$apply(() => {
this.onLostCall({event: event});
this.nextRTC.reject(event.content, event.from, null);
});
});
this.nextRTC.on('left', (event) => {
this.$scope.$apply(() => {
this.nextRTC.release(event.from);
this.onClose();
});
});
this.nextRTC.on('localStream', (stream) => {
this.$scope.$apply(() => {
this.localVideo["srcObject"] = stream.stream;
this.localVideo["muted"] = true;
this.showLocal = true;
});
});
this.nextRTC.on('remoteStream', (stream) => {
this.$scope.$apply(() => {
this.remoteVideo["srcObject"] = stream.stream;
this.showRemote = true;
});
});
this.nextRTC.on('error', (event) => {
});
}
$onInit() {
if(this.callTo != null) {
this.nextRTC.callUser(this.callTo, null);
this.currentConvId = this.callTo;
this.calling = true;
}
else if(this.incomingCallEvent != null) {
this.ringtone.play();
this.answerTo = this.incomingCallEvent.from;
this.answerConvId = this.incomingCallEvent.content;
this.currentConvId = this.incomingCallEvent.content;
this.incomingCall = true;
}
}
answer() {
this.nextRTC.answerCall(this.answerConvId, this.answerTo, null);
this.onAnswer({convId: this.answerConvId});
this.ringtone.pause();
}
reject() {
this.nextRTC.reject(this.answerConvId, this.answerTo, null);
this.onClose();
this.ringtone.pause();
}
cancel() {
this.nextRTC.cancel(this.currentConvId, null);
this.onClose();
}
hangUp() {
this.nextRTC.leave(this.currentConvId, null);
this.onClose();
}
onClose() {
}
onLostCall(event) {
}
onAnswer(convId) {
}
}
angular
.module('webrtc.component', ['imports','nextrtc'])
.component('webrtc', {
template: require('./webrtc.component.html'),
controller: WebrtcComponent,
bindings: {
callTo: '<',
incomingCallEvent: '<',
onClose: '&',
onLostCall: '&',
onAnswer: '&',
iconPath: '<'
}
});
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment