OpenTok Ionic 3 - publisher.cycleVideo function not found

Question

I am using the ionic opentok plugin from this repo, https://github.com/opentok/cordova-plugin-opentok I have, of course, followed the https://github.com/opentok/opentok-cordova-samples projects and built an app. However, I am struggling with switching the camera in an ongoing video session. My code is simple, a button on the screen,

<div class="controls-btn-inner-icon" (click)="toggleCamera()">
    <ion-icon ios="md-camera" md="md-camera"></ion-icon>
</div>

and the method,

toggleCamera() {
    this.publisher.cycleVideo();
}

It gives me the error, on the Debug console,

TypeError: this.publisher.cycleVideo is not a function
        [[StableObjectId]]:3
        message:"this.publisher.cycleVideo is not a function"
        ngDebugContext:DebugContext_ {view: Object, nodeIndex: 106, nodeDef: Object, …}
        ngErrorLogger:function () { … }
        stack:"TypeError: this.publisher.cycleVideo is not a function\n    at 
    VideoSessionPage.webpackJsonp.92.VideoSessionPage.toggleCamera (http://localhost:8080/build/main.js:936:24)\n    at Object.eval [as handleEvent] (ng:///AppModule/VideoSessionPage.ngfactory.js:247:31)\n    at handleEvent (http://localhost:8080/build/vendor.js:14275:155)\n    at callWithDebugContext (http://localhost:8080/build/vendor.js:15784:42)\n    at Object.debugHandleEvent [as handleEvent] (http://localhost:8080/build/vendor.js:15371:12)\n    at dispatchEvent (http://localhost:8080/build/vendor.js:10690:25)\n    at http://localhost:8080/build/vendor.js:11315:38\n    at HTMLDivElement.<anonymous> (http://localhost:8080/build/vendor.js:40626:53)\n    at t.invokeTask (http://localhost:8080/build/polyfills.js:3:15660)\n    at Object.onInvokeTask (http://localhost:8080/build/vendor.js:5437:33)"
    __proto__:Error {constructor: , name: "TypeError", message: "", …}

`

Any help will be greatly appreciated.

Answer 1

TokBox Developer Evangelist here.

The cycleVideo method is only available using the OpenTok JS SDK. To toggle the camera when using the Cordova OpenTok Plugin, please use the following method: publisher.setCameraPosition('front'); or publisher.setCameraPosition('back');

Using the plugin, you can also initialize the Publisher object with either the front or the back camera using the cameraName property as part of the properties argument for the initPublisher method like so:

const publisherProperties = {
  cameraName: 'front',
};
const publisher = OT.initPublisher(publisherProperties);