Integrate Webviewer Audio using JavaScript

New licenses for WebViewer Video are no longer offered.

Apryse Docs Image

Initial setup

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

Install

sh

1npm install @pdftron/webviewer-video
2npm 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

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

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales