openvidu-call-ionic

Check it on GitHub

OpenVidu Call Ionic demo, built with Ionic v4 and Angular 6, allows users to make videoconference calls in theirs devices with many of the capabilities integrated by OpenVidu platform. It is a frontend-only application.

OpenVidu-Call-Ionic is composed by the five Angular components displayed in the image below.

Nowadays, we need to take account that we are developing our code with Ionic v4-beta. This means that is a preview version of Ionic 4 and it could has sporadics problems due to it is a inestable version.

Bugs reported:
  • Android 5 and 6.0 will not work with Ionic v4-beta until this issue is solved
  • This app will not work in iOS because of problems between WebRTC and iOS


  • Running this demo

    Using the browser

    1) Clone the repo:

    git clone https://github.com/OpenVidu/openvidu-call-ionic.git
    

    2) You will need ionic-cli (and of course node 8.9 or greater) to serve the Ionic app. You can install it with the following command:

    npm install -g ionic@latest
    

    3) Run the tutorial:

    cd openvidu-call-ionic
    npm install
    ionic serve
    

    4) openvidu-server and Kurento Media Server must be up and running in your development machine. The easiest way is running this Docker container which wraps both of them (you will need Docker CE):

    docker run -p 4443:4443 --rm -e openvidu.secret=MY_SECRET openvidu/openvidu-server-kms:2.6.0
    

    5) Go to localhost:8100 to test the app once the server is running. The first time you use the docker container, an alert message will suggest you accept the self-signed certificate of openvidu-server when you first try to join a video-call.

    6) To show the app with the device appearance, press F12 button in your keyboard and the browser DevTool will be opened.

    7) Then, you can find a button with a device icon at the top of the browser page. Pressing this button, you should see the device appearance and it will allow you choose your favourite device.


    If you are using Windows, read this FAQ to properly run the tutorial

    To learn some tips to develop with OpenVidu, check this FAQ

    Using the Android apk in an Android device

    To deploy the apk Android not only you need to have Java JDK8, Android Studio and Android SDK installed but also you have to set up the specific environment variables. Fortunately, Ionic provide us a great guide to allows us to configure step by step all the requirements.

    After we have finished the Ionic tutorial, we must have to follow these steps:

    1) Clone the repo:

    git clone https://github.com/OpenVidu/openvidu-call-ionic.git
    

    2) You will need ionic-cli (and of course node 8.9 or greater) to serve the Ionic app. You can install it with the following command:

    npm install -g ionic@latest
    

    3) Connect the device to the same network as the PC.

    4) Establishing the same WIFI in both devices, you need to know IP of your PC in the network. For know that, you can execute ifconfig in your command shell and you will can find something like 192.168.0.105.

    Your public_url will be https://192.168.0.105 with the port 4443 (https://192.168.0.105:4443).

    Finally, you will must set the OPENVIDU_SERVER_URL variable in the app and the openvidu.publicurl parameter used to run openvidu-server with your public_url and the port.

    5) openvidu-server and Kurento Media Server must be up and running in your development machine. The easiest way is running this Docker container which wraps both of them (you will need Docker CE):

    docker run -p 4443:4443 --rm -e openvidu.secret=MY_SECRET -e openvidu.publicurl="your_public_url":4443 openvidu/openvidu-server-kms:2.6.0
    

    6) Connect the device to the PC. You can check if your device is authoriced with the adb devices command.

    7) Run the tutorial:

    cd openvidu-call-ionic
    npm install
    ionic cordova run android
    
    To deploy apps to an Android device and debug them, developer mode must be enabled and allow for USB debugging turned on. Check out these instructions to do this on a device.