ffmpegwasm / ffmpegwasm/ffmpeg.wasm
Can't find selected font provider
- Dominant language
- C
- Stars
- 17.8k
- Forks
- 1.1k
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
I'm trying to add a .srt file to an mp4 video by modifying some parameters in the subtitle. I placed the font file inside the /tmp folder of ffmpeg wasm and check the font name using the FontForge program. Apparently the file is present (I can view it when using the command ffmpeg.listDir('/tmp'), but during execution I still receive a message.
I'm using Vue 2:
```
Queimar video
Progresso: {{ msg }}
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile, toBlobURL } from '@ffmpeg/util';
const ffmpegRef = new FFmpeg();
export default {
name: "FFmpegVue",
props: {
},
data() {
return {
videoFile: null,
srtFile: null,
ttfFile: null,
progress: 0,
proccesedVideos: [],
style: 1,
msg: "",
};
},
async mounted() {
await this.load()
},
methods: {
handleVideoFileChange(event) {
this.videoFile = event.target.files[0];
},
handleSrtFileChange(event) {
this.srtFile = event.target.files[0];
},
handleTtfFileChange(event) {
this.ttfFile = event.target.files[0];
},
async load() {
const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/umd'
const ffmpeg = ffmpegRef;
ffmpeg.on('log', ({ message }) => {
this.msg = message;
console.log(message);
});
await ffmpeg.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript'),
});
},
async start() {
if (this.videoFile && this.srtFile) {
const videoBlob = new Blob([this.videoFile], { type: this.videoFile.type });
const srtBlob = new Blob([this.srtFile], { type: this.srtFile.type });
const fontBlob = new Blob([this.ttfFile], { type: this.ttfFile.type });
await this.processVideo(videoBlob, srtBlob, fontBlob)
} else {
alert("Por favor, selecione um arquivo de vídeo e um arquivo SRT.");
}
},
async processVideo(video, srt, font) {
// Define os estilos dos subtitles
let font_name = 'Calibri';
let primary_colour = '&H8ffffff';
let outline_colour = '&H00000000';
let back_colour = '';
let border_style = '0';
let outline = '1';
let shadow = '0';
let marginv = '20';
let font_size = '16';
switch (this.style) {
case this.style == 1:
primary_colour = '&H00ffff';
break;
case this.style == 2:
border_style = '4';
outline = '3';
outline_colour = '&HFF000000';
marginv = '20';
back_colour = '&H80000000';
break;
case this.style == 3:
primary_colour = '&H00ffff';
border_style = '4';
outline_colour = '&HFF000000';
outline = '3';
marginv = '20';
back_colour = '&H80000000';
break;
}
const ffmpeg = ffmpegRef;
const inputPath = 'input.mp4';
const outputPath = 'output.mp4';
const srtPath = 'subtitle.srt';
const fontPath = 'tmp/Calibri'
// Adiciona os arquivos na memória compartilhada do worker que o ffmpeg irá utilizar
ffmpeg.writeFile(inputPath, await fetchFile(video));
ffmpeg.writeFile(srtPath, await fetchFile(srt));
ffmpeg.writeFile(fontPath, await fetchFile(font));
console.log(await ffmpeg.listDir('/tmp'))
// Executa a queima da legenda
await ffmpeg.exec([
"-i",
inputPath,
"-vf",
`subtitles=${srtPath}` +
`:fontsdir=/tmp:force_style='Fontname='${font_name}',Fontsize=${font_size},PrimaryColour=${primary_colour},OutlineColour=${outline_colour},BorderStyle=${border_style},Outline=${outline},Shadow=${shadow},MarginV=${marginv},BackColour=${back_colour}',scale=1280:720`,
"-c:v",
"libx264",
"-preset",
"ultrafast",
"-c:a",
"copy",
"-y",
outputPath
]);
const data = ffmpeg.readFile(outputPath);
// this.video = URL.createObjectURL(
// new Blob([data.buffer], { type: "video/mp4" })
// );
const videoBlob = new Blob([data.buffer], { type: "video/mp4" });
const videoURL = URL.createObjectURL(videoBlob);
const downloadLink = document.createElement("a");
downloadLink.href = videoURL;
downloadLink.download = "video_com_legenda.mp4";
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
// Faça algo com o arquivo de saída, como fazer o download ou exibi-lo no navegador
},
},
};
```
Command result: console.log(await ffmpeg.listDir('/tmp')) :

Logs:

Font Information:

Contributor guide
Assessment
This issue has not been assessed yet.