Qeyd:
Bu məqalə də burada mövcuddur.(Yaponca)
https://cloud.flect.co.jp/entry/2022/06/23/140205
Giriş
Javascript “3.x” versiyası üçün Amazon Chime SDK-nın buraxılmasından bir müddət keçdi, lakin nəhayət, “OSS demom”u v3.x ilə uyğunlaşdıra bildim. v2.x-dən v3.x-ə qədər olan prosedur rəsmi sənədlərdə təsvir edilmişdir. Əgər siz v2.x-dən v3.x-ə keçməyi düşünürsünüzsə, lütfən rəsmi sənədlərə müraciət edin.
Mən v.2.x-dən v.3.x-ə keçidlə yanaşı demoya Mərkəzi Mərhələnin sadələşdirilmiş versiyasını əlavə etdim. Bu yazıda mən bunu necə həyata keçirəcəyimi təqdim edirəm.
Bunun kimi.
Mərkəzi Mərhələnin sadələşdirilmiş versiyası
Mərkəzi Mərhələ istifadəçinin üzünü tanıyan və avtomatik izləyən ən son ipad pro kamerasının xüsusiyyətidir. Zoom və FaceTime mərkəzi səhnə ilə funksionallıq təklif edir (“Zoom”, “Facetime”).
Mərkəz səhnə haqqında ətraflı məlumatım yoxdur, amma güman edirəm ki, bu mərkəzi mərhələ video məlumatlarını əldə etmək üçün böyütmə və fokuslama kimi ipad kamera funksiyalarından istifadə edir. Mərkəz Səhnə ilə çəkilmiş nümunə filmi Gizmodo (Yapon)-da bu səhifə göstərilir.
Bu yazıda biz adi veb-kamera və maşın öyrənmə modelindən istifadə edərək mərkəzi səhnə funksionallığının sadələşdirilmiş versiyasını yaratmağa çalışacağıq. Xüsusilə, bu funksiya veb-kamera videosundan üzləri aşkar edəcək və Javascript tətbiqi üçün Amazon Chime SDK-da onların ətrafındakı ərazini kəsəcək. Orijinal mərkəzi mərhələdən fərqli olaraq, bu funksionallıq böyütmə və fokus kimi kamera funksiyalarından istifadə etmir, buna görə də onun sürəti və təsvir keyfiyyəti orijinalı qədər yaxşı deyil, lakin üstünlüyü odur ki, brauzerdə heç bir xüsusi avadanlıq tələb etmir.
BlazeFace
Üz aşkarlanması maşın öyrənmə modellərindən istifadə edir və Mediapipe BlazeFace adlı yüngül və yüksək dəqiqlikli model təklif edir. Bu model, aşağıdakı şəkildə göstərildiyi kimi, real vaxt rejimində kamera görüntüsündə üzün mövqeyini aşkar edə bilir. Aşağıdakı şəkildə aşkar edilmiş üz qırmızı çərçivə ilə işarələnib, lakin sadələşdirilmiş mərkəzi mərhələ qırmızı çərçivədən bir qədər böyük sahəyə kəsiləcək.
Bu model çox yüngüldür və WebGL ilə müqayisədə CPU (WASM+SIMD) üzərində daha sürətli olduğu bilinir.(ref)
“Kimsə BlazeFace-in emal vaxtını digər oxşar modellərlə müqayisə edir”. Bu məlumatlar BlazeFace-in kifayət qədər sürətli olduğunu göstərir.
Javascript üçün Amazon Chime SDK ilə inteqrasiya edin
Javascript üçün Amazon Chime SDK veb-kamera tərəfindən çəkilmiş videonu serverə köçürməzdən əvvəl redaktə etmək üçün API təmin edir (Video Processing API). Video Processing API haqqında ətraflı məlumat üçün “rəsmi sənədlərə” və ya “əvvəlki məqaləmə” müraciət edin.
Yuxarıda qeyd edildiyi kimi, BlazeFace WebGL-dən istifadə etməklə müqayisədə CPU-da (WASM+SIMD) daha sürətli işləyir. Ümumiyyətlə, brauzerdə işləyən proqramlar üçün əsas ipdə (CPU) çox miqdarda emal etməmək daha yaxşıdır. Beləliklə, biz BlazeFace-i Veb İşçisində işə salmaq istərdik.
Aşağıdakı şəkildə təxmini konfiqurasiya diaqramı və proses axını göstərilir.
(1) Veb kamera ilə video çəkin.
(2) Javascript demosu üçün Amazon Chime SDK-da Video Prosessor API prosesinə zəng edin. Video Prosessor API-nin (VideoFrameProcessor) daxili prosesi, BalzeFace istifadə edərək istifadəçinin üzünü təyin edən və Əsas Mövzuya cavab verən Əsas Mövzudan WebWorker-ə emal tələb edir. Mövzu.
(3) Əsas Mövzu üzü kəsir.
(4) Kəsilmiş video Amazon Chime serverinə göndərilir.
BlazeFace üçün WebWorker modulu
BlazeFace-i WebWorker ilə işlətmək üçün bir az çətin kodlar tətbiq etmək lazımdır. Mən WebWorker-də BlazeFace-i işə salmaq üçün npm modulunu dərc etmişəm, ona görə də bu dəfə çətinlikli kodların yazılmasını atlamaq üçün ondan istifadə edək. Bu modulun “mənbə kodu” və “demo”su da mövcuddur, ona görə də maraqlanırsınızsa, lütfən, “repozitoriya”nı yoxlayın.
Burada təqdim olunan demo, mərkəzi səhnə ilə eyni şəkildə davranmaq üçün edilə bilər. Demo səhifəsinin sağ tərəfindəki “tətbiq rejimi” açılan menyusundan “izləmə” seçin. Aşağıdakı kimi bir video görəcəksiniz. Sol tərəf orijinal şəkil, sağ tərəf isə sadələşdirilmiş mərkəzi çərçivə ilə üzü kəsilmiş şəkildir. Bu olduqca yaxşı görünür.
Bundan əlavə, “backend-selector” açılan menyusunda WebGL və Wasm arasında keçid etməyə cəhd edin. Kadr başına emal vaxtı yuxarı sol küncdə göstərilir və siz Wasm-ın daha sürətli emal etdiyini görə bilərsiniz.
İcra
Bu funksiyanı tətbiqinizdə tətbiq etmək üçün siz Video Prosessor API-nin VideoFrameProcessorunu tətbiq etməlisiniz. Yuxarıdakı npm modulu üzləri aşkar etmək və kəsmə mövqeyini hesablamaq üçün üsulları təmin edir, buna görə də bu üsullardan istifadə edərək həyata keçirmək çox asandır.
VideoFrameProcessor videonu emal etmək üçün proses metodunun həyata keçirilməsini tələb edir. Bu üsulda istifadə ediləcək müxtəlif üzvləri işə salın.
Menecer yuxarıdakı npm moduludur (1). konfiqurasiya və parametrlər menecerin davranışını konfiqurasiya edir (2). Bu halda biz proqramı web işçisində asm-da işə salmaq istəyirik, ona görə də backendType-i asm, processOnLocal-ı isə false (3) olaraq təyin edirik.
private targetCanvas: HTMLCanvasElement = document.createElement('canvas');
private targetCanvasCtx: CanvasRenderingContext2D = this.targetCanvas.getContext('2d')!;
private canvasVideoFrameBuffer = new CanvasVideoFrameBuffer(this.targetCanvas);
private manager = new BlazefaceWorkerManager() // <--- (1)
private config = generateBlazefaceDefaultConfig(); // <---(2)
private params = generateDefaultBlazefaceParams(); // <---(2)
constructor() {
this.config.backendType = BackendTypes.wasm // <---(3)
this.config.processOnLocal = false // <---(3)
this.manager.init(this.config)
}
Proses metodunun özü aşağıdakı kimidir. Npm modulunun proqnozlaşdırma metodundan istifadə edərək üzün mövqeyini müəyyən etmək (1). Müəyyən edilmiş üz mövqeyindən kəsiləcək düzbucağı hesablayın (2). Kəsilməli olan düzbucaqlı çıxış (3) üçün şəkil buferinə yazılır və zəng edənə qaytarılır.
process = async (buffers: VideoFrameBuffer[]): Promise<VideoFrameBuffer[]> => {
if (!buffers[0]) {
return buffers;
}
const canvas = buffers[0].asCanvasElement!()
if (!canvas) {
return buffers;
}
const prediction = await this.manager.predict(this.params, canvas as HTMLCanvasElement) // <--- (1)
const trackingArea = this.manager.fitCroppedArea(prediction, canvas.width, canvas.height, this.params.processWidth, this.params.processHeight, canvas.width, canvas.height, 1, 0.4, 0, 0); // <--- (2)
this.targetCanvasCtx.clearRect(0, 0, this.targetCanvas.width, this.targetCanvas.height)
this.targetCanvasCtx.drawImage(canvas, trackingArea.xmin, trackingArea.ymin, trackingArea.width, trackingArea.height, 0, 0, this.targetCanvas.width, this.targetCanvas.height); // <--- (3)
buffers[0] = this.canvasVideoFrameBuffer;
return buffers;
}
VideoFrameProcessor-u Video Processor API ilə necə qeydiyyata almaq barədə ətraflı məlumat üçün rəsmi sənədlərə müraciət edin. Tətbiq aşağıda təsvir edilən demo repozitoriyada da mövcuddur, ona görə də daha konkret təfərrüatlar üçün ona müraciət edin.
Demo
Burada təqdim olunan mərkəzi mərhələnin sadələşdirilmiş versiyasını həyata keçirən demo aşağıdakı repozitoriyada mövcuddur.
Əgər cəhd etmək istəyirsinizsə, zəhmət olmasa aşağıdakı teqlərlə klonlayın, çünki gələcəkdə modifikasiya oluna bilər. Quraşdırma təlimatları üçün deponu yoxlayın.
git clone https://github.com/w-okada/flect-chime-sdk-demo.git -b center_stage --depth 1
Mərkəz çərçivədən istifadə etmək üçün başlıqdakı dişli ikonası ilə cihaz parametrlərini açın və kamera parametrlərində Mərkəzi Mərhələni aktiv edin. Sonra aşağıdakı videoda göstərildiyi kimi işləyəcək. Video sol tərəfdəki brauzerdən Amazon Chime-in arxa hissəsi vasitəsilə sağdakı brauzerə ötürülür. Məncə pis deyil.
Xülasə
Bu yazıda mən mərkəzi səhnə funksionallığının sadələşdirilmiş versiyasını Javascript tətbiqi üçün Amazon Chime SDK-ya necə daxil etməyi göstərdim. Orijinal kimi yaxşı olmasa da, ümid edirik ki, bu, xüsusi cihazdan istifadə etmədən brauzerdə yeni UX-in həyata keçirilməsinə kömək edəcək. Məsələn, bütün iştirakçıların üzlərini böyütməklə ölçüləri uyğunlaşdırılaraq plitələr qoymaq mümkün olardı.
Təşəkkürlər
Mətndəki video və şəkillər bu saytlardandır.
https://pixabay.com/ja/videos/
İmtina
Heç bir halda biz bu bloqda proqram təminatının istifadəsi və ya istifadə edə bilməməsi nəticəsində yaranan hər hansı birbaşa, dolayı, nəticəli və ya xüsusi ziyana görə məsuliyyət daşımayacağıq.
