mirror of https://github.com/immich-app/immich.git
20 video conversion for web view (#200)
* Added job for video conversion every 1 minute * Handle get video as mp4 on the web * Auto play video on web on hovered * Added video player * Added animation and video duration to thumbnail player * Fixed issue with video not playing on hover * Added animation when loading thumbnailpull/201/head
Alex
GitHub
parent
53c3c916a6
commit
ab6909bfbd
@ -0,0 +1,17 @@
|
||||
import { MigrationInterface, QueryRunner } from "typeorm";
|
||||
|
||||
export class UpdateAssetTableWithEncodeVideoPath1654299904583 implements MigrationInterface {
|
||||
public async up(queryRunner: QueryRunner): Promise<void> {
|
||||
await queryRunner.query(`
|
||||
alter table assets
|
||||
add column if not exists "encodedVideoPath" varchar default '';
|
||||
`)
|
||||
}
|
||||
|
||||
public async down(queryRunner: QueryRunner): Promise<void> {
|
||||
await queryRunner.query(`
|
||||
alter table assets
|
||||
drop column if exists "encodedVideoPath";
|
||||
`);
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,30 @@
|
||||
import { BullModule } from '@nestjs/bull';
|
||||
import { Module } from '@nestjs/common';
|
||||
import { TypeOrmModule } from '@nestjs/typeorm';
|
||||
import { AssetModule } from '../../api-v1/asset/asset.module';
|
||||
import { AssetEntity } from '../../api-v1/asset/entities/asset.entity';
|
||||
import { ImageConversionService } from './image-conversion.service';
|
||||
import { VideoConversionProcessor } from './video-conversion.processor';
|
||||
import { VideoConversionService } from './video-conversion.service';
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
TypeOrmModule.forFeature([AssetEntity]),
|
||||
|
||||
BullModule.registerQueue({
|
||||
settings: {},
|
||||
name: 'video-conversion',
|
||||
limiter: {
|
||||
max: 1,
|
||||
duration: 60000
|
||||
},
|
||||
defaultJobOptions: {
|
||||
attempts: 3,
|
||||
removeOnComplete: true,
|
||||
removeOnFail: false,
|
||||
},
|
||||
}),
|
||||
],
|
||||
providers: [ImageConversionService],
|
||||
providers: [ImageConversionService, VideoConversionService, VideoConversionProcessor,],
|
||||
})
|
||||
export class ScheduleTasksModule { }
|
||||
|
||||
@ -0,0 +1,56 @@
|
||||
import { Process, Processor } from '@nestjs/bull';
|
||||
import { InjectRepository } from '@nestjs/typeorm';
|
||||
import { Job } from 'bull';
|
||||
import { Repository } from 'typeorm';
|
||||
import { AssetEntity } from '../../api-v1/asset/entities/asset.entity';
|
||||
import { existsSync, mkdirSync } from 'fs';
|
||||
import { APP_UPLOAD_LOCATION } from '../../constants/upload_location.constant';
|
||||
import ffmpeg from 'fluent-ffmpeg';
|
||||
import { Logger } from '@nestjs/common';
|
||||
|
||||
@Processor('video-conversion')
|
||||
export class VideoConversionProcessor {
|
||||
|
||||
constructor(
|
||||
@InjectRepository(AssetEntity)
|
||||
private assetRepository: Repository<AssetEntity>,
|
||||
) { }
|
||||
|
||||
@Process('to-mp4')
|
||||
async convertToMp4(job: Job) {
|
||||
const { asset }: { asset: AssetEntity } = job.data;
|
||||
|
||||
const basePath = APP_UPLOAD_LOCATION;
|
||||
const encodedVideoPath = `${basePath}/${asset.userId}/encoded-video`;
|
||||
|
||||
if (!existsSync(encodedVideoPath)) {
|
||||
mkdirSync(encodedVideoPath, { recursive: true });
|
||||
}
|
||||
|
||||
const latestAssetInfo = await this.assetRepository.findOne({ id: asset.id });
|
||||
const savedEncodedPath = encodedVideoPath + "/" + latestAssetInfo.id + '.mp4'
|
||||
|
||||
if (latestAssetInfo.encodedVideoPath == '') {
|
||||
ffmpeg(latestAssetInfo.originalPath)
|
||||
.outputOptions([
|
||||
'-crf 23',
|
||||
'-preset ultrafast',
|
||||
'-vcodec libx264',
|
||||
'-acodec mp3',
|
||||
'-vf scale=1280:-2'
|
||||
])
|
||||
.output(savedEncodedPath)
|
||||
.on('start', () => Logger.log("Start Converting", 'VideoConversionMOV2MP4'))
|
||||
.on('error', (a, b, c) => {
|
||||
Logger.error('Cannot Convert Video', 'VideoConversionMOV2MP4')
|
||||
console.log(a, b, c)
|
||||
})
|
||||
.on('end', async () => {
|
||||
Logger.log(`Converting Success ${latestAssetInfo.id}`, 'VideoConversionMOV2MP4')
|
||||
await this.assetRepository.update({ id: latestAssetInfo.id }, { encodedVideoPath: savedEncodedPath });
|
||||
}).run();
|
||||
}
|
||||
|
||||
return {}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
import { Injectable, Logger } from '@nestjs/common';
|
||||
import { Cron, CronExpression } from '@nestjs/schedule';
|
||||
import { InjectRepository } from '@nestjs/typeorm';
|
||||
import { Repository } from 'typeorm';
|
||||
import { AssetEntity } from '../../api-v1/asset/entities/asset.entity';
|
||||
import sharp from 'sharp';
|
||||
import ffmpeg from 'fluent-ffmpeg';
|
||||
import { APP_UPLOAD_LOCATION } from '../../constants/upload_location.constant';
|
||||
import { existsSync, mkdirSync } from 'fs';
|
||||
import { InjectQueue } from '@nestjs/bull/dist/decorators';
|
||||
import { Queue } from 'bull';
|
||||
import { randomUUID } from 'crypto';
|
||||
|
||||
@Injectable()
|
||||
export class VideoConversionService {
|
||||
|
||||
|
||||
constructor(
|
||||
@InjectRepository(AssetEntity)
|
||||
private assetRepository: Repository<AssetEntity>,
|
||||
|
||||
@InjectQueue('video-conversion')
|
||||
private videoEncodingQueue: Queue
|
||||
) { }
|
||||
|
||||
|
||||
// time ffmpeg -i 15065f4a-47ff-4aed-8c3e-c9fcf1840531.mov -crf 35 -preset ultrafast -vcodec libx264 -acodec mp3 -vf "scale=1280:-1" 15065f4a-47ff-4aed-8c3e-c9fcf1840531.mp4
|
||||
@Cron(CronExpression.EVERY_MINUTE
|
||||
, {
|
||||
name: 'video-encoding'
|
||||
})
|
||||
async mp4Conversion() {
|
||||
const assets = await this.assetRepository.find({
|
||||
where: {
|
||||
type: 'VIDEO',
|
||||
mimeType: 'video/quicktime',
|
||||
encodedVideoPath: ''
|
||||
},
|
||||
order: {
|
||||
createdAt: 'DESC'
|
||||
},
|
||||
take: 1
|
||||
});
|
||||
|
||||
if (assets.length > 0) {
|
||||
const asset = assets[0];
|
||||
await this.videoEncodingQueue.add('to-mp4', { asset }, { jobId: asset.id },)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
<script lang="ts">
|
||||
import { session } from '$app/stores';
|
||||
import { serverEndpoint } from '$lib/constants';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import type { ImmichAsset, ImmichExif } from '$lib/models/immich-asset';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import LoadingSpinner from '../shared/loading-spinner.svelte';
|
||||
|
||||
export let assetId: string;
|
||||
|
||||
let asset: ImmichAsset;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let videoPlayerNode: HTMLVideoElement;
|
||||
let isVideoLoading = true;
|
||||
|
||||
onMount(async () => {
|
||||
if ($session.user) {
|
||||
const res = await fetch(serverEndpoint + '/asset/assetById/' + assetId, {
|
||||
headers: {
|
||||
Authorization: 'bearer ' + $session.user.accessToken,
|
||||
},
|
||||
});
|
||||
asset = await res.json();
|
||||
|
||||
await loadVideoData();
|
||||
}
|
||||
});
|
||||
|
||||
const loadVideoData = async () => {
|
||||
isVideoLoading = true;
|
||||
const videoUrl = `/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isWeb=true`;
|
||||
if ($session.user) {
|
||||
try {
|
||||
const res = await fetch(serverEndpoint + videoUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: 'bearer ' + $session.user.accessToken,
|
||||
},
|
||||
});
|
||||
|
||||
const videoData = URL.createObjectURL(await res.blob());
|
||||
videoPlayerNode.src = videoData;
|
||||
|
||||
videoPlayerNode.load();
|
||||
|
||||
videoPlayerNode.oncanplay = () => {
|
||||
videoPlayerNode.muted = true;
|
||||
videoPlayerNode.play();
|
||||
videoPlayerNode.muted = false;
|
||||
|
||||
isVideoLoading = false;
|
||||
};
|
||||
|
||||
return videoData;
|
||||
} catch (e) {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div transition:fade={{ duration: 150 }} class="flex place-items-center place-content-center h-full select-none">
|
||||
{#if asset}
|
||||
<video controls class="h-full object-contain" bind:this={videoPlayerNode}>
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
|
||||
{#if isVideoLoading}
|
||||
<div class="absolute w-full h-full bg-black/50 flex place-items-center place-content-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
Reference in New Issue