sipwise
/
ngcp-csc
mirror of https://github.com/sipwise/ngcp-csc.git
1
0
Fork 0
Code Issues Releases Wiki Activity

TT#21087 Call: Catch remote media stream and show the media element on the call panel

Browse Source 
- Call: Show local video preview on the call panel
- Disabled contacts

Change-Id: I4961030c35fa775d7ff7e9decf5973a161599178
changes/50/15250/2
Hans-Peter Herzog 8 years ago
parent fc01360f13
commit aa9eaf2b23
5 changed files with 146 additions and 58 deletions
Show Stats Download Patch File Download Diff File

7
classic/sass/src/view/common/rtc/RtcPanel.scss
Unescape View File

@ -81,6 +81,13 @@ $border-radius : 50%;
bottom: 0px;
left: 2px;
}
.icon-normal {
display: block;
font-size: 16px;
line-height: 18px;
width: 100%;
}
}

83
classic/src/view/common/rtc/CallPanel.js
Unescape View File

@ -1,12 +1,10 @@
Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.call-panel',
padding: '60 0 0 0',
bind: {
hidden: true
},
hidden: true,
items: [{
reference: 'outgoingCallState',
padding: '40 0 0 0',
layout: {
type: 'vbox',
align: 'center',
@ -15,17 +13,20 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
hidden: true,
items: [{
reference: 'outgoingCallLabel',
xtype: 'label',
hidden: false
xtype: 'label'
},
{
reference: 'outgoingCallPeer',
xtype: 'label',
margin: '0 0 20 0',
userCls: 'call-number-label',
hidden: false
},
{
},{
reference: 'outgoingCallMedia',
hidden: true,
padding: '0 0 20 0',
width: '100%',
html: '<video id="outgoing-call-media" autoplay style="width: 100%"></video>'
},{
xtype: 'button',
userCls: 'call-button call-button-cancel call-button-hangup',
overCls: 'call-button-cancel-over',
@ -41,6 +42,7 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
]
}, {
reference: 'callAbortedState',
padding: '40 0 0 0',
hidden: true,
layout: {
type: 'vbox',
@ -72,6 +74,7 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
},
{
reference: 'incomingCallState',
padding: '40 0 0 0',
layout: {
type: 'vbox',
align: 'center',
@ -130,6 +133,68 @@ Ext.define('NgcpCsc.view.common.rtc.CallPanel', {
}
}]
}]
},{
reference: 'acceptedCallState',
padding: '0 0 0 0',
hidden: true,
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [{
reference: 'acceptedRemoteMedia',
hidden: true,
padding: '0 0 0 0',
width: '100%',
html: '<video id="accepted-remote-media" autoplay style="width: 100%"></video>'
}, {
reference: 'acceptedLocalMedia',
hidden: true,
padding: '20 0 20 0',
width: '33%',
html: '<video id="accepted-local-media" autoplay style="width: 100%"></video>'
},{
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
items: [{
xtype: 'button',
margin: '0 10 0 0',
userCls: 'call-button call-button-accept',
overCls: 'call-button-accept-over',
focusCls: 'call-button-accept-focus',
width: 40,
height: 40,
html: '<i class="x-fa fa-microphone icon-normal"></i></i>',
listeners: {
}
}, {
xtype: 'button',
margin: '0 10 0 0',
userCls: 'call-button call-button-accept',
overCls: 'call-button-accept-over',
focusCls: 'call-button-accept-focus',
width: 40,
height: 40,
html: '<i class="x-fa fa-video-camera icon-normal"></i></i>',
listeners: {
}
}, {
xtype: 'button',
userCls: 'call-button call-button-cancel call-button-hangup',
overCls: 'call-button-cancel-over',
focusCls: 'call-button-cancel-focus',
width: 40,
height: 40,
html: '<i class="x-fa fa-phone call-icon-cancel"></i>',
listeners: {
}
}]
}
]
}
]
});

105
classic/src/view/common/rtc/RtcController.js
Unescape View File

@ -41,6 +41,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
this.getOutgoingCallState().hide();
this.getCallAbortedState().hide();
this.getIncomingCallState().hide();
this.getView().lookupReference('acceptedCallState').hide();
},
cleanupCall: function(reason) {
@ -81,6 +82,15 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
}
},
getMyNumber: function() {
var parts = this.getCall().network.getUser().split('@')[0].split(':');
if(parts.length > 1) {
return parts[1];
} else {
return parts[0];
}
},
composeCall: function() {
if(!this.isCallRunning()) {
this.showComposer();
@ -131,26 +141,12 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
$vm.set('rtcEngineCall', network.call(callee, {
localMediaStream: localMediaStream
}));
// TODO attach stream to video element. Uncomment and
// implement video element to attach to in panel
// if (mediaType === 'video') {
// var mediaElementHelper = new cdk.MediaElementHelper(localMediaStream);
// mediaElementHelper.getDomNode(function(err, domNode){
// if (domNode) {
// cdk.MediaElementHelper.attachStreamToDomNode(
// domNode,
// localMediaStream
// );
// $ct.attachDomNodeToElement(domNode);
// };
// });
// };
$vm.get('rtcEngineCall')
.onPending(function () { $ct.outgoingPending(); })
.onAccepted(function () { $ct.outgoingAccepted(); })
.onRingingStart(function () { $ct.outgoingRingingStart(); })
.onRingingStop(function () { $ct.outgoingRingingStop(); })
.onRemoteMedia(function (stream) { $ct.outgoingRemoteMedia(); })
.onRemoteMedia(function (stream) { $ct.outgoingRemoteMedia(stream); })
.onRemoteMediaEnded(function () { $ct.outgoingRemoteMediaEnded(); })
.onEnded(function () { $ct.outgoingEnded(); });
}).catch(function (err) {
@ -164,7 +160,7 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
var localMediaStream;
localMediaStream = new cdk.LocalMediaStream();
localMediaStream.queryMediaSources(function(sources){
if(mediaType === 'audio') {
if(mediaType === 'audio' || mediaType === 'video') {
localMediaStream.setAudio(sources.defaultAudio);
}
if(mediaType === 'video') {
@ -263,17 +259,34 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
});
},
attachStreamToDomNode: function(id, stream, muted) {
$ct = this;
document.getElementById(id).onplaying = function(){ $ct.getView().updateLayout(); };
cdk.MediaElementHelper.attachStreamToDomNode(document.getElementById(id), stream);
if(muted) {
document.getElementById(id).muted = true;
}
},
outgoingPending: function() {
console.log('outgoingCallPending');
var localMediaStream = this.getViewModel().get('rtcEngineLocalMediaStream');
this.showCallPanel();
this.hideAllCallStates();
this.getOutgoingCallState().show();
this.getOutgoingCallLabel().setHtml('Try to call ' + Ngcp.csc.animations.loading_dots);
this.getView().lookupReference('outgoingCallPeer').setText(this.getPeer());
if(localMediaStream.hasVideo()) {
this.getView().lookupReference('outgoingCallMedia').show();
this.attachStreamToDomNode('outgoing-call-media', localMediaStream, true);
} else {
this.getView().lookupReference('outgoingCallMedia').hide();
}
},
outgoingAccepted: function() {
console.log('outgoingCallAccepted');
this.showAcceptedState();
},
outgoingRingingStart: function() {
@ -287,8 +300,10 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
this.stopRingSound();
},
outgoingRemoteMedia: function(stream) {
outgoingRemoteMedia: function(remoteMediaStream) {
console.log('outgoingCallRemoteMedia');
this.getViewModel().set('rtcEngineRemoteMediaStream', remoteMediaStream);
this.showRemoteMedia(remoteMediaStream);
},
outgoingRemoteMediaEnded: function() {
@ -313,11 +328,10 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
this.getView().lookupReference('callIncomingPeer').setText(this.getPeer());
},
incomingRemoteMedia: function(stream) {
incomingRemoteMedia: function(remoteMediaStream) {
console.log('incomingRemoteMedia');
var $vm = this.getViewModel();
console.log('stream variable in incomingRemoteMedia:', stream);
$vm.set('rtcEngineRemoteMediaStream', stream);
this.getViewModel().set('rtcEngineRemoteMediaStream', remoteMediaStream);
this.showRemoteMedia(remoteMediaStream);
},
incomingRemoteMediaEnded: function() {
@ -343,18 +357,36 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
this.showComposer();
},
showAbortedState: function (reason) {
showAcceptedState: function() {
$ct = this;
$vm = $ct.getViewModel();
var localMediaStream = $vm.get('rtcEngineLocalMediaStream');
this.hideAllCallStates();
this.showCallPanel();
this.getView().lookupReference('acceptedCallState').show();
if(localMediaStream.hasVideo()) {
this.getView().lookupReference('acceptedLocalMedia').show();
this.attachStreamToDomNode('accepted-local-media', localMediaStream, true);
}
},
showRemoteMedia: function(stream) {
this.getView().lookupReference('acceptedRemoteMedia').show();
this.attachStreamToDomNode('accepted-remote-media', stream, false);
},
showAbortedState: function (by, reason) {
this.hideAllCallStates();
this.getCallAbortedState().show();
this.showCallPanel();
this.getView().lookupReference('callAbortedPeer').setText(
Ext.String.format(Ngcp.csc.locales.rtc.call_aborted_by[localStorage.getItem('languageSelected')],
this.getPeer()
by || this.getPeer()
)
);
this.getView().lookupReference('callAbortedReason').setText(
Ext.String.format(Ngcp.csc.locales.rtc.abort_reason[localStorage.getItem('languageSelected')],
this.getCall().endedReason
reason || this.getCall().endedReason
)
);
},
@ -396,12 +428,6 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
this.closeRtcPanel();
},
attachDomNodeToElement: function (domNode) {
console.log('attachDomNodeToElement');
var element = document.getElementById('call-local-preview');
element.appendChild(domNode);
},
acceptCallVideo: function () {
this.acceptCall('video');
},
@ -414,18 +440,13 @@ Ext.define('NgcpCsc.view.common.rtc.RtcController', {
var $ct = this;
var $vm = this.getViewModel();
var call = $vm.get('rtcEngineCall');
var localMediaStream = new cdk.LocalMediaStream();
localMediaStream.queryMediaSources(function(sources) {
if(mediaType === 'audio') {
localMediaStream.setAudio(sources.defaultAudio);
}
if(mediaType === 'video') {
localMediaStream.setVideo(sources.defaultVideo);
}
call.accept({
localMediaStream: localMediaStream
});
this.createMedia(mediaType).then(function(localMediaStream){
$vm.set('rtcEngineLocalMediaStream', localMediaStream);
call.accept({ localMediaStream: localMediaStream });
$ct.showAcceptedState();
}).catch(function(err){
$ct.cleanupCall();
$ct.showAbortedState($ct.getMyNumber(), 'mediaAccessDenied');
});
}
});

4
classic/src/view/common/rtc/RtcPanel.js
Unescape View File

@ -7,8 +7,8 @@ Ext.define('NgcpCsc.view.common.rtc.RtcPanel', {
controller: 'rtc',
viewModel: 'rtc',
padding: '0 0 0 1',
width: '30%',
padding: '0 0 0 0',
closable: true,
collapseDirection: 'left',
cls: 'rtc-panel',

5
classic/src/view/main/Main.js
Unescape View File

@ -158,11 +158,6 @@ Ext.define('NgcpCsc.view.main.Main', {
xtype: 'rtc',
itemId: 'webrtcPanel',
hidden: true
}, {
width: 350,
resizable: Ext.os.is.Desktop,
xtype: 'contacts',
ui: 'core-container'
}]
}]
}];

Write Preview
Loading…
Cancel
Save