Integrate Webviewer Audio using JavaScript

New licenses for WebViewer Video are no longer offered.

Initial setup

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

Install

Shell

npm install @pdftron/webviewer-video
npm install @pdftron/webviewer-audio

How to use

Here is an example of how WebViewer, Webviewer-video and WebViewer-audio could be integrated into your application.

JavaScript

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

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 => {
        await initializeAudioViewer(
          instance,
          { license },
        );

        // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
        const {
            loadVideo,
        } = await initializeVideoViewer(
            instance,
            {
                license: '---- Insert commercial license key here after purchase ----',
                AudioComponent: Waveform,
                cacheAudioWaveform: false,
            }
        );

        // 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')
        // A unique fileId should be generated for each url for audio caching to work properly
        loadVideo(videoUrl, { fileId: 'testId' });
      });
    }, []);

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

export default App;

Also see the React sample, for a complete solution, with further customizations.