How to display a call timer (elapsed time) on video chat Opentok - Cordova

Question

First of all, I'm not sure if there's a built in call timer in Opentok. I tried searching the docs but can't find any. So I've opted for a native JavaScript sol'n by creating a function that starts the counting (client-side) as soon the video starts rendering..

function startCallTimer(){
    $interval(function(){ 
        var myTime = $scope.elapsed;
        var ss = myTime.split(":");
        var dt = new Date();
        dt.setHours(ss[0]);
        dt.setMinutes(ss[1]);
        dt.setSeconds(ss[2]); 
        var dt2 = new Date(dt.valueOf() + 1000);
        var ts = dt2.toTimeString().split(" ")[0];    
        $scope.elapsed = ts;
    }, 1000); 
  }

The timer looks ok and working. The problem starts when the video starts rendering. The call timer disappears.

My call timer is positioned on the top right corner of the page with a style of..

.call-timer{
    position: absolute;
    top: 0;
    right: 0;
    width:100px;
    z-index:100 !important;
}

Questions:

1. Is there a built-in call timer in Opentok that I do not know of?

2. If the above question is false, then what is the best way to add a call timer?

Thanks!!

Answer 1

If you want to display the counter on a mobile device using Cordova, you most know that the OpenTok video is not rendering as HTML. The cam is loaded on-top-of the Cordova Webview.

z-index will not help in anyway. You can only display timers/buttons or what so ever outside the video container.

Also see next issues about this:

• https://github.com/songz/cordova-plugin-opentok/issues/120
• https://github.com/songz/cordova-plugin-opentok/issues/133