डिसिंक्रनाइज़ किए गए संकेत की मदद से, वीडियो स्ट्रीम होने और उसके दिखने के समय का अंतर कम करने की सुविधा

Joe Medley
Joe Medley

स्टाइलस रेंडरिंग में अंतर

वेब के लिए बनाए गए स्टाइलस-आधारित ड्रॉइंग ऐप्लिकेशन को लंबे समय से इंतज़ार के समय की समस्या का सामना करना पड़ रहा है, क्योंकि वेब पेज को ग्राफ़िक अपडेट को DOM के साथ सिंक करना पड़ता है. किसी भी ड्रॉइंग ऐप्लिकेशन में, 50 मिलीसेकंड से ज़्यादा इंतज़ार का इंतज़ार उपयोगकर्ता के हैंड-आई कोऑर्डिनेशन में रुकावट पैदा कर सकता है. इससे ऐप्लिकेशन का इस्तेमाल करना मुश्किल हो सकता है.

canvas.getContext() के लिए desynchronized हिंट, एक अलग कोड पाथ को शुरू करता है, जो डीओएम अपडेट करने के सामान्य तरीके को बायपास करता है. इसके बजाय, हिंट से सिस्टम को यह पता चलता है कि जितना कंपोज़िट करना है उसे स्किप किया जा सकता है. कुछ मामलों में, कैनवस का बफ़र सीधे स्क्रीन के डिसप्ले कंट्रोलर को भेजा जाता है. यह रेंडर करने वाले कंपोज़िटर सूची का इस्तेमाल करने की वजह से आने वाली इंतज़ार की अवधि को खत्म कर देता है.

यह कितना अच्छा है?

सिंटेल की एक साथ रेंडरिंग

अगर आपको कोड देखना है, तो आगे स्क्रोल करें. इसका इस्तेमाल करने के लिए, आपके पास टचस्क्रीन वाला डिवाइस और स्टाइलस की ज़रूरत होगी. (उंगली भी काम करती हैं.) अगर आपके पास कोई एक सैंपल है, तो 2d या webgl सैंपल आज़माएं. आप सभी के लिए, मिगेल कासस का यह डेमो देखें. वे उन इंजीनियर में से एक हैं जिन्होंने इस सुविधा को लागू किया था. डेमो खोलें, चलाएँ बटन दबाएं, फिर स्लाइडर को रैंडम तरीके से और तेज़ी से आगे-पीछे ले जाएं.

इस उदाहरण में, ब्लेंडर ओपन मूवी प्रोजेक्ट, डूरियन की शॉर्ट फ़िल्म Sintel की एक मिनट की इक्कीस सेकंड की क्लिप इस्तेमाल की गई है. इस उदाहरण में, फ़िल्म को <video> एलिमेंट में चलाया जाता है. इसके कॉन्टेंट को <canvas> एलिमेंट में एक साथ रेंडर किया जाता है. कई डिवाइस यह काम बिना रुकावट कर सकते हैं. हालांकि, फ़्रंट बफ़र रेंडरिंग वाले डिवाइस, जैसे कि ChromeOS में गड़बड़ी हो सकती है. (यह फ़िल्म बहुत अच्छी है, लेकिन यह दिल को छू लेने वाली है. मैं उसे देखने के एक घंटे बाद तक किसी काम की नहीं थी. खुद को चेतावनी दें.)

संकेत का इस्तेमाल करना

desynchronized को canvas.getContext() से जोड़ने के अलावा, इंतज़ार का समय कम करने के और भी फ़ायदे हैं. मैं एक-एक करके इन समस्याओं के बारे में बताऊँगी.

कैनवस बनाएं

दूसरे एपीआई पर, मैं सुविधा की पहचान के बारे में पहले चर्चा करूंगा. desynchronized संकेत के लिए, आपको पहले कैनवस बनाना होगा. canvas.getContext() को कॉल करें और उसे true की वैल्यू के साथ नया desynchronized संकेत पास करें.

const canvas = document.querySelector('myCanvas');
const ctx = canvas.getContext('2d', {
  desynchronized: true,
  // Other options. See below.
});

सुविधा की पहचान करने की सुविधा

इसके बाद, getContextAttributes() पर कॉल करें. अगर दिखाए गए एट्रिब्यूट ऑब्जेक्ट में desynchronized प्रॉपर्टी है, तो उसकी जांच करें.

if (ctx.getContextAttributes().desynchronized) {
  console.log('Low latency canvas supported. Yay!');
} else {
  console.log('Low latency canvas not supported. Boo!');
}

झिलमिलाहट से बचना

सही तरीके से कोड न करने पर फ़्लिकर हो सकता है.

Chrome जैसे कुछ ब्राउज़र, फ़्रेम के बीच से WebGL कैनवस को हटा देते हैं. डिसप्ले कंट्रोलर के खाली होने पर बफ़र को पढ़ा जा सकता है, जिसकी वजह से इमेज फ़्लिकर की ओर जा रही है. इससे बचने के लिए, preserveDrawingBuffer को true पर सेट करें.

const canvas = document.querySelector('myCanvas');
const ctx = canvas.getContext('webgl', {
  desynchronized: true,
  preserveDrawingBuffer: true
});

अपने ड्रॉइंग कोड में स्क्रीन के कॉन्टेक्स्ट को साफ़ करने पर भी फ़्लिकर हो सकता है. अगर आपको फ़ाइल का डेटा मिटाना है, तो ऑफ़स्क्रीन फ़्रेमबफ़र पर ड्रॉ करें और फिर उसे स्क्रीन पर कॉपी करें.

ऐल्फ़ा चैनल

एक ट्रांसलूसंट कैनवस एलिमेंट, जहां ऐल्फ़ा को सही पर सेट किया जाता है, उसे अब भी डिसिंक्रोनाइज़ किया जा सकता है, लेकिन उसके ऊपर कोई अन्य DOM एलिमेंट नहीं होना चाहिए.

सिर्फ़ एक वैल्यू हो सकती है

canvas.getContext() पर पहले कॉल के बाद, कॉन्टेक्स्ट एट्रिब्यूट में बदलाव नहीं किया जा सकता. यह बात हमेशा सच होती है, लेकिन अगर आपको पता न हो या आप कुछ भूल गए हों, तो यह दोबारा करने से आपकी निराशा दूर हो सकती है .

उदाहरण के लिए, मान लीजिए कि मुझे एक संदर्भ मिलता है और ऐल्फ़ा को 'गलत' के तौर पर बताया गया है, फिर अपने कोड में बाद में, मैं canvas.getContext() को दूसरी बार कॉल करता/करती हूं, जिसमें ऐल्फ़ा सही पर सेट होता है, जैसा कि नीचे दिखाया गया है.

const canvas = document.querySelector('myCanvas');
const ctx1 = canvas.getContext('2d', {
  alpha: false,
  desynchronized: true,
});

//Some time later, in another corner of code.
const ctx2 = canvas.getContext('2d', {
  alpha: true,
  desynchronized: true,
});

यह साफ़ तौर पर नहीं कहा जा सकता कि ctx1 और ctx2 एक ही ऑब्जेक्ट हैं. ऐल्फ़ा अब भी गलत है और ऐसा संदर्भ कभी नहीं बनाया जाता जिसमें ऐल्फ़ा के बराबर 'सही' हो.

इस्तेमाल किए जा सकने वाले कैनवस टाइप

getContext() को भेजा गया पहला पैरामीटर contextType है. अगर आप getContext() के बारे में पहले से जानते हैं, तो आपको शक नहीं होगा कि '2d' कॉन्टेक्स्ट के अलावा, दूसरी कोई भी सुविधा काम करती है या नहीं. इस टेबल में, कॉन्टेक्स्ट के ऐसे टाइप दिखाए गए हैं जो desynchronized के साथ काम करते हैं.

contextType कॉन्टेक्स्ट टाइप ऑब्जेक्ट

'2d'

CanvasRenderingContext2D

'webgl'

WebGLRenderingContext

'webgl2'

WebGL2RenderingContext

नतीजा

अगर आपको इस बारे में और जानकारी चाहिए, तो सैंपल देखें. पहले से बताए गए वीडियो के उदाहरण के अलावा, यहां '2d' और 'webgl', दोनों कॉन्टेक्स्ट दिखाने वाले उदाहरण दिए गए हैं.