ionic-video-chat-support icon indicating copy to clipboard operation
ionic-video-chat-support copied to clipboard

Read this for missing setup advice

Open therealjimwolff opened this issue 6 years ago • 1 comments

Just purchased this and had to go through a lot of setup to get this going on a MacBook Pro under macOS 10.14.1. Of course you have to have NODE.js and NPM and IONIC and CORDOVA and MONGODB installed so you can google that easy enough. But for the ionic-video-chat-3.0.1-bundle:

To get the server ready

cd [YOURPATHTOFOLDER]/ionic-video-chat-server-1.2.0 npm install

Once you get MONGODB installed, start it from another Terminal window using

mongod --config /usr/local/etc/mongod.conf

Then from a Terminal window at ionic-video-chat-server-1.2.0

npm start

Now you have 2 terminal windows running. Check your Networking system preference to determine the IP address of your machine running this server. You will need this IP address to configure ionic-video-chat-v2-3.0.1 project before starting anything in it.

cd [YOURPATHTOFOLDER]/ionic-video-chat-v2-3.0.1

config.xml changes: You need to edit the config.xml file to enter your server IP address. Also critical first step here is to update the Application name and bundle name to correspond to your identity/company for eventual signing (e.g. com.yourcompanyname.ionic-video-chat-3) or whatever name, but it will have to be able to be signed using this and its not easy to change later, so this is the best time to do it. Also you could change the product description or other as you want here. A server IP address is near the end of the file. I don't know why this allow-navigation is needed since earlier there is one seemingly allowing anything, but I changed it anyway. Also there was missing plugins for native audio and status bar so its easy add them here rather than later when you find an error message.

<allow-navigation href="http://192.168.0.15:8100" />
<plugin name="cordova-plugin-nativeaudio" spec="3.0.9" />
<plugin name="cordova-plugin-statusbar" spec="2.4.2" />

config.ts changes: Edit src/app/config.ts and most importantly change the IP address for your server from the 192.168.0.15 to your IP address that MongoDB and the server side are running in those two Terminal windows from earlier.

Now from the ionic-video-chat-v2-3.0.1 directory you are ready to:

npm install

You will see lots of errors about fsevents1.1.2 and other things, but some are optional and it seems to still kind of work afterwards. I spent a lot of time trying to track down how to fix these, but this project has lots of problems and warnings using the latest of everything, so we can edit this after other specific important things are addressed, but it should work even with some of the errors you get.

next do the:

ionic cordova platform add ios ionic cordova resources ios ionic cordova platform rm ios ionic cordova platform add ios

Fixing the project to sign stuff and launch on iOS phones and pads: Xcode automatic signing is great and works most of the time in most cases, but there are some issues with cordova, and I had some issues locally with multiple profiles etc I had to clean up. Run:

security find-identity -v -p codesigning

To see if you have multiple extra profiles to clean up. I had to go into Key Chain and delete any extra old, expired, or duplicates and kept only the latest ones. I also went to developer.apple.com and manually created an APP ID matching my bundle name and provisioning profiles for development and distribution because I had to switch between automatic and manual to get around some issues. So once you think you are "clean" and ready to go, open up the workspace for the iOS "platforms/ios/ionic-video-chat-3.xcworkspace"

I was having issues running it on an iPad device (it was reporting an entitlement mismatch), but could run it on iPhone and was getting this mismatched provisioning entitlements that was driving me crazy. Cleaning up all my Keychain and following the steps from the start to get the right bundle name with my signing stuff was critical because there can be mismatched ones throughout hard to find if you don't do it from the start from the config.xml file.

So in the project General settings, edit the bundle Id to match the config.xml you did and the code signing you plan on doing. Then, critically, in the capabilities I found I had to turn on GameKit and inAppPurchase since these are automatically enabled all the time in the developer portal nowadays so they have to match otherwise you can have entitlements issues like I had when installing on an old iPad (the iPhone and any simulators didn't complain).

I did manually signing, so here you will have to either download or get from the developer portal the provisioning profiles you made for development and distribution. But you will use the development one for now to get it going and signed for testing on the real device. Once this was all set up for manual signing:

ionic cordova build ios -- --buildFlag="-UseModernBuildSystem=0"

The ionic cordova build ios alone wasn't working and having signing problems and after google and seeing other ionic cordova people suffering the same signing issues on Xcode 10, this seemed to do the trick. There seems to be an issue creating a .ipa signed that can be sent to the App Store for sale and approval. It seems at some point you might have to turn on Automatic Signing and running the build again to get it to fully build and signed. You may or may not get this to work either way in the command line.

Then you should be able to from Xcode target your device and run and test it on your device.

Remember as always with ionic and cordova stuff edit the stuff in the root folder code, as you'll have to transpile your changes to the iOS side in some cases.

cordova prepare cordova compile iOS

or

cordova build

(and then Xcode launch onto your device)

Anyway, there are lots of other ways to do some of the things above, but anyway this is how I got it running to start. You know it works when you see a login screen asking for a name and password.

When you see the login screen in the running project it means it found your server. You enter a name and password, and it creates an account if it doesn't already exist. You then can do this on another device and have them both logged in. Then you can go to the contacts and select someone to start a video call (e.g the other logged in device). I haven't been able to get the chat to work yet, but I'm sure I'll stumble across something in the code soon or read all the comments hear to give me a clue as to why the chat is problematic for me at this point. Google Chrome developer mode will come in handy here with the right plugins (ionic, react, vue etc as needed).

When doing the video and audio for the first time your iOS device will ask for permission. The server helps the two sides through ICE/STUN servers get a peer to peer connection to start the WebRTC (iosrtc) media streaming connection. You will of course get horrible audio feedback if both of your devices are in each hand at the time, so maybe keep the volume down.

I would like to figure out next why the chat button doesn't seem to function, and also how a group video call would work that would be cool to see and I thought I read that the project might support it so I hope that's indeed the case?

Any other secrets to getting this thing working to the extent it is supposed to function at all would be greatly appreciated from anyone. Look forward to learning a lot from this code. I hope it is still supported fingers crossed.

therealjimwolff avatar Nov 14 '18 05:11 therealjimwolff

If am trying to make a call and in opponent device if the app is not opened, will it give call notification like native calling?

dilipwk avatar Nov 21 '19 03:11 dilipwk