摘要：組件提供了一系列的操作接口以方便用戶對彈幕的相關(guān)特性進(jìn)行定制。對于這種類型的圖像，我們可以使用色鍵的方式進(jìn)行摳圖生成蒙版。其中，用于更新蒙版的接口為。

導(dǎo)讀：本文內(nèi)容是筆者最近實現(xiàn)的 web 端彈幕組件—— Barrage UI 的一個延伸。在閱讀本文的實例和相關(guān)代碼之前，不妨先瀏覽項目文檔，對組件的使用方式和相關(guān)接口進(jìn)行了解。

各位童鞋如果經(jīng)常上 B 站（bilibili.com） ，應(yīng)該對 蒙版彈幕 這個概念并不陌生。

蒙版彈幕 是由知名彈幕視頻網(wǎng)站 bilibili 于 2018 年中推出的一種彈幕渲染效果，可以有效減少彈幕文字對視頻主體信息的干擾。

關(guān)于 B 站蒙版彈幕的實現(xiàn)原理，其實網(wǎng)上已經(jīng)有很多細(xì)致的討論和研究。個人總結(jié)了一下，大致要點如下：

基于用戶數(shù)據(jù)和一些機器學(xué)習(xí)的相關(guān)應(yīng)用，可以提煉出視頻的關(guān)鍵主體

服務(wù)端預(yù)先對視頻進(jìn)行處理，并生成相應(yīng)的蒙版數(shù)據(jù)

客戶端播放視頻時，實時地加載對應(yīng)資源

通過一些前端的技術(shù)手段，實現(xiàn)彈幕的蒙版處理

客戶端方面，由于 B 站彈幕是基于 div+css 的實現(xiàn)，因而采用了 svg 格式來傳輸矢量蒙版（至少目前是這樣），通過 CSS 遮罩的方式實現(xiàn)渲染。

逼乎上有一篇關(guān)于這個方案的討論，感興趣的童鞋可以移步 這里 進(jìn)行了解。

Barrage UI 是個人最近實現(xiàn)的一個前端彈幕組件，主要用于在前端頁面中掛載彈幕動畫。

組件提供了一系列的操作接口以方便用戶對彈幕的相關(guān)特性進(jìn)行定制。你也可以在渲染層面對動畫中的每一幀圖像進(jìn)行處理，比如：

實時讀取視頻信息

對每一幀視頻圖像進(jìn)行實時處理，計算出摳圖蒙版

將計算出的蒙版?zhèn)鹘o彈幕組件，以實現(xiàn)實時的蒙版彈幕

下面是基于 Barrage UI 組件實現(xiàn)的蒙版彈幕效果：

由于文中不方便嵌入視頻，Demo 的實際效果請移步到 此處 查看。

下面我們來介紹如何實現(xiàn)上圖的動畫效果。

Demo 中使用了初音小姐姐跳舞的視頻。最主要的特點是除了人物外，視頻的背景是比較一致的純色。對于這種類型的圖像，我們可以使用 色鍵 的方式進(jìn)行摳圖（生成“蒙版”）。

色度鍵控，又稱色彩嵌空，是一種去背合成技術(shù)。Chroma 為純色之意，Key 則是抽離顏色之意。把被拍攝的人物或物體放置于綠幕的前面，并進(jìn)行去背后，將其替換成其他的背景。此技術(shù)在電影、電視劇及游戲制作中被大量使用，色鍵也是虛擬攝影棚（Virtual studio）與視覺效果（Visual effects）當(dāng)中的一個重要環(huán)節(jié)。

下圖是色鍵技術(shù)的一個示例：在綠幕前穿著藍(lán)色衣服的小姐姐，左圖為去背前，右圖為去背后的新背景。

在瀏覽器環(huán)境中，我們可以通過 canvas 畫布實時地繪制視頻的每一幀，并從畫布中讀取到圖像中每個像素的 RGBA 信息，檢測每個點的 R(red)、G(green)、B(blue) 值是否滿足要求，最終將需要扣除的像素的 A(alpha) 值置為 0，即可得到用于合成蒙版彈幕的蒙版圖像。

注意：

Barrage UI 組件的蒙版功能是基于 Canvas 2D API 的 CanvasRenderingContext2D.globalCompositeOperation 屬性實現(xiàn)的（使用了 source-in 的混合模式），因而只需將不需要的像素設(shè)置為透明（alpha=0）即可，并不需要改變圖像的 RGB 色值。

下面介紹此案例的代碼實現(xiàn)。

直接使用 yarn 或 npm 安裝此組件：

yarn add barrage-ui or npm install --save barrage-ui

準(zhǔn)備一個 video 元素用于播放視頻，video 的父級元素用于掛載彈幕：

根據(jù)視頻的實際尺寸（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;
}

import Barrage from "barrage-ui";
import data from "utils/mockData";

// 獲取父級容器
const container = document.getElementById("container");

// 創(chuàng)建彈幕實例
const barrage = new Barrage({
  container: container,
});

// 重置畫布高度，避免彈幕遮擋視頻播放控件
barrage.canvas.height = container.clientHeight - 80;

// 裝填彈幕數(shù)據(jù)
barrage.setData(data);

其中，mockData 是用于生成隨機彈幕數(shù)據(jù)的方法。

關(guān)于彈幕數(shù)據(jù)的內(nèi)容與格式，詳見 Barrage UI 項目文檔

// 獲取 video 元素
const video = document.getElementById("video");

// 新建一個畫布來實時繪制視頻（純繪圖，不用添加進(jìn)頁面）
const vCanvas = document.createElement("canvas");
vCanvas.width = video.clientWidth;
vCanvas.height = video.clientHeight;
const vContext = vCanvas.getContext("2d");

// 實時繪制視頻到畫布
barrage.afterRender = () => {
  vContext.drawImage(video, 0, 0, vCanvas.width, vCanvas.height);
};

使用組件提供的渲染周期鉤子 .afterRender() 可以在彈幕動畫的每一幀圖像渲染后，將視頻圖像繪制到中間畫布 vCanvas 上。注意這里的 vCanvas 畫布主要用于實時地獲取視頻圖像，并不需要添加到頁面中。

// 渲染前讀取畫布 vCanvas 的數(shù)據(jù)，并處理為蒙版圖像
barrage.beforeRender = () => {
  // 讀取圖像
  const frame = vContext.getImageData(0, 0, vCanvas.width, vCanvas.height);

  // 圖像總像素個數(shù)
  const pxCount = frame.data.length / 4;

  // 將 frame 構(gòu)造成我們需要的蒙版圖像
  for (let i = 0; i < pxCount; i++) {
    // 這里不用 ES6 解構(gòu)賦值的寫法，主要為了保證性能
    // PS: 這里如果用解構(gòu)賦值語法將導(dǎo)致大量新對象的創(chuàng)建，是個很耗時的過程
    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() 可以在彈幕動畫的每一幀圖像渲染前計算出蒙版圖像。其中，用于更新蒙版的接口為 .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() 三個接口，分別用于播放、暫停和切換彈幕動畫的進(jìn)度。需要注意的是，通過 video.currentTime 屬性獲取到的視頻播放進(jìn)度是一個單位為 秒 的浮點數(shù)，需要轉(zhuǎn)換為 毫秒數(shù) 再傳給彈幕組件。

本文的案例已上傳 github，感興趣的童鞋可以點擊 這里 查看源碼細(xì)節(jié)。

關(guān)于 Barrage UI 組件如果有什么建議和疑問，歡迎大家在項目中提 issue 給我，幫助我持續(xù)改進(jìn)和迭代，更歡迎 star 和 PR。

感謝您能耐心讀到此處，如果覺得有趣或有用，不妨 點贊/評論/轉(zhuǎn)發(fā) 此文，再謝。