eye detecting video player

Eye Detecting Video Player in Android Studio

In this tutorial, we’ll learn how to make an eye-detecting video player by using the third-party library “LookAtMe” in our Android application. We all know how cool an Android app can look when it can recognize our face or track whether our eyes are open or closed. 

We’ll implement the “LookAtMe” library in this application and then add a video to it. If the user’s eye is within the camera’s range, the video will continue to play, however, if the user’s eye is not within the camera’s range, the video will immediately stop.

LookAtMe is an open-source Android library that quickly generates a VideoView that you can use to determine whether the user is viewing or not.
So you’ll always know if the user viewed the video or not because LookAtMe works like this: if the video is ended, it’s mean that the video is seen by the user.

Eye detecting video player Example

XML code of LookAtMe

	<com.pd.lookatme.LookAtMe
        	android:id="@+id/lookme"
        	android:layout_width="match_parent"
        	android:layout_height="wrap_content" />

Step by Step Implementation

Step 1: Create a New Project

Step 2: Add dependencies and Repository.

Add the following dependency to the dependencies section of the build.gradle(Module:app) file.

eye detecting dependency
    //
     implementation 'com.github.Pradyuman7:LookAtMe:Version2.0'
  • In your build file, include the JitPack repository. It should be included in your root build. inside the all projects section.
eye detecting repository
        //jitpack repository
// maven { url 'https://www.jitpack.io' }
  • After you’ve added this dependency and repository, sync your project.

Step 3: Navigate to “res” and create a new android resource directory called raw. This file will be used to paste the offline video into our program.

res/New/Android Resources directory / Resources type: raw –> Ok

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.pd.lookatme.LookAtMe
        android:id="@+id/lookme"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Working with the MainActivity.kt file

package com.sagar.eyedetectingvideoplayer

import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Window
import android.view.WindowManager
import com.pd.lookatme.LookAtMe

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN)
        setContentView(R.layout.activity_main)
        supportActionBar?.hide()
        val lookAtMe = findViewById<LookAtMe>(R.id.lookme)

        lookAtMe.init(this);
        lookAtMe.setVideoURI(Uri.parse("android.resource://" + packageName + "/" + R.raw.recorder));
        // lookAtMe.setVideoPath("your video  url "); to use video from a url

        lookAtMe.start();
        lookAtMe.setLookMe();

    }
}

This application supports both online and offline video playback. If you want to play an offline video, you must paste it in the raw folder and then give it a name in the code,  but if you want to play an online video, you must specify the Video URL in the code.

Step 6: Working with the AndroidManifest.xml 

  If you’re using an online video in your app, don’t forget to add internet permission.

//internet permission
    <uses-permission android:name="android.permission.INTERNET"/>
  • Below is the AndroidManifest.xml file code
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sagar.eyedetectingvideoplayer">
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.EyeDetectingVideoPlayer">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Run the application now. You will get the output shown in the output section.

  • We hope that this guide will assist you in quickly creating a simple eye-detecting video player Application using the LookAtMe library in android. We concentrated on making a simple application for this tutorial. If you have any problems, please post them in the comments section, and we will gladly assist you.

Simple calculator Application

Leave a Reply