@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
73 lines • 11.6 kB
JavaScript
import { Injectable } from '@angular/core';
import { concat, fromEvent, Observable } from 'rxjs';
import * as i0 from "@angular/core";
export class FrameExtractionService {
createVideoPlayer(source) {
const videoPlayer = document.createElement('video');
videoPlayer.preload = 'auto';
videoPlayer.src = source;
return videoPlayer;
}
createCanvas(width, height) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
return canvas;
}
goToFrame(videoPlayer, time) {
videoPlayer.currentTime = time;
return fromEvent(videoPlayer, time === 0 ? 'loadeddata' : 'seeked');
}
getThumbnail(videoPlayer, canvas, time, width = 160, height = 90) {
return Observable.create((observer) => {
// go to specified frame
const subscription = this.goToFrame(videoPlayer, time).subscribe(() => {
// create image from current frame
canvas.getContext('2d').drawImage(videoPlayer, 0, 0, width, height);
observer.next({ image: canvas.toDataURL(), width, height, time });
observer.complete();
subscription.unsubscribe();
});
});
}
getFrameThumbnail(source, width, height, time) {
// create required elements
let videoPlayer = this.createVideoPlayer(source);
let canvas = this.createCanvas(width, height);
const frameSubscription = this.getThumbnail(videoPlayer, canvas, time, width, height);
// ensure we release memory after we are finished
frameSubscription.subscribe(null, null, () => {
videoPlayer = null;
canvas = null;
});
return frameSubscription;
}
getFrameThumbnails(source, width, height, start, end, skip = 5) {
// create required elements
let videoPlayer = this.createVideoPlayer(source);
let canvas = this.createCanvas(width, height);
return Observable.create((observer) => {
fromEvent(videoPlayer, 'loadedmetadata').subscribe(() => {
// calculate the frames required
const frames = [];
for (let idx = start; idx < end; idx += skip) {
frames.push(this.getThumbnail(videoPlayer, canvas, idx, width, height));
}
concat(...frames).subscribe((frame) => observer.next(frame), null, () => {
videoPlayer = null;
canvas = null;
observer.complete();
});
});
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FrameExtractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FrameExtractionService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FrameExtractionService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJhbWUtZXh0cmFjdGlvbi5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL3NlcnZpY2VzL2ZyYW1lLWV4dHJhY3Rpb24vZnJhbWUtZXh0cmFjdGlvbi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFZLE1BQU0sTUFBTSxDQUFDOztBQUsvRCxNQUFNLE9BQU8sc0JBQXNCO0lBRXZCLGlCQUFpQixDQUFDLE1BQWM7UUFDcEMsTUFBTSxXQUFXLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUNwRCxXQUFXLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztRQUM3QixXQUFXLENBQUMsR0FBRyxHQUFHLE1BQU0sQ0FBQztRQUN6QixPQUFPLFdBQVcsQ0FBQztJQUN2QixDQUFDO0lBRU8sWUFBWSxDQUFDLEtBQWEsRUFBRSxNQUFjO1FBQzlDLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDaEQsTUFBTSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFDckIsTUFBTSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7UUFDdkIsT0FBTyxNQUFNLENBQUM7SUFDbEIsQ0FBQztJQUVPLFNBQVMsQ0FBQyxXQUE2QixFQUFFLElBQVk7UUFDekQsV0FBVyxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7UUFDL0IsT0FBTyxTQUFTLENBQUMsV0FBVyxFQUFFLElBQUksS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDeEUsQ0FBQztJQUVPLFlBQVksQ0FBQyxXQUE2QixFQUFFLE1BQXlCLEVBQUUsSUFBWSxFQUFFLFFBQWdC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Q0FBQyxDQUFDO1FBRVAsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDOytHQTlFUSxzQkFBc0I7bUhBQXRCLHNCQUFzQixjQUZuQixNQUFNOzs0RkFFVCxzQkFBc0I7a0JBSGxDLFVBQVU7bUJBQUM7b0JBQ1IsVUFBVSxFQUFFLE1BQU07aUJBQ3JCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgY29uY2F0LCBmcm9tRXZlbnQsIE9ic2VydmFibGUsIE9ic2VydmVyIH0gZnJvbSAncnhqcyc7XG5cbkBJbmplY3RhYmxlKHtcbiAgICBwcm92aWRlZEluOiAncm9vdCdcbn0pXG5leHBvcnQgY2xhc3MgRnJhbWVFeHRyYWN0aW9uU2VydmljZSB7XG5cbiAgICBwcml2YXRlIGNyZWF0ZVZpZGVvUGxheWVyKHNvdXJjZTogc3RyaW5nKTogSFRNTFZpZGVvRWxlbWVudCB7XG4gICAgICAgIGNvbnN0IHZpZGVvUGxheWVyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgndmlkZW8nKTtcbiAgICAgICAgdmlkZW9QbGF5ZXIucHJlbG9hZCA9ICdhdXRvJztcbiAgICAgICAgdmlkZW9QbGF5ZXIuc3JjID0gc291cmNlO1xuICAgICAgICByZXR1cm4gdmlkZW9QbGF5ZXI7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBjcmVhdGVDYW52YXMod2lkdGg6IG51bWJlciwgaGVpZ2h0OiBudW1iZXIpOiBIVE1MQ2FudmFzRWxlbWVudCB7XG4gICAgICAgIGNvbnN0IGNhbnZhcyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2NhbnZhcycpO1xuICAgICAgICBjYW52YXMud2lkdGggPSB3aWR0aDtcbiAgICAgICAgY2FudmFzLmhlaWdodCA9IGhlaWdodDtcbiAgICAgICAgcmV0dXJuIGNhbnZhcztcbiAgICB9XG5cbiAgICBwcml2YXRlIGdvVG9GcmFtZSh2aWRlb1BsYXllcjogSFRNTFZpZGVvRWxlbWVudCwgdGltZTogbnVtYmVyKTogT2JzZXJ2YWJsZTxFdmVudD4ge1xuICAgICAgICB2aWRlb1BsYXllci5jdXJyZW50VGltZSA9IHRpbWU7XG4gICAgICAgIHJldHVybiBmcm9tRXZlbnQodmlkZW9QbGF5ZXIsIHRpbWUgPT09IDAgPyAnbG9hZGVkZGF0YScgOiAnc2Vla2VkJyk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBnZXRUaHVtYm5haWwodmlkZW9QbGF5ZXI6IEhUTUxWaWRlb0VsZW1lbnQsIGNhbnZhczogSFRNTENhbnZhc0VsZW1lbnQsIHRpbWU6IG51bWJlciwgd2lkdGg6IG51bWJlciA9IDE2MCwgaGVpZ2h0OiBudW1iZXIgPSA5MCk6IE9ic2VydmFibGU8RXh0cmFjdGVkRnJhbWU+IHtcblxuICAgICAgICByZXR1cm4gT2JzZXJ2YWJsZS5jcmVhdGUoKG9ic2VydmVyOiBPYnNlcnZlcjxFeHRyYWN0ZWRGcmFtZT4pID0+IHtcblxuICAgICAgICAgICAgLy8gZ28gdG8gc3BlY2lmaWVkIGZyYW1lXG4gICAgICAgICAgICBjb25zdCBzdWJzY3JpcHRpb24gPSB0aGlzLmdvVG9GcmFtZSh2aWRlb1BsYXllciwgdGltZSkuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgICAgICAgICAvLyBjcmVhdGUgaW1hZ2UgZnJvbSBjdXJyZW50IGZyYW1lXG4gICAgICAgICAgICAgICAgY2FudmFzLmdldENvbnRleHQoJzJkJykuZHJhd0ltYWdlKHZpZGVvUGxheWVyLCAwLCAwLCB3aWR0aCwgaGVpZ2h0KTtcbiAgICAgICAgICAgICAgICBvYnNlcnZlci5uZXh0KHsgaW1hZ2U6IGNhbnZhcy50b0RhdGFVUkwoKSwgd2lkdGgsIGhlaWdodCwgdGltZSB9KTtcbiAgICAgICAgICAgICAgICBvYnNlcnZlci5jb21wbGV0ZSgpO1xuICAgICAgICAgICAgICAgIHN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgICAgICAgICAgfSk7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIGdldEZyYW1lVGh1bWJuYWlsKHNvdXJjZTogc3RyaW5nLCB3aWR0aDogbnVtYmVyLCBoZWlnaHQ6IG51bWJlciwgdGltZTogbnVtYmVyKTogT2JzZXJ2YWJsZTxFeHRyYWN0ZWRGcmFtZT4ge1xuXG4gICAgICAgIC8vIGNyZWF0ZSByZXF1aXJlZCBlbGVtZW50c1xuICAgICAgICBsZXQgdmlkZW9QbGF5ZXIgPSB0aGlzLmNyZWF0ZVZpZGVvUGxheWVyKHNvdXJjZSk7XG4gICAgICAgIGxldCBjYW52YXMgPSB0aGlzLmNyZWF0ZUNhbnZhcyh3aWR0aCwgaGVpZ2h0KTtcblxuICAgICAgICBjb25zdCBmcmFtZVN1YnNjcmlwdGlvbiA9IHRoaXMuZ2V0VGh1bWJuYWlsKHZpZGVvUGxheWVyLCBjYW52YXMsIHRpbWUsIHdpZHRoLCBoZWlnaHQpO1xuXG4gICAgICAgIC8vIGVuc3VyZSB3ZSByZWxlYXNlIG1lbW9yeSBhZnRlciB3ZSBhcmUgZmluaXNoZWRcbiAgICAgICAgZnJhbWVTdWJzY3JpcHRpb24uc3Vic2NyaWJlKG51bGwsIG51bGwsICgpID0+IHtcbiAgICAgICAgICAgIHZpZGVvUGxheWVyID0gbnVsbDtcbiAgICAgICAgICAgIGNhbnZhcyA9IG51bGw7XG4gICAgICAgIH0pO1xuXG4gICAgICAgIHJldHVybiBmcmFtZVN1YnNjcmlwdGlvbjtcbiAgICB9XG5cbiAgICBnZXRGcmFtZVRodW1ibmFpbHMoc291cmNlOiBzdHJpbmcsIHdpZHRoOiBudW1iZXIsIGhlaWdodDogbnVtYmVyLCBzdGFydDogbnVtYmVyLCBlbmQ6IG51bWJlciwgc2tpcDogbnVtYmVyID0gNSk6IE9ic2VydmFibGU8RXh0cmFjdGVkRnJhbWU+IHtcblxuICAgICAgICAvLyBjcmVhdGUgcmVxdWlyZWQgZWxlbWVudHNcbiAgICAgICAgbGV0IHZpZGVvUGxheWVyID0gdGhpcy5jcmVhdGVWaWRlb1BsYXllcihzb3VyY2UpO1xuICAgICAgICBsZXQgY2FudmFzID0gdGhpcy5jcmVhdGVDYW52YXMod2lkdGgsIGhlaWdodCk7XG5cbiAgICAgICAgcmV0dXJuIE9ic2VydmFibGUuY3JlYXRlKChvYnNlcnZlcjogT2JzZXJ2ZXI8RXh0cmFjdGVkRnJhbWU+KSA9PiB7XG5cbiAgICAgICAgICAgIGZyb21FdmVudCh2aWRlb1BsYXllciwgJ2xvYWRlZG1ldGFkYXRhJykuc3Vic2NyaWJlKCgpID0+IHtcblxuICAgICAgICAgICAgICAgIC8vIGNhbGN1bGF0ZSB0aGUgZnJhbWVzIHJlcXVpcmVkXG4gICAgICAgICAgICAgICAgY29uc3QgZnJhbWVzID0gW107XG5cbiAgICAgICAgICAgICAgICBmb3IgKGxldCBpZHggPSBzdGFydDsgaWR4IDwgZW5kOyBpZHggKz0gc2tpcCkge1xuICAgICAgICAgICAgICAgICAgICBmcmFtZXMucHVzaCh0aGlzLmdldFRodW1ibmFpbCh2aWRlb1BsYXllciwgY2FudmFzLCBpZHgsIHdpZHRoLCBoZWlnaHQpKTtcbiAgICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgICBjb25jYXQoLi4uZnJhbWVzKS5zdWJzY3JpYmUoKGZyYW1lOiBFeHRyYWN0ZWRGcmFtZSkgPT4gb2JzZXJ2ZXIubmV4dChmcmFtZSksIG51bGwsICgpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgdmlkZW9QbGF5ZXIgPSBudWxsO1xuICAgICAgICAgICAgICAgICAgICBjYW52YXMgPSBudWxsO1xuICAgICAgICAgICAgICAgICAgICBvYnNlcnZlci5jb21wbGV0ZSgpO1xuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgfSk7XG5cbiAgICAgICAgfSk7XG4gICAgfVxuXG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRXh0cmFjdGVkRnJhbWUge1xuICAgIGltYWdlOiBzdHJpbmc7XG4gICAgd2lkdGg6IG51bWJlcjtcbiAgICBoZWlnaHQ6IG51bWJlcjtcbiAgICB0aW1lOiBudW1iZXI7XG59XG4iXX0=