Comparing videos

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

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:

Shell

# command line
npm i
npm 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

import React, { useRef, useEffect } from 'react';
import WebViewer from '@pdftron/webviewer';
import { initializeVideoViewer } from '@pdftron/webviewer-video';

const App = () => {
    const viewer = useRef(null);
    const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';

    useEffect(() => {
      WebViewer(
        {
          path: '/webviewer/lib',
        },
        viewer.current,
      ).then(async instance => {
        // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
        const {
            loadVideo,
            UI,
        } = await initializeVideoViewer(
            instance,
            {
                license: '---- Insert commercial license key here after purchase ----',
            }
        );

        await UI.enableCompareMode();

        // 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')
        loadVideo(videoUrl, { fileId: 'testId' });
      });
    }, []);

    return (
        <div className="App">
            <div className="webviewer" ref={viewer} />
        </div>
    );
}

export 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

import React, { useRef, useEffect } from 'react';
import WebViewer from '@pdftron/webviewer';
import { initializeVideoViewer } from '@pdftron/webviewer-video';

const App = () => {
    const viewer = useRef(null);
    const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';

    useEffect(() => {
      WebViewer(
        {
          path: '/webviewer/lib',
        },
        viewer.current,
      ).then(async instance => {
        // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
        const {
            loadVideo,
            UI,
        } = await initializeVideoViewer(
            instance,
            {
                license: '---- Insert commercial license key here after purchase ----',
            }
        );

        await UI.enableCompareMode();

        // 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')
        loadVideo(videoUrl, { fileId: 'testId' });

        window.addEventListener(
          'documentViewer2Ready',
          () => {
            UI.loadCompareVideoB(videoUrl);
          },
          { once: true },
        );
      });
    }, []);

    return (
        <div className="App">
            <div className="webviewer" ref={viewer} />
        </div>
    );
}

export default App;