npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@pdftron/webviewer-video

v4.35.7

Published

This is an addon for WebViewer that allows loading HTML5 videos (.mp4, ogg, webm) so that their video frames can be annotated.

Downloads

33,222

Readme

WebViewer Video

WebViewer is a powerful JavaScript-based Library that's part of the PDFTron SDK. It allows you to view and annotate various file formats (PDF, MS Office, images, videos) on your web app with a fully customizable UI.

This is an addon for WebViewer that allows loading HTML5 videos (.mp4, ogg, webm) so that their video frames can be annotated. For more information, see this guide.

Let me know how you are planning to use WebViewer Video or if you have any feedback on any feature missing. You can email me directly.

Demo

https://webviewer-video.web.app/

React Sample

Try out the react sample here. It shows how to integrate WebViewer and WebViewer-Video with a server component for the saving of annotations.

Initial setup

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

Install

npm install @pdftron/webviewer-video

How to use

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

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

const App = () => {
    const viewer = useRef(null);

    useEffect(() => {
      WebViewer(
        {
          path: '/webviewer/lib',
          selectAnnotationOnCreation: true,
        },
        viewer.current,
      ).then(async instance => {
        const license = '---- Insert commercial license key here after purchase ----';

        // Extends WebViewer to allow loading HTML5 videos (.mp4, ogg, webm).
        const {
            loadVideo,
        } = await initializeVideoViewer(
            instance,
            { license },
        );

        // 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')
        const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';
        loadVideo(videoUrl);
      });
    }, []);

    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.

Loading as a Script Tag

If your environment can not import WebViewer Video from the module, you can instead include WebViewer Video as a script tag. Simply, take the file node_modules/@pdftron/webviewer-video/dist/main.js and add it to your project's html page. WebViewer Video requires the react library, so include that as well.

    <head>
        ...
        <!-- Load React. -->
        <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
        <!-- main.js can be renamed -->
        <script src="./main.js"></script>
    </head>

This will add the object WebViewerVideo to the window. This object contains initializeVideoViewer. So the previous code can be changed to:

    ...
    const license = '---- Insert commercial license key here after purchase ----';
    const {
        loadVideo,
    } = await window.WebViewerVideo.initializeVideoViewer(
        instance,
        { license },
    );
    ...

Builds

Webviewer Video comes with two builds. The default build does not include React and React-DOM in the bundle and both must be provided by the parent code. The other build includes React and React-DOM in the bundle. See the AngularJS example below on how to load the build that includes React.

import { Component, ViewChild, OnInit, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core';
import { Subject } from 'rxjs';
import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';
import { initializeVideoViewer } from '@pdftron/webviewer-video/dist/main-with-react';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild('viewer') viewer: ElementRef;
  wvInstance: WebViewerInstance;
  @Output() coreControlsEvent:EventEmitter<string> = new EventEmitter();

  private documentLoaded$: Subject<void>;

  constructor() {
    this.documentLoaded$ = new Subject<void>();
  }

  ngAfterViewInit(): void {

    WebViewer({
      path: '../lib',
    }, this.viewer.nativeElement).then(async instance => {
      const license = `---- Insert commercial license key here after purchase ----`;
      const videoUrl = 'https://pdftron.s3.amazonaws.com/downloads/pl/video/video.mp4';

      this.wvInstance = instance;

      const videoInstance = await initializeVideoViewer(
        // @ts-ignore
        instance,
        {
          license,
        }
      );

      // 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')
      videoInstance.loadVideo(videoUrl);
    })
  }

  ngOnInit() {
  }

  getDocumentLoadedObservable() {
    return this.documentLoaded$.asObservable();
  }
}

Custom Video Watermark

You can use the WebViewer setWatermark API. Please see the guide here.

Option shouldDrawOverAnnotations must be passed in when setting the watermark, in order to show up on the video canvas.

  const { documentViewer } = instance.Core;

  documentViewer.setWatermark({
    shouldDrawOverAnnotations: true, // Enable watermarks for video
    // Draw diagonal watermark in middle of the document
    diagonal: {
      fontSize: 25, // or even smaller size
      fontFamily: 'sans-serif',
      color: 'red',
      opacity: 50, // from 0 to 100
      text: 'Test Watermark'
    },
    // Draw header watermark
    header: {
      fontSize: 10,
      fontFamily: 'sans-serif',
      color: 'red',
      opacity: 70,
      left: 'left watermark',
      center: 'center watermark',
      right: ''
    }
  });

Documentation

API documentation

WebViewer APIs

See @pdftron/webviewer API documentation.

License

WebViewer Video will run in trial mode until a license is provided. For more information on licensing, please visit our website.