Section:

Comparing videos

WebViewer Video allows you to compare two videos side by side to easily spot differences between the two videos.

Apryse Docs Image

Sample compare page

The WebViewer-Video github sample has a compare sample ready to go. We recommend running that sample directly. To do so, first clone repository and then run the following commands:

sh

1# command line
2npm i
3npm run start-samples

The steps below will recreate the sample. Use them to integrate compare into you application.

Initial setup

Before you begin, make sure your development environment includes Node.js and npm.

How to use

To load your video in compare; we used the enableCompareMode API. WebViewer Video will automatically configure everything to be setup. See the following code below on how to call this API:

JavaScript (SDK v8.0+)

1import React, { useRef, useEffect } from 'react';
2import WebViewer from '@pdftron/webviewer';
3import { initializeVideoViewer } from '@pdftron/webviewer-video';
4
5const App = () => {
6    const viewer = useRef(null);
7    const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';
8
9    useEffect(() => {
10      WebViewer(
11        {
12          path: '/webviewer/lib',
13        },
14        viewer.current,
15      ).then(async instance => {
16        // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
17        const {
18            loadVideo,
19            UI,
20        } = await initializeVideoViewer(
21            instance,
22            {
23                license: '---- Insert commercial license key here after purchase ----',
24            }
25        );
26
27        await UI.enableCompareMode();
28
29        // Load a video at a specific url. Can be a local or public link
30        // If local it needs to be relative to lib/ui/index.html.
31        // Or at the root. (eg '/video.mp4')
32        loadVideo(videoUrl, { fileId: 'testId' });
33      });
34    }, []);
35
36    return (
37        <div className="App">
38            <div className="webviewer" ref={viewer} />
39        </div>
40    );
41}
42
43export default App;

Programatically load videos

Video compare brings two new APIs that allow users to programatically load videos on either side of the comparison. In this example we used loadCompareVideoB to load a video on the right side of the comparison. If you wish to load a video on the left side of the comparison, you can use loadCompareVideoA.

JavaScript (SDK v8.0+)

1import React, { useRef, useEffect } from 'react';
2import WebViewer from '@pdftron/webviewer';
3import { initializeVideoViewer } from '@pdftron/webviewer-video';
4
5const App = () => {
6    const viewer = useRef(null);
7    const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';
8
9    useEffect(() => {
10      WebViewer(
11        {
12          path: '/webviewer/lib',
13        },
14        viewer.current,
15      ).then(async instance => {
16        // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
17        const {
18            loadVideo,
19            UI,
20        } = await initializeVideoViewer(
21            instance,
22            {
23                license: '---- Insert commercial license key here after purchase ----',
24            }
25        );
26
27        await UI.enableCompareMode();
28
29        // Load a video at a specific url. Can be a local or public link
30        // If local it needs to be relative to lib/ui/index.html.
31        // Or at the root. (eg '/video.mp4')
32        loadVideo(videoUrl, { fileId: 'testId' });
33
34        window.addEventListener(
35          'documentViewer2Ready',
36          () => {
37            UI.loadCompareVideoB(videoUrl);
38          },
39          { once: true },
40        );
41      });
42    }, []);
43
44    return (
45        <div className="App">
46            <div className="webviewer" ref={viewer} />
47        </div>
48    );
49}
50
51export default App;

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales