最新的ffmepg.js前端VUE3实现视频、音频裁剪上传功能

package.json

1. "dependencies": {
2.     "@ffmpeg/ffmpeg": "^0.12.10",
3.     "@ffmpeg/util": "^0.12.1"
4. }

复制代码

vue3组件代码

根据需要更改

1. <script setup lang="ts">
2. import { FFmpeg } from '@ffmpeg/ffmpeg';
3. import { fetchFile, toBlobURL } from '@ffmpeg/util';
4. import useInject from '@/utils/useInject';
6. import { reactive, onUnmounted } from 'vue';
7. const { $global, $fn } = useInject();
9. const props: any = defineProps<{
10.     params?: any;
11.     url?: any;
12. }>();
14. let ffmpegObj: any = reactive({
15.     file: null,
16.     urlpre: null,
17.     url: null,
18.     params: {
19.         ...(props?.params || {}),
20.         ext: '',
21.         starttime: 0,
22.         endtime: 3,
23.         maxtime: 0,
24.     },
25. });
27. const ffmpeg = new FFmpeg();
29. function filechange(e: any) {
30.     ffmpegObj.file = e.target.files[0];
32.     // 原视频预览方案一
33.     const reader: any = new FileReader();
34.     reader.readAsDataURL(ffmpegObj.file);
35.     reader.onload = () => {
36.         ffmpegObj.url = '';
37.         ffmpegObj.urlpre = reader.result;
39.         const audioElement: any = new Audio(ffmpegObj.urlpre);
40.         audioElement.addEventListener('loadedmetadata', () => {
41.             ffmpegObj.params.maxtime = audioElement.duration;
42.             ffmpegObj.params.starttime = 0;
43.             ffmpegObj.params.endtime = audioElement.duration;
44.         });
45.     };
47.     // 原视频预览方案二
48.     // const reader: any = new FileReader();
49.     // reader.readAsArrayBuffer(ffmpegObj.file);
50.     // let blob = null;
51.     // reader.onload = (e: any) => {
52.     //     if (typeof e.target.result === 'object') {
53.     //         blob = new Blob([e.target.result]);
54.     //     } else {
55.     //         blob = e.target.result;
56.     //     }
57.     //     ffmpegObj.url = '';
58.     //     if (blob == null) return;
59.     //     const url = URL.createObjectURL(blob);
60.     //     ffmpegObj.urlpre = url;
61.     //     const audioElement = new Audio(url);
62.     //     audioElement.addEventListener('loadedmetadata', function () {
63.     //         ffmpegObj.params.maxtime = audioElement.duration;
64.     //         ffmpegObj.params.starttime = 0;
65.     //         ffmpegObj.params.endtime = audioElement.duration;
66.     //     });
67.     // };
68. }
69. async function doffmpeg() {
70.     try {
71.         if (!ffmpegObj.file) {
72.             return;
73.         }
74.         ffmpegObj.fileext = ffmpegObj.file.name.split('.').pop();
76.         const inputName = `input.${ffmpegObj.fileext}`;
77.         const outputName = `output.${
78.             ffmpegObj.params.ext ? ffmpegObj.params.ext : ffmpegObj.fileext
79.         }`;
81.         console.log(666.001, ffmpeg, ffmpegObj);
83.         ffmpeg.on('log', ({ message: msg }) => {
84.             ffmpegObj.msglogger = msg;
85.         });
86.         await ffmpeg.load({
87.             coreURL: await toBlobURL(
88.                 './ffmpeg/ffmpeg-core.js',
89.                 'text/javascript'
90.             ),
91.             wasmURL: await toBlobURL(
92.                 './ffmpeg/ffmpeg-core.wasm',
93.                 'application/wasm'
94.             ),
95.             workerURL: await toBlobURL(
96.                 `./ffmpeg/ffmpeg-core.worker.js`,
97.                 'text/javascript'
98.             ),
99.         });
101.         await ffmpeg.writeFile(inputName, await fetchFile(ffmpegObj.urlpre));
102.         await ffmpeg.exec([
103.             '-ss',
104.             `${
105.                 ffmpegObj.params.starttime !== undefined
106.                     ? ffmpegObj.params.starttime
107.                     : 0
108.             }`,
109.             '-t',
110.             `${
111.                 (ffmpegObj.params.endtime !== undefined
112.                     ? ffmpegObj.params.endtime
113.                     : 3) -
114.                 (ffmpegObj.params.starttime !== undefined
115.                     ? ffmpegObj.params.starttime
116.                     : 0)
117.             }`,
118.             '-i',
119.             inputName,
120.             outputName,
121.         ]);
123.         ffmpegObj.data = await ffmpeg.readFile(outputName);
124.         ffmpegObj.blob = new Blob([ffmpegObj.data.buffer], {
125.             type:
126.                 'video/' + ffmpegObj.params.ext
127.                     ? ffmpegObj.params.ext
128.                     : ffmpegObj.fileext,
129.         });
131.         ffmpegObj.url = URL.createObjectURL(ffmpegObj.blob);
133.         ffmpegObj.urlpre = ''; // 清空原预览视频
134.     } catch (err) {
135.         alert('出错了');
136.         throw err;
137.     }
138. }
139. function blobToBase64(blob: any) {
140.     console.log(666.3002, blob);
141.     return new Promise((resolve, reject) => {
142.         const fileReader = new FileReader();
143.         fileReader.readAsDataURL(blob);
144.         fileReader.onload = () => {
145.             resolve(fileReader.result);
146.         };
147.         fileReader.onerror = () => {
148.             reject(new Error('文件流异常'));
149.         };
150.     });
151. }
152. // function convertBlobToFile(blob, fileName) {
153. //     blob.lastModifiedDate = new Date();
154. //     blob.name = fileName;
155. //     return blob;
156. // }
157. async function submit() {
158.     await doffmpeg();
159.     const resdata: any = await blobToBase64(ffmpegObj.blob);
160.     // const resdata: any = convertBlobToFile(ffmpegObj.blob, 'aaa');
161.     console.log(666.30002, resdata);
162.     $fn.useApiFiles()
163.         .request({
164.             data: props.url
165.                 ? { url: props.url }
166.                 : {
167.                       dir: 'chat/chat',
168.                       uid: $fn.As.Uuid('CU'),
169.                       ext:
170.                           '.' +
171.                           (ffmpegObj.params.ext
172.                               ? ffmpegObj.params.ext
173.                               : ffmpegObj.fileext),
174.                       data: resdata,
175.                   },
176.         })
177.         .then((res: any) => {
178.             console.log(666.789, res);
179.             props?.params?.fn(res);
180.         })
181.         .catch((err: any) => {
182.             $global.tipsfn({ type: 'err', con: err });
183.         });
184. }
186. //下载
187. function downffmpeg() {
188.     const oA: any = document.createElement('a');
189.     oA.download =
190.         'video_' +
191.         Date.now() +
192.         '.' +
193.         (ffmpegObj.params.ext ? ffmpegObj.params.ext : ffmpegObj.fileext);
194.     oA.href = ffmpegObj.url;
195.     document.body.appendChild(oA);
196.     oA.click();
197.     // 释放 URL 对象
198.     URL.revokeObjectURL(oA.href);
199.     oA.remove();
200. }
201. onUnmounted(() => {
202.     ffmpegObj = null;
203. });
204. </script>
205. <template>
206.     <div class="as-ff-area">
207.         <div class="as-show-area">
208.             <!-- <template v-if="ffmpegObj.urlpre"> -->
209.             原视频
210.             <video :src="ffmpegObj.urlpre" controls></video>
211.             <!-- </template> -->
212.             <!-- <template v-else> -->
213.             裁剪后视频
214.             <video :src="ffmpegObj.url" controls></video>
215.             <!-- </template> -->
216.             日志：
217.             {{ ffmpegObj.params.starttime }}
218.             -
219.             {{ ffmpegObj.params.endtime }}
220.             （{{ ffmpegObj.params.maxtime }}）
221.             <input
222.                 type="range"
223.                 v-model="ffmpegObj.params.starttime"
224.                 min="0"
225.                 :max="ffmpegObj.params.maxtime"
226.             />
227.             <input
228.                 type="range"
229.                 v-model="ffmpegObj.params.endtime"
230.                 min="0"
231.                 :max="ffmpegObj.params.maxtime"
232.             />
233.             <!-- <input type="number" v-model="ffmpegObj.params.starttime" />
234.             <input type="number" v-model="ffmpegObj.params.endtime" /> -->
235.             {{ ffmpegObj.msglogger }}
236.             {{ ffmpegObj.msgprogress }}
237.         </div>
239.         <div class="as-file-area">
240.             选择图片：
241.             <input class="file" type="file" @change="filechange" />
242.         </div>
244.         <div class="as-btn-area">
245.             <button @click="doffmpeg()">裁剪</button>
246.             <button @click="downffmpeg()">下载</button>
247.             <button @click="submit()">提交</button>
248.         </div>
249.     </div>
250. </template>
252. <style scoped>
253. .as-ff-area {
254.     width: 100%;
255.     height: 100%;
256.     display: flex;
257.     flex-direction: column;
258. }
259. .as-btn-area {
260.     text-align: center;
261.     height: auto;
262. }
263. .as-btn-area > button {
264.     user-select: none;
265.     padding: 5px 12px;
266.     margin: 15px 5px 0 5px;
267. }
268. .as-file-area {
269.     padding: 5px 12px;
270.     text-align: center;
271.     height: auto;
272.     width: auto;
273.     display: inline-block;
274.     background-color: var(--ch1);
275. }
276. .as-show-area {
277.     flex-grow: 1;
278.     width: 100%;
279.     overflow: auto;
280.     display: flex;
281.     justify-content: center;
282.     align-items: center;
283.     flex-direction: column;
284. }
285. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。