Some test text!

Loading...
Guides
Integrating Webviewer Audio

Integrate Webviewer Audio using JavaScript

Video and Audio Integration

Initial setup

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

Install

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.

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 => {
        // 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.

Get the answers you need: Support

UPCOMING WEBINAR: Live tech update and run-through. October 21 @ 11am PDT