原文 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è)內，視頻的動(dòng)態(tài)畫(huà)面讓網(wǎng)頁(yè)內容能夠更加生動(dòng)地展現給用戶(hù)，而那些可響應用戶(hù)行為并與網(wǎng)頁(yè)瀏覽者互動(dòng)的網(wǎng)頁(yè)視頻元素則將這種美妙體驗提升到了新的高度。 　　樣板參數

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　我們還能做些什么呢？

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