新項(xiàng)目開發(fā)的流程
當(dāng)在項(xiàng)目中使用新技術(shù)時，我們應(yīng)該首先進(jìn)行調(diào)研，了解其特點(diǎn)和使用方法。在實(shí)現(xiàn)功能時，我們可以采用最簡單的方式，而不必過于關(guān)注項(xiàng)目的設(shè)計(jì)和結(jié)構(gòu)。一旦掌握了新技術(shù)，我們可以根據(jù)其API屬性進(jìn)行代碼設(shè)計(jì)，以便更好地開發(fā)。以開發(fā)一個純web端的視頻編輯處理器為例，我們打算采用vite、vue3、elementPlus、pinia和ffmpegjs等技術(shù)。雖然第一次接觸ffmpegjs庫可能會感到陌生，但我們需要先了解其API屬性，并能夠?qū)崿F(xiàn)所需的功能。在此基礎(chǔ)上，我們可以考慮如何將ffmpegjs集成到項(xiàng)目中，并設(shè)計(jì)好項(xiàng)目架構(gòu)和代碼結(jié)構(gòu)，以便更好地使用和維護(hù)。
視頻編輯器項(xiàng)目操作介紹：
web視頻編輯器
1.功能列表：
- 上傳視頻
- 視頻分割
- 添加字幕文件
- 文字軌道：自定義時間，文字內(nèi)容
- 貼圖軌道：自定義時間
- 預(yù)覽
- 導(dǎo)出功能
2.代碼：
git倉庫：https://github.com/huhaibiao/video-edit-demo.git
3.線上演示vercel url：
https://video-edit-demo.vercel.app/#/
- 項(xiàng)目運(yùn)行
-
pnpm i安裝依賴 -
pnpm dev項(xiàng)目本地運(yùn)行 -
pnpm build項(xiàng)目打包
ffmpegjs是什么
ffmpegjs是一個基于JavaScript的開源庫，它提供了一個在瀏覽器中運(yùn)行FFmpeg的解決方案。FFmpeg是一個廣泛使用的開源跨平臺音視頻處理工具，可以用于音視頻的編解碼、轉(zhuǎn)碼、剪輯、合并等操作。ffmpegjs庫通過將FFmpeg編譯為WebAssembly格式，并使用JavaScript封裝其API，使得我們可以在瀏覽器中使用FFmpeg進(jìn)行音視頻處理，而無需安裝任何本地軟件。ffmpegjs庫可以用于開發(fā)各種基于Web的音視頻應(yīng)用，如視頻編輯器、音視頻轉(zhuǎn)換器、在線直播等。
安裝ffmpegjs
需要安裝 @ffmpeg/ffmpeg @ffmpeg/core 這兩個npm包pnpm install @ffmpeg/ffmpeg @ffmpeg/core文章來源：http://www.zghlxwxcb.cn/news/detail-615197.html
在項(xiàng)目中引入
import { fetchFile, createFFmpeg } from '@ffmpeg/ffmpeg'
項(xiàng)目核心模塊
import { fetchFile, createFFmpeg } from '@ffmpeg/ffmpeg'
import { processData, tickCounts } from '../store'
// @ts-ignore
// const { fetchFile, createFFmpeg } = FFmpeg
const ffmpeg = createFFmpeg({
corePath: '/plugin/ffmpeg-core.js'
})
ffmpeg.load()
ffmpeg.setProgress(progress => {
processData.value = progress.ratio
})
const videoInfo = {
duration: '',
bitRate: ''
}
ffmpeg.setLogger(logs => {
if (logs.message.includes('Duration')) {
videoInfo.duration = logs.message.slice(
logs.message.indexOf('Duration:') + 'Duration: '.length,
logs.message.indexOf(',')
)
videoInfo.bitRate = logs.message.slice(
logs.message.indexOf('bitrate:') + 'bitrate: '.length
)
console.log(videoInfo)
}
})
let videoName = 'initVideo'
/**ffmpeg導(dǎo)入視頻 */
export const initVideo = async (video: Blob) => {
ffmpeg.FS('writeFile', videoName, await fetchFile(video))
await ffmpeg.run('-i', videoName)
}
let fontName = 'font1'
/** ffmpeg導(dǎo)入字體 */
export const writeFontFile = async (font: Blob) => {
ffmpeg.FS('writeFile', fontName, await fetchFile(font))
}
let imageName = 'imageMark'
/**ffmpeg導(dǎo)入貼圖 */
export const writeImage = async (image: Blob) => {
ffmpeg.FS('writeFile', imageName, await fetchFile(image))
}
let subTitle = 'subtitle.srt'
/**ffmpeg導(dǎo)入字幕文件 */
export const writeSubTitle = async (subtitle: Blob) => {
ffmpeg.FS('writeFile', subTitle, await fetchFile(subtitle))
}
/**通過url獲取文件blob數(shù)據(jù) */
export const urlGetData = async (fileUrl: string, type = 'video/mp4') => {
const tmp = 'tmpFile'
ffmpeg.FS('writeFile', tmp, await fetchFile(fileUrl))
const outputData = ffmpeg.FS('readFile', tmp)
return new Blob([outputData.buffer], { type })
}
/** 切分視頻 */
export const ffmpegSliceVideo = async (
fileUrl: string,
fileName: string,
middleTime: string
) => {
ffmpeg.FS('writeFile', fileName, await fetchFile(fileUrl))
// 將視頻分割為兩個部分
const command = `-i ${fileName} -t ${middleTime} -c copy output1.mp4 -ss ${middleTime} -c copy output2.mp4`
await ffmpeg.run(...command.split(' '))
const video1 = ffmpeg.FS('readFile', 'output1.mp4')
const video1Url = URL.createObjectURL(
new Blob([video1.buffer], { type: 'video/mp4' })
)
const video2 = ffmpeg.FS('readFile', 'output2.mp4')
const video2Url = URL.createObjectURL(
new Blob([video2.buffer], { type: 'video/mp4' })
)
return [video1Url, video2Url]
}
/**給視頻添加字幕 */
export const addSubTitle = async (fileUrl: string, fileName: string) => {
ffmpeg.FS('writeFile', fileName, await fetchFile(fileUrl))
const cmd = `-i ${fileName} -vf subtitles=${subTitle} output.mp4`
await ffmpeg.run(...cmd.split(' '))
const outputData = ffmpeg.FS('readFile', 'output.mp4')
const outputBlob = new Blob([outputData.buffer], { type: 'video/mp4' })
return URL.createObjectURL(outputBlob)
}
/** 獲取視頻的每一秒幀 */
export const gVideoFrame = async (
fileUrl: string,
timeArr: number[],
videoName: string = 'initVideo'
) => {
const frameDir = videoName
ffmpeg.FS('writeFile', videoName, await fetchFile(fileUrl))
ffmpeg.FS('mkdir', frameDir + 'Frame')
const second = tickCounts.value / timeArr[timeArr.length - 1]
let cmd = `-i ${videoName} -vf fps=${second} -q:v 5 -s 320x240 -an -preset fast /${frameDir}Frame/%3d.jpeg -hide_banner`
let args = cmd.split(' ')
await ffmpeg.run(...args)
const fileList = ffmpeg.FS('readdir', '/' + frameDir + 'Frame')
let urls: { url: string }[] = []
fileList.forEach(v => {
if (v !== '.' && v !== '..') {
const path = frameDir + 'Frame' + '/' + v
const img = ffmpeg.FS('readFile', path)
let url = URL.createObjectURL(
new Blob([img.buffer], { type: 'image/jpeg' })
)
urls.push({
url
})
}
})
return urls
}
/** 給視頻添加文字 */
export const addText = async (
fileUrl: string,
videoName: string = 'initVideo',
text: string = 'hello',
startT: number = 5,
endT: number = 7
) => {
ffmpeg.FS('writeFile', videoName, await fetchFile(fileUrl))
const cmd = `-re -i ${videoName} -vf`
const textT =
`drawtext=fontfile=font1:text=${text}` +
`:fontcolor=white:fontsize=80:x=100:y=10:box=1:boxcolor=#0000007d:enable='between(t,${startT},${endT})'`
let args = cmd.split(' ')
await ffmpeg.run(...args, textT, 'outfile.mp4')
const data = ffmpeg.FS('readFile', 'outfile.mp4')
return URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))
}
/** 給視頻添加貼圖 */
export const addImage = async (
fileUrl: string,
videoName: string = 'initVideo',
startT: number = 5,
endT: number = 7
) => {
ffmpeg.FS('writeFile', videoName, await fetchFile(fileUrl))
const cmd = `-i ${videoName} -i ${imageName} -filter_complex overlay=(main_w-overlay_w)/2:(main_h-overlay_h)/2:enable='between(t,${startT},${endT})' outfile.mp4`
let args = cmd.split(' ')
await ffmpeg.run(...args, '-hide_banner')
const data = ffmpeg.FS('readFile', 'outfile.mp4')
return URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))
}
/** 獲取視頻的第一幀圖片 */
export const getFirstFrame = async (
fileUrl: string,
fileName: string,
initTime = '00:00:00.001'
) => {
ffmpeg.FS('writeFile', fileName, await fetchFile(fileUrl))
console.log('視頻的第一幀圖片')
await ffmpeg.run(
'-hwaccel',
'auto',
'-i',
fileName,
'-ss',
initTime,
'-vframes',
'1',
'-s',
'640x480',
'-an',
'-threads',
'4',
'-preset',
'fast',
'output.jpg'
)
const data = ffmpeg.FS('readFile', 'output.jpg')
const url = URL.createObjectURL(
new Blob([data.buffer], { type: 'image/jpeg' })
)
return {
url,
videoInfo: JSON.stringify(videoInfo)
}
}
/**導(dǎo)出視頻，降幀 */
export const videoLower = async (fileUrl: string, fileName: string) => {
ffmpeg.FS('writeFile', fileName, await fetchFile(fileUrl))
const cmd = `-i ${fileName} -b:v 2000k -q:v 2 -r 24 -s 1240x960 output.mp4`
let args = cmd.split(' ')
await ffmpeg.run(...args)
const data = ffmpeg.FS('readFile', 'output.mp4')
const url = URL.createObjectURL(
new Blob([data.buffer], { type: 'video/mp4' })
)
return url
}
項(xiàng)目常見的問題：
1、shareArrayBuffer問題，shareArrayBuffer not defined
給服務(wù)響應(yīng)頭加入'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'require-corp'這兩個字段，引發(fā)這個問題主要是因?yàn)闉g覽器廠商因?yàn)閮?nèi)存安全問題而對shareArrayBuffer這個api做了限制，只需要在服務(wù)器響應(yīng)頭中設(shè)置這個字段即可解決。文章來源地址http://www.zghlxwxcb.cn/news/detail-615197.html
server: {
open: true,
host: '0.0.0.0',
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp'
},
proxy: {}
},
到了這里，關(guān)于【新項(xiàng)目開發(fā)】vue3+ts+elementPlus+ffmpegjs開發(fā)純web端的視頻編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
