टीप:
हा लेख येथे देखील उपलब्ध आहे.(जपानी)
https://cloud.flect.co.jp/entry/2022/06/23/140205

परिचय

JavaScript आवृत्ती 3.x' साठी Amazon Chime SDK रिलीझ होऊन काही काळ लोटला आहे, पण शेवटी मी v3.x सह "माय OSS डेमो" सुसंगत बनवू शकलो. v2.x ते v3.x या प्रक्रियेचे वर्णन "अधिकृत दस्तऐवजीकरण" मध्ये केले आहे. जर तुम्ही v2.x वरून v3.x वर स्थलांतर करण्याचा विचार करत असाल, तर कृपया «अधिकृत कागदपत्रे पहा.

मी v.2.x वरून v.3.x वर स्थलांतरित करण्याबरोबरच सेंटर स्टेजची एक सरलीकृत आवृत्ती डेमोमध्ये जोडली आहे. या लेखात, मी ते कसे अंमलात आणायचे ते सादर करतो.

याप्रमाणे.

सेंटर स्टेजची सरलीकृत आवृत्ती

सेंटर स्टेज हे अलीकडील आयपॅड प्रो कॅमेऱ्याचे वैशिष्ट्य आहे जे वापरकर्त्याचा चेहरा ओळखते आणि आपोआप फॉलो करते. झूम आणि फेसटाइम सेंटर स्टेज (झूम, फेसटाइम) सह कार्यक्षमता देतात.

माझ्याकडे सेंटर स्टेजबद्दल तपशीलवार माहिती नाही, पण मी गृहीत धरतो की हा सेंटर स्टेज ipad च्या कॅमेरा फंक्शन्सचा वापर करतो, जसे की झूम करणे आणि व्हिडिओ डेटा मिळवण्यासाठी फोकस करणे. सेंटर स्टेजसह कॅप्चर केलेला नमुना चित्रपट गीझमोडो(जपानी) वरील हे पृष्ठ दाखवले आहे.

या लेखात, आम्ही एक सामान्य वेबकॅम आणि मशीन लर्निंग मॉडेल वापरून सेंटर स्टेज कार्यक्षमतेची सोपी आवृत्ती तयार करण्याचा प्रयत्न करू. विशेषत:, हे कार्य वेबकॅम व्हिडिओवरून चेहरे शोधेल आणि Javascript ऍप्लिकेशनसाठी Amazon Chime SDK मध्ये त्यांच्या सभोवतालचे क्षेत्र क्रॉप करेल. मूळ केंद्र स्टेजच्या विपरीत, ही कार्यक्षमता कॅमेरा फंक्शन्स जसे की झूम आणि फोकस वापरत नाही, त्यामुळे त्याची गती आणि प्रतिमा गुणवत्ता मूळपेक्षा चांगली नाही, परंतु फायदा असा आहे की ब्राउझरमध्ये कोणत्याही विशेष हार्डवेअरची आवश्यकता नाही.

ब्लेझफेस

फेस डिटेक्शन मशीन लर्निंग मॉडेल्सचा वापर करते आणि Mediapipe ब्लेझफेस नावाचे हलके आणि अत्यंत अचूक मॉडेल ऑफर करते. खालील चित्रात दाखवल्याप्रमाणे हे मॉडेल कॅमेरा इमेजमध्ये रिअल टाइममध्ये चेहऱ्याची स्थिती ओळखू शकते. खालील आकृतीमध्ये, आढळलेला चेहरा लाल फ्रेमने चिन्हांकित केला आहे, परंतु एक सरलीकृत केंद्र अवस्था लाल फ्रेमपेक्षा किंचित मोठ्या क्षेत्रामध्ये क्रॉप करेल.

हे मॉडेल खूप हलके आहे आणि वेबजीएल पेक्षा CPU (WASM+SIMD) वर वेगवान म्हणून ओळखले जाते.(ref)

"कोणीतरी ब्लेझफेसच्या प्रक्रियेच्या वेळेची तुलना इतर समान मॉडेल्सशी करत आहे." हा डेटा दर्शवितो की ब्लेझफेस खूप वेगवान आहे.

Javascript साठी Amazon Chime SDK सह समाकलित करा

Javascript साठी Amazon Chime SDK वेबकॅमद्वारे कॅप्चर केलेला व्हिडिओ सर्व्हरवर हस्तांतरित करण्यापूर्वी संपादित करण्यासाठी API प्रदान करते (व्हिडिओ प्रोसेसिंग API). व्हिडिओ प्रोसेसिंग API बद्दल अधिक माहितीसाठी, कृपया "अधिकृत दस्तऐवजीकरण" किंवा "माझा मागील लेख" पहा.

वर नमूद केल्याप्रमाणे, BlazeFace वेबजीएल वापरण्यापेक्षा CPU (WASM+SIMD) वर वेगाने चालत असल्याचे दिसते. सर्वसाधारणपणे, ब्राउझरमध्ये चालणार्‍या अनुप्रयोगांसाठी मुख्य थ्रेड (CPU) मध्ये मोठ्या प्रमाणात प्रक्रिया न करणे चांगले. त्यामुळे, आम्ही वेबवर्करवर ब्लेझफेस चालवू इच्छितो.

खालील आकृती उग्र कॉन्फिगरेशन आकृती आणि प्रक्रिया प्रवाह दर्शवते.

(1) वेबकॅमसह व्हिडिओ कॅप्चर करा.
(2) Javascript डेमोसाठी Amazon Chime SDK मध्ये व्हिडिओ प्रोसेसर API प्रक्रियेला कॉल करा. व्हिडिओ प्रोसेसर API (व्हिडिओफ्रेमप्रोसेसर) ची अंतर्गत प्रक्रिया मुख्य थ्रेडवरून वेबवर्करला प्रक्रिया करण्याची विनंती करते, जी BalzeFace वापरून वापरकर्त्याचा चेहरा शोधते आणि मुख्य थ्रेडला प्रतिसाद देते. थ्रेड.
(३) मुख्य धागा चेहरा ट्रिम करतो.
(४) ट्रिम केलेला व्हिडिओ Amazon Chime च्या सर्व्हरवर पाठवला जातो.

BlazeFace साठी वेबवर्कर मॉड्यूल

वेबवर्करसह BlazeFace चालवण्यासाठी, थोडे त्रासदायक कोड लागू करणे आवश्यक आहे. मी वेबवर्करवर BlazeFace चालवण्यासाठी npm मॉड्यूल प्रकाशित केले आहे, म्हणून या वेळी त्रासदायक कोड लिहिणे वगळण्यासाठी वापरू. या मॉड्यूलचा स्रोत कोड आणि डेमो देखील उपलब्ध आहेत, त्यामुळे तुम्हाला स्वारस्य असल्यास, कृपया रेपॉजिटरी तपासा.

येथे दिलेला डेमो केंद्र स्टेजप्रमाणेच वर्तन करता येईल. डेमो पृष्ठाच्या उजव्या बाजूला असलेल्या “अॅप्लिकेशन मोड” पुल-डाउन मेनूमधून “ट्रॅकिंग” निवडा. तुम्हाला खालीलप्रमाणे व्हिडिओ दिसेल. डावी बाजू मूळ प्रतिमा आहे आणि उजवी बाजू ही सरलीकृत मध्यभागी फ्रेमसह चेहरा कापलेली प्रतिमा आहे. ते खूपच छान दिसते.

याशिवाय, “बॅकएंड-सिलेक्टर” पुल-डाउन मेनूमध्ये WebGL आणि Wasm मध्ये स्विच करण्याचा प्रयत्न करा. प्रति फ्रेम प्रक्रिया वेळ वरच्या डाव्या कोपर्यात प्रदर्शित केला जातो, आणि तुम्ही पाहू शकता की Wasm जलद प्रक्रिया करत आहे.

अंमलबजावणी

तुमच्या ऍप्लिकेशनमध्ये ही कार्यक्षमता लागू करण्यासाठी, तुम्हाला व्हिडिओ प्रोसेसर API चे VideoFrameProcessor लागू करणे आवश्यक आहे. वरील npm मॉड्यूल चेहरे शोधण्यासाठी आणि ट्रिमिंग स्थितीची गणना करण्यासाठी पद्धती प्रदान करते, म्हणून या पद्धती वापरून अंमलबजावणी करणे खूप सोपे आहे.

VideoFrameProcessor ला व्हिडिओवर प्रक्रिया करण्यासाठी प्रक्रिया पद्धतीची अंमलबजावणी आवश्यक आहे. या पद्धतीमध्ये वापरल्या जाणार्‍या विविध सदस्यांना प्रारंभ करा.

व्यवस्थापक हे वरील npm मॉड्यूल (1) आहे. config आणि params व्यवस्थापकाचे वर्तन कॉन्फिगर करतात (2). या प्रकरणात, आम्हाला वेबवर्करवर asm मध्ये प्रोग्राम चालवायचा आहे, म्हणून आम्ही backendType asm वर सेट करतो आणि processOnLocal ला false (3) वर सेट करतो.

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)
    }

प्रक्रिया पद्धत स्वतः खालीलप्रमाणे आहे. npm मॉड्यूल (1) च्या अंदाज पद्धतीचा वापर करून चेहऱ्याची स्थिती ओळखण्यासाठी. ओळखल्या जाणार्‍या चेहऱ्याच्या स्थानावरून कापल्या जाणार्‍या आयताची गणना करा (2). क्रॉप करायचा आयत आउटपुट (3) साठी इमेज बफरवर लिहिला जातो आणि कॉलरला परत केला जातो.

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 ची Video प्रोसेसर API सह नोंदणी कशी करावी याच्या तपशीलांसाठी, कृपया अधिकृत दस्तऐवज पहा. अंमलबजावणी खाली वर्णन केलेल्या डेमो रिपॉझिटरीमध्ये देखील उपलब्ध आहे, त्यामुळे अधिक ठोस तपशीलांसाठी कृपया त्याचा संदर्भ घ्या.

डेमो

येथे सादर केलेल्या सेंटर स्टेजच्या सरलीकृत आवृत्तीची अंमलबजावणी करणारा एक डेमो खालील रेपॉजिटरीमध्ये उपलब्ध आहे.



GitHub - w-okada/flect-chime-sdk-demo
हे Javascript साठी Amazon Chime SDK सह डेमो व्हिडिओ कॉन्फरन्स सिस्टम आहे. या डेमोमध्ये मूलभूत वैशिष्ट्ये आहेत…github.com



कृपया पुढील टॅग वापरून क्लोन करा, कारण भविष्यात त्यात बदल होण्याची शक्यता आहे. कृपया सेटअप सूचनांसाठी रेपॉजिटरी तपासा.

git clone https://github.com/w-okada/flect-chime-sdk-demo.git -b center_stage --depth 1

मध्यभागी फ्रेम वापरण्यासाठी, हेडरमधील गियर चिन्हासह डिव्हाइस सेटिंग्ज उघडा आणि कॅमेरा सेटिंग्जमध्ये सेंटर स्टेज सक्षम करा. त्यानंतर पुढील व्हिडिओमध्ये दाखवल्याप्रमाणे ते कार्य करेल. व्हिडिओ अॅमेझॉन चाइमच्या बॅकएंडद्वारे डावीकडील ब्राउझरमधून उजवीकडील ब्राउझरवर प्रसारित केला जातो. मला वाटते ते वाईट नाही.

सारांश

या लेखात, मी Javascript ऍप्लिकेशनसाठी Amazon Chime SDK मध्ये सेंटर स्टेज कार्यक्षमतेची सरलीकृत आवृत्ती कशी समाविष्ट करावी हे दाखवले आहे. जरी ते मूळसारखे चांगले नसले तरी, आम्हाला आशा आहे की ते विशेष डिव्हाइस न वापरता ब्राउझरवर नवीन UX साकारण्यात मदत करेल. उदाहरणार्थ, झूम इन करून सर्व सहभागींचे चेहरे त्यांच्या आकारांसह टाइल करणे शक्य होईल.

पावती

मजकूरातील व्हिडिओ आणि प्रतिमा या साइट्सवरील आहेत.

https://pixabay.com/ja/videos/

https://www.irasutoya.com/

अस्वीकरण

कोणत्याही परिस्थितीत आम्ही या ब्लॉगवरील सॉफ्टवेअर वापरण्यास किंवा वापरण्यात अक्षमतेमुळे उद्भवलेल्या कोणत्याही प्रत्यक्ष, अप्रत्यक्ष, परिणामी किंवा विशेष नुकसानीसाठी जबाबदार राहणार नाही.