Section:

Audio Redaction

WebViewer Audio uses ffmpeg in the background to allow for redaction of video frames. (Check out audio redaction demo to try it now.) In order to utilize ffmpeg, a server must be setup to allow for it. Please follow installation steps on the sample mdeia server before continuing.

We recommend hosting the server on AWS. The example code below shows how to integrate the server within your application:

Initial setup

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

How to use

Below is an example of how to integrate the server with WebViewer Audio. In this example, we used update element to overload the click event of the Redact buttons. This click event will now make a call to our custom server where the redaction of the video will take place with ffmpeg.

JavaScript (v8.0+)

1import WebViewer from '@pdftron/webviewer';
2import { initializeAudioViewer } from '@pdftron/webviewer-audio';
3WebViewer({
4    path: '/webviewer/lib',
5    enableRedaction: true,
6  },
7  viewer.current,
8).then(async instance => {
9  // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
10  const {
11    loadAudio,
12    UI,
13  } = await initializeAudioViewer(
14    instance,
15    {
16      license: '---- Insert commercial license key here after purchase ----',
17      enableRedaction: true,
18    }
19  );
20  // Load a media element at a specific url.
21  // Can be a local or public link
22  const audioUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/audio.mp3';
23  loadAudio(audioUrl);
24
25  // Overloading the onclick function of redacting audio button with custom code
26  // Function must be async and must return the new url when function is finished to remove loading spinner and load new file.
27  // enableRedaction must be set to true when initalizing WebViewer Video:
28  // https://docs.apryse.com/api/audio/module-@pdftron_webviewer-audio.html#.initializeAudioViewer__anchor
29  UI.updateElement('redactApplyButton', {
30    onClick: async redactAnnotations => {
31      const response = await fetch('http://localhost:3001/audio/redact', {
32        method: 'POST',
33        body: JSON.stringify({
34          intervals: redactAnnotations.map(annotation => ({
35            start: annotation.getStartTime(),
36            end: annotation.getEndTime(),
37          })),
38          url: audioUrl,
39        }),
40        headers: {
41          'Accept': 'application/json',
42          'Content-Type': 'application/json'
43        },
44      });
45
46      const audioBuffer = await response.arrayBuffer();
47      const newAudioBlob = new Blob([audioBuffer], { type: 'audio/mp3' });
48      return URL.createObjectURL(newAudioBlob);
49    }
50  });
51});

Related Links

How to persist changes on your server to client

Currently our server returns the audio file by sending back a buffer to the client. You will find that code, in this file.

JavaScript (v8.0+)

1fs.readFile(`./tmp/${uuid}.mp3`, (err, data) => {
2  resolve(data);
3});

The issue here is that when redactions are applied to this buffer, we cannot send that local file back to the server so it must be persisted on the server through a variable or by uploading to the cloud in order to have further redactions applied to a previously edited audio.

Here is an example of replacing the server code above with an upload to s3:

New server code:

JavaScript (v8.0+)

1return new Promise((resolve) => {
2  fs.readFile(`./tmp/${uuid}.mp3`, async (err, data) => {
3    await s3.upload({
4      Bucket: 'pdftron-media-demo-files',
5      Key: `${uuid}.mp3`,
6      Body: data
7    });
8
9    let s3URL = await s3.getSignedUrl({
10      Bucket: 'pdftron-media-demo-files',
11      Key: `${uuid}.mp3`,
12    });
13
14    resolve(s3URL);
15  });
16});

New client code:

JavaScript (v8.0+)

1import WebViewer from '@pdftron/webviewer';
2import { initializeAudioViewer } from '@pdftron/webviewer-audio';
3WebViewer({
4    path: '/webviewer/lib',
5    enableRedaction: true,
6  },
7  viewer.current,
8).then(async instance => {
9  // Extends WebViewer to allow loading media files (.mp3, .mp4, ogg, webm, etc.)
10  const {
11    loadAudio,
12    UI,
13  } = await initializeAudioViewer(
14    instance,
15    {
16      license: '---- Insert commercial license key here after purchase ----',
17      enableRedaction: true,
18    }
19  );
20  // Load a media element at a specific url.
21  // Can be a local or public link
22  let currentAudioUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/audio.mp3';
23  loadAudio(currentAudioUrl);
24  // Overloading the onclick function of redacting audio button with custom code
25  // Function must be async and must return the new url when function is finished to remove loading spinner and load new file.
26  // enableRedaction must be set to true when initalizing WebViewer Video:
27  // https://docs.apryse.com/api/audio/module-@pdftron_webviewer-audio.html#.initializeAudioViewer__anchor
28  UI.updateElement('redactAudioButton', {
29    onClick: async redactAnnotations => {
30      const response = await fetch('http://localhost:3001/audio/redact', {
31        method: 'POST',
32        body: JSON.stringify({
33          intervals: redactAnnotations.map(annotation => ({
34            start: annotation.start,
35            end: annotation.end,
36          })),
37          url: currentAudioUrl,
38        }),
39        headers: {
40          'Accept': 'application/json',
41          'Content-Type': 'application/json'
42        },
43      });
44      const currentAudioUrl = await response.text();
45      return URL.createObjectURL(newAudioBlob);
46    }
47  });
48});

Related Links

Now when using the endpoint /audio/redact, your redacted audio will be uploaded to s3 and changes will be persisted on the client.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales