A few small changes will make your app work. In the createViewoWindow success callback, you need to save a reference to the video object. The argument that gets passed in to the success callback function is the id of the video object, so you can call document.getElementById() to get a reference to the object:
$('#remotevideocontainer').cwic('createVideoWindow',{
id: 'videoobject',
success: function(pluginid) {
alert("video ok");
//Video object has correctly loaded
videoObj = document.getElementById(pluginid);
}
});
Make sure you declare videoObj somewhere where it will be accessible by the conversationStart event handler, because you will need it there.
In the conversationStart event handler, you need to call updateConversation to add the video window to the call. This is where you use the reference to the video object that you got in the createVideoWindow success callback. Pass it to updateConversation as the addRemoteVideoWindow parameter:
$('#container').bind('conversationStart.cwic', function(event, conversation) {
$('#callcontainer .remotename').text(conversation.participant.recipient);
$('#callcontainer').show();
$('#container').cwic('updateConversation', {
addRemoteVideoWindow: videoObj
});
});
The call to updateConversation will not work if you don't have a reference to a video object (videoObj in this case). So you need to ensure that the createVideoWindow success callback gets called before the conversationStart event handler. If the element containing the video object is not visible, the createViewWindow success callback will not get called until it becomes visible. In your application the callcontainer div is not visible when the page loads because it has the style "display: none". The video object is inside the remotevideoobject div, which is inside the callcontainer div, so it is not visible either. So I added a call to $('#callcontainer').show() after createViedeoWindow, to cause the createViewWindow success callback function to get called.
The complete page source is below:
<!DOCTYPE html>
<html>
<head>
<title>Cisco Jabber SDK Demo</title>
<style type="text/css">
body {
font-size: 12px;
}
div#callcontainer {
width:300px;
height:85px;
display:none;
background-color: #F0F8FF;
border:1px solid #aaaaaa;
}
div#callcontainer div.remotename {
float: left;
width: 300px;
height: 30px;
background-color: #D3D3D3;
}
div#callcontainer button.endbtn {
float: right;
}
div#message {
position: absolute;
right: 20px;
top:20px;
font-size: 35px;
color: #0066CC;
}
div#remotevideocontainer {
min-height: 273px;
min-width: 364px;
overflow: hidden;
background-color: #c0c0c0;
resize: both;
padding: 5px;
border: 1px solid #808080;
}
div#remotevideocontainer object {
min-height: 273px;
height: 100%;
width: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="cwic.js"></script>
<script type="text/javascript">
$(document.body).ready(function() {
var videoObj;
$('#container').cwic('init', {
ready: function() {
$('#remotevideocontainer').cwic('createVideoWindow',{
id: 'videoobject',
success: function(pluginid) {
alert("video ok");
//Video object has correctly loaded
videoObj = document.getElementById(pluginid);
}
});
$('#callcontainer').show();
$(this).cwic('registerPhone', {
user: 'user3',
cucm: '192.168.220.15',
password: '12345',
success: function() {
$('#callbtn').attr('disabled', false);
}
});
}
});
$('#callbtn').click(function() {
var num = $('#numtodial').val();
$('#container').cwic('startConversation', {
participant: { recipient: num },
videoDirection: 'SendRecv',
remoteVideoWindow: 'videoobject'
});
});
$('#container').bind('conversationStart.cwic', function(event, conversation) {
$('#callcontainer .remotename').text(conversation.participant.recipient);
$('#callcontainer').show();
$('#container').cwic('updateConversation', {
addRemoteVideoWindow: videoObj
});
});
$('#callcontainer .endbtn').click(function() {
$('#container').cwic('endConversation');
});
$('#container').bind('conversationEnd.cwic', function(event, conversation) {
$('#callcontainer').hide();
});
});
</script>
</head>
<body>
<label for="numtodial">Number to dial:</label>
<input type="text" id="numtodial">
<button type="button" id="callbtn" disabled="true">Make Call</button>
<div id="container">
<div id="callcontainer">
<div class="remotename"></div>
<button type="button" class="endbtn">End Call</button>
<div id="remotevideocontainer">
</div>
</div>
<div id="message">developer.cisco.com/web/jabber-developer/jabber</div>
</body>
</html>
