日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁 > 科技  > 軟件

FFmpeg前端視頻合成實踐

來源: 責(zé)編: 時間:2024-02-29 14:43:09 241觀看
導(dǎo)讀梁晴天嗶哩嗶哩高級開發(fā)工程師視頻合成能力的開發(fā)背景想要開發(fā)一個具有視頻合成功能的應(yīng)用,從原理層面和應(yīng)用層面都有一定的復(fù)雜度。原理上,視頻合成需要應(yīng)用使用各種算法對音視頻數(shù)據(jù)進行編解碼,并處理各類不同音視頻格

梁晴天7ZH28資訊網(wǎng)——每日最新資訊28at.com

嗶哩嗶哩高級開發(fā)工程師7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

視頻合成能力的開發(fā)背景

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

想要開發(fā)一個具有視頻合成功能的應(yīng)用,從原理層面和應(yīng)用層面都有一定的復(fù)雜度。原理上,視頻合成需要應(yīng)用使用各種算法對音視頻數(shù)據(jù)進行編解碼,并處理各類不同音視頻格式的封裝;應(yīng)用上,視頻合成流程較長,需要對多個輸入文件進行并行處理,以實現(xiàn)視頻濾鏡、剪輯、拼接等功能,使用應(yīng)用場景變得復(fù)雜。7ZH28資訊網(wǎng)——每日最新資訊28at.com

視頻合成應(yīng)用的代表是各類視頻剪輯軟件,過去主要以原生應(yīng)用的形式存在。近年來隨著瀏覽器的接口和能力的不斷開放,逐漸也有了Web端視頻合成能力的解決思路和方案。7ZH28資訊網(wǎng)——每日最新資訊28at.com

本文介紹的是一種基于FFmpeg + WebAssembly開發(fā)的視頻合成能力,與社區(qū)既有的方案相比,此方案通過JSON來描述視頻合成過程,可提高業(yè)務(wù)側(cè)使用的便利性和靈活性,對應(yīng)更多視頻合成業(yè)務(wù)場景。7ZH28資訊網(wǎng)——每日最新資訊28at.com

2023年上半年,基于AI進行內(nèi)容創(chuàng)作的AIGC趨勢來襲。筆者所在的團隊負責(zé)B站的創(chuàng)作、投稿等業(yè)務(wù),也在此期間參與了相關(guān)的AIGC創(chuàng)作工具類項目,并負責(zé)項目中的Web前端視頻合成能力的開發(fā)。7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

技術(shù)選型

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

如果需要在應(yīng)用中引入音視頻相關(guān)能力,目前業(yè)界常見的方案之一是使用FFmpeg。FFmpeg是知名的音視頻綜合處理框架,使用C語言寫成,可提供音視頻的錄制、格式轉(zhuǎn)換、編輯合成、推流等多種功能。7ZH28資訊網(wǎng)——每日最新資訊28at.com

而為了在瀏覽器中能夠使用FFmpeg,我們則需要WebAssembly + Emscripten這兩種技術(shù):7ZH28資訊網(wǎng)——每日最新資訊28at.com

  • WebAssembly是瀏覽器可以運行的一種類匯編語言,常用于瀏覽器端上高性能運算的場景。匯編語言一般難以手寫,因此有了通過其他高級語言(C/C++, Go, Rust等)編譯到WebAssembly的方案。
  • Emscripten則是一個適用于C/C++項目的編譯工具包,我們可以用它來將C/C++項目編譯成WebAssembly,并移植到瀏覽器中運行。WebAssembly + Emscripten兩者構(gòu)筑了C語言項目在瀏覽器中運行的環(huán)境。再加上FFmpeg模塊提供的實際的音視頻處理能力,理論上我們就可以在瀏覽器中進行視頻合成了。

7ZH28資訊網(wǎng)——每日最新資訊28at.com

編譯FFmpeg至WebAssembly

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

想要通過Emscripten將FFmpeg編譯至WebAssembly,需要使用Emscripten。Emscripten本身是一系列編譯工具的合稱,它仿照gcc中的編譯器、鏈接器、匯編器等程序的分類方式,實現(xiàn)了處理wasm32對象文件的對應(yīng)工具,例如emcc用于編譯到wasm32、wasm-ld用于鏈接wasm32格式的對象文件等。7ZH28資訊網(wǎng)——每日最新資訊28at.com

而對于FFmpeg這個大型項目來說,其模塊主要分為以下三個部分7ZH28資訊網(wǎng)——每日最新資訊28at.com

  • libav系列庫,是構(gòu)成FFmpeg本身的重要組成部分。提供了用于音視頻處理的大量函數(shù),涵蓋格式封裝、編解碼、濾鏡、工具函數(shù)等多方面
  • 第三方庫,指的是并非FFmpeg原生提供,需要在編譯FFmpeg時,通過編譯配置來選擇性添加的模塊。包括第三方的格式、編解碼、協(xié)議、硬件加速能力等
  • fftools,F(xiàn)Fmpeg提供的三個可執(zhí)行程序,提供命令行參數(shù)界面,使得音視頻相關(guān)功能的使用更加方便。三個可執(zhí)行程序分別用于音視頻合成、音視頻播放、音視頻文件元信息提取。因此在編譯FFmpeg至WebAssembly時,我們需要按照“優(yōu)先庫,最終可執(zhí)行程序”的順序,首先將libav系列庫和第三方庫編譯至wasm32對象文件,最后再編譯可執(zhí)行程序至wasm32對象文件,并與前面的產(chǎn)物鏈接為完整的FFmpeg WebAssembly版。

自行編譯FFmpeg到WebAsssembly難度較大,我們在實際在為項目落地時,選擇了社區(qū)維護的版本。目前社區(qū)內(nèi)維護比較積極,功能相對全面的是ffmpeg.wasm(https://github.com/ffmpegwasm/ffmpeg.wasm)項目。該項目作者也提供了如何自行編譯FFmpeg到WebAssembly的系列博文(https://itnext.io/build-ffmpeg-webassembly-version-ffmpeg-js-part-1-preparation-ed12bf4c8fac)7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

FFmpeg在瀏覽器的運行

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

FFmpeg本身是一個可執(zhí)行命令行程序。我們可以通過為FFmpeg程序輸入不同的參數(shù),來完成各類不同的視頻合成任務(wù)。例如在終端中輸入以下命令,則可以將視頻縮放至原來一半大小,并且只保留前5秒:7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

ffmpeg -i input.mp4 -vf scale=w='0.5*iw':h='0.5*ih' -t 5 output.mp4

7ZH28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

而在瀏覽器中,F(xiàn)Fmpeg以及視頻合成的運行機制如上所示:在業(yè)務(wù)層,我們?yōu)橐曨l合成準(zhǔn)備好需要的FFmpeg命令以及若干個輸入文件,將其預(yù)加載到Emscripten模塊的MEMFS(一種虛擬文件系統(tǒng))中,并同時傳遞命令至Emscripten模塊,最后通過Emscripten的膠水代碼驅(qū)動WebAssembly進行邏輯計算。視頻合成的輸出視頻會在MEMFS中逐步寫入完成,最終可以被取回到業(yè)務(wù)層7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

對FFmpeg命令行界面進行封裝

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

上面的例子中,我們?yōu)镕Fmpeg輸入了一個視頻文件,以及一串命令行參數(shù),實現(xiàn)了對視頻的簡單縮放加截斷操作。實際情況下,業(yè)務(wù)側(cè)產(chǎn)生的視頻合成需求可能是千變?nèi)f化的,這樣直接調(diào)用FFmpeg的方式,會導(dǎo)致業(yè)務(wù)層需要處理大量代碼處理命令行字符串的構(gòu)建、組合邏輯,就顯得不合適宜。同時,我們在項目實踐的過程中發(fā)現(xiàn),由于項目需要接入 WebCodecs 和 FFmpeg 兩種視頻合成能力,這就需要一個中間層,從上層接收業(yè)務(wù)層表達的視頻合成意圖,并傳遞到下層的WebCodecs 或 FFmpeg 進行具體的視頻合成邏輯的“翻譯”和執(zhí)行。7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

API設(shè)計7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

如上所示,描述一個視頻合成任務(wù),可以采用類似“基于時間軸的視頻合成工程文件”的方式:在視頻剪輯軟件中,用戶通過可視化的操作界面導(dǎo)入素材,向軌道上拖入素材成為片段,為每個片段設(shè)置位移、寬高、不透明度、特效等屬性;同理,對于我們的項目來說,業(yè)務(wù)方自行準(zhǔn)備素材資源,并按一定的結(jié)構(gòu)搭建描述視頻合成工程的對象樹,然后調(diào)用中間層的方法執(zhí)行合成任務(wù)。7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

分層設(shè)計

7ZH28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

以上是我們最終形成的一個分層結(jié)構(gòu):7ZH28資訊網(wǎng)——每日最新資訊28at.com

  • 業(yè)務(wù)方代碼使用一個JSON對象來描述自己的視頻合成意圖。為了方便業(yè)務(wù)方使用,這一層允許大量使用默認(rèn)值,無需過多配置;
  • 狀態(tài)層是一個對象樹,將視頻的全局屬性、片段的屬性等狀態(tài)補齊,方便后續(xù)的翻譯;同時,這一層的各個對象都支持讀寫,未來可以用于可視化視頻編輯器的場景等;
  • 執(zhí)行層負責(zé)FFmpeg命令的翻譯和執(zhí)行邏輯。如果狀態(tài)層抽象得當(dāng),則這個執(zhí)行層也可以被WebCodecs的翻譯和執(zhí)行模塊替換

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

執(zhí)行流程

7ZH28資訊網(wǎng)——每日最新資訊28at.com

圖片7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

以上是我們最終實現(xiàn)的FFmpeg前端視頻合成能力,各個模塊在運行時的相互調(diào)用時序圖。各個模塊之間并不是簡單地按順序?qū)訉酉蛳抡{(diào)用,再層層向上返回。有以下這些點值得注意7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

狀態(tài)樹,是JSON + 文件元信息綜合生成的

7ZH28資訊網(wǎng)——每日最新資訊28at.com

例如,業(yè)務(wù)方想要把一個寬高未知的視頻片段,放置在最終合成視頻(假設(shè)為1280x720)的正中央時,我們需要將視頻片段的transform.left設(shè)置為(1280 - videoWidth) / 2,transform.top 設(shè)置為 (720 - videoHeight) / 2。這里的videoWidth, videoHeight就需要通過FFmpeg讀取文件元信息得到。因此我們設(shè)計的流程中,需要對所有輸入的資源文件進行預(yù)加載,再生成狀態(tài)樹。7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

輸出結(jié)果多樣化

7ZH28資訊網(wǎng)——每日最新資訊28at.com

實踐過程中我們發(fā)現(xiàn),業(yè)務(wù)方在使用FFmpeg能力時,至少需要使用以下三種不同的形式的輸出結(jié)果:7ZH28資訊網(wǎng)——每日最新資訊28at.com

  • 事件回調(diào):例如業(yè)務(wù)方所需的合成進度、合成開始、合成結(jié)束等
  • 合成結(jié)果的二進制文件:合成結(jié)束時異步返回
  • 日志結(jié)果:例如獲取文件元信息,獲取音頻的平均音量等操作,F(xiàn)Fmpeg的輸出都是以log的形式

因此我們?yōu)閳?zhí)行層的輸出設(shè)計了這樣的統(tǒng)一接口7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

export interface RunTaskResult {  /** 日志樹結(jié)果 */  log: LogNode  /** 二進制文件結(jié)果 */  output: Uint8Array} function runProject(json: ProjectJson): {  /** 事件結(jié)果 */  evt: EventEmitter<RunProjectEvents, any>;  result: Promise<RunTaskResult>;}

7ZH28資訊網(wǎng)——每日最新資訊28at.com

部分代碼實現(xiàn)

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

執(zhí)行主流程

7ZH28資訊網(wǎng)——每日最新資訊28at.com

runProject 函數(shù)是我們對外提供的視頻合成的主函數(shù)。包含了“對輸入JSON進行校驗,補全、預(yù)加載文件并獲取文件元信息、預(yù)加載字幕相關(guān)文件、翻譯FFmpeg命令、執(zhí)行、emit事件”等多種邏輯。7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

/** * 按照projectJson執(zhí)行視頻合成 * @public * @param json - 一個視頻合成工程的描述JSON * @returns 一個evt對象,用以獲取合成進度,以及異步返回的視頻合成結(jié)果數(shù)據(jù) */export function runProject(json: ProjectJson) {  const evt = new EventEmitter<RunProjectEvents>()  const steps = async () => {    // hack 這里需要加入一個異步,使得最早在evt上emit的事件可以被evt.on所設(shè)置的回調(diào)函數(shù)監(jiān)聽到    await Promise.resolve()    const parsedJson = ProjectSchema.parse(json) // 使用json schema驗證并補全一些默認(rèn)值    // 預(yù)加載并獲取文件元信息    evt.emit('preload_all_start')    const preloadedClips = [      ...await preloadAllResourceClips(parsedJson, evt),      ...await preloadAllTextClips(parsedJson)    ]    // 預(yù)加載字幕相關(guān)信息    const subtitleInfo = await preloadSubtitle(parsedJson, evt)    evt.emit('preload_all_end')    // 生成project對象樹    const projectObj = initProject(parsedJson, preloadedClips)    // 生成ffmpeg命令    const { fsOutputPath, fsInputs, args } = parseProject(projectObj, parsedJson, preloadedClips, subtitleInfo)    if (subtitleInfo.hasSubtitle) {      fsInputs.push(subtitleInfo.srtInfo!, subtitleInfo.fontInfo!)    }    // 在ffmpeg任務(wù)隊列里執(zhí)行    const task: FFmpegTask = {      fsOutputPath,      fsInputs,      args    }    // 處理進度事件    task.logHandler = (log) => {      const p = getProgressFromLog(log, project.timeline.end)      if (p !== undefined) {        evt.emit('progress', p)      }    }    evt.emit('start')    // 返回執(zhí)行日志,最終合成文件,事件等多種形式的結(jié)果    const res = runInQueue(task)    await res    evt.emit('end')    return res  }   return {    evt,    result: steps()  }}

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

翻譯流程

7ZH28資訊網(wǎng)——每日最新資訊28at.com

FFmpeg命令的翻譯流程,對應(yīng)的是上述runProject方法中的parseProject,是在所有的上下文(視頻合成描述JSON對象,狀態(tài)樹文件預(yù)加載后的元信息等)都齊備的情況下執(zhí)行的。本身是一段很長,且下游較深的同步執(zhí)行代碼。這里用偽代碼描述一下parseProject的過程7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

1. 實例化一個命令行參數(shù)操作對象ctx,此對象用于表達命令行參數(shù)的結(jié)構(gòu),可以設(shè)置有哪些輸入(多個)和哪些輸出(一個),并提供一些簡便的方法用以操作filtergraph2. 初始化一個視頻流的空數(shù)組layers(這里指廣義的視頻流,只要是有圖像信息的輸入流(例如視頻、占一定時長的圖片、文字片段轉(zhuǎn)成的圖片),都算作視頻流);初始化一個音頻流的空數(shù)組audios3. (作為最終合成的視頻或音頻內(nèi)容的基底)在layers中加入一個顏色為project.backgroundColor, 大小為project.size,時長為無限長的純色的視頻流;在audios中加入一個無聲的,時長為無限長的靜音音頻流4. 對于每一個project中的片段    1. 將片段中所包含的資源的url添加到ctx的輸入數(shù)組中    2. (從所有已預(yù)加載的文件元信息中)找到這個片段對應(yīng)的元信息(寬高、時長等)    3. (處理片段本身的截取、寬高、旋轉(zhuǎn)、不透明度、動畫等的處理)基于此片段的JSON定義和預(yù)加載信息,翻譯成一組作用于該片段的FFmpeg filters,并且這一組filters之間需要相互串聯(lián),filters頭部連接到此片段的輸入流。得到片段對應(yīng)的中間流。    4. 獲取到的中間流,如果是廣義的視頻流的,推入layers數(shù)組;如果是廣義的音頻流的,推入audios數(shù)組5. 視頻流layers數(shù)組做一個類似reduce的操作,按照畫面中內(nèi)容疊放的順序,從最底層到最頂層,逐個合并流,得到單個視頻流作為最終視頻輸出流。6. 音頻流audios數(shù)組進行混音,得到單個音頻流作為最終輸出流。7. 調(diào)用ctx的toString方法,此方法是會將整個命令行參數(shù)結(jié)構(gòu)輸出為string。ctx下屬的各類對象(Input, Option, FilterGraph)都有自己的toString方法,它們會依次層層toString,最終形成整體的ffmpeg命令行參數(shù)

7ZH28資訊網(wǎng)——每日最新資訊28at.com

動畫能力

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

適當(dāng)?shù)脑貏赢嬘兄岣咭曨l的畫面豐富度,我們實現(xiàn)的視頻合成能力中,也對元素動畫能力進行了初步支持。7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

 業(yè)務(wù)端如何配置動畫

7ZH28資訊網(wǎng)——每日最新資訊28at.com

在視頻剪輯軟件中,為元素配置動畫主要是基于關(guān)鍵幀模型,典型操作步驟如下:7ZH28資訊網(wǎng)——每日最新資訊28at.com

  • 選中畫布中的一個元素后
  • 在時間軸上為元素的某一屬性添加若干個關(guān)鍵幀
  • 在每個關(guān)鍵幀上,為該屬性設(shè)置不同的值。例如將位于第1秒的關(guān)鍵幀的x方向位移設(shè)置為0,將位于第5秒的關(guān)鍵幀的x方向位移設(shè)置為100
  • 軟件會自動將1-5秒的動畫過程補幀出來,預(yù)覽播放(以及最后合成的結(jié)果中)就可以看到元素從第1秒到第5秒向下平移的效果。而在前端開發(fā)中,通過CSS的@keyframes所聲明的動畫,也與上述關(guān)鍵幀模型吻合。除此之外,在CSS動畫標(biāo)準(zhǔn)中,我們還需要附加以下這些信息,才能將一段關(guān)鍵幀動畫應(yīng)用到元素上
  • delay延遲(動畫在元素出現(xiàn)后,延遲多少時間再開始播放)
  • iterationCount(動畫需要重復(fù)播放多少次)
  • duration(在單次重復(fù)播放內(nèi),動畫所占總時長)
  • timingFunction(動畫的補幀方式。線性方式實現(xiàn)簡單但關(guān)鍵幀之間的過渡生硬,因此一般會采用“ease-in-out”等帶有緩進緩出的非線性方式)。除此之外還有direction, fillMode等配置,這些并未在我們的視頻合成能力中實現(xiàn),故不再贅述。

在視頻合成描述JSON中,我們參照了CSS動畫聲明進行了以下設(shè)計,來滿足元素動畫的配置7ZH28資訊網(wǎng)——每日最新資訊28at.com

  • 為片段了定義了 x, y, w, h, angle, opacity這六種可配置的屬性(涵蓋了位移、縮放、旋轉(zhuǎn)、不透明度等)
  • 對于需要靜態(tài)配置的屬性,在static字段的子字段中配置
  • 對于需要動畫配置的屬性,在animation字段的子字段中逐個關(guān)鍵幀進行配置
  • animation字段同時可以進行duration, delay等動畫附加信息的配置

以下是元素動畫配置的例子7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

// 視頻片段bg.mp4,在畫面的100,100處出現(xiàn),并伴隨有閃爍(不透明度從0到1再到0)的動畫,動畫延遲1秒,時長5秒{  "type": "video",  "url": "/bg.mp4",  "static": {    "x": 100,    "y": 100  },  "animation": {    "properties": {      "delay": 1,      "duration": 5    },    "keyframes": {      "0": {        "opacity": 0      },      "50": {        "opacity": 1      },      "100": {        "opacity": 0      }    }  }}

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

FFmpeg合成添加動畫效果的原理

7ZH28資訊網(wǎng)——每日最新資訊28at.com

動畫效果的本質(zhì)是一定時間內(nèi),元素的某個狀態(tài)逐幀連續(xù)變化。而FFmpeg的視頻合成的實際操作都是由filter完成的,所以想要在FFmpeg視頻合成中添加動畫,則需要視頻類的filter支持按視頻的當(dāng)前時間,逐幀動態(tài)設(shè)置filter的參數(shù)值。7ZH28資訊網(wǎng)——每日最新資訊28at.com

以overlay filter為例,此filter可以將兩個視頻層疊在一起,并設(shè)置位于頂層的視頻相對位置。如果無需設(shè)置動畫時,我們可以將參數(shù)寫成overlay=x=100:y=100表示將頂層視頻放置在距離底層視頻左上角100,100的位置。7ZH28資訊網(wǎng)——每日最新資訊28at.com

需要設(shè)置動畫時,我們也可以設(shè)置x, y為包含了t變量(當(dāng)前時間)的表達式。例如overlay=x=t*100:y=t*100,可以用來表達頂層視頻從左上到右下的位移動畫,逐幀計算可知第0秒坐標(biāo)為0,0,第1秒時坐標(biāo)為100,100,以此類推。7ZH28資訊網(wǎng)——每日最新資訊28at.com

像overlay=x=expr:y=expr這樣的,expr的部分被稱為FFmpeg的表達式,它也可以看成是以時間(以及其他一些可用的變量)作為輸入,以filter的屬性值作為輸出的函數(shù)。表達式中除了可以使用實數(shù)、t變量、各類算術(shù)運算符之外,還可以使用很多內(nèi)置函數(shù),具體可參考FFmpeg文檔中對于表達式取值的說明(https://ffmpeg.org/ffmpeg-utils.html#Expression-Evaluation)7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

常見動畫模式的表達式總結(jié)

7ZH28資訊網(wǎng)——每日最新資訊28at.com

由于表達式的本質(zhì)是函數(shù),我們在把動畫翻譯成FFmpeg表達式時,可以先繪制動畫的函數(shù)圖像,然后再從FFmpeg表達式的可用變量、內(nèi)置函數(shù)、運算符中,進行適當(dāng)組合來還原函數(shù)圖像。下面是一些常見的動畫模式的FFmpeg表達式對應(yīng)實現(xiàn)7ZH28資訊網(wǎng)——每日最新資訊28at.com

動畫的分段

假設(shè)對于某元素,我們設(shè)置了一個向上彈跳一次的動畫,此動畫有一定延遲,并且只循環(huán)一次,動畫已結(jié)束后又過了一段時間,元素再消失。則此元素的y屬性函數(shù)圖像及其公式可能如下7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片7ZH28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片7ZH28資訊網(wǎng)——每日最新資訊28at.com

通過以上函數(shù)圖像我們可知,此類函數(shù)無法通過一個單一部分表達出來。在FFmpeg表達式中,我們需要將三個子表達式,按條件組合到一個大表達式中。對于分段的函數(shù),我們可以使用FFmpeg自帶的if(x,y,z)函數(shù)(類似腳本語言中的三元表達式)來等價模擬,將條件判斷/then分支/else分支 這三個子表達式 分別傳入并組合到一起。對于分支有兩個以上的情況,則在else分支處再嵌入新的if(x,y,z)即可。7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

# 實際在生成表達式時,所有的換行和空格可以省略y=if(  lt(t,2),  # lt函數(shù)相當(dāng)于<操作符  1,  if(    lt(t,4),    sin(-PI*t/2)+1,    1  ))

7ZH28資訊網(wǎng)——每日最新資訊28at.com

我們可以實現(xiàn)一個遞歸函數(shù)nestedIfElse,來將N個條件判斷表達式和N+1個分支表達式組合起來,成為一個大的FFmpeg表達式,用于分段動畫的場景7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

function nestedIfElse(branches: string[], predicates: string[]) {  // 如果只有一個邏輯分支,則返回此分支的表達式  if (branches.length === 1) {    return branches[0]  // 如果有兩個邏輯分支,則只有一個條件判斷表達式,使用if(x,y,z)組合在一些即可  } else if (branches.length === 2) {    const predicate = predicates[0]    const [ifBranch, elseBranch] = branches    return `if(${predicate},${ifBranch},${elseBranch})`  // 遞歸case  } else {    const predicate = predicates.shift()    const ifBranch = branches.shift()    const elseBranch = nestedIfElse(branches, predicates) as string    return `if(${predicate},${ifBranch},${elseBranch})`  }}

7ZH28資訊網(wǎng)——每日最新資訊28at.com

線性和非線性補幀

補幀是將關(guān)鍵幀間的空白填補,并連接為動畫的基本方式。被補出來的每一幀中,對應(yīng)的屬性值需要使用插值函數(shù)進行計算。7ZH28資訊網(wǎng)——每日最新資訊28at.com

對于線性插值,F(xiàn)Fmpeg自帶了lerp(x,y,z)函數(shù),表示從x開始到y(tǒng)結(jié)束,按z的比例(z為0到1的比值)線性插值的結(jié)果。因此我們可以結(jié)合上面的if(x,y,z)函數(shù)的分段功能,實現(xiàn)一個多關(guān)鍵幀的線性補幀動畫。例如,某屬性有兩個關(guān)鍵幀,在t1時屬性值為a,在t2時屬性值為b,則補幀表達式為7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

對于非線性補幀,我們可以將其理解為在上述線性補幀公式的基礎(chǔ)上,將lerp(x,y,z)函數(shù)的z參數(shù)(進度的比例)再進行一次變換,使得動畫的行進變得不均勻即可。以下公式中的t'代表了一種典型的緩慢開始和緩慢結(jié)束的緩動函數(shù)(timing function),將其代入原公式即可7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

(圖中展示了從左下角的關(guān)鍵幀到右上角的關(guān)鍵幀的線性/非線性 補幀的函數(shù)圖像)(圖中展示了從左下角的關(guān)鍵幀到右上角的關(guān)鍵幀的線性/非線性 補幀的函數(shù)圖像)7ZH28資訊網(wǎng)——每日最新資訊28at.com


7ZH28資訊網(wǎng)——每日最新資訊28at.com


7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

以下是對應(yīng)的代碼實現(xiàn)7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

// 假設(shè)有關(guān)鍵幀(t1, v1)和(t2, v2),返回這兩個關(guān)鍵幀之間的非線性補幀表達式function easeInOut(  t1: number, v1: number,  t2: number, v2: number) {  const t = `t-${t1})/(${t2-t1})`  const tp = `if(lt(${t},0.5),4*pow(${t},3),1-pow(-2*${t}+2,3)/2)`  return `lerp(${v1},${v2},${tp})`}

7ZH28資訊網(wǎng)——每日最新資訊28at.com

循環(huán)

如果我們需要表達一個帶有循環(huán)的動畫,最直接的方式是將某個時段上的映射關(guān)系,復(fù)制并平移到其他的時段上。例如,想要實現(xiàn)一個從畫面左側(cè)平移至右側(cè)的動畫,重復(fù)多次時,我們可能使用下面這樣的函數(shù)7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

以上使用分段函數(shù)的寫法的問題在于,如果循環(huán)次數(shù)過多時,函數(shù)的分支較多,產(chǎn)生的表達式很長,也會影響在視頻合成時對表達式求值的性能。7ZH28資訊網(wǎng)——每日最新資訊28at.com

事實上,我們可以引入FFmpeg表達式中自帶的mod(x,y)函數(shù)(取余操作)來實現(xiàn)循環(huán)。由于取余操作常用來生成一個固定范圍內(nèi)的輸出,例如不斷重復(fù)播放的過程。上面的函數(shù),在引入mod(x,y)后,可以簡化為 x=mod(t,1)。7ZH28資訊網(wǎng)——每日最新資訊28at.com

上述對于動畫分段、循環(huán)、補幀如何實現(xiàn)的問題,其共通點都是如何找到其對應(yīng)函數(shù),并在FFmpeg中翻譯為對應(yīng)的表達式,或者對已有表達式進行組合。7ZH28資訊網(wǎng)——每日最新資訊28at.com

據(jù)此,我們實現(xiàn)了KFAttr(關(guān)鍵幀屬性,用以封裝關(guān)鍵幀和動畫全局配置等信息)和TimeExpr(以KFAttr作為入?yún)ⅲ⒎g為FFmpeg表達式)兩個類。其中,TimeExpr的整體算法大致如下:7ZH28資訊網(wǎng)——每日最新資訊28at.com

1.將動畫分成前,中,后三部分。前半部分是由于delay配置導(dǎo)致的,元素已出現(xiàn)但動畫還未開始的靜止部分;中間部分是動畫的主體部分;后半部分是由于動畫重復(fù)次數(shù)較少,元素未消失但動畫已結(jié)束的靜止部分7ZH28資訊網(wǎng)——每日最新資訊28at.com

2.對于前半部分,表達式設(shè)置為等于關(guān)鍵幀中第一幀的值;對于后半部分,表達式設(shè)置為等于關(guān)鍵幀中最后一值的值7ZH28資訊網(wǎng)——每日最新資訊28at.com

3.對于中間部分  7ZH28資訊網(wǎng)——每日最新資訊28at.com

  • 3.1 將keyframes中聲明的每個關(guān)鍵幀點(某個百分比及其對應(yīng)值),結(jié)合動畫的duration配置,縮放為新的關(guān)鍵幀點(某個時間點及其對應(yīng)值)  
  • 3.2 根據(jù)上述關(guān)鍵幀,獲取predicates數(shù)組(也就是動畫中間部分,進入每一個分支的條件表達式,例如t<2, t<5 等)
  • 3.3 根據(jù)上述關(guān)鍵幀,獲取branches數(shù)組(也就是動畫中間部分,每一個分支本身的表達式)。每一個branch聲明了一個關(guān)鍵幀到下一個關(guān)鍵幀的連接,也就是補幀表達式  
  • 3.4 使用nestedIfElse(branches, predicates)組合出中間部分的表達式

4.再次使用nestedIfElse,將前、中、后三部分組合成最終的表達式7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

瀏覽器里視頻合成的內(nèi)存不足問題

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

在項目實踐的過程中,我們發(fā)現(xiàn)瀏覽器中通過ffmpeg.wasm進行視頻合成時,有一定機率出現(xiàn)內(nèi)存不足的現(xiàn)象。表現(xiàn)為以下Emscripten的運行時報錯(OOM為Out of memory的縮寫)7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

exception thrown: RuntimeError: abort (00M). Build with -s ASSERTIONS=1 for more info.RuntimeError: abort (00M). Build with -s ASSERTIONS=1 for more info.

7ZH28資訊網(wǎng)——每日最新資訊28at.com

分析后我們認(rèn)為,內(nèi)存不足的問題主要是由于以下這些因素導(dǎo)致的7ZH28資訊網(wǎng)——每日最新資訊28at.com

  • 視頻合成本身是開銷很大的計算過程,這是由于音視頻文件往往都有著很高的壓縮率,在合成時,音視頻文件被解碼成未壓縮的數(shù)據(jù),占用了大量內(nèi)存
  • 和原生環(huán)境相比,瀏覽器中的應(yīng)用會額外受到單個標(biāo)簽頁可使用的最大內(nèi)存的限制。例如在64位系統(tǒng)的Chrome中,一個標(biāo)簽頁最多可使用的內(nèi)存大小為4GB
  • 瀏覽器沙盒機制,不允許Web應(yīng)用直接讀寫客戶端本地文件。而Emscripten為了使得移植的C/C++項目仍能夠擁有原來的文件讀寫的能力,實現(xiàn)了一個MEMFS的虛擬文件系統(tǒng)。將文件預(yù)加載到內(nèi)存中,把對磁盤的讀寫轉(zhuǎn)換為對內(nèi)存的讀寫。這部分文件的讀寫也占用了一定的內(nèi)存。在瀏覽器中運行視頻合成時,還會額外受到瀏覽器對于單個標(biāo)簽頁可使用的最大內(nèi)存的限制(在64位的Chrome中,最多可為一個標(biāo)簽頁分配4G內(nèi)存)

為了應(yīng)對以上問題,在實踐中,我們采取了以下這些策略,來減少內(nèi)存不足導(dǎo)致的合成失敗率:7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

視頻合成的嚴(yán)格串行執(zhí)行

7ZH28資訊網(wǎng)——每日最新資訊28at.com

視頻合成的過程出現(xiàn)了并發(fā)時,會加劇內(nèi)存不足現(xiàn)象的產(chǎn)生。因此我們在runProject以及其他FFmpeg執(zhí)行方法背后實現(xiàn)了一個統(tǒng)一的任務(wù)隊列,確保一個任務(wù)在執(zhí)行完成后再進行下一個任務(wù),并且在下一個任務(wù)開始執(zhí)行前,重啟ffmpeg.wasm的運行時,實現(xiàn)內(nèi)存垃圾回收。7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

時間分段,多次合成

7ZH28資訊網(wǎng)——每日最新資訊28at.com

實踐中我們發(fā)現(xiàn),如果一個FFmpeg命令中輸入的音視頻素材文件過多時,即使這些素材在時間線上都重疊(也就是某一時間點上,所有的素材視頻畫面都需要出現(xiàn)在最終畫面中)的情況很少,也會大大提高內(nèi)存不足的概率。7ZH28資訊網(wǎng)——每日最新資訊28at.com

我們采取了對視頻合成的結(jié)果進行時間分段的策略。根據(jù)每個片段在時間軸上的分布情況,將整個視頻合成的FFmpeg任務(wù),拆分成多個規(guī)模更小的FFmpeg任務(wù)。每個任務(wù)僅需要2-3個輸入文件(常規(guī)的視頻合成需求中,同屏同時播放的視頻最多也在3個左右),各任務(wù)單獨進行視頻合成,最后再使用FFmpeg的concat功能,將視頻前后相接即可。7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

減少重編碼的場景

7ZH28資訊網(wǎng)——每日最新資訊28at.com

視頻合成的重編碼(解碼輸入文件,操作數(shù)據(jù)并再編碼),會消耗大量的CPU和內(nèi)存資源。而視頻和音頻的前后拼接操作,則無需重編碼,可以在非常短的時間內(nèi)完成。7ZH28資訊網(wǎng)——每日最新資訊28at.com

對于不太復(fù)雜的視頻合成場景,往往并不是畫面的每一幀都需要重新編碼再輸出的。我們可以分析視頻合成的時間軸,找出不需要重編碼的時間段(指的是此時畫面內(nèi)容僅來自一個輸入文件,并且沒有縮放旋轉(zhuǎn)等濾鏡效果,沒有其他層疊的內(nèi)容的時間段)。對這些時間段,我們通過FFmpeg的流拷貝功能截取出來(通過-vcodec copy命令行參數(shù)實現(xiàn))即可,這樣進一步減少了CPU和內(nèi)存的消耗。7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

在視頻中添加文字的實踐

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

在視頻中添加文字是視頻合成的常見需求,這類需求可以大致分為兩種情況:少量的樣式復(fù)雜的藝術(shù)字,大量的字幕文字。7ZH28資訊網(wǎng)——每日最新資訊28at.com

FFmpeg自帶的filters中提供了以下的文字繪制能力,包括:7ZH28資訊網(wǎng)——每日最新資訊28at.com

  • subtitles,配合srt格式的字幕文件。適合大量添加字幕,對樣式定制化不高的場景
  • drawtext,繪制單條文字,并進行一些簡單的樣式配置。如果不使用filters,由于我們是在瀏覽器作為上層環(huán)境使用FFmpeg的,此時也可以使用DOM API提供的一些文字轉(zhuǎn)圖片的技術(shù)(例如直接使用Canvas API的fillText繪制文字,或者使用SVG的foreignObject對包含文字的html文檔進行圖片轉(zhuǎn)換等),把文字當(dāng)作圖片文件進行處理。

最初在支持視頻合成方案的文字能力時,我們選擇了后者的文字轉(zhuǎn)圖片技術(shù),基本滿足了業(yè)務(wù)需求。這一做法的優(yōu)勢在于:復(fù)用DOM的文字渲染能力,繪制效果好并且支持的文字樣式豐富;并且由于轉(zhuǎn)換為圖片處理,可以讓文字直接支持縮放、旋轉(zhuǎn)、動畫等許多已經(jīng)在圖片上實現(xiàn)的能力。7ZH28資訊網(wǎng)——每日最新資訊28at.com

但正如上面提到的“為FFmpeg的命令一次性輸入過多的文件容易引起OOM”的問題,文字轉(zhuǎn)為圖片后,視頻合成時需要額外導(dǎo)入的圖片輸入文件也增加了。這也促使我們開始關(guān)注FFmpeg自帶的文字渲染能力。7ZH28資訊網(wǎng)——每日最新資訊28at.com

FFmpeg自帶subtitles, drawtext等文字渲染能力,底層都使用了C語言的字體字符庫(包括freetype字體光柵化,harfbuzz文字塑形,fribidi雙向編碼等),在每一幀編碼前的filter階段,將字符按指定的字體和樣式即時繪制成位圖,并與當(dāng)前的framebuffer混合來實現(xiàn)的。這種做法會耗費更多的計算資源,但同時因為不需要緩存或文件,使用的內(nèi)存更少。因此我們對于制作字幕這樣需要大量添加固定樣式的文字的場景,提供了相應(yīng)的JSON配置,并在底層使用FFmpeg的subtitles filter進行繪制,避免了OOM的問題。7ZH28資訊網(wǎng)——每日最新資訊28at.com

基于瀏覽器和FFmpeg本身的現(xiàn)有能力,在視頻中添加文字的方案還可以有更多探索的可能。例如可以“使用SVG來聲明文字的內(nèi)容和樣式,并在FFmpeg側(cè)進行渲染”來實現(xiàn)。SVG方案的優(yōu)點在于:文字的樣式控制能力強;可以隨意添加任意的文字的前景、背景矢量圖形;與位圖相比占用資源少等。后續(xù)在進行自編譯的FFmpeg WebAssembly版相關(guān)調(diào)研時,會嘗試支持。7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

后續(xù)迭代

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

7ZH28資訊網(wǎng)——每日最新資訊28at.com

通過 Emscripten 移植到瀏覽器運行的 FFmpeg,在性能上與原生FFmpeg有很大差距,大體原因在于瀏覽器作為中間環(huán)境,其現(xiàn)有的API能力不足,以及一些安全政策的限制,導(dǎo)致 FFmpeg 對于硬件能力的利用受限。隨著瀏覽器能力和API的逐步演進,F(xiàn)Fmpeg + WebAssembly 的編譯、運行方式都可以與時俱進,以達到提高性能的目的。目前可以預(yù)見的一些優(yōu)化點有:7ZH28資訊網(wǎng)——每日最新資訊28at.com

  • 文件IO方面,接入瀏覽器的OPFS(https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API#origin_private_file_system)。這是瀏覽器中訪問文件系統(tǒng)的一種新API,有較高的讀寫性能。未來有可能被Emscripten實現(xiàn),以替換掉當(dāng)前默認(rèn)的MEMFS
  • 并行計算方面,考慮使用WebAssembly SIMD(https://v8.dev/features/simd)。SIMD可以更充分地使用CPU進行并行計算。對于圖像處理較多的編碼場景(例如x264編碼器),適當(dāng)?shù)厥褂肳ebAssembly的SIMD來優(yōu)化代碼有助于提高編碼性能
  • 圖像處理方面,嘗試使用WebGL優(yōu)化。WebGL為瀏覽器提供了基于顯卡的并行計算的能力,特別適合對視頻摳像、濾鏡、轉(zhuǎn)場等應(yīng)用場景進行加速。

本文鏈接:http://m.www897cc.com/showinfo-26-75342-0.htmlFFmpeg前端視頻合成實踐

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 終于有篇文章把后管權(quán)限系統(tǒng)設(shè)計講清楚了

下一篇: 在高并發(fā)寫入場景下,如何優(yōu)化數(shù)據(jù)庫的寫入性能和事務(wù)處理效率?

標(biāo)簽:
  • 熱門焦點
Top 日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不
久久精品网址| 日韩视频免费观看高清完整版| 欧美裸体一区二区三区| 欧美精品1区2区3区| 欧美日韩另类视频| 日韩视频久久| 亚洲高清视频在线| 最新日韩在线视频| 亚洲少妇自拍| 久久精品99国产精品| 蜜臀久久99精品久久久画质超高清| 欧美—级高清免费播放| 国产精品看片你懂得| 欧美偷拍另类| 国产在线视频欧美| 亚洲人成啪啪网站| 亚洲一区二区三区高清不卡| 久久精品国亚洲| 欧美激情精品久久久久久大尺度 | 久久中文字幕一区| 欧美高清在线视频观看不卡| 国产精品户外野外| 原创国产精品91| 亚洲一区二区三区视频| 久久久噜久噜久久综合| 欧美日韩色婷婷| 欧美日韩国产色综合一二三四| 国产精品麻豆va在线播放| 伊人精品成人久久综合软件| 亚洲天堂免费观看| 久热精品在线视频| 国产精品人人做人人爽| 亚洲国产天堂久久综合| 欧美一区二区三区四区高清| 欧美精品videossex性护士| 国产日韩精品久久| 一本到高清视频免费精品| 久久只有精品| 国产欧美精品一区二区色综合| 亚洲精品极品| 亚洲午夜在线观看| 美女91精品| 国产亚洲成精品久久| 99视频精品在线| 久久综合五月| 国产日韩欧美高清| 亚洲深夜福利| 欧美啪啪一区| 亚洲国产成人在线| 久久久精品国产一区二区三区 | 久久国产精品色婷婷| 欧美视频一区二区三区在线观看| 亚洲第一中文字幕| 欧美在线三级| 国产精品日本一区二区| 99热这里只有成人精品国产| 蜜臀91精品一区二区三区| 国产真实久久| 久久精品日韩| 国产欧美日韩一级| 亚洲欧美日韩一区二区三区在线观看| 欧美成人免费全部观看天天性色| 国产一区二区三区电影在线观看 | 老司机久久99久久精品播放免费| 国产日韩欧美成人| 欧美一区二粉嫩精品国产一线天| 国产精品国产三级欧美二区| 一区二区三区福利| 欧美日韩一区二区高清| 亚洲精品综合在线| 欧美精品日韩综合在线| 亚洲人成网站色ww在线| 欧美成人午夜剧场免费观看| 亚洲国产精品精华液2区45| 麻豆av一区二区三区久久| 在线观看一区| 欧美va天堂| 亚洲人成艺术| 欧美精品一区二区在线观看| 亚洲日本无吗高清不卡| 欧美夫妇交换俱乐部在线观看| 亚洲国产精品传媒在线观看| 免费永久网站黄欧美| 亚洲成人自拍视频| 女人香蕉久久**毛片精品| 91久久久久| 久久精品国产清高在天天线| 国产啪精品视频| 久久av免费一区| 狠狠色丁香婷婷综合影院| 久久免费视频一区| 亚洲大片一区二区三区| 欧美jizzhd精品欧美巨大免费| 亚洲国产日韩欧美一区二区三区| 欧美成人精品影院| 99国内精品久久| 欧美视频在线观看 亚洲欧| 国产乱码精品一区二区三区av| 亚洲在线视频网站| 国产精品一区二区视频| 欧美在线黄色| 国内精品国产成人| 蜜桃av一区二区| 亚洲乱码久久| 国产精品porn| 久久www成人_看片免费不卡| 在线观看亚洲精品| 欧美精品亚洲二区| 亚洲一区欧美二区| 国产在线麻豆精品观看| 免费在线欧美视频| 99热精品在线| 国产美女一区二区| 乱中年女人伦av一区二区| 日韩视频永久免费| 国产精品一区二区久久| 久久免费视频一区| 妖精成人www高清在线观看| 国产精品午夜久久| 久久亚洲国产精品一区二区| 亚洲毛片一区二区| 国产精品一区一区| 免费高清在线一区| 亚洲一级网站| 黄色欧美成人| 欧美日韩亚洲综合在线| 欧美在线免费| 日韩视频一区二区在线观看| 国产美女一区二区| 欧美国产日韩精品| 午夜视频久久久久久| 国产精品午夜在线观看| 久久久噜噜噜| 在线一区二区日韩| 伊人成综合网伊人222| 欧美天堂在线观看| 久久人人爽国产| 国产精品99久久久久久宅男| 激情五月***国产精品| 欧美日韩激情小视频| 久久精品国产一区二区三| 99视频超级精品| 韩国一区二区在线观看| 欧美视频一区二区| 免费亚洲网站| 久久成人18免费观看| 99在线精品观看| 伊甸园精品99久久久久久| 国产精品高潮呻吟久久av黑人| 可以免费看不卡的av网站| 亚洲永久网站| 亚洲国产日韩在线一区模特| 国产目拍亚洲精品99久久精品| 欧美激情亚洲视频| 久久久久久久高潮| 亚洲一区国产视频| 亚洲三级视频| 一区二区三区自拍| 国产乱肥老妇国产一区二| 欧美乱在线观看| 开元免费观看欧美电视剧网站| 性亚洲最疯狂xxxx高清| 一区二区三区视频在线看| 亚洲第一在线综合网站| 国产婷婷色一区二区三区在线| 欧美日韩在线三级| 欧美黄色免费| 久久这里有精品视频| 久久国产主播精品| 亚洲欧美在线另类| 99精品久久久| 91久久中文| 狠狠入ady亚洲精品| 国产伦精品一区二区三区视频黑人 | 欧美性开放视频| 欧美精品麻豆| 免费永久网站黄欧美| 欧美一区二区播放| 亚洲欧美国产高清va在线播| 99热精品在线| 亚洲精品影视| 亚洲激情中文1区| 国产精品久久久久久久久| 欧美极品在线观看| 美女主播一区| 久久夜色撩人精品| 久久久久国产精品一区二区| 欧美一区二区免费| 午夜精品免费在线| 亚洲欧美日韩一区| 亚洲在线观看视频| 亚洲一区二区在线| 亚洲深夜影院| 亚洲夜晚福利在线观看| 亚洲视频在线观看三级| 在线综合亚洲| 亚洲午夜在线| 亚洲永久免费观看| 亚洲自拍另类| 亚洲专区一区| 午夜精品国产精品大乳美女| 午夜久久电影网| 欧美亚洲综合另类| 久久成人精品无人区|