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>
