摘要:組件提供了一系列的操作接口以方便用戶對(duì)彈幕的相關(guān)特性進(jìn)行定制。對(duì)于這種類型的圖像,我們可以使用色鍵的方式進(jìn)行摳圖生成蒙版。其中,用于更新蒙版的接口為。
導(dǎo)讀:本文內(nèi)容是筆者最近實(shí)現(xiàn)的 web 端彈幕組件—— Barrage UI 的一個(gè)延伸。在閱讀本文的實(shí)例和相關(guān)代碼之前,不妨先瀏覽項(xiàng)目文檔,對(duì)組件的使用方式和相關(guān)接口進(jìn)行了解。
各位童鞋如果經(jīng)常上 B 站(bilibili.com) ,應(yīng)該對(duì) 蒙版彈幕 這個(gè)概念并不陌生。
蒙版彈幕 是由知名彈幕視頻網(wǎng)站 bilibili 于 2018 年中推出的一種彈幕渲染效果,可以有效減少?gòu)椖晃淖謱?duì)視頻主體信息的干擾。
關(guān)于 B 站蒙版彈幕的實(shí)現(xiàn)原理,其實(shí)網(wǎng)上已經(jīng)有很多細(xì)致的討論和研究。個(gè)人總結(jié)了一下,大致要點(diǎn)如下:
基于用戶數(shù)據(jù)和一些機(jī)器學(xué)習(xí)的相關(guān)應(yīng)用,可以提煉出視頻的關(guān)鍵主體
服務(wù)端預(yù)先對(duì)視頻進(jìn)行處理,并生成相應(yīng)的蒙版數(shù)據(jù)
客戶端播放視頻時(shí),實(shí)時(shí)地加載對(duì)應(yīng)資源
通過一些前端的技術(shù)手段,實(shí)現(xiàn)彈幕的蒙版處理
客戶端方面,由于 B 站彈幕是基于 div+css 的實(shí)現(xiàn),因而采用了 svg 格式來傳輸矢量蒙版(至少目前是這樣),通過 CSS 遮罩的方式實(shí)現(xiàn)渲染。
逼乎上有一篇關(guān)于這個(gè)方案的討論,感興趣的童鞋可以移步 這里 進(jìn)行了解。
Barrage UIBarrage UI 是個(gè)人最近實(shí)現(xiàn)的一個(gè)前端彈幕組件,主要用于在前端頁(yè)面中掛載彈幕動(dòng)畫。
組件提供了一系列的操作接口以方便用戶對(duì)彈幕的相關(guān)特性進(jìn)行定制。你也可以在渲染層面對(duì)動(dòng)畫中的每一幀圖像進(jìn)行處理,比如:
實(shí)時(shí)讀取視頻信息
對(duì)每一幀視頻圖像進(jìn)行實(shí)時(shí)處理,計(jì)算出摳圖蒙版
將計(jì)算出的蒙版?zhèn)鹘o彈幕組件,以實(shí)現(xiàn)實(shí)時(shí)的蒙版彈幕
下面是基于 Barrage UI 組件實(shí)現(xiàn)的蒙版彈幕效果:
由于文中不方便嵌入視頻,Demo 的實(shí)際效果請(qǐng)移步到 此處 查看。
下面我們來介紹如何實(shí)現(xiàn)上圖的動(dòng)畫效果。
色鍵(色度鍵控)Demo 中使用了初音小姐姐跳舞的視頻。最主要的特點(diǎn)是除了人物外,視頻的背景是比較一致的純色。對(duì)于這種類型的圖像,我們可以使用 色鍵 的方式進(jìn)行摳圖(生成“蒙版”)。
色度鍵控,又稱色彩嵌空,是一種去背合成技術(shù)。Chroma 為純色之意,Key 則是抽離顏色之意。把被拍攝的人物或物體放置于綠幕的前面,并進(jìn)行去背后,將其替換成其他的背景。此技術(shù)在電影、電視劇及游戲制作中被大量使用,色鍵也是虛擬攝影棚(Virtual studio)與視覺效果(Visual effects)當(dāng)中的一個(gè)重要環(huán)節(jié)。
下圖是色鍵技術(shù)的一個(gè)示例:在綠幕前穿著藍(lán)色衣服的小姐姐,左圖為去背前,右圖為去背后的新背景。
如何扣取視頻圖像在瀏覽器環(huán)境中,我們可以通過 canvas 畫布實(shí)時(shí)地繪制視頻的每一幀,并從畫布中讀取到圖像中每個(gè)像素的 RGBA 信息,檢測(cè)每個(gè)點(diǎn)的 R(red)、G(green)、B(blue) 值是否滿足要求,最終將需要扣除的像素的 A(alpha) 值置為 0,即可得到用于合成蒙版彈幕的蒙版圖像。
注意:
Barrage UI 組件的蒙版功能是基于 Canvas 2D API 的 CanvasRenderingContext2D.globalCompositeOperation 屬性實(shí)現(xiàn)的(使用了 source-in 的混合模式),因而只需將不需要的像素設(shè)置為透明(alpha=0)即可,并不需要改變圖像的 RGB 色值。
下面介紹此案例的代碼實(shí)現(xiàn)。
具體實(shí)現(xiàn) 安裝 Barrage UI 組件直接使用 yarn 或 npm 安裝此組件:
yarn add barrage-ui or npm install --save barrage-ui
HTML + CSS準(zhǔn)備一個(gè) video 元素用于播放視頻,video 的父級(jí)元素用于掛載彈幕:
根據(jù)視頻的實(shí)際尺寸(880×540)設(shè)置 #container 與 #video 的樣式:
html, body { font: 14px/18px Helvetica, Arial, "Microsoft Yahei", Verdana, sans-serif; width: 100%; margin: 0; padding: 0; background: #eee; overflow: hidden; } #container, #video { width: 880px; height: 540px; } #container { margin: 0 auto; margin-top: 50vh; margin-left: 50vw; transform: translate(-50%, -50%); background-color: #ffffd; }創(chuàng)建彈幕
import Barrage from "barrage-ui"; import data from "utils/mockData"; // 獲取父級(jí)容器 const container = document.getElementById("container"); // 創(chuàng)建彈幕實(shí)例 const barrage = new Barrage({ container: container, }); // 重置畫布高度,避免彈幕遮擋視頻播放控件 barrage.canvas.height = container.clientHeight - 80; // 裝填彈幕數(shù)據(jù) barrage.setData(data);
其中,mockData 是用于生成隨機(jī)彈幕數(shù)據(jù)的方法。
關(guān)于彈幕數(shù)據(jù)的內(nèi)容與格式,詳見 Barrage UI 項(xiàng)目文檔實(shí)時(shí)獲取視頻圖像
// 獲取 video 元素 const video = document.getElementById("video"); // 新建一個(gè)畫布來實(shí)時(shí)繪制視頻(純繪圖,不用添加進(jìn)頁(yè)面) const vCanvas = document.createElement("canvas"); vCanvas.width = video.clientWidth; vCanvas.height = video.clientHeight; const vContext = vCanvas.getContext("2d"); // 實(shí)時(shí)繪制視頻到畫布 barrage.afterRender = () => { vContext.drawImage(video, 0, 0, vCanvas.width, vCanvas.height); };
使用組件提供的渲染周期鉤子 .afterRender() 可以在彈幕動(dòng)畫的每一幀圖像渲染后,將視頻圖像繪制到中間畫布 vCanvas 上。注意這里的 vCanvas 畫布主要用于實(shí)時(shí)地獲取視頻圖像,并不需要添加到頁(yè)面中。
實(shí)時(shí)計(jì)算蒙版信息// 渲染前讀取畫布 vCanvas 的數(shù)據(jù),并處理為蒙版圖像 barrage.beforeRender = () => { // 讀取圖像 const frame = vContext.getImageData(0, 0, vCanvas.width, vCanvas.height); // 圖像總像素個(gè)數(shù) const pxCount = frame.data.length / 4; // 將 frame 構(gòu)造成我們需要的蒙版圖像 for (let i = 0; i < pxCount; i++) { // 這里不用 ES6 解構(gòu)賦值的寫法,主要為了保證性能 // PS: 這里如果用解構(gòu)賦值語(yǔ)法將導(dǎo)致大量新對(duì)象的創(chuàng)建,是個(gè)很耗時(shí)的過程 const r = frame.data[i * 4 + 0]; const g = frame.data[i * 4 + 1]; const b = frame.data[i * 4 + 2]; // 將黑色區(qū)域以外的內(nèi)容設(shè)為透明 if (r > 15 || g > 15 || b > 15) { frame.data[4 * i + 3] = 0; } } // 設(shè)置蒙版 barrage.setMask(frame); };
使用組件提供的渲染周期鉤子 .beforeRender() 可以在彈幕動(dòng)畫的每一幀圖像渲染前計(jì)算出蒙版圖像。其中,用于更新蒙版的接口為 .setMask()。
視頻、彈幕的操作綁定最后,為了讓彈幕的行為與視頻播放的操作協(xié)同,還需要進(jìn)行一些綁定的操作:
// 綁定播放事件 video.addEventListener( "play", () => { barrage.play(); }, false ); // 綁定暫停事件 video.addEventListener( "pause", () => { barrage.pause(); }, false ); // 切換播放進(jìn)度 video.addEventListener( "seeked", () => { barrage.goto(video.currentTime * 1000); }, false );
這里分別用到 Brrage UI 組件的 .play() .pause .goto() 三個(gè)接口,分別用于播放、暫停和切換彈幕動(dòng)畫的進(jìn)度。需要注意的是,通過 video.currentTime 屬性獲取到的視頻播放進(jìn)度是一個(gè)單位為 秒 的浮點(diǎn)數(shù),需要轉(zhuǎn)換為 毫秒數(shù) 再傳給彈幕組件。
源碼奉上本文的案例已上傳 github,感興趣的童鞋可以點(diǎn)擊 這里 查看源碼細(xì)節(jié)。
關(guān)于 Barrage UI 組件如果有什么建議和疑問,歡迎大家在項(xiàng)目中提 issue 給我,幫助我持續(xù)改進(jìn)和迭代,更歡迎 star 和 PR。
感謝您能耐心讀到此處,如果覺得有趣或有用,不妨 點(diǎn)贊/評(píng)論/轉(zhuǎn)發(fā) 此文,再謝。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/101217.html
摘要:將圖片的處理方法放到視頻中的每一幀,再加上彈幕飛過的效果,就完成了版的智能防擋彈幕。不知道站的實(shí)現(xiàn)方法是怎樣,是否有人工干預(yù),是否有預(yù)計(jì)算。 某天代碼寫得老眼昏花,去B站上摸魚,突然發(fā)現(xiàn)奇怪的現(xiàn)象: showImg(https://segmentfault.com/img/remote/1460000017911829?w=600&h=284); 喲呵,B站竟然做了 視頻前景提取 ,把...
摘要:全屏蒙版彈窗遮不住的層級(jí)還是很高的,當(dāng)出現(xiàn)全屏蒙版彈窗時(shí),是無(wú)法蓋住的,可以調(diào)用微信的,不過需要注意兼容低版本在類設(shè)置的顏色并沒有變化。 從6月份開始到現(xiàn)在,寫小程序?qū)⒔?個(gè)月了開發(fā)時(shí)給自己埋了不少坑~給大家分享下我的填坑經(jīng)驗(yàn)~~ 開發(fā)部分 1.小程序的組件修改不能觸發(fā)頁(yè)面刷新?需要在父級(jí)文件上保存下才會(huì)觸發(fā)(使用wepy開發(fā)) 2.接口請(qǐng)求出現(xiàn)的問題?記得勾選調(diào)試開發(fā)工具上 不校驗(yàn)...
摘要:想要快速實(shí)現(xiàn)這些功能,需要進(jìn)行怎樣的操作呢其實(shí),實(shí)現(xiàn)直播彈幕功能只需四個(gè)步驟和幾行代碼現(xiàn)在,我們使用云巴,手把手教你實(shí)現(xiàn)直播彈幕功能吧步驟一注冊(cè)云巴賬號(hào)打開網(wǎng)址,或直接搜索云巴,進(jìn)行注冊(cè)并登錄。 在視頻直播中,互動(dòng)是不可缺少、不容小覷的內(nèi)容,主要包括發(fā)送彈幕、打賞、點(diǎn)贊等。想要快速實(shí)現(xiàn)這些功能,需要進(jìn)行怎樣的操作呢? 其實(shí),實(shí)現(xiàn)直播彈幕功能只需四個(gè)步驟和幾行代碼! 現(xiàn)在,我們使用云巴 ...
摘要:實(shí)時(shí)彈幕使用云巴,直播平臺(tái)可快速實(shí)現(xiàn)視頻直播中發(fā)送彈幕打賞點(diǎn)贊等實(shí)時(shí)互動(dòng)功能。云巴聊天室支持圖片上傳文件發(fā)送文檔評(píng)論系統(tǒng)正式上線新增搜索功能,我們會(huì)做得更好。 SDK 篇 Android SDK 更新 Release 1.6.3后臺(tái)進(jìn)程相互拉起的特殊版本 Release 1.6.4增加 so 文件 Release 1.8.0支持小米、華為推送,無(wú)需注冊(cè)第三方賬號(hào) Release 1....
閱讀 2572·2021-09-23 11:21
閱讀 1882·2021-09-22 15:15
閱讀 970·2021-09-10 11:27
閱讀 3440·2019-08-30 15:54
閱讀 651·2019-08-30 15:52
閱讀 1335·2019-08-30 15:44
閱讀 2349·2019-08-29 15:06
閱讀 2972·2019-08-28 18:21