@pdftron/webviewer-video
Version:
This is an addon for WebViewer that allows loading HTML5 videos (.mp4, ogg, webm) so that their video frames can be annotated.
212 lines (160 loc) • 7.14 kB
Markdown
# WebViewer Video
[WebViewer](https://docs.apryse.com/documentation/web/guides/) is a powerful JavaScript-based Library that's part of the [PDFTron SDK](https://www.apryse.com). It allows you to view and annotate various file formats (PDF, MS Office, images, videos) on your web app with a fully customizable UI.
This is an addon for WebViewer that allows loading HTML5 videos (.mp4, ogg, webm) so that their video frames can be annotated. For more information, see this [guide](https://docs.apryse.com/documentation/web/get-started/manually-video/).
<!-- How to clear image cache: https://stackoverflow.com/questions/26898052/how-to-force-image-cache-update-in-readme-rst-on-github -->
<img src="https://pdftron.s3.amazonaws.com/custom/websitefiles/wv-video.png" width="730">
Let me know how you are planning to use WebViewer Video or if you have any feedback on any feature missing. You can [email me](mailto:andrey.com) directly.
## Demo
https://webviewer-video.web.app/
## React Sample
Try out the react sample [here](https://github.com/PDFTron/webviewer-video-sample). It shows how to integrate WebViewer and WebViewer-Video with a server component for the saving of annotations.
## Initial setup
Before you begin, make sure your development environment includes [Node.js and npm](https://www.npmjs.com/get-npm).
## Install
```
npm install /webviewer-video
```
## How to use
Here is an example of how WebViewer and WebViewer-video could be integrated into your application.
```javascript
import React, { useRef, useEffect } from 'react';
import WebViewer from '/webviewer';
import { initializeVideoViewer } from '/webviewer-video';
const App = () => {
const viewer = useRef(null);
useEffect(() => {
WebViewer(
{
path: '/webviewer/lib',
selectAnnotationOnCreation: true,
},
viewer.current,
).then(async instance => {
const license = '---- Insert commercial license key here after purchase ----';
// Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
const {
loadVideo,
} = await initializeVideoViewer(
instance,
{ license },
);
// 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);
});
}, []);
return (
<div className="App">
<div className="webviewer" ref={viewer} />
</div>
);
}
export default App;
```
Also see the [React sample](https://github.com/PDFTron/webviewer-video-sample), for a complete solution, with further customizations.
### Loading as a Script Tag
If your environment can not import WebViewer Video from the module, you can instead include WebViewer Video as a script tag. Simply, take the file `node_modules/@pdftron/webviewer-video/dist/main.js` and add it to your project's html page. WebViewer Video requires the react library, so include that as well.
```html
<head>
...
<!-- Load React. -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<!-- main.js can be renamed -->
<script src="./main.js"></script>
</head>
```
This will add the object `WebViewerVideo` to the window. This object contains `initializeVideoViewer`. So the previous code can be changed to:
```javascript
...
const license = '---- Insert commercial license key here after purchase ----';
const {
loadVideo,
} = await window.WebViewerVideo.initializeVideoViewer(
instance,
{ license },
);
...
```
### Builds
Webviewer Video comes with two builds. The default build does not include `React` and `React-DOM` in the bundle and both must be provided by the parent code. The other build includes `React` and `React-DOM` in the bundle. See the AngularJS example below on how to load the build that includes `React`.
```javascript
import { Component, ViewChild, OnInit, Output, EventEmitter, ElementRef, AfterViewInit } from '/core';
import { Subject } from 'rxjs';
import WebViewer, { WebViewerInstance } from '/webviewer';
import { initializeVideoViewer } from '/webviewer-video/dist/main-with-react';
({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
('viewer') viewer: ElementRef;
wvInstance: WebViewerInstance;
() coreControlsEvent:EventEmitter<string> = new EventEmitter();
private documentLoaded$: Subject<void>;
constructor() {
this.documentLoaded$ = new Subject<void>();
}
ngAfterViewInit(): void {
WebViewer({
path: '../lib',
}, this.viewer.nativeElement).then(async instance => {
const license = `---- Insert commercial license key here after purchase ----`;
const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';
this.wvInstance = instance;
const videoInstance = await initializeVideoViewer(
// @ts-ignore
instance,
{
license,
}
);
// 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')
videoInstance.loadVideo(videoUrl);
})
}
ngOnInit() {
}
getDocumentLoadedObservable() {
return this.documentLoaded$.asObservable();
}
}
```
### Custom Video Watermark
You can use the WebViewer `setWatermark` API. Please see the guide [here](https://www.pdftron.com/documentation/web/guides/watermarks/).
Option `shouldDrawOverAnnotations` must be passed in when setting the watermark, in order to show up on the video canvas.
```javascript
const { documentViewer } = instance.Core;
documentViewer.setWatermark({
shouldDrawOverAnnotations: true, // Enable watermarks for video
// Draw diagonal watermark in middle of the document
diagonal: {
fontSize: 25, // or even smaller size
fontFamily: 'sans-serif',
color: 'red',
opacity: 50, // from 0 to 100
text: 'Test Watermark'
},
// Draw header watermark
header: {
fontSize: 10,
fontFamily: 'sans-serif',
color: 'red',
opacity: 70,
left: 'left watermark',
center: 'center watermark',
right: ''
}
});
```
## Documentation
[API documentation](https://docs.apryse.com/api/video/)
## WebViewer APIs
See /webviewer [API documentation](https://docs.apryse.com/documentation/web/guides/ui/apis).
## License
WebViewer Video will run in trial mode until a license is provided. For more information on licensing, please visit our [website](https://apryse.com/form/contact-sales).