原文 https://mux.com/blog/canvas-adding-filters-and-more-to-video-using-just-a-browser/
　　視頻無(wú)疑是網(wǎng)頁(yè)中最引人關(guān)注的元素之一。在一個(gè)兼容性良好的網(wǎng)頁(yè)內(nèi)，視頻的動(dòng)態(tài)畫(huà)面讓網(wǎng)頁(yè)內(nèi)容能夠更加生動(dòng)地展現(xiàn)給用戶，而那些可響應(yīng)用戶行為并與網(wǎng)頁(yè)瀏覽者互動(dòng)的網(wǎng)頁(yè)視頻元素則將這種美妙體驗(yàn)提升到了新的高度。 　　樣板參數(shù)

　　為了保證這些案例能夠客觀充分反映Canvas API的優(yōu)勢(shì)，我們確立了以下測(cè)試樣板參數(shù)：首先，我們使用Mux為每個(gè)視頻附予播放ID，而player.js僅僅是一個(gè)用于抓住頁(yè)面中的所有視頻元素與data-playback-id屬性，并初始化每一個(gè) HLS.js 的小工具；其次，我們的每個(gè)測(cè)試小樣都有一個(gè)用于演示的Processor class。這些演示文件都是自包含的，即便是簡(jiǎn)單示例與高級(jí)示例之間也具有足夠相似性，這樣便于控制變量以精確比較他們之間的差異。

　　拷貝視頻：從視頻元素渲染到Canvas

　　詳情視頻鏈接：https://gp0hk.csb.app/1-simple.html

　　注意：這些CodeSandbox演示可能無(wú)法在Safari上運(yùn)行。

　　在此示例中，我們所做的只是將video元素以canvas元素的輸出形式呈現(xiàn)。這里展示的是一個(gè)帶有video和canvas元素的裸露HTML文件（接下來(lái)的每個(gè)例子都使用與此完全相同的文件）。當(dāng)我們創(chuàng)建類的新示例Processor時(shí)，我們抓取video和canvas元素然后從畫(huà)布中獲取2D上下文。接下來(lái)，通過(guò)設(shè)置一個(gè)監(jiān)聽(tīng)器來(lái)啟動(dòng)我們所構(gòu)造的函數(shù)集合，以便于在視頻元素開(kāi)始播放時(shí)應(yīng)用這些優(yōu)化。

　　當(dāng)play事件被觸發(fā)時(shí)，updateCanvas方法開(kāi)始被調(diào)用。在這種情況下，被調(diào)用的只是drawImage上下文，用以確保video元素中的內(nèi)容能夠準(zhǔn)確被繪制。當(dāng)此調(diào)用完成后我們會(huì)使用requestAnimationFrame立即再次調(diào)用該函數(shù)。

　　也許你想問(wèn)：這里為什么不使用setTimeout而使用requestAnimationFrame？這樣做最重要的原因是避免丟幀或剪切。與setTimeout不同，requestAnimationFrame和顯示器的刷新率同步，使用requestAnimationFrame能夠有效規(guī)避對(duì)終端顯示設(shè)備幀率與刷新率的不必要猜測(cè)。

　　讓我們用圖像創(chuàng)造點(diǎn)什么吧！

　　詳情視頻鏈接：https://gp0hk.csb.app/2-filter.html

　　上述示例與我們之前的示例幾乎完全相同。但是，在這里我們不是僅僅完全復(fù)制整個(gè)video元素，而是在將圖像繪制到上下文之前操作圖像。

　　在如原先那樣繪制圖像之后，我們可以將該圖像數(shù)據(jù)以記錄了每個(gè)像素RGBA值的數(shù)組的形式從該上下文中取出。不能不說(shuō)這是一件令人興奮的事情，因?yàn)檫@意味著我們可以遍歷每個(gè)像素并在此基礎(chǔ)上實(shí)現(xiàn)我們期待的任何功能。而在此情形下，我們要做的是將把絢麗的彩色視頻轉(zhuǎn)換為灰階版本。

　　最終我們只是采用了 Mozilla團(tuán)隊(duì)描述 的方法，也就是將每個(gè)RGB估值器設(shè)置為其中所有3個(gè)的平均值。隨后我們更新圖像數(shù)據(jù)數(shù)組中的這些值，并將更新后的版本寫(xiě)入到上下文中。

　　這里我想與大家分享一下Phil痛苦——2015年以來(lái)，他一直任職于Demuxed 公司。今年除了常規(guī)領(lǐng)域，他還一直致力于 Demuxed 2019網(wǎng)站 ，該 網(wǎng)站 頁(yè)面的頂部有一個(gè)大型動(dòng)畫(huà)，設(shè)計(jì)此動(dòng)畫(huà)的目標(biāo)是希望其與網(wǎng)頁(yè)背景完美融合。動(dòng)畫(huà)可以使用JavaScript和SVG完成，但這樣會(huì)導(dǎo)致動(dòng)畫(huà)文件非常臃腫，以至于完全占據(jù)了MacBook Pro的處理器核心。我們的討論以該命題為重點(diǎn)，我們希望使用合適的編碼方案已實(shí)現(xiàn)高效的視頻動(dòng)畫(huà)展示效果。

　　Phil把視頻放在了hero上，并且他注意到視頻的背景顏色與CSS中指定的背景顏色不完全匹配。但這并不要緊，Phil做了任何明智的開(kāi)發(fā)者都會(huì)做的事情——使用顏色提取工具抓取了視頻背景的十六進(jìn)制顏色值，隨后統(tǒng)一兩種背景的顏色。

　　當(dāng)Phil在不同的瀏覽器或設(shè)備中打開(kāi)該網(wǎng)頁(yè)時(shí)，他意識(shí)到了我們正在處理的色彩空間問(wèn)題——在解碼視頻時(shí)，不同的瀏覽器或硬件處理顏色空間的方式不同，因此就像我們?cè)噲D做的那樣，這里基本上沒(méi)有辦法可靠地匹配不同解碼器的十六進(jìn)制值。

　　仔細(xì)觀察，你會(huì)看到紫色背景的細(xì)微差別。經(jīng)許可使用的多路分配圖像。

　　為了解決這個(gè)問(wèn)題，我們放棄了這種嘗試并試圖只在每個(gè)瀏覽器內(nèi)進(jìn)行初始修復(fù)。我們像以前那樣將畫(huà)面框架繪制到畫(huà)布上并且我們只抓取邊緣上的一個(gè)像素；當(dāng)瀏覽器將圖像渲染到畫(huà)布時(shí)將顏色轉(zhuǎn)換為正確的顏色空間，這樣我們就可以抓住邊緣上的一個(gè)RGBA值并將主體背景顏色設(shè)置為相同！

　　詳情視頻鏈接：https://gp0hk.csb.app/3-analyze.html

　　萬(wàn)事俱備！接下來(lái)我們添加點(diǎn)機(jī)器學(xué)習(xí)理論

　　在當(dāng)下的技術(shù)趨勢(shì)中，機(jī)器學(xué)習(xí)成為避之不及的關(guān)鍵熱詞。幾乎所有技術(shù)博客文章內(nèi)沒(méi)有機(jī)器學(xué)習(xí)解決不了的問(wèn)題；更重要的是，我們?cè)�先似乎沒(méi)有利用機(jī)器學(xué)習(xí)實(shí)現(xiàn)什么頗具建設(shè)性的技術(shù)成就。盡管Mux 利用ML 做實(shí)現(xiàn)了很多  很酷的  事情 。但我本人卻并未利用機(jī)器學(xué)習(xí)實(shí)現(xiàn)什么酷炫的優(yōu)化。

　　我們將進(jìn)一步討論最后一個(gè)例子并將其中的一些概念結(jié)合在一起：我們使用 Tensorflow的對(duì)象檢測(cè)模型 在每個(gè)幀中查找對(duì)象并對(duì)它們進(jìn)行分類，然后我們將在畫(huà)布中用框繪制框架和與之相關(guān)的標(biāo)簽。根據(jù) Spoiler alert分類器，我們認(rèn)為該分類器針對(duì)示例Big Buck Bunny中的一切物體所作出的識(shí)別結(jié)果可能都是錯(cuò)誤的。

　　這里我想強(qiáng)調(diào)的是：我不是數(shù)據(jù)科學(xué)家，這是我第一次親自使用Tensorflow。盡管使用機(jī)器學(xué)習(xí)搭建視覺(jué)分析框架并進(jìn)行實(shí)時(shí)分析看上去非常酷炫，但這一切真的能在實(shí)際案例當(dāng)中起到?jīng)Q定性關(guān)鍵作用嗎？最后我們請(qǐng)Phil使用相機(jī)拍攝他的寵物狗散步，看看機(jī)器學(xué)習(xí)應(yīng)對(duì)這一場(chǎng)景的效果如何……

　　詳情視頻鏈接：https://g9zew.csb.app/5-woof.html

　　實(shí)際結(jié)果的確出乎我的意料：機(jī)器學(xué)習(xí)可以成功識(shí)別99%幀內(nèi)的寵物狗，僅有1%的情況將寵物狗識(shí)別成馬，不得不說(shuō)這超出了我的預(yù)期。

　　我們還能做些什么呢？

　　我們可以使用類似的方法實(shí)現(xiàn)色度值過(guò)濾器來(lái)構(gòu)建自己的綠幕或構(gòu)建圖形和疊加層。如果你正在使用HTML5視頻和畫(huà)布做一些其他有趣的事情， 請(qǐng)與我們分享。來(lái)源：LiveVideoStack