ffmpeg_in_browser/advanced.html at main · chn-lee-yumi/ffmpeg_in_browser · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FFmpeg Online Converter (Web-based FFmpeg)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="FFmpeg online converter. Convert videos/audio in-browser via FFmpeg. Expert Mode for FFmpeg-savvy users. Best for quick file conversions due to wasm efficiency.">
    <link crossorigin="anonymous" rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="alternate" hreflang="en" href="advanced.html"/>
    <link rel="alternate" hreflang="zh" href="advanced_zh.html"/>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8336276656855850" crossorigin="anonymous"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZZZQVLS89C"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-ZZZQVLS89C');
    </script>
</head>
<body>
<div id="app" style="margin-left: 10%; margin-right: 10%; margin-bottom: 5%;">
    <h1>FFmpeg Online Converter - Expert Mode</h1>
    <el-row>
        <p>Language/语言:
            <el-link type="primary" href="advanced.html">English</el-link>
            <el-link type="primary" href="advanced_zh.html">中文</el-link>
        </p>
    </el-row>
    <h2>Introduction</h2>
    <el-row>
        <p>Convert with FFmpeg in your browser (based on FFmpeg.wasm). Using Expert Mode implies familiarity with FFmpeg's parameters. Due to wasm
            efficiency considerations, it's recommended for converting only short videos or audio files.</p>
        <p>
            <el-link type="warning" href="index.html">Click to switch to Simple Mode</el-link>
        </p>
        <p>
            <el-link type="success" href="https://github.com/chn-lee-yumi/ffmpeg_in_browser">This project is open source on GitHub (Welcome to provide
                suggestions and feedback through issues)
            </el-link>
        </p>
        <p>
            Other tools:
            <el-link type="success" href="https://tool.gcc.ac.cn/">https://tool.gcc.ac.cn/</el-link>
        </p>
    </el-row>
    <h2>Configuration</h2>
    <el-row>
        Thread Mode:
        <el-switch v-model="threadMode" active-text="Multithread (faster but unstable and not supported by all browsers, please switch it off when encountering errors)"
                   inactive-text="Single thread" @change="reloadFFmpeg"></el-switch>
    </el-row>
    <h2>Quick Command</h2>
    <el-row>
        <el-button type="info" @click="setParams(``, `-c:v copy -c:a copy`, `output.mp4`)">Copy Video and Sound Stream to MP4</el-button>
        <el-button type="info" @click="setParams(`-ss 5 -to 15`, `-c:v copy -c:a copy`, `output.mp4`)">Clip First 5-15 Seconds</el-button>
        <el-button type="info" @click="setParams(``, `-q:v 3`, `output.jpg`)">Convert to JPG and Set Quality</el-button>
        <el-button type="info" @click="setParams(``, `-b:v 192k`, `output.mp3`)">Convert to MP3 and Set Quality</el-button>
        <el-button type="info" @click="setParams(``, `-ac 1`, `output.wav`)">Convert to Mono WAV</el-button>
    </el-row>
    <h2>Transcoding Command</h2>
    <el-form :inline="true">
        <el-form-item label="ffmpeg">
            <el-input placeholder="Parameters Before -i" v-model="paramsFront" class="input-with-select" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="-i">
            <el-upload ref="upload" :on-change="handleFiles" :auto-upload="false" limit="1" multiple="false" :on-exceed="handleExceed">
                <el-button size="big" type="primary">Select File</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-input placeholder="Parameters After -i" v-model="params" class="input-with-select" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="-o">
            <el-input placeholder="Output Filename" v-model="outputName" class="input-with-select" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button size="big" type="success" @click="start" v-loading="loading" :disabled="loading" >Run</el-button>
        </el-form-item>
    </el-form>
    <h2>System Output</h2>
    <el-card class="box-card">
        <pre id="tty" style="white-space: pre-wrap; word-wrap: break-word;">Loading FFmpeg, please wait...</pre>
        <el-row v-if="downloading">
            <p v-model="currentLoadingUrl">Downloading: {{currentLoadingUrl}}</p>
            <el-progress :percentage="percentage"></el-progress>
        </el-row>
    </el-card>
</div>
</body>
<script crossorigin="anonymous" src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<script src="common.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        loading: false,
        fileList: [],
        file: null,
        paramsFront: "",
        params: "-c:v copy -c:a copy",
        outputName: "output.mp4",
        percentage: 0,
        threadMode: false,
        currentLoadingUrl: "",
        total: 0,
        received: 0,
        downloading: false,
    },
    mounted: async function() {
        this.loading = true;
        this.downloading = true;
        await load(this.threadMode, this.cb);
        this.downloading = false;
        this.loading = false;
        log("FFmpeg Loaded!");
    },
    methods: {
        setParams: function(paramsFront, params, output) {
            this.paramsFront = paramsFront;
            this.params = params;
            this.outputName = output;
        },
        cb: function(data) {
            this.currentLoadingUrl = data.url;
            this.total = data.total;
            this.received = data.received;
            this.percentage = ((data.received / data.total) * 100).toFixed(0);
        },
        reloadFFmpeg: async function() {
            cleanLog();
            log("Reloading FFmpeg...");
            this.loading = true;
            this.downloading = true;
            await load(this.threadMode, this.cb);
            this.downloading = false;
            this.loading = false;
            log("FFmpeg Loaded!");
        },
        handleFiles(file, fileList) {
            this.file = file;
            this.fileList = fileList;
        },
        handleExceed(files, fileList) {
            this.$set(fileList[0], 'raw', files[0]);
            this.$set(fileList[0], 'name', files[0].name);
            this.$refs.upload.clearFiles();
            this.$refs.upload.handleStart(files[0]);
        },
        start: async function() {
            cleanLog();
            const file = this.file;
            if (this.file == null) {
                alert("Please select file.");
                return;
            }
            this.loading = true;
            console.log(file.name);
            const inputDir = '/input';
            const inputFile = `${inputDir}/${file.name}`;
            await ffmpeg.createDir(inputDir);
            await ffmpeg.mount('WORKERFS', {
                files: [file.raw],
            }, inputDir);
            var args = [];
            var paramsFront = this.paramsFront.trim();
            if (paramsFront != "") args = args.concat(paramsFront.split(" "));
            var middleArgs = ['-i', inputFile];
            args = args.concat(middleArgs);
            var params = this.params.trim();
            if (params != "") args = args.concat(params.split(" "));
            args.push(this.outputName);
            console.log(args);
            const err = await ffmpeg.exec(args);
            if (err != 0) {
                log("<strong>Transcode Error! Please see the log above.</strong>");
            } else {
                log("Exporting output file...");
                const data = await ffmpeg.readFile(this.outputName);
                downloadFileByBlob(URL.createObjectURL(new Blob([data.buffer], {
                    type: "application/octet-stream"
                })), this.outputName);
            }
            await ffmpeg.unmount(inputDir);
            await ffmpeg.deleteDir(inputDir);
            this.loading = false;
        }
    }
})
</script>
</html>