9/24~9/28,嘗試單機網頁影片剪輯,可以直接用WASM跑FFmpeg,總算成功了,接著著重理解

9/28

配合這篇使用 使用WebAssembly+FFmpeg实现前端转码(下)

前端轉碼的意思就是,檔案不用傳到伺服器上就能轉檔

假如你用Firefox,不用連網也能用(雖然不連網,用來測試的影片檔的取得可能是個問題)

chrome我還沒試不太確定,只是通常除了Firefox外,有很多功能都只能在http底下使用

(就算不連外網,也要用http server

那http server架設最簡易的,我覺得是Golang

雖然後續使用,像資料夾、路徑設定與更改

應該是會比Apache MySQL PHP那些組合軟體來得麻煩)

有6個檔案,說明是:「配合https://zhuanlan.zhihu.com/p/27910351使用 」的那六個檔案

那為何會把其它四個檔案放在一起?

因為這六個檔案放在同一路徑底下比較能順利執行

(17:23 我測試了下,應該是只要這六個檔案,網頁就能順利運作

ffmpeg_run()是寫在ffmpeg_pre裡面啦!!

最神奇的函數

(不然真的不知道WASM要怎麼用,雖然我還沒仔細去看跟理解

若照多數的WASM教學

碰上指標、字串等參數,就會很麻煩

要用Arraybuffer或heap之類解決

麻煩也就算了,重點是較完整的例子也不好找,找到了也沒FFmpeg好用

而一個FFmpeg的功能要呼叫好多個地方的程式碼函數才能完成

所以就算知道傳的參數若是指標、字串等要怎麼處理幫助也有限)

主要是這篇知乎專欄給的檔案不完整

所以我花了蠻長的時間研究才完成的

(大約七小時,基本上今天假日算給了它了)

過程可能需要的文章

(談Worker的,Workrer就像是執行緒

Javascript的執行緒寫法,也就是一種能不同步進行的手段

就是說程式還沒執行完,也可以跑去做其它事情的意思,而不會卡在那邊)

(↑談workerfs的,也就是worker的file system)

接著是試著理解下!!

然後再去想能否藉此完成錄製網頁使用影片

雖然我覺得錄製影片不用伺服器端應該是沒什麼希望就是了

再不然就是只截幾個重要畫面再用ffmpeg.wasm、ffmpeg.js...等等拼成影片

因為若我沒猜錯

錄製的影片若記憶體要消耗太多應該就沒希望只靠client端完成

不過話說回來

WASM的做法真的感覺比asm.js快出許多啊!!

真是厲害!!

太佩服了(要不是因為佩服導致會不好意思

我中間好想直接在知乎專欄上發問或說發飆

檔案給不完整導致要研究很久

嗯,只是我身為伸手黨,不適合那麼囂張!!

因為會出問題的地方很多,許多人就算檔案是給好的也可能會出問題

沒自信也沒心情解決的話,裝死是較好的處理方式

雖然檔案若給完整的話

我大概就不太清楚Worker、WorkerFS是什麼了

因為從程式碼表面上看不出其特殊處

看起來就類似其它物件的使用

好在只耗掉一天假日就研究得出來!!)

---------------9/28稍早-----------------

嗯~嘗試了好一陣子

總算用VirtualBox(建議裝64Bit,不然之後有些設定要自行修正)

產出FFmpeg.js跟FFmpeg.wasm了

只是目前的問題就是不知道該怎麼用,不知道該怎麼用Javascript呼叫WASM

(或者說是看網路上的教學,大概知道怎麼用

可是本身對FFmpeg的程式碼不熟,所以也不太清楚該怎麼測試)

看https://github.com/bgrins/videoconverter.js的話

是可以順利執行,我想到的指令試了幾個也沒問題

(只是以24分鐘75MB的動漫影片大概都要跑十分鐘以上才有結果)

但是videoconverter.js的做法是用asm.js

不是web assembly(WASM)

好,抒發完畢,繼續研究

雖然就算解決這個問題

在瀏覽器中要錄製影片我想還是很困難的

我是不太確定啦,但我想就算是用WASM,因為記憶體隔離和安全性考量

應該還是不行直接寫檔案在電腦或手機上(若用FFmpeg以現在的手機不太需要考慮,跑不太動)

假若不能寫在檔案的話

那就只能寫在記憶體中,這樣子的話錄製影片應該是很困難的,特別是較長時間的影片

至少若不能寫入檔案的話,應該很難把連滑鼠的移動都錄製起來

對,確實不能寫入檔案

不過它有提供虛擬檔案系統的功能

雖然不太清楚能利用它做到些什麼

突然想到

若真的窮途末路的話

(我覺得肯定窮途末路,不然持續記錄使用者的網頁畫面,網頁記憶體遲早耗盡)

應該是可以搭配伺服器端程式語言使用

雖然這樣對於網頁使用者的門檻就會變高些

不過我若想做play_game_to_write_game.html的話

遲早也是要加入伺服器端的內容的

我的話伺服器端當然還是用Go語言(Go,Golang)啦

回頭先解決Javascript如何呼叫FFmpeg的函數

-----------↓9/26~27------------

推薦閱讀:wasm + ffmpeg实现前端截取视频帧功能

在windows底下嘗試很久

看不太懂cmake的檔案要設定哪些東西

決定放棄,用VirtualBox安裝Ubuntu來照做了

不過今天大概也只能這樣了

在安裝過程發現FFmpeg可以做蠻多影片編輯的功能

雖然是用程式指定的,沒影片剪輯軟體滑鼠操作來得快跟直覺

這樣就比較不能預覽剪輯後的結果

虛擬機編譯過程可能需要參考的文章

檔案:video_edit.html

9/26推薦文章,MP4格式講解(要配合十六進位或說HEX編輯器,推薦PSPad)

呼,他們可真厲害,不知道從哪知道這些訊息的

重點大概是track(我那個年代的說法是音軌,MIDI檔也有類似的東西)的差別

有些track是聲音,有些是影像

所以在視訊剪輯軟體《Lightworks》中

要把圖片放到另一段影片,需要再建立個track

用特效→DVE才能把兩段影片併在一起播放

這樣看來原理應該是用影像track才有用的layer屬性放上去(類似Z軸、深度、圖層的概念)

而不是直接去修改影片檔整體的圖像內容

感覺看了↑那篇文章後,覺得未來要做的修改是比較有方向了些

雖然還不清楚影片內嵌字幕要怎麼處理

不過就算不知道字幕要怎麼處理

我感覺上也可以把個影像track拿來顯示字幕

用同樣的原理去實現的樣子!!

而且字幕獨立成track有個好處就是,以後可以選擇關掉字幕!!

然後之所以MP4檔案格式要讀取moov

是因為缺乏moov的話,會不知道要怎麼解析mdat

不過取得moov的資訊之後

網路上傳的資料只需要mdat即可

------------↓9/25------------------------

影片剪輯嘗試實作,第一步,傳影片檔,擷取前4444444 bytes播放,並可儲存,每五秒抓畫面

不過對於些MP4檔案,moov是寫在mdat後面,這方法會有問題

若是先mdat(movie data)的話,那moov幾乎就肯定在檔尾才出現了

此外mdat跟moov 表頭(headers)的部份,看起來bytes數量也不是固定的

要進一步修改會蠻頭痛的

MP4檔案格式

可能會需要的參考資料

(不過我看了這個好像還是算不出對的檔案大小,但看這個後感覺比較能看懂格式

哦,算得出來,我前幾次計算錯誤,雖然我已經是用小算盤─程式設計師模式來算了)

過程中特別感謝stackoverflow

不然我也找不到MP4檔案格式

各個程式碼也大多是直接抄stackoverflow的

推薦網站

要是沒這網站,我還沒注意到mdat各chunk的起點是記錄在stco中

正在寫程式測格式中

寫的程式大概是:

reader.onload = function (data) {
        dv = new DataView(data.target.result,0,data.target.result.byteLength);
        
        //http://www.onlinemp4parser.com/
        //可查看moov→mdia→minf→stbl→stco各chunk的起點
        //我是在測mdat的檔案格式
        for(var i=437164;i<1528379;i++)
        {
            dv.setUint8(i,0);
        }

        f = new Blob([dv],{type:'video/mp4'});
        document.getElementById("v").src = window.URL.createObjectURL(f);

}

後來發現那是影片播放問題

如果把檔案下載後再放的話

前面填0相當於檔案內容丟失

所以直接從有檔案內容的地方開始讀取

我用的影片的話是一開始直接跳到20幾秒後再播放

但在網頁上看的話,前20幾秒就要等時間到才會放

不過對於下一步沒什麼頭緒,逛知乎時才發現FFmpeg有多強

FFmpeg可以計算出一個MP4影片有幾幀(其實其它軟體格式應該也行)

在接觸過MP4影片檔案格式後

大概會發現它的關鍵幀(關鍵影格)跟幀(影格)是很不明顯的

也就是很可能是透過讀取整個檔案,把mdat中每段chunk(塊)內容解析之後再加總得出的

還有MP4影片只是表象,MP4有很多子檔案類型

就類似.avi也允許很多種圖片跟聲音檔案格式

影片檔是個很複雜的檔案格式

雖然昨天跟今天看FFmpeg程式碼的感想是

程式很簡潔

也就是不會用註解跟你講原理

因此我猜會有段很長的盲人摸象時間

不過你們覺得我像是那麼有毅力的人嗎?

我要是那麼有毅力就不會逃避腦力工作了!!

部份原因是,以我來說的話

腦力工作既不好找、薪水又低啦(以壓力跟工作時間來說)!!

而且以前的我連最近的程式都沒寫過

感覺能做出的腦力貢獻比體力貢獻還低啊

因此

果然有原始碼導讀之類的文章

不過大概也是明天才能開始看

今天我精神差不多渙散了!!

啊,掃了一下是講.flv跟封包的,肯定要換別篇文章了

雖然我是懷疑會有人那麼好心講解MP4檔案格式嗎?

我覺得有辦法處理被廣泛使用的多媒體檔案格式

那可是比起遊戲更有商業價值的能力呢

OpenCV、FFmpeg等都因為能處理多媒體檔而佔有一席之地

影像處理有很多應用

像是傳統意義的安全(監視器影像處理)、文字辨識,當然也可以拿來娛樂

不過懷疑是懷疑

也許明天就找到了相關文章了

雖然找到也不代表我能讀懂

那今天大概就這樣

-----------------↓9/24(也就是原文)---------------------------

突然很想做影片剪輯

主要是想說若用玩遊戲學做遊戲的網頁檔時,把遊戲過程最後錄成影片的話

我想就算遊戲本身不怎麼樣,也應該是很有效果

(吳鶴以:「微笑中流下的眼淚,一定很 (止住) 」

吳鶴以:沒事,突然想唱下)

就類似網易的《英雄三國》

(多人對戰模式是MOBA類型的遊戲

不過有打劇情刷裝備的功能,雖然裝備印象中也是劇情才能用)

別的不說,至少遊戲內建可以用麥克風跟隊友說話

其實是不是只能跟隊友說話我不清楚

雖然我覺得網易的《英雄三國》是蠻不錯的遊戲

不過網頁影片剪輯這部份我是有些未戰先怯啦

(因為上次類似的項目是研究非midi或musicXML的聲音檔格式

但進展不順利,不知道要怎樣才能以波或音符為單位的修改)

那上網找了下些現成應用

提供的功能還是跟昂貴的影片剪輯軟體不能比

(一部份原因是,網路上傳影片檔太佔流量,對於伺服器來說是真得很昂貴的)

就不太清楚是技術問題還是流量費用考量問題

我是還有想到別的可能的問題

就是侵權問題(指的是軟體專利的部份)

不過~我覺得這可能性較小

因為若能用網頁達到跟專業影片剪輯軟體相同的功能的話

我想是件很光采(值得炫耀)的事情

可是這部份幾乎未曾聽聞過

應該還是技術問題跟流量費用問題

影片剪輯軟體免費版就算是單機版的也是很少見的

比較有名、好用的影片剪輯軟體免費版

也是本來是付費放寬使用限制來的(雖然這個我只知道《LightWorks》)

唔,也許是因為我是Windows用戶吧

雖然用Linux時也沒怎麼聽說過影片剪輯軟體的

《Blender》是可以做影片,只是不是傳統意義的影片編輯軟體

嗯,那先嘗試看看吧

我想可能要先從網頁處理二進制資料開始著手

然後是研究影片檔格式

也就是說我要完成的第一個子目標是

讓使用者(玩家)可以傳自己的影片

然後我先只要求自己能夠順利播放影片這樣即可

那第二個子目標就是該播放影片的時間

與添加字幕跟改變背景音樂這類的功能

理論上若第一個問題解決是靠影片格式研究出來才做出來的話

改播放影片的時間、添加字幕、改變背景音樂應該不是很困難

不過添加字幕是內嵌在影片中的話大概就麻煩許多(相當於要去改一段時間內的圖檔內容)

如果只是讀取字幕檔按時間播放,應該會順利很多

嗯,這個感覺有意思多了!!

就算這功能有很多人做過

感覺與天賦樹相比,是更值得嘗試的目標

(天賦樹若用較麻煩的儲存方式的話

程式可以變得很簡單

天賦樹麻煩的原因是若想做得不費工是有些難的

但若不在乎背後的程式與維護修改麻煩的話

就我想像中─天賦樹有很簡單的實作方式

至少比我想像中的天賦樹正規做法簡單很多

就類似遊戲用的腳本語言

可以做得很單純(加一堆限制的話)也可以做得功能很有彈性)

呼,不知道要花多久時間才能完成第一個子目標

這篇文章不錯

底下的留言我也有想過

(嗯,一年以前的留言,一年前WASM還沒有很平易近人的完整版教學)

但是我前陣子看過WASM的使用範例(但我沒照著做)後

覺得...

除非是想要像著名的 瀏覽器中跑Windows 2000這樣瘋狂的舉動

(也沒有很著名,就最近的事情,不過因為是最近的事情,所以覺得著名

把著名改成流行大概會貼切些)

不然尋常的功能用WASM改寫感覺...

我的感覺不準啦,假如你會用WASM寫那就用WASM寫吧

我是覺得WASM不好學,且開發步驟很多道手續

雖然是叫Assembly(組合語言),但是語法採LISP形式,可是指令又是組合語言

我想要熟悉需要段時間

假若常規方法真的不行的話

我再考慮WASM

WASM跟機器學習也是我最近蠻想學的兩個東西

不過若沒什麼事情要做的話

其實學那兩個作用也不大

影片剪輯可以考慮用WASM,那影片或圖片生成則可藉由機器學習這樣

只是我之前初步接觸的感覺是那兩個沒想像中的好學

嗯,不多說了,以我現在的程度想那兩個也沒用

就先專注於眼前的事情吧!!

載入影片用<video>很簡單

但是<video>本身

我用<video id="v"> console.dir(v);

看起來是沒提供方法來更進一步的操作

因此這方法是不行的

至少不能只用這招解決影片剪輯

那先讀二進制資料看看吧

讀二進制資料沒問題了

但下一步就有問題了

至少MPEG系列的檔案格式

維基百科應該是沒寫出來的

那就不知道有沒有軟體專利保護

MPEG系列的檔案格式也不是開放格式

(開放的意思是說使用不需要付權利金,不過怎樣的使用才要付權利金這我不清楚)

我想我下個要研究的關鍵字是

FFmpeg

不過看維基百科

FFmpeg是自由軟體,還不知道有沒有開放程式碼

而程式碼協議是用GPL-2

也就是說若使用FFmpeg的程式碼再修改的軟體

必須開放原始碼

因為採BSD協議的要怎麼用都行

知道跟不知道其實都無所謂

但GPL-2就不允許把程式碼改一改就當成自家產品了

(要當自家產品也得先開放原始碼,可是你開放原始碼要怎麼成為產品又是另一回事了)

因此我猜FFmpeg應該是開放原始碼的

我猜啦

原始碼放在哪還要找下!!

呀,但看了一下影片檔支援的功能

像開放格式的Theora

就算是英文版的維基百科Theora頁面

也沒有列第幾個bit到第幾個bit是做什麼用的

我想大概就是在說影片檔案格式沒有簡單到可以直接寫在維基百科頁面上

我覺得應該沒那麼好理解啊

不過這方面的投資感覺回報是巨大的!!

嗯,那也要投資成功啦~

呀,找到了

其實google下 FFmpeg github就看到了

不然Source code底下點一點Git Repositories也會找到

「好的開始是成功的一半」

初步估計重點是 libavcodec和libavformat

嗯,其實這比較算是英文問題

lib是程式庫

av是audio and video (音訊跟視訊)

format是格式

codec是 coder(編碼器,可能是encoder)、decoder(解碼器)合在一起寫,在電腦界算蠻常用到的字

嗯,不過現代的程式越來越方便,可能知道的人會越變越少吧

因此不知道也是正常的

咦,維基百科的寫法是compress(壓縮)跟decompress(解壓縮)的合寫

我怎麼覺得好像不是這樣,英文維基百科沒提到decompress啊!!

嗯

算了,反正大致上就是在做二進制檔案格式讀寫操作的東西

而實際上找了一下

在 libavcodec用搜尋mpeg4找了會

有幾個檔案估計是必看的

mpeg4audio.c     
mpeg4audio.h
mpeg4data.h
mpeg4video.c
mpeg4video.h
mpeg4video_parser.c
mpeg4video_parser.h
mpeg4videodec.c
mpeg4videoenc.c

但其中最重要的我猜是

mpeg4video_parser.c
mpeg4video_parser.h

那libavformat底下則是這個檔

嗯,我想我還是先從format開始看好了

若沒估計錯的話應該是看不懂啦!!

閱讀過程估計會需要這篇

嗯...

其實我不太理解的是,RTP應該是Real Time Protocol吧

那應該是跟網路相關的事情

FFmpeg使用有需要連網嗎?

或者說是看MPEG4影片應該是可以單機環境看的

而這個格式看起來也是封包格式,而不是MPEG4的檔案格式

啊,我知道為什麼會針對RTP了

因為libavformat底下的檔名就是rtpdec_mpeg4.c

本來就是針對網路傳輸的解碼

因此主要應該還是要看libavcodec底下的

那明天再開始看!!

(不過今天太晚喝咖啡了,若洗完澡後精神還是很好的話就先看了)