OpenTok Ionic 3 - publisher.cycleVideo function not found - ionic-framework

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.

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);

Related

Flutter Web error TypeError: dart.global.firebase.analytics is not a function

I am using a previously created firebase mobile application that is fully functioning with firebase at the mobile level, however, when I attempt to run it as a chrome page it doesn't seem to work, and when compiling triggers the error listed in the title. Flutter Doctor displays everything is working correctly and that chrome is a listed device. When attempting to build the web page a blank screen appears in a chrome window.
TypeError: dart.global.firebase.analytics is not a function
at Object.analytics$ [as analytics] (http://localhost:59823/packages/firebase/src/top_level.dart.lib.js:114:102)
at new firebase_analytics_web.FirebaseAnalyticsWeb.new (http://localhost:59823/packages/firebase_analytics_web/firebase_analytics_web.dart.lib.js:70:64)
at Function.registerWith (http://localhost:59823/packages/firebase_analytics_web/firebase_analytics_web.dart.lib.js:29:82)
at Object.registerPlugins (http://localhost:59823/packages/reminder_application/generated_plugin_registrant.dart.lib.js:23:49)
at main (http://localhost:59823/web_entrypoint.dart.lib.js:34:35)
at main.next (<anonymous>)
at runBody (http://localhost:59823/dart_sdk.js:39260:34)
at Object._async [as async] (http://localhost:59823/dart_sdk.js:39291:7)
at main$ (http://localhost:59823/web_entrypoint.dart.lib.js:33:18)
at http://localhost:59823/main_module.bootstrap.js:19:10
at Array.forEach (<anonymous>)
at window.$dartRunMain (http://localhost:59823/main_module.bootstrap.js:18:32)
at <anonymous>:1:8
at Object.runMain (http://localhost:59823/dwds/src/injected/client.js:8824:21)
at http://localhost:59823/dwds/src/injected/client.js:22712:19
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:59823/dwds/src/injected/client.js:3850:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:59823/dwds/src/injected/client.js:11062:12)
at Object._asyncStartSync (http://localhost:59823/dwds/src/injected/client.js:3814:20)
at main__closure1.$call$body$main__closure (http://localhost:59823/dwds/src/injected/client.js:22724:16)
at main__closure1.call$1 (http://localhost:59823/dwds/src/injected/client.js:22651:19)
at StaticClosure._rootRunUnary [as call$2$5] (http://localhost:59823/dwds/src/injected/client.js:4184:16)
at _CustomZone.runUnary$2$2 (http://localhost:59823/dwds/src/injected/client.js:12435:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:59823/dwds/src/injected/client.js:12382:14)
at _ControllerSubscription._sendData$1 (http://localhost:59823/dwds/src/injected/client.js:11958:19)
at _DelayedData.perform$1 (http://localhost:59823/dwds/src/injected/client.js:12147:59)
at _PendingEvents_schedule_closure.call$0 (http://localhost:59823/dwds/src/injected/client.js:12196:14)
at Object._microtaskLoop (http://localhost:59823/dwds/src/injected/client.js:4022:24)
at StaticClosure._startMicrotaskLoop (http://localhost:59823/dwds/src/injected/client.js:4028:11)
at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1 (http://localhost:59823/dwds/src/injected/client.js:10931:9)
at invokeClosure (http://localhost:59823/dwds/src/injected/client.js:1258:26)
at MutationObserver.<anonymous> (http://localhost:59823/dwds/src/injected/client.js:1277:18)```
You need to follow the guide for web installation before expecting it work.
Add the following to the body of your index.html:
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "...",
authDomain: "[YOUR_PROJECT].firebaseapp.com",
databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
projectId: "[YOUR_PROJECT]",
storageBucket: "[YOUR_PROJECT].appspot.com",
messagingSenderId: "...",
appId: "1:...:web:...",
measurementId: "G-...",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
You need to add the script for each SDK you use. The above just shows the basics for analytics.

Ionic 4 PWA - Capacitor and Camera plugin weird behavyour

I am trying to take pictures from an Ionic 4 PWA application.
I read this docs from Ionic team and implemented all the proposed steps... (https://capacitor.ionicframework.com/docs/guides/ionic-framework-app/)
The (weird) result can be seen in the picture below:
When the camera prompt seen in this picture is shown, Chrome console prints out an object called MediaStreamTrack with this values:
kind: "video"
id: "6250dfa4-d9aa-4a87-ab9f-ae085f929c3f"
label: "screen-capture-recorder"
enabled: true
muted: false
onmute: null
onunmute: null
readyState: "live"
onended: null
contentHint: ""
proto: MediaStreamTrack
When I click in the button to take picture, I can see this message:
Unable to take photo! DOMException: setOptions failed - pwa-camera.entry.js:259
I have used the sample code the Ionic team presented in the docs:
export class Tab2Page {
photo: SafeResourceUrl;
constructor(
private sanitizer: DomSanitizer
) { }
async takePicture() {
const image = await Plugins.Camera.getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.DataUrl,
source: CameraSource.Camera
});
this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
}
}
And...
<ion-content>
<img [src]="photo">
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
I changed everything in this code trying to figure out what is going wrong, but nothing seem to fix this behavyour.
Can anyone point me in the right direction?
My Chrome version is 79.0.3945.79
Thanks in advance.

How to fix No component factory found for NgxMaterialTimepickerContainerComponent error?

I'm using ngx-material-timepicker in my project.when I use the latest 5.2.2, I'm getting the following error
ng:///NgxMaterialTimepickerModule/NgxMaterialTimepickerToggleComponent.n
gfactory.js:13 ERROR Error: No component factory found for NgxMaterialTimepickerContainerComponent. Did you add it to #NgModule.entryComponents?
at noComponentFactoryError (:4401/vendor.js:87649)
at CodegenComponentFactoryResolver.resolveComponentFactory (:4401/vendor.js:87714)
at DomService.appendTimepickerToBody (:4401/main-exams-exams-module.js:8424)
at NgxMaterialTimepickerComponent.open (:4401/main-exams-exams-module.js:8848)
at NgxMaterialTimepickerToggleComponent.open (:4401/main-exams-exams-module.js:8994)
at Object.eval [as handleEvent] (ng:///NgxMaterialTimepickerModule/NgxMaterialTimepickerToggleComponent.ngfactory.js:19)
at handleEvent (:4401/vendor.js:103240)
at callWithDebugContext (:4401/vendor.js:104859)
at Object.debugHandleEvent [as handleEvent] (:4401/vendor.js:104494)
at dispatchEvent (:4401/vendor.js:90327)
But when I downgraded to version 4.0.0 it worked perfectly.
// module page
import { NgModule } from '#angular/core';
import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
#NgModule({
declarations: [appComponent ],
imports: [NgxMaterialTimepickerModule]
]
})
html
<div>
<ngx-material-timepicker-toggle [for]="defaultValue"></ngx-material-timepicker-toggle>
<ngx-material-timepicker #defaultValue></ngx-material-timepicker>
<input aria-label="default time" [ngxTimepicker]="defaultValue" [value]="'05:11 pm'" required readonly>
</div>
Can someone help me with the latest version?
I was facing the same error and was able to fix it. Since you are using lazy load of angular you need to import NgxMaterialTimepickerModule in your app.module as well.

Asking for account linking in Google Actions v2 fails "ReferenceError: SignIn is not defined"

I'm migrating the code over and i can't get my account linking sign in process to work. After looking at the documentation and code i don't see any error in the way i'm calling SignIn().
I've also made sure to update action.json and add the v2 account linking stuff in there, and my app always had account linking working so the account linking section in the Console is up to date. I'm using Action SDK and not Dialogflow.
const {actionssdk} = require('actions-on-google');
const app = actionssdk({debug: true});
app.intent('actions.intent.MAIN', conv => {
conv.ask(new SignIn())
})
app.intent('actions.intent.SIGN_IN', (conv, input, signin) => {
if (signin.status === 'OK') {
const access = conv.user.access.token // possibly do something with access token
conv.ask('Great, thanks for signing in! What do you want to do next?')
} else {
conv.ask(`I won't be able to save your data, but what do you want to do next?`)
}
})
module.exports.assistant = app;
Logs:
ReferenceError: SignIn is not defined
at app.intent.conv (/usr/local/lucida/web/client-apps/src/routes/google_home.js:4:16)
at Function.<anonymous> (/usr/local/lucida/web/client-apps/node_modules/actions-on-google/dist/service/actionssdk/actionssdk.js:138:23)
at next (native)
at /usr/local/lucida/web/client-apps/node_modules/actions-on-google/dist/service/actionssdk/actionssdk.js:22:71
at __awaiter (/usr/local/lucida/web/client-apps/node_modules/actions-on-google/dist/service/actionssdk/actionssdk.js:18:12)
at Function.handler (/usr/local/lucida/web/client-apps/node_modules/actions-on-google/dist/service/actionssdk/actionssdk.js:85:16)
at Object.<anonymous> (/usr/local/lucida/web/client-apps/node_modules/actions-on-google/dist/assistant.js:55:32)
at next (native)
at /usr/local/lucida/web/client-apps/node_modules/actions-on-google/dist/assistant.js:22:71
at __awaiter (/usr/local/lucida/web/client-apps/node_modules/actions-on-google/dist/assistant.js:18:12)
at standard (/usr/local/lucida/web/client-apps/node_modules/actions-on-google/dist/assistant.js:51:41)
at /usr/local/lucida/web/client-apps/node_modules/actions-on-google/dist/framework/express.js:23:13
at omni (/usr/local/lucida/web/client-apps/node_modules/actions-on-google/dist/assistant.js:44:53)
at Layer.handle [as handle_request] (/usr/local/lucida/web/client-apps/node_modules/express/lib/router/layer.js:95:5)
at next (/usr/local/lucida/web/client-apps/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/usr/local/lucida/web/client-apps/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/usr/local/lucida/web/client-apps/node_modules/express/lib/router/layer.js:95:5)
at /usr/local/lucida/web/client-apps/node_modules/express/lib/router/index.js:281:22
at param (/usr/local/lucida/web/client-apps/node_modules/express/lib/router/index.js:354:14)
at param (/usr/local/lucida/web/client-apps/node_modules/express/lib/router/index.js:365:14)
at Function.process_params (/usr/local/lucida/web/client-apps/node_modules/express/lib/router/index.js:410:3)
at next (/usr/local/lucida/web/client-apps/node_modules/express/lib/router/index.js:275:10)
You should include SignIn when you import the library:
const {actionssdk, SignIn} = require('actions-on-google');

Error in OauthCordova when test in device

I did an authentication using OauthCordova to enter Instagram. When I use the application in Ionic DevApp, authentication works. But when I try to run the application on the device (using ionic cordova run android --device) I get an error.
The function:
toLogin(event) {
this.oauth.logInVia(this.instagram).then((success) => {
this.localStorageProvider.setAccessToken(success);
this.isLogged();
}, (error) => {
this.toast.create(
{
message: 'Erro ao efetuar login. Tente novamente.',
position: 'botton',
duration: 5000
}).present();
console.log(JSON.stringify(error, Object.getOwnPropertyNames(error)));
console.log((error));
});;
}
Output:
console.log: {"stack":"Error: The Apache Cordova InAppBrowser plugin was not found and is required\n at
ensureEnvIsValid (http://192.168.1.7:8100/build/vendor.js:134774:15)\n at
http://192.168.1.7:8100/build/vendor.js:134792:17\n at new t
(http://192.168.1.7:8100/build/polyfills.js:3:20886)\n at OauthCordova.openDialog
(http://192.168.1.7:8100/build/vendor.js:134790:16)\n at OauthCordova.Oauth.logInVia
(http://192.168.1.7:8100/build/vendor.js:82756:21)\n at LoginPage.webpackJsonp.107.LoginPage.toLogin
(http://192.168.1.7:8100/build/main.js:104:20)\n at Object.eval [as handleEvent]
(ng:///LoginPageModule/LoginPage.ngfactory.js:23:31)\n at handleEvent
(http://192.168.1.7:8100/build/vendor.js:12380:138)\n at callWithDebugContext
(http://192.168.1.7:8100/build/vendor.js:13850:42)\n at Object.debugHandleEvent [as handleEvent]
(http://192.168.1.7:8100/build/vendor.js:13438:12)","message":"The Apache Cordova InAppBrowser plugin was
not found and is required","__zone_symbol__currentTask":{}}
console.log:
{"__zone_symbol__currentTask":{"type":"microTask","state":"notScheduled","source":"Promise.then","zone":"angular","cancelFn":null,"runCount":0}}