Serangan anti-muka, iaitu, sebilangan besar sekatan terapung, tetapi tidak menyekat orang dalam skrin video Ia kelihatan seperti terapung dari belakang orang itu.

Pembelajaran mesin telah popular selama beberapa tahun, tetapi ramai orang tidak tahu bahawa keupayaan ini juga boleh dijalankan dalam penyemak imbas

Artikel ini memperkenalkan proses pengoptimuman praktikal dalam rentetan video, disenaraikan; pada akhir artikel Beberapa senario di mana penyelesaian ini terpakai diterangkan, dengan harapan dapat membuka beberapa idea.

Demo mediapipe (https://google.github.io/mediapipe/) menunjukkan

Prinsip pelaksanaan benteng anti muka arus perdana

Atas permintaan

Muat naik video

Pengiraan latar belakang pelayan mengekstrak kawasan potret dalam skrin video dan menukarnya kepada storan svg

Semasa pelanggan memainkan video, ia memuat turun svg daripada pelayan Digabungkan dengan benteng, benteng tidak dipaparkan dalam kawasan potret

Siaran langsung

1. Apabila sauh menolak aliran, kawasan potret diekstrak daripada skrin dalam masa nyata (peranti hos) dan ditukar kepada svg
2. Gabungkan data svg ke dalam strim video (SEI) dan tolak strim ke pelayan
3. Pada masa yang sama semasa klien bermain video, huraikan svg daripada strim video (SEI)
4. Gabungkan svg dengan sintesis Skrin pop timbul, kawasan potret tidak memaparkan rentetan

Pelan pelaksanaan artikel ini

Semasa pelanggan memainkan video, maklumat kawasan potret diekstrak daripada skrin dalam masa nyata, dan maklumat kawasan potret dieksport ke dalam gambar dan peluru Sintesis skrin, rentetan tidak akan dipaparkan dalam kawasan potret.

Prinsip Pelaksanaan

1. Menggunakan perpustakaan sumber terbuka pembelajaran mesin untuk mengekstrak garis besar potret daripada imej video dalam masa nyata, seperti Pembahagian Badan (https://github.com/tensorflow/tfjs -models/blob/ master/body-segmentation/README.md)
2. Eksport garis besar potret ke dalam gambar, dan tetapkan imej topeng lapisan barrage (https://developer.mozilla.org/ zh-CN/docs/ Web/CSS/mask-image)

Berbanding dengan penyelesaian tradisional (SEI secara langsung masa nyata)

Kelebihan:

• Mudah untuk dilaksanakan; hanya satu teg Video diperlukan Parameter, tidak memerlukan penyelarasan berbilang hujung
• Tiada penggunaan jalur lebar rangkaian

Kelemahan:

• Had prestasi teori adalah lebih rendah daripada penyelesaian tradisional; setara dengan menukar sumber prestasi untuk Sumber rangkaian

Masalah yang dihadapi

JavaScript diketahui mempunyai prestasi yang lemah, menjadikannya tidak sesuai untuk CPU- tugasan intensif. Daripada demo rasmi kepada amalan kejuruteraan, cabaran terbesar ialah prestasi.

Amalan ini akhirnya mengoptimumkan penggunaan CPU kepada kira-kira 5% (2020 M1 Macbook), mencapai keadaan sedia pengeluaran.

Amalkan proses penalaan

Pilih model pembelajaran mesin

BodyPix (https://github.com/tensorflow/tfjs-models/blob/master/body-segmentation / src/body_pix/README.md)

Ketepatan terlalu lemah, mukanya sempit, dan jelas terdapat pertindihan antara rentetan dan tepi muka watak

BlazePose (https://github.com/tensorflow/tfjs-models/blob/master/pose-detection/src/blazepose_mediapipe/README.md)

Ketepatan yang sangat baik dan menyediakan maklumat titik badan, Tetapi prestasinya kurang baik

Contoh struktur data pengembalian

[{score: 0.8,keypoints: [{x: 230, y: 220, score: 0.9, score: 0.99, name: "nose"},{x: 212, y: 190, score: 0.8, score: 0.91, name: "left_eye"},...],keypoints3D: [{x: 0.65, y: 0.11, z: 0.05, score: 0.99, name: "nose"},...],segmentation: {maskValueToLabel: (maskValue: number) => { return 'person' },mask: {toCanvasImageSource(): ...toImageData(): ...toTensor(): ...getUnderlyingType(): ...}}}]

MediaPipe SelfieSegmentation (https://github.com/tensorflow/tfjs-models/blob/ master /body-segmentation/src/selfie_segmentation_mediapipe/README.md)

Ketepatan yang sangat baik (kesan yang sama seperti model BlazePose), penggunaan CPU adalah kira-kira 15% lebih rendah daripada model BlazePose, prestasi lebih baik, tetapi anggota badan tidak disediakan dalam maklumat Point data yang dikembalikan

Contoh struktur data pulangan

{maskValueToLabel: (maskValue: number) => { return 'person' },mask: {toCanvasImageSource(): ...toImageData(): ...toTensor(): ...getUnderlyingType(): ...}}

Pelaksanaan versi pertama

Rujuk kepada pelaksanaan rasmi model MediaPipe SelfieSegmentation (https://github.com/tensorflow/ tfjs-models/blob /master/body-segmentation/README.md#bodysegmentationdrawmask), tanpa pengoptimuman, CPU mengambil kira-kira 70%

const canvas = document.createElement('canvas')canvas.width = videoEl.videoWidthcanvas.height = videoEl.videoHeightasync function detect (): Promise<void> {const segmentation = await segmenter.segmentPeople(videoEl)const foregroundColor = { r: 0, g: 0, b: 0, a: 0 }const backgroundColor = { r: 0, g: 0, b: 0, a: 255 } const mask = await toBinaryMask(segmentation, foregroundColor, backgroundColor) await drawMask(canvas, canvas, mask, 1, 9)// 導(dǎo)出Mask圖片，需要的是輪廓，圖片質(zhì)量設(shè)為最低handler(canvas.toDataURL('image/png', 0)) window.setTimeout(detect, 33)} detect().catch(console.error)

Kurangkan kekerapan pengekstrakan dan mengimbangi pengalaman prestasi

Selesaikan kesesakan prestasi

Menganalisis graf nyalaan, didapati bahawa kesesakan prestasi berada dalam toBinaryMask dan toDataURL

Menulis Semula keBinaryMask?? >

Menganalisis kod sumber, digabungkan dengan pencetakan maklumat segmentasi, kami mendapati segmentation.mask .toCanvasImageSource boleh mendapatkan objek ImageBitmap asal, iaitu maklumat yang diekstrak oleh model. Cuba tulis kod anda sendiri untuk menukar ImageBitmap kepada Mask dan bukannya menggunakan pelaksanaan lalai yang disediakan oleh perpustakaan sumber terbuka.

Prinsip Pelaksanaan

window.setTimeout(detect, 66) // 33 => 66

Langkah 2 dan 3 adalah bersamaan dengan mengisi kandungan di luar kawasan potret dengan warna hitam (mengisi terbalik ImageBitmap), untuk bekerjasama dengan css (imej topeng), jika tidak hanya apabila Bendungan hanya kelihatan apabila ia terapung ke kawasan potret (betul-betul bertentangan dengan kesan sasaran).

globalCompositeOperation MDN（https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation）

此時(shí)，CPU 占用 33% 左右

多線程優(yōu)化

我原先認(rèn)為toDataURL是由瀏覽器內(nèi)部實(shí)現(xiàn)的，無法再進(jìn)行優(yōu)化，現(xiàn)在只有優(yōu)化toDataURL這個(gè)耗時(shí)操作了。

雖沒有替換實(shí)現(xiàn)，但可使用?OffscreenCanvas （https://developer.mozilla.org/zh-CN/docs/Web/API/OffscreenCanvas）+ Worker，將耗時(shí)任務(wù)轉(zhuǎn)移到 Worker 中去， 避免占用主線程，就不會(huì)影響用戶體驗(yàn)了。

并且ImageBitmap實(shí)現(xiàn)了Transferable接口，可被轉(zhuǎn)移所有權(quán)，跨 Worker 傳遞也沒有性能損耗（https://hughfenghen.github.io/fe-basic-course/js-concurrent.html#%E4%B8%A4%E4%B8%AA%E6%96%B9%E6%B3%95%E5%AF%B9%E6%AF%94）。

// 前文 detect 的反向填充 ImageBitmap 也可以轉(zhuǎn)移到 Worker 中// 用 OffscreenCanvas 實(shí)現(xiàn)， 此處略過 const reader = new FileReaderSync()// OffscreenCanvas 不支持 toDataURL，使用 convertToBlob 代替offsecreenCvsEl.convertToBlob({type: 'image/png',quality: 0}).then((blob) => {const dataURL = reader.readAsDataURL(blob)self.postMessage({msgType: 'mask',val: dataURL})}).catch(console.error)

可以看到兩個(gè)耗時(shí)的操作消失了

此時(shí)，CPU 占用 15% 左右

降低分辨率

繼續(xù)分析，上圖重新計(jì)算樣式（紫色部分）耗時(shí)約 3ms

Demo 足夠簡單很容易推測(cè)到是這行代碼導(dǎo)致的，發(fā)現(xiàn) imgStr 大概 100kb 左右（視頻分辨率 1280x720）。

danmakuContainer.style.webkitMaskImage = `url(${imgStr})

通過canvas縮小圖片尺寸（360P甚至更低），再進(jìn)行推理。

優(yōu)化后，導(dǎo)出的 imgStr 大概 12kb，重新計(jì)算樣式耗時(shí)約 0.5ms。

此時(shí)，CPU 占用 5% 左右

啟動(dòng)條件優(yōu)化

雖然提取 Mask 整個(gè)過程的 CPU 占用已優(yōu)化到可喜程度。

當(dāng)在畫面沒人的時(shí)候，或沒有彈幕時(shí)候，可以停止計(jì)算，實(shí)現(xiàn) 0 CPU 占用。

無彈幕判斷比較簡單（比如 10s 內(nèi)收超過兩條彈幕則啟動(dòng)計(jì)算），也不在該 SDK 實(shí)現(xiàn)范圍，略過

?判定畫面是否有人

第一步中為了高性能，選擇的模型只有ImageBitmap，并沒有提供肢體點(diǎn)位信息，所以只能使用getImageData返回的像素點(diǎn)值來判斷畫面是否有人。

畫面無人時(shí)，CPU 占用接近 0%

發(fā)布構(gòu)建優(yōu)化

依賴包的提交較大，構(gòu)建出的 bundle 體積：684.75 KiB / gzip: 125.83 KiB

所以，可以進(jìn)行異步加載SDK，提升頁面加載性能。

1. 分別打包一個(gè) loader，一個(gè)主體
2. 由業(yè)務(wù)方 import loader，首次啟用時(shí)異步加載主體

這個(gè)兩步前端工程已經(jīng)非常成熟了，略過細(xì)節(jié)。

運(yùn)行效果

總結(jié)

過程

• 選擇高性能模型后，初始狀態(tài) CPU 70%
• 降低 Mask 刷新頻率（15FPS），CPU 50%
• 重寫開源庫實(shí)現(xiàn)（toBinaryMask），CPU 33%
• 多線程優(yōu)化，CPU 15%
• 降低分辨率，CPU 5%
• 判斷畫面是否有人，無人時(shí) CPU 接近 0%

CPU 數(shù)值指主線程占用

注意事項(xiàng)

• 兼容性：Chrome 79及以上，不支持 Firefox、Safari。因?yàn)槭褂昧薕ffscreenCanvas
• 不應(yīng)創(chuàng)建多個(gè)或多次創(chuàng)建segmenter實(shí)例（bodySegmentation.createSegmenter），如需復(fù)用請(qǐng)保存實(shí)例引用，因?yàn)椋?/li>
• 創(chuàng)建實(shí)例時(shí)低性能設(shè)備會(huì)有明顯的卡頓現(xiàn)象
• 會(huì)內(nèi)存泄露；如果無法避免，這是mediapipe 內(nèi)存泄露 解決方法（https://github.com/google/mediapipe/issues/2819#issuecomment-1160335349）

經(jīng)驗(yàn)

• 優(yōu)化完成之后，提取并應(yīng)用 Mask 關(guān)鍵計(jì)算量在 GPU (30%左右)，而不是 CPU
• 性能優(yōu)化需要業(yè)務(wù)場景分析，防擋彈幕場景可以使用低分辨率、低刷新率的 mask-image，能大幅減少計(jì)算量
• 該方案其他應(yīng)用場景：
• 替換/模糊人物背景
• 人像馬賽克
• 人像摳圖
• 卡通頭套，虛擬飾品，如貓耳朵、兔耳朵、帶花、戴眼鏡什么的（換一個(gè)模型，略改）
• 關(guān)注Web 神經(jīng)網(wǎng)絡(luò) API?（https://mp.weixin.qq.com/s/v7-xwYJqOfFDIAvwIVZVdg）進(jìn)展，以后實(shí)現(xiàn)相關(guān)功能也許會(huì)更簡單

本期作者

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?劉俊? ?

Jurutera Pembangunan Kanan Bilibili

Atas ialah kandungan terperinci Perlindungan masa nyata terhadap rentetan penyekat muka di web (berdasarkan pembelajaran mesin). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!