client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
<ng-container [formGroup]="form">
<div class="pt-two-cols mt-4">
<div class="title-col"></div>
<div class="content-col">
<div class="callout callout-orange">
<span i18n>
Estimating a server's capacity to transcode and stream videos isn't easy and we can't tune PeerTube automatically.
</span>
<br />
<span i18n>
However, you may want to read <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://docs.joinpeertube.org/admin/configuration#vod-transcoding">our guidelines</a> before tweaking the following values.
</span>
</div>
</div>
</div>
<div class="pt-two-cols mt-4">
<div class="title-col">
<h2 i18n>TRANSCODING</h2>
<div i18n class="inner-form-description">
Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
resources, this is a critical part of PeerTube, so tread carefully.
</div>
</div>
<div class="content-col">
<ng-container formGroupName="transcoding">
<div>
<my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled" [recommended]="true">
<ng-template ptTemplate="label">
<ng-container i18n>Transcoding enabled</ng-container>
</ng-template>
<ng-container ngProjectAs="extra">
<div class="callout callout-light pt-2 pb-0">
<h3 class="callout-title" i18n>Input</h3>
<div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<my-peertube-checkbox
inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
i18n-labelText labelText="Allow additional extensions"
>
<ng-container ngProjectAs="description">
<span i18n>Allows users to upload videos with additional extensions than .mp4, .ogv and .webm (for example: .avi, .mov, .mkv etc).</span>
</ng-container>
</my-peertube-checkbox>
</div>
<div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<my-peertube-checkbox
inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
i18n-labelText labelText="Allow audio files upload"
>
<ng-container ngProjectAs="description">
<div i18n>Allows users to upload .mp3, .ogg, .wma, .flac, .aac, or .ac3 audio files.</div>
<div i18n>The file will be merged in a still image video with the preview file on upload.</div>
</ng-container>
</my-peertube-checkbox>
</div>
<div class="form-group" formGroupName="originalFile" [ngClass]="getTranscodingDisabledClass()">
<my-peertube-checkbox
inputName="transcodingOriginalFileKeep" formControlName="keep"
i18n-labelText labelText="Keep a version of the input file"
>
<ng-container ngProjectAs="description">
<div i18n>If enabled, the input file is not deleted after transcoding but moved in a dedicated folder or object storage</div>
</ng-container>
</my-peertube-checkbox>
</div>
</div>
<div class="callout callout-light pt-2 mt-2 pb-0">
<h3 class="callout-title" i18n>Output</h3>
<ng-container formGroupName="webVideos">
<div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<my-peertube-checkbox
inputName="transcodingWebVideosEnabled" formControlName="enabled"
i18n-labelText labelText="Web Videos enabled"
>
<ng-template ptTemplate="help">
<ng-container>
<p i18n>If you also enabled HLS support, it will multiply videos storage by 2</p>
</ng-container>
</ng-template>
</my-peertube-checkbox>
</div>
</ng-container>
<ng-container formGroupName="hls">
<div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<my-peertube-checkbox
inputName="transcodingHlsEnabled" formControlName="enabled"
i18n-labelText labelText="HLS with P2P support enabled"
[recommended]="true"
>
<ng-template ptTemplate="help">
<ng-container i18n>
<strong>Requires ffmpeg >= 4.1</strong>
<p>Generate HLS playlists and fragmented MP4 files resulting in a better playback than with Web Videos:</p>
<ul>
<li>Resolution change is smoother</li>
<li>Faster playback especially with long videos</li>
<li>More stable playback (less bugs/infinite loading)</li>
</ul>
<p>If you also enabled Web Videos support, it will multiply videos storage by 2</p>
</ng-container>
</ng-template>
<ng-container ngProjectAs="extra">
<div class="form-group" [ngClass]="getHLSDisabledClass()">
<my-peertube-checkbox
inputName="transcodingHlsSplitAudioAndVideo" formControlName="splitAudioAndVideo"
i18n-labelText labelText="Split audio and video streams"
>
<ng-container i18n ngProjectAs="description">If enabled, remote PeerTube instances < 6.3.0 won't be able to play these videos</ng-container>
<ng-template ptTemplate="help">
<ng-container i18n>Store the audio stream in a separate file from the video.</ng-container> <br />
<ng-container i18n>This option adds the ability for the HLS player to propose the "Audio only" quality to users.</ng-container> <br />
<ng-container i18n>It also saves disk space by not duplicating the audio stream in each resolution file</ng-container>
</ng-template>
</my-peertube-checkbox>
</div>
</ng-container>
</my-peertube-checkbox>
</div>
</ng-container>
<div class="form-group" formGroupName="fps" [ngClass]="getTranscodingDisabledClass()">
<label i18n for="transcodingFPSMax">Max video FPS</label>
<span i18n class="ms-2 small muted">Cap transcoded video FPS. Max resolution file still keeps the original FPS.</span>
<div class="number-with-unit">
<input type="number" name="transcodingFPSMax" formControlName="max" />
<span>FPS</span>
</div>
<div *ngIf="formErrors.transcoding.fps.max" class="form-error" role="alert">{{ formErrors.transcoding.fps.max }}</div>
</div>
<div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<div class="mb-2 fw-bold" i18n>Resolutions to generate</div>
<div class="ms-2 d-flex flex-column">
<ng-container formGroupName="resolutions">
<div class="form-group" *ngFor="let resolution of resolutions">
<my-peertube-checkbox
[inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
labelText="{{ resolution.label }}"
>
<ng-template *ngIf="resolution.description" ptTemplate="help">
<div [innerHTML]="resolution.description"></div>
</ng-template>
</my-peertube-checkbox>
</div>
</ng-container>
<my-peertube-checkbox
inputName="transcodingAlwaysTranscodeOriginalResolution" formControlName="alwaysTranscodeOriginalResolution"
i18n-labelText labelText="Also transcode original resolution"
>
<ng-container i18n ngProjectAs="description">Even if it's above your maximum enabled resolution</ng-container>
</my-peertube-checkbox>
</div>
</div>
</div>
</ng-container>
</my-peertube-checkbox>
</div>
<div class="form-group mt-4" formGroupName="remoteRunners" [ngClass]="getTranscodingDisabledClass()">
<my-peertube-checkbox
inputName="transcodingRemoteRunnersEnabled" formControlName="enabled"
i18n-labelText labelText="Enable remote runners for VOD"
>
<ng-container ngProjectAs="description">
<span i18n>
Use <a routerLink="/admin/system/runners/runners-list">remote runners</a> to process VOD transcoding.
Remote runners has to register on your instance first.
</span>
</ng-container>
</my-peertube-checkbox>
</div>
<div class="form-group mt-4" [ngClass]="getLocalTranscodingDisabledClass()">
<label i18n id="transcodingThreadsLabel" for="transcodingThreads">Transcoding threads</label>
<span class="small muted ms-1">
<ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
</ng-container>
<ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>
will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
</ng-container>
</span>
<my-select-custom-value
labelId="transcodingThreadsLabel"
inputId="transcodingThreads"
[items]="transcodingThreadOptions"
formControlName="threads"
[clearable]="false"
></my-select-custom-value>
<div *ngIf="formErrors.transcoding.threads" class="form-error" role="alert">{{ formErrors.transcoding.threads }}</div>
</div>
<div class="form-group" [ngClass]="getLocalTranscodingDisabledClass()">
<label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
<span class="small muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
<div class="number-with-unit">
<input type="number" id="transcodingConcurrency" formControlName="concurrency" />
<span i18n>jobs in parallel</span>
</div>
<div *ngIf="formErrors.transcoding.concurrency" class="form-error" role="alert">{{ formErrors.transcoding.concurrency }}</div>
</div>
<div class="form-group" [ngClass]="getLocalTranscodingDisabledClass()">
<label i18n for="transcodingProfile">Transcoding profile</label>
<span class="small muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
<my-select-options inputId="transcodingProfile" formControlName="profile" [items]="transcodingProfiles"></my-select-options>
<div *ngIf="formErrors.transcoding.profile" class="form-error" role="alert">{{ formErrors.transcoding.profile }}</div>
</div>
</ng-container>
</div>
</div>
<div class="pt-two-cols mt-2">
<div class="title-col">
<h2 i18n>VIDEO STUDIO</h2>
<div i18n class="inner-form-description">
Allows your users to edit their video (cut, add intro/outro, add a watermark etc)
</div>
</div>
<div class="content-col">
<ng-container formGroupName="videoStudio">
<div class="form-group" [ngClass]="getTranscodingDisabledClass()">
<my-peertube-checkbox
inputName="videoStudioEnabled" formControlName="enabled"
i18n-labelText labelText="Enable video studio"
>
<ng-container ngProjectAs="description" *ngIf="!isTranscodingEnabled()">
<span i18n>⚠️ You need to enable transcoding first to enable video studio</span>
</ng-container>
</my-peertube-checkbox>
</div>
<div class="form-group" formGroupName="remoteRunners" [ngClass]="getStudioDisabledClass()">
<my-peertube-checkbox
inputName="videoStudioRemoteRunnersEnabled" formControlName="enabled"
i18n-labelText labelText="Enable remote runners for studio"
>
<ng-container ngProjectAs="description">
<span i18n>
Use <a routerLink="/admin/system/runners/runners-list">remote runners</a> to process studio transcoding tasks.
Remote runners has to register on your instance first.
</span>
</ng-container>
</my-peertube-checkbox>
</div>
</ng-container>
</div>
</div>
</ng-container>