opentok / accelerator-annotation-android

This project is no longer maintained. Please use accelerator-core-android instead

OpenTok Accelerator Annotation for Android

---

The OpenTok Annotations Accelerator Pack provides functionality you can add to your OpenTok applications that enables users to have the ability to annotate on a local or remote screen.

Quick start

This section shows you how to use the OpenTok Accelerator Annotations.

Add the Annotations library

• Using the repository
• Using Maven

Using the repository

1. Clone the OpenTok Accelerator Annotations repo.
2. Start Android Studio and create a new project.
3. From the project view, right-click the app name and select New > Module > Import Gradle Project.
4. Navigate to the directory in which you cloned OpenTok Accelerator Annotation, select accelerator-annotation-android, and click Finish.
5. Open the build.gradle file for the app and ensure the following lines have been added to the dependencies section:

implementation project(‘:accelerator-annotation-android')

Using Maven

1. Modify the build.gradle for your solution and add the following code snippet to the section labeled 'repositories’:

maven { url  "http://tokbox.bintray.com/maven" }

2. Modify the build.gradle for your activity and add the following code snippet to the section labeled 'dependencies’:

implementation 'com.opentok.android:opentok-accelerator-annotation:x.y.z'

Exploring the code

For detail about the APIs used to develop this accelerator pack, see the OpenTok Android SDK Reference and Android API Reference.

NOTE: The project contains logic used for logging. This is used to submit anonymous usage data for internal TokBox purposes only. We request that you do not modify or remove any logging code in your use of this accelerator pack.

Class design

Class	Description
AnnotationsToolbar	Provides the initializers and methods for the annotation toolbar view, and initializes functionality such as text annotations, a screen capture button, an erase button that removes the last annotation that was added, a color selector for drawing strokes and text annotations, and controls scrolling. You can customize this toolbar.
AnnotationsView	Provides the rectangular area on the screen which is responsible for drawing annotations and event handling.
AnnotationsListener	Monitors state changes in the Annotations component. For example, a new event would occur when a screen capture is ready or there is an error.
AnnotationsPath	Extends the Android Path class, and defines the various geometric paths to be drawn in the AnnotationView canvas.
AnnotationText	Defines the text labels to be drawn in the AnnotationViewCanvas.
Annotatable	Each AnnotationText or AnnotationPath is defined as an annotatable object.
AnnotationsManager	Manages the set of the annotations in the annotations view.
AnnotationsVideoRenderer	Extends the BaseVideoRenderer class in the OpenTok Android SDK, and includes screenshot functionality.

NOTE: Scrolling is frozen while the user adds annotations. Scrolling is re-enabled after the user clicks Done, and the annotations are removed at that point.

Using the Accelerator Annotation

Add the annotation toolbar

Add the AnnotationsToolbar to your layout:

<com.tokbox.android.annotations.AnnotationsToolbar
    android:id="@+id/annotations_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"/>

The AnnotationsToolbar offers the following actions:

• Freehand Annotation: Handwritten annotation
• Text Annotation: Text label annotations.
• Color Picker: Select a color for the annotation.
• Erase: Delete the most recent annotation.
• Screen Capture: Take a screenshot of the annotations.
• Done: Clear all annotations and re-enabling scrolling.

Add a custom annotation renderer

If you would like to create a new instance of the AnnotationsVideoRenderer class or a new custom video renderer, for example, to manage the screen capture option in the annotations toolbar, start with this line of code:

AnnotationsVideoRenderer mRenderer = new AnnotationsVideoRenderer(this);

Attach the annotation canvas to a view

You can attach an annotation canvas to a publisher view, for example, to the screen sharing view:

try {
  AnnotationsView mScreenAnnotationsView = new AnnotationsView(this, mWrapper.getSession(), OpenTokConfig.API_KEY, true);

  mScreenAnnotationsView.attachToolbar(mAnnotationsToolbar);
  mScreenAnnotationsView.setVideoRenderer(mScreensharingRenderer);
  mScreenAnnotationsView.setAnnotationsListener(this);
  ((ViewGroup) mScreenSharingView).addView(mScreenAnnotationsView);
} catch (Exception e) {
  Log.i(LOG_TAG, "Exception - add annotations view " + e);
}

Or to a subscriber view:

try {
  AnnotationsView mRemoteAnnotationsView = new AnnotationsView(this, mWrapper.getSession(), OpenTokConfig.API_KEY, mRemoteConnId);
  mRemoteAnnotationsView.setVideoRenderer(mRemoteRenderer);
  mRemoteAnnotationsView.attachToolbar(mAnnotationsToolbar);
  mRemoteAnnotationsView.setAnnotationsListener(this);
  ((ViewGroup) mRemoteViewContainer).addView(mRemoteAnnotationsView);     
} catch (Exception e) {
  Log.i(LOG_TAG, "Exception - add annotations view " + e);
}

Implement an annotations listener class

To listen for annotation events, implement an AnnotationsListener:

public  interface AnnotationsListener {
  void onScreencaptureReady(Bitmap bmp);
  void onAnnotationsSelected(AnnotationsView.Mode mode);
  void onAnnotationsDone();
  void onError(String error);
}

public class MainActivity
    extends AppCompatActivity
    implements AnnotationsView.AnnotationsListener {

    @Override
    public void onScreencaptureReady(Bitmap bmp) {
        //A new screencapture is ready
    }

    @Override
    public void onAnnotationsSelected(AnnotationsView.Mode mode) {
        //An annotations item in the toolbar is selected
    }

    @Override
    public void onAnnotationsDone() {
        //The DONE button annotations item in the toolbar is selected. Scrolling is re-enabled.
    }

    @Override
    public void onError(String error) {
       //An error happens in the annotations
    }
  ...
}

Multiparty video communication sample app using the Accelerator Annotation with best-practices for Android here

Development and Contributing

Interested in contributing? We ❤️ pull requests! See the Contribution guidelines.

Getting Help

We love to hear from you so if you have questions, comments or find a bug in the project, let us know! You can either:

• Open an issue on this repository
• See https://support.tokbox.com/ for support options
• Tweet at us! We're @VonageDev on Twitter
• Or join the Vonage Developer Community Slack

Further Reading

• Check out the Developer Documentation at https://tokbox.com/developer/

accelerator-annotation-android's Issues

Unable to Import Gradle Project

Cloned git repository, when I tried to import gradle project seeing below error.

Caused by: groovy.lang.GroovyRuntimeException: Cannot set the value of read-only property 'outputFile' for object of type com.android.build.gradle.internal.api.LibraryVariantOutputImpl.

Gradle sync failed: Cannot set the value of read-only property 'outputFile' for object of type com.android.build.gradle.internal.api.LibraryVariantOutputImpl.
Consult IDE log for more details (Help | Show Log) (650 ms)

[README] broken link when referring to accelerator-annotation-android

New issue checklist

• I have read all of the README
• I have searched existing issues and this is not a duplicate.

General information

• Library version(s):
• iOS/Android/Browser version(s):
• Devices/Simulators/Machine affected:
• Reproducible in the demo project? (Yes/No):
• Related issues:

Bug report

Expected behavior

...

Actual behavior

...

Steps to reproduce

...

Crash log? Screenshots? Videos? Sample project?

...

Question or Feature Request

...