MultimediaFactory Object

Summary

The MultimediaFactory is the main interface used for retrieving HTML5-safe multimedia resources.

Syntax

TypeScript
JavaScript
function lt.Multimedia.MultimediaFactory 
class lt.Multimedia.MultimediaFactory() 

Remarks

This class interfaces with the Document Service in order to retrieve multimedia content. It will use the same settings that are set in the DocumentFactory.

Example
ConvertVideo.ts
Multimedia.ts
ConvertVideo.js
Multimedia.js
ConvertVideo.html
import { Multimedia_Example } from "../Multimedia"; 
 
export class MultimediaFactory_convertVideo extends Multimedia_Example { 
   public readonly viewer: lt.Multimedia.VideoViewer; 
   public readonly loadInput: HTMLInputElement; 
   public readonly deleteBtn: HTMLButtonElement; 
   private cacheUrl: string; 
 
   public constructor() { 
      super(); 
      this.viewer = new lt.Multimedia.VideoViewer({ root: document.getElementById('root') }); 
      this.loadInput = document.getElementById('load') as HTMLInputElement; 
      this.deleteBtn = document.getElementById('delete') as HTMLButtonElement; 
      this.cacheUrl = ''; 
      this.addClickEvents(); 
   } 
 
   public addClickEvents = () => { 
      this.loadInput.onchange = async (e: any) => { 
         const file = e.target.files[0]; 
         if (!file) 
            return; 
 
         this.disableButtons(true); 
 
         const options = new lt.Multimedia.ConvertVideoOptions(); 
         options.preFetch = this.onPreFetch; 
 
         // The requested video resource may require a conversion. Just calling 
         // MultimediaFactory.getPlayableUrl will cause the video player to wait until 
         // the resource is done converting.  This could take some time depending on the file size. 
         // The async version will only resolve once the resource is fully available on the service. 
         const safeUrl: URL = await lt.Multimedia.MultimediaFactory.convertVideo(file, options); 
 
         // safeUrl will contain a URL to the cached web-safe video. 
         // This resource is set to auto-expire, but if we wanted to manage the life-cycle ourself, 
         // we need the cache url to pass to deleteCachedVideo.  We can get this by just grabbing 
         // it from the query string. 
         this.cacheUrl = safeUrl.searchParams.get('url'); 
 
         this.viewer.setVideo(safeUrl.toString()); 
 
         this.disableButtons(false); 
      } 
 
      this.deleteBtn.onclick = async () => { 
         if (!this.cacheUrl) 
            return; 
 
         this.disableButtons(true); 
 
         if (this.viewer.video) 
            this.viewer.clear(); 
 
         await lt.Multimedia.MultimediaFactory.deleteCachedVideo(this.cacheUrl); 
 
         this.disableButtons(false); 
      } 
   } 
 
   public onPreFetch = (options: RequestInit) => { 
      // This callback will fire before any requests are made 
      // You are able to modify the options data before the toolkit executes the request 
      console.log('Pre Fetch!'); 
   } 
 
   private disableButtons(toggle: boolean) { 
      this.loadInput.disabled = toggle; 
      this.deleteBtn.disabled = toggle; 
   } 
} 
export class Multimedia_Example { 
   public readonly url = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'; 
   public constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Leadtools.Multimedia uses the Document Service for converting 
      // to web-accessible formats. 
      lt.Document.DocumentFactory.serviceHost = 'http://localhost:40000'; 
      lt.Document.DocumentFactory.servicePath = ''; 
      lt.Document.DocumentFactory.serviceApiPath = 'api'; 
   } 
} 
import { Multimedia_Example } from "../Multimedia"; 
 
export class MultimediaFactory_convertVideo extends Multimedia_Example { 
   viewer; 
   loadInput; 
   deleteBtn; 
   cacheUrl; 
 
   constructor() { 
      super(); 
      this.viewer = new lt.Multimedia.VideoViewer({ root: document.getElementById('root') }); 
      this.loadInput = document.getElementById('load'); 
      this.deleteBtn = document.getElementById('delete'); 
      this.cacheUrl = ''; 
      this.addClickEvents(); 
   } 
 
   addClickEvents = () => { 
      this.loadInput.onchange = async (e) => { 
         const file = e.target.files[0]; 
         if (!file) 
            return; 
 
         this.disableButtons(true); 
 
         const options = new lt.Multimedia.ConvertVideoOptions(); 
         options.preFetch = this.onPreFetch; 
 
         // The requested video resource may require a conversion. Just calling 
         // MultimediaFactory.getPlayableUrl will cause the video player to wait until 
         // the resource is done converting.  This could take some time depending on the file size. 
         // The async version will only resolve once the resource is fully available on the service. 
         const safeUrl = await lt.Multimedia.MultimediaFactory.convertVideo(file, options); 
 
         // safeUrl will contain a URL to the cached web-safe video. 
         // This resource is set to auto-expire, but if we wanted to manage the life-cycle ourself, 
         // we need the cache url to pass to deleteCachedVideo.  We can get this by just grabbing 
         // it from the query string. 
         this.cacheUrl = safeUrl.searchParams.get('url'); 
 
         this.viewer.setVideo(safeUrl.toString()); 
 
         this.disableButtons(false); 
      } 
 
      this.deleteBtn.onclick = async () => { 
         if (!this.cacheUrl) 
            return; 
 
         this.disableButtons(true); 
 
         if (this.viewer.video) 
            this.viewer.clear(); 
 
         await lt.Multimedia.MultimediaFactory.deleteCachedVideo(this.cacheUrl); 
 
         this.disableButtons(false); 
      } 
   } 
 
   onPreFetch = (options) => { 
      // This callback will fire before any requests are made 
      // You are able to modify the options data before the toolkit executes the request 
      console.log('Pre Fetch!'); 
   } 
 
   disableButtons(toggle) { 
      this.loadInput.disabled = toggle; 
      this.deleteBtn.disabled = toggle; 
   } 
} 
export class Multimedia_Example { 
   url = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'; 
 
   constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Leadtools.Multimedia uses the Document Service for converting 
      // to web-accessible formats. 
      lt.Document.DocumentFactory.serviceHost = 'http://localhost:40000'; 
      lt.Document.DocumentFactory.servicePath = ''; 
      lt.Document.DocumentFactory.serviceApiPath = 'api'; 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>MultimediaFactory Example | ConvertVideo</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Multimedia.js"></script> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
   <style> 
      .container { 
         height: 800px; 
         width: 600px; 
         border: 4px solid black; 
         margin-top: 10px; 
      } 
   </style> 
</head> 
 
<body> 
   <div> 
      <input id="load" type="file"> 
      <button type="button" id="delete">Delete</button> 
   </div> 
 
   <div class="container" id="root"> 
 
   </div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.MultimediaFactory.ConvertVideo(); 
   }; 
</script> 
 
</html> 

Requirements

Target Platforms

See Also

MultimediaFactory Members

Leadtools.Multimedia Namespace

getPlayableUrlAsync

Help Version 23.0.2024.2.29
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2024 LEAD Technologies, Inc. All Rights Reserved.
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.