有了Canvas可以更靈活的展示體驗更好的視頻，能夠與頁面更好的融合。

文 / Matthew McClure

譯 / John

原文 https://mux.com/blog/canvas-adding-filters-and-more-to-video-using-just-a-browser/

視頻無疑是網頁中最引人關注的元素之一。在一個兼容性良好的網頁內，視頻的動態畫面讓網頁內容能夠更加生動地展現給用戶，而那些可響應用戶行為并與網頁瀏覽者互動的網頁視頻元素則將這種美妙體驗提升到了新的高度。

?

這里我想為大家介紹Canvas API！為實現更加高階的視覺效果，Canvas API向開發人員提供了一種通過<canvas>元素在DOM中繪制圖形的方法。此方法的一項常見用例就是處理圖像，這也使其成為處理連續圖像也就是視頻的一大利器。我們希望通過以下幾個典型案例為大家分享視頻+畫布并實現更生動精彩的網頁交互效果，探索該項技術的無限可能。

樣板參數

?

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

?

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

?

（此處有視頻，鏈接：https://gp0hk.csb.app/1-simple.html）

?

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

?

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

?

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

?

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

?

讓我們用圖像創造點什么吧！

?

（此處有視頻，鏈接：https://gp0hk.csb.app/2-filter.html）

?

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

?

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

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

?

一個接近實際的例子：分析和利用視頻的細節

?

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

?

?

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

?

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

?

仔細觀察，你會看到紫色背景的細微差別。經許可使用的多路分配圖像。

?

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

?

（此處有視頻，鏈接：https://gp0hk.csb.app/3-analyze.html）

?

萬事俱備！接下來我們添加點機器學習理論

?

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

?

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

?

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

?

（此處有視頻，鏈接：https://g9zew.csb.app/5-woof.html）

?

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

?

我們還能做些什么呢？

?

我們可以使用類似的方法實現色度值過濾器來構建自己的綠幕或構建圖形和疊加層。如果你正在使用HTML5視頻和畫布做一些其他有趣的事情， 請與我們分享。

LiveVideoStack? 招募

LiveVideoStack正在招募編輯/記者/運營，與全球頂尖多媒體技術專家和LiveVideoStack年輕的伙伴一起，推動多媒體技術生態發展。同時，也歡迎你利用業余時間、遠程參與內容生產。了解崗位信息請在BOSS直聘上搜索“LiveVideoStack”，或通過微信“Tony_Bao_”與主編包研交流。

LiveVideoStackCon 2019北京 音視頻技術大會最新日程現已上線，掃描圖中二維碼或點擊【閱讀原文】了解大會最新日程。

總結

以上是生活随笔為你收集整理的通过Canvas在浏览器中更酷的展示视频的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。