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: SDK Features Preview and Live Run-Through | July 14, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use