A Novice Journey of integrating Huawei Video Kit feat. Node js Local Server (An Educational Video Application)

Introduction

HMS Video Kit allow us to play video by using a URL or multiple URLs that contain an address of a video. The latest version of this kit allow us to playback videos but in the later version it will support both editing and hosting of videos.

Use Cases

  1. The service can be used in a news app that contains small videos of the reported incident.
  2. The service can be used as a video editing app.
  3. The service can be used as a promotion video in your application.
  4. The service can be used as an educational video related application.

Demo

Server Side (Node Server)

Prerequisite

  1. We must have latest version of Node installed.
  2. We must have latest version of Visual Studio Code installed.
  3. Laptop/desktop and Huawei mobile device must share same Wi-Fi connection.

Tool’s required

1. Express js is a Node js web application server framework, designed for building single-page, multi-page, and hybrid web applications. It is the de facto standard server framework for node.js.

const request = require('request');
request(' https://developer.huawei.com/consumer/en/', function(err, res, body) {
console.log(body);
});

Creating Project

First we need to find a space in our machine and create a folder. We can name the folder whatever we want. Open Visual Studio Code, navigate to particular folder location which we created using cd command in the terminal of VS code. Run the below command to create package.json file.

{"name": "android-node-server","version": "1.0.0","description": "It is a server for HMS Push Notification Kit","main": "app.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "Sanghati","license": "ISC"}

Install Express

We run the below command to install Express js in our project.

Create app.js file

To create app.js file using VS code terminal we need touch. Touch command creates an empty file if it doesn’t exist. Run the below command to create app.js file.

npm install -g touch-cli
touch app.js

Import Express

Open app.js in our favourite text editor, in my case VS Code. Import Express into our application:

const express = require('express');
const app = express();

Create & Run Server

After importing Express, we have to create a server where applications and API calls can connect. We can do that with Express listen method.

app.listen(8080, () => {
console.log('app working on 8080')
});

Install Nodemon

We will get tired of restarting our server every time we make any changes. We can fix this problem by using a package called Nodemon. Run below command to install nodemon globally.

Adding Routes

Now let’s create a route that we can access in the browser. Browsers only serve pages using a GET request, so we need to create a route using Express get method like this:

app.get('/', function(req, res) {res.send("Yep it's working");});
const express = require('express');
const app = express();
const MongoClient = require('mongodb').MongoClient;
const bodyParser = require('body-parser');
//Body Parser ...app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

Middleware

Middleware functions can access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. These functions are used to modify req and res objects for tasks like parsing request bodies, adding response headers, etc. Here we have used it only for a specific path.

app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/img'));
app.use(express.static(__dirname + '/videos'));

Placing Videos

We need to place all our videos in a video server folder as shown below:

GET HTTP

We will be using GET HTTP verb to send all videos from local server to android client. Let’s create our get route.

Client Side (Android Native)

Prerequisite

  1. Must have a Huawei Developer Account.
  2. Must have a Huawei phone with HMS 4.0.0.300 or later.
  3. Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.

Settings Needed

  1. First we need to create an app or project in the Huawei app gallery connect.
  2. Provide the SHA Key and App Package name of the android project in App Information Section.
  3. Provide storage location in convention section under project setting.
  4. After completing all the above points we need to download the agconnect-services.json from App Information Section. Copy and paste the json file in the app folder of the android project.
  5. Copy and paste the maven url inside the repositories of buildscript and allprojects respectively (project build.gradle file)
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.REQUEST_INSTALL_PACKAGES” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<uses-permission android:name=”android.permission.ACCESS_WIFI_STATE” />

Retrofit Library

We need Retrofit in order to call our restful APIs. Include the following dependencies in app build.gradle file.

implementation ‘com.squareup.retrofit2:retrofit:2.8.1’
implementation ‘com.squareup.retrofit2:converter-gson:2.5.0’

Create Model Class

Create a new java class and name it Videos. Open Videos class, copy and paste below code:

Create RetrofitInterface

Create a new Interface class and name it RetrofitInterface. Open the class, copy and paste below code:

Create Retrofit Instance

Create a retrofit instance in the MainActivity class and get the list of all videos from local server as shown below:

Show all video list

Use SimpleAdapter with ListView to show all the list as shown below:

Initializing WisePlayer

First we need to implement a class that inherits from Application. In onCreate() method we need to initialize WisePlayerFactory.initFactory() of the WisePlayer SDK. This class is primarily used for initialization of global state before the first Activity is displayed.

User Interface

There are two widgets in which WisePlayer use to play the videos:

Implements

In the ShowVideo class, implement WisePlayer.ReadyListener and Callback APIs as shown below:

import android.view.SurfaceHolder.Callback;
import com.huawei.hms.videokit.player.WisePlayer;

public class ShowVideo extends AppCompatActivity implements WisePlayer.ReadyListener, Callback

SurfaceView Widget Implementation

Initialize SurfaceView in onCreate() method and add layout listeners as show below:

surfaceView = findViewById(R.id.surface_view);
SurfaceHolder surfaceHolder = surfaceView.getHolder();
surfaceHolder.addCallback(this);
surfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);

Create WisePlayer Instance

A WisePlayerFactory instance is returned from Application class when the WisePlayer initialization is successful.

WisePlayer player = HMSVideoKitApplication.getWisePlayerFactory().createWisePlayer();

Playback Parameters

Set the playback parameters as shown below:

player.setVideoType(PlayerConstants.PlayMode.PLAY_MODE_NORMAL);
player.setBookmark(0);
player.setCycleMode(PlayerConstants.CycleMode.MODE_NORMAL);

Set URL’s

We can set one or multiple URL’s video by using setPlayUrl method as show below:

player.setPlayUrl(getIntent().getStringExtra("url"));

Display the Video

Set a view to display the video as shown below:

@Override
public void surfaceCreated(SurfaceHolder holder) {
player.setView(surfaceView);
}

Play the Video

btnPlay.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v)
{
player.start();
}
});

Pause the Video

btnPause.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
player.pause();
}
});

Stop the Video

btnStop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
player.stop();
}
});

Tricks

An error will occur while using local server with android client and that is “CLEARTEXT communication to 192.168.1.4 not permitted by network security policy”. In order to avoid this error put android:usesCleartextTraffic=”true” in AndroidManifest application section.

Conclusion

We learn how to create a local server, create API to call the list of all the videos on the client side and show the video using HMS Video Kit. It does not take more than a day to integrate the entire scenario. I hope after reading this article we will get to see more beautiful application in AppGallery.

For more reference

https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/introduction-0000001050439577

An Android Developer