JarCastingThis 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
- Clone the OpenTok Accelerator Annotations repo.
- Start Android Studio and create a new project.
- From the project view, right-click the app name and select New > Module > Import Gradle Project.
- Navigate to the directory in which you cloned OpenTok Accelerator Annotation, select accelerator-annotation-android, and click Finish.
- Open the build.gradle file for the app and ensure the following lines have been added to the
dependenciessection:
implementation project(‘:accelerator-annotation-android')
Using Maven
- 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" }
- 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
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/
