Get started with WebViewer Video - Video Collaboration SDK

New licenses for WebViewer Video are no longer offered.

Collaborate and review videos frame by frame. WebViewer video allows users to annotate video frames, comment on frames, collaborate and review videos.

Annotations will be tied to specific frames and will only be rendered, when the video is seeked to the specific frames. This guide will show you how to get started with a free trial.

The source code for this project is available in our Git repo.

Prerequisites

Prior to starting, you should have already installed Node and npm.

Get your Apryse trial key.

Initial setup

Clone the repo to a specific directory and then navigate to it:

Shell

git clone --depth=1 https://github.com/ApryseSDK/webviewer-samples.git
cd webviewer-samples/webviewer-video

How to run

1. Navigate to the webviewer-video directory and install the required dependencies to run the samples by executing:

Shell

npm install

1. Next run the sample by executing:

Shell

npm start

1. Navigate to http://localhost:3000/ and you will see the sample WebViewer running with a video, similar to above.

How it works

HTML5 Videos can be loaded into WebViewer with use of the @pdftron/webviewer-video package.

Install

Shell

npm install @pdftron/webviewer-video

Below is a sample setup of the video package with webviewer.

initializeVideoViewer is called to give WebViewer the ability to handle the loading of video files. Afterwards, a video can be loaded with loadVideo. Lastly settings to customize the behavior of the controls can be passed in when calling initializeVideoViewer.

JavaScript (SDK v8.0+)

import WebViewer from '@pdftron/webviewer';
import { initializeVideoViewer, renderControlsToDOM } from '@pdftron/webviewer-video';

WebViewer({
    path: '/webviewer/lib',
    selectAnnotationOnCreation: true,
  },
  viewer.current,
).then(async instance => {
  // Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
  const {
      loadVideo,
  } = await initializeVideoViewer(
      instance,
      {
        license: '---- Insert commercial license key here after purchase ----',
      }
  );
  // Load a video at a specific url. Can be a local or public link
  // If local it needs to be relative to lib/ui/index.html.
  // Or at the root. (eg '/video.mp4')
  const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';
  loadVideo(videoUrl);
});

WebViewerInstance initializeVideoViewer

JavaScript (SDK v7.0+)

import WebViewer from '@pdftron/webviewer';
import { initializeVideoViewer } from '@pdftron/webviewer-video';

WebViewer({
    path: '/webviewer/lib',
    selectAnnotationOnCreation: true,
  },
  viewer.current,
).then(async instance => {
  // Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
  const {
    loadVideo,
  } = await initializeVideoViewer(
    instance,
    {
      license: '---- Insert commercial license key here after purchase ----',
    }
  );
  // Load a video at a specific url. Can be a local or public link
  // If local it needs to be relative to lib/ui/index.html.
  // Or at the root. (eg '/video.mp4')
  const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';
  loadVideo(videoUrl);
});

WebViewerInstance initializeVideoViewer

Import and Exporting Annotations

Importing and exporting annotations works the exact same way as it does on WebViewer, with the video annotations having additional the properties start-time and end-time.

Server configuration

Make sure your server has byte-range requests enabled to allow video streaming.

API

@pdftron/webviewer-video