Skip to main content

Twilio Video Adobe Native Extension - Build your extension - Part 3

By now, you will be having your interface and android library. If you missed how to build interface, look here. If you missed android library building, check our here.

Now let us integrate both code to have our extension.

Create extension directory

Create a directory named extension which will hold both wrapper and android libraries and will generate the extension.
Create a sub directory named android.

Copy wrapper library

Copy our wrapper library TwilioVideo.swc to extension directory. Also copy library.swf to android folder.

Copy android library

Next copy android library(jar type file found in build/classes/artifacts/{artifact name} of your android project) to android directory.

Copy android resource files

Our extension need JNI files used by Twilio video to be added as a resource. So download your approriate twilio video version aar file from https://jcenter.bintray.com/com/twilio/video-android/

Now unzip the downloaded aar file and create a directory named libs inside android directory in extension folder. You will find a jni folder inside unzipped aar file. Copy all directories inside jni folder to newly created libs folder.

Next, we need to add our video activity layout file because adobe cannot access android library resource files directly. Create a directory name res in android folder. Next, create another directory inside layout inside res folder.
Copy your activity_view.xml file from android project to newly created layout file. Rename copied file to name specified as layoutId(exclude layout. word) in call method in VideoFunction.java in android library. Keep file type as xml.

Create extension configuration file

Create a xml file named extensions.xml. Add below code to create xml file

<?xml version="1.0"?>



<extension xmlns="http://ns.adobe.com/air/extension/16.0">

  <id>ijasnahamed.twilio.video</id>

  <versionNumber>1.0</versionNumber>



  <platforms>

    <platform name="Android-ARM">

      <applicationDeployment>

        <nativeLibrary>Android.jar</nativeLibrary>

        <initializer>ijasnahamed.twilio.video.VideoExtension</initializer>

      </applicationDeployment>

    </platform>

  </platforms>

</extension>

Text inside id tag will be used to include extension in your adobe air app. nativeLibrary text will have jar file name inside android directory which will be the generated artifact.
initializer will be the FREExtension class that will be called to get extension context. In our case, it will be VideoExtension.java

Build your extension

Execute below command to generate final extension

adt -package -target ane TwilioVideo.ane extension.xml -swc TwilioVideo.swc -platform Android-ARM -C android .

This will generate TwilioVideo.ane file which can be integrated to your Adobe AIR app project.



Check ijasnahamed > Twilio Video > extension to get an example extension.

Popular posts from this blog

Setup Asterisk 13 with FreePBX 13 in CentOS 7

Launch CentOS 7 AWS Ec2 InstanceLog in to your aws consoleGo to ec2 management page and click Launch Instance on Instance pageIn Choose AMI step, go to AWS MarketPlace tab and search CentOS 7 on search field. List of centos 7 ami's will be available.Select CentOS 7 (x86_64) ami which is free tier eligible. Select your instance type and click configure instance. Keep default values from Configure Instance to Add Tags stepsIn configure security group, create a security group which allow minimum ports openSSH : port 22HTTP : port 80Custom UDP Rule : 10000-20000 (if you are giving RTP ports 10000-20000)Custom UDP Rule : 5060 (ChanSIP port)Custom TCP Rule : 5060 (ChanSIP Port)Click Launch Instance. Select your key file and accept terms to launch instance.
Setup CentOS Server SSH into newly created CentOS server with username centos and your key file.Update all existing packagessudo yum update -yNow start http service(you can access your server via browser by going to your server ip addres…

Implementing Client Side WebRTC using Sipml5 javascript

Step 1:

Download and require Sipml5 library function.

Step 2:

Initialize sipml5 Engine in your web page :

var readyCallback = function(e) {
// function called when sipml is successfully initialised.
createSipStack(); // calling this function to create sip stack(see below)
};

var errorCallback = function(e) {
// function called when error occured during sipml initialisation.
};

SIPml.init(readyCallback, errorCallback);

Step 3:

Create Sip Stack :-
Sip Stack is an object that must be created before making/receiving call and sms. Creating Sip stack is an asynchronous process, so you need to create an event listener function to get state change notification.

var sipStack;

function EventListener(e) {

/*
* e.type ;type of event listener
* e.session ; current event session
* e.getSipResponseCode() ; event response code
* e.description ; event description
*/

if(e.type == 'started'){
// successfully started the stack.
register();
} else if(e.type == 'i_new_call'){
// when new incoming call comes.
      …

Multiple file upload using ajax with progress bar

Uploading multiple files using ajax makes a pleasant feeling to the user. It makes even more happier if upload progress status is printed with percentage.

            In this blog, you will make a file upload form using ajax with file upload progress bar.

Prerequisites :

1) Javascript supported browser
2) LAMP Server / XAMPP Server

Code :

index.html

<!DOCTYPE html>

<html>

<head>

    <title>Multiple File Upload using Ajax</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

</head>

<body>

    <div>

        <form action="action.php" method="post" enctype="multipart/form-data" id="multiple-upload-form">

            <input type="button" id="select-file-btn" value="Select Files" onclick="document.getElementById(…