Getting Started With CameraKit v1.0.0-beta1

CameraKit is a simple to use wrapper for Googles Camera1 and Camera2 APIs. In this tutorial you’ll learn how to get started using CameraKit in your Android application. The code for this project is on GitHub, and you can read more about CameraKit on our website.

Part 1 — Get Camera Output

The first step to using CameraKit is to add a couple lines to your app level build.gradle file.

...
repositories {
maven { url 'https://dl.bintray.com/camerakit/camerakit-android'}
}
dependencies {
...
implementation 'com.camerakit:camerakit:1.0.0-beta1'
}

That’s it! With those two lines CameraKit is ready to rumble.

In order to see the a preview of the camera on your screen we’ll add a CameraKitView to the activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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.camerakit.CameraKitView
android:id="@+id/camera"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:camera_facing="back"/>
</android.support.constraint.ConstraintLayout>

There are plenty of settings to explore in the CameraKitView, however just to get started we’ll set camera_facing="back" and leave it at that.

Now head over to your MainActivity.java to initialize the CameraKitView. The two functions required to start the View are onResume() and onPause() . We also need to request permissions from the user to access the device’s camera.

...
import com.camerakit.CameraKitView;
public class MainActivity extends AppCompatActivity {

private CameraKitView cameraKitView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cameraKitView = findViewById(R.id.camera);
}

@Override
protected void onResume() {
super.onResume();
cameraKitView.onResume();
}

@Override
protected void onPause() {
cameraKitView.onPause();
super.onPause();
}

@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
super.onRequestPermissionsResult(requestCode, permissions, grantResults);
cameraKitView.onRequestPermissionsResult(requestCode, permissions, grantResults);
}
}

This will place the camera output front and center in our application. Run it on your device and you should see something like this:

That’s all it takes to simply access the camera output! If you want to go off on your own from here, it was nice talking with you. Otherwise keep that dial locked and we’ll use CameraKit to capture and save an image!

Part 2 — Capturing an Image

First things first, let’s put a button on the activity_main.xml . There are plenty of different ways to create a button; here’s one example.

...
<android.support.v7.widget.AppCompatButton
android:id="@+id/photoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/colorAccent"
android:text="Capture"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
...

Now back to the MainActivity.java! Initialize the button:

...
import com.camerakit.CameraKitView;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {

private CameraKitView cameraKitView;
private Button photoButton;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cameraKitView = findViewById(R.id.camera);

photoButton = findViewById(R.id.photoButton);
photoButton.setOnClickListener(photoOnClickListener);
}
...

Here comes the exciting part, the photoOnClickListener ! This listener is of type View.onClickListener and we only need to Override one function: onClick. Inside the onClick() function we then call cameraKitView.captureImage() and override CameraKit’s onImage function.

This is where the magic happens. onImage() takes two parameters, a CameraKitView object and an image in the form of a byte array. This is the final image and can be manipulated however you would like.

In the code below, I create a new File and FileOutputStream and write the file to a particular filename, “photo.jpg”.

private View.OnClickListener photoOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
cameraKitView.captureImage(new CameraKitView.ImageCallback() {
@Override
public void onImage(CameraKitView cameraKitView, final byte[] photo) {
File savedPhoto = new File(Environment.getExternalStorageDirectory(), "photo.jpg");
try {
FileOutputStream outputStream = new FileOutputStream(savedPhoto.getPath());
outputStream.write(photo);
outputStream.close();
} catch (java.io.IOException e) {
e.printStackTrace();
Log.e("CKDemo", "Exception in photo callback");
}
}
});
}
};

Now you should be able to run this application on your device and capture an image. The image will be in the device folder and named “photo.jpg”

Final Thoughts

Thanks for following along to this very quick crash course to CameraKit. Hopefully you found it easier and more intuitive than wrestling with Google’s APIs.

In the coming weeks we will officially be launching CameraKit v1.0.0 with many stability and performance improvements over the previous v0.13. The official release will also bring about a new set of documentation.

If you have any questions don’t hesitate to reach out on GitHub or leave us a comment here on Medium.