We have changed the video app repository to be a fork of the general starter app to make it simpler to manage specific derived apps. Please clone the new video repo again - or if you for some reason want to stick with the old repo, change the remote's URL to https://github.com/nabto/ionic-starter-nabto-video-deprecated.
This Ionic Starter demonstrates how to use AppMyProduct for building a video player app. It contains everything to build a production ready IoT app to remote control your own product:
- Device management through local discovery and bookmarks for later access
- RSA fingerprint based pairing of local devices with app for secure remote access
- On-device access control and user management (self-contained, no need for any central configuration)
- Example page for a video player
- Takes full benefit of the Nabto framework to ensure secure, high performance remote access
Note that the player in this first version is extremely simple and is only capable of showing MJPG streams, suitable for a simple webcam like described in this tutorial.
You can try a pre-built version of the app for iOS and Android, search for "AppMyProduct Video".
The product specific customization takes place through ./src/pages/mjpg-player (in the near future a more advanced player component will be added). The app uses the Nabto Cordova Plugin and adds a simpler to use TypeScript and Promise based wrapper (./src/app/nabto.service.ts).
To try the app, a video source is need - for instance, follow this tutorial to setup a webcam on an RPI. Next, install a uNabto Tunnel on the device - this is outlined in TEN030 Nabto Tunnels. A more easily accessible blog post describing all necessary steps will soon be published on our blog.
Please upgrade to at least Ionic 2.2.2 to use the current version of this starter (or you will see a Ionic Storage related failure).
On a typical developer workstation, an app can be built with the following steps from this directory:
git clone https://github.com/nabto/ionic-starter-nabto-video.git
sudo ./scripts/ios-install.sh
./scripts/ios-build.sh
./scripts/ios-emulate.shSee more detailed outline below.
- Node and NPM must be installed (either through your package manager or from nodejs.org).
- Xcode must be installed
- install cordova:
sudo npm install cordova -g - install ionic:
sudo npm install ionic -g - to enable running on device:
sudo npm install -g ios-deploy --unsafe-perm=true - to enable running on simulator:
sudo npm install -g ios-sim - add the iOS Cordova platform:
ionic cordova platform add ios
Odd problems during deploy / run can sometimes apparently be remedied by uninstalling ios-deploy and ios-sim and re-installing. Specifically as of June 2017, a problem is often seen with a Cordova javascript error when launching the simulator. The problem can be remedied by running npm install ios-sim in platforms/ios/cordova (odd why this makes a difference, but it seems to work).
Only necessary first time and when changing native plugin configuration:
ionic cordova prepare ios
# fix linker problem when using Nabto lib
echo 'OTHER_LDFLAGS = -force_load $(BUILT_PRODUCTS_DIR)/libCordova.a -lstdc++' >> \
platforms/ios/cordova/build.xcconfig
ionic cordova build iosThe following requires the device to be connected with USB and screen must be unlocked:
ionic cordova run ios --livereload -c -s --debug --deviceor run on in the simulator:
ionic cordova emulate ios --livereload -c -s --debugLive reload is enabled, allowing you to instantly observe changes in HTML app source files (*.ts, *.html. *.scss). While very handy during development, this also means the app will not work on a device that is disconnected from the workstation or if the ionic server is stopped. So if you have problems with the app hanging after start, remove the --livereload parameter.
The first time the app is attempted to be run, an error is observed about developer/provisining profile - open the project in xcode and select a profile (also see the troubleshooting section):
./scripts/ios-open-xcode.shSubsequently, the run command above can be used.
On a typical developer workstation, an app can be built with the following steps from this directory:
sudo ./scripts/android-install.sh
./scripts/android-build.sh
./scripts/android-emulate.shNote that for the last step, an Android emulator image must have been configured with adb.
- Node and NPM must be installed (either through your package manager or from nodejs.org).
- Android Studio must be installed and an emulator device configured
- install cordova:
sudo npm install cordova -g - install ionic:
sudo npm install ionic -g - add the Android Cordova platform :
ionic platform add android@latest
Note that at least version 6.1.1 of cordova-android is necessary as indicated if using Android 7 or newer (otherwise you will see an app signing error).
Only necessary first time and when changing native plugin configuration:
ionic cordova prepare android
ionic cordova build androidThe following requires the device to be connected with USB:
ionic run android --livereload -c -s --debug --deviceor run using an already configured emulator (note: the emulator is not very useful as it only supports GSM, meaning that bootstrapping through local device discovery does not work):
ionic emulate android --livereload -c -s --debugLive reload is enabled, allowing you to instantly observe changes in HTML app source files (*.ts, *.html. *.scss). While very handy during development, this also means the app will not work on a device that is disconnected from the workstation or if the ionic server is stopped. So if you have problems with the app hanging after start, remove the --livereload parameter.
This has been observed if using an app deployed with the
--livereload parameter without being able to reach the live reload
server. So the solution is to either run the app without
--livereload or start the server again (see section "Running" above).
It can also be caused by some critical errors in the app at startup - with modern Ionic tools, this should no longer be an issue though, such errors would be expclitly reported. If you still observe the problem, it might yield useful information to attach the Safari web debugger and view the console.
This problem is often observed when using developer builds - the longer initial startup time is a good tradeof for shorter subsequent build cycles where AOT optimizations are not performed.
With a production build (ionic run --prod), the startup time is
optimized greatly, reducing the initial delay to an insignificant short
time.
When using the Ionic resources
tool
(ionic resource --splash and ionic resource --icon), sometimes
really odd errors about a server upload are seen: The tool uploads
icon and splash base images to a server to slice and dice to match the
individual platform requirements. When the server chokes on input, it
just says "upload error".
So check your input .png files if this error is observed: Compression should be enabled, interlacing must be disabled.
make sure you have the latest versions of npm and nodejs:
apt-get update && apt-get install npm
npm install npm -g
curl -sL https://deb.nodesource.com/setup_6.x | bash -
apt-get install nodejs
You may need a symbolic link from nodejs to node:
RUN ln -s /usr/bin/nodejs /usr/bin/node
A linker error like the following means you missed a step in the installation procedure:
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
Showing first 200 notices only
Showing first 200 errors only
** ARCHIVE FAILED **
The following build commands failed:
Ld /Users/nabto/Library/Developer/Xcode/DerivedData/AMP_Heat-befzuqlqcagkojfbuvacxskkiqvh/Build/Intermediates/ArchiveIntermediates/AMP\ Heat/IntermediateBuildFilesPath/AMP\ Heat.build/Debug-iphoneos/AMP\ Heat.build/Objects-normal/arm64/AMP\ Heat normal arm64
You need to update the linker settings to force load the Cordova library:
echo 'OTHER_LDFLAGS = -force_load $(BUILT_PRODUCTS_DIR)/libCordova.a -lstdc++' >> \
platforms/ios/cordova/build.xcconfigThe first time you attempt to run the app, you will see the following error:
Error: Error code 65 for command: xcodebuild with args: ..." ... " Signing for "AMP Heat" requires a development team. Select a development team in the project editor"
Before the app can be run, a team must be selected for the project in XCode. If you are new to iOS app development, please see section "iOS Devices" in the Ionic deployment docs for further instructions.
To fix, open the XCode project:
./scripts/ios-open-xcode.shClick the project name in the left pane ("AMP Heat" per default) and the corresponding target that appears. On the "General" tab in the "Signing" section, pick a team and a profile.
Use at least Android 6.1.1 when deploying for Android 7+:
ionic platform add android@6.1.1If you have Android Studio installed, open the sdk manager from Tools->Android->SDK manager and accept licenses as needed. If you only have the Android command line sdk installed, update the SDK manually with:
android update sdk --no-ui --all --filter build-tools-25.0.1,android-25,extra-android-m2repository
and accept license agreement when prompted.
set the android environment variables manually:
export ANDROID_HOME=/path/to/android-sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
HAXM install errors on macOS when preparing emulator: Upgrade bash (even if using brew's bash).
“HAX is not working and emulator runs in emulation mode”: Re-create emulator image and be careful to always specify the same amount of memory to use when prompted and specifying on commandline.
Android SDK license errors: Make sure you have accepted the license for the specific version of the SDK that Ionic uses if multiple versions are installed (problems observed as Ionic did not support the newest SDK which was the one that had the license accepted).