WebCodecs ವಿಡಿಯೋಫ್ರೇಮ್ ಪ್ಲೇನ್ ಅಕ್ಸೆಸ್: ರಾ ವಿಡಿಯೋ ಡೇಟಾ ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ಕುರಿತು ಆಳವಾದ ನೋಟ

ವರ್ಷಗಳಿಂದ, ವೆಬ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಉತ್ತಮ-ಕಾರ್ಯಕ್ಷಮತೆಯ ವೀಡಿಯೊ ಪ್ರೊಸೆಸಿಂಗ್ ಒಂದು ದೂರದ ಕನಸಿನಂತೆ ಭಾಸವಾಗುತ್ತಿತ್ತು. ಡೆವಲಪರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ <video> ಎಲಿಮೆಂಟ್ ಮತ್ತು 2D ಕ್ಯಾನ್ವಾಸ್ API ಯ ಮಿತಿಗಳಿಗೆ ಸೀಮಿತರಾಗಿದ್ದರು, ಇವುಗಳು ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಪರಿಚಯಿಸಿದವು ಮತ್ತು ಆಧಾರವಾಗಿರುವ ರಾ ವಿಡಿಯೋ ಡೇಟಾಗೆ ಸೀಮಿತ ಪ್ರವೇಶವನ್ನು ನೀಡಿದವು. WebCodecs API ಯ ಆಗಮನವು ಈ ಪರಿಸ್ಥಿತಿಯನ್ನು ಮೂಲಭೂತವಾಗಿ ಬದಲಾಯಿಸಿದೆ, ಬ್ರೌಸರ್‌ನ ಅಂತರ್ನಿರ್ಮಿತ ಮೀಡಿಯಾ ಕೋಡೆಕ್‌ಗಳಿಗೆ ಕೆಳಮಟ್ಟದ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದರ ಅತ್ಯಂತ ಕ್ರಾಂತಿಕಾರಿ ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ VideoFrame ಆಬ್ಜೆಕ್ಟ್ ಮೂಲಕ ಪ್ರತ್ಯೇಕ ವೀಡಿಯೊ ಫ್ರೇಮ್‌ಗಳ ರಾ ಡೇಟಾವನ್ನು ನೇರವಾಗಿ ಪ್ರವೇಶಿಸುವ ಮತ್ತು ನಿರ್ವಹಿಸುವ ಸಾಮರ್ಥ್ಯ.

ಈ ಲೇಖನವು ಸರಳ ವೀಡಿಯೊ ಪ್ಲೇಬ್ಯಾಕ್‌ಗಿಂತ ಮುಂದೆ ಹೋಗಲು ಬಯಸುವ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯಾಗಿದೆ. ನಾವು VideoFrame ಪ್ಲೇನ್ ಪ್ರವೇಶದ ಜಟಿಲತೆಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ, ಬಣ್ಣದ ಸ್ಥಳಗಳು (color spaces) ಮತ್ತು ಮೆಮೊರಿ ಲೇಔಟ್‌ನಂತಹ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಸ್ಪಷ್ಟಪಡಿಸುತ್ತೇವೆ ಮತ್ತು ನೈಜ-ಸಮಯದ ಫಿಲ್ಟರ್‌ಗಳಿಂದ ಹಿಡಿದು ಅತ್ಯಾಧುನಿಕ ಕಂಪ್ಯೂಟರ್ ವಿಷನ್ ಕಾರ್ಯಗಳವರೆಗೆ ಮುಂದಿನ ಪೀಳಿಗೆಯ ಇನ್-ಬ್ರೌಸರ್ ವೀಡಿಯೊ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅಧಿಕಾರ ನೀಡುವ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಒದಗಿಸುತ್ತೇವೆ.

ಪೂರ್ವಾಪೇಕ್ಷಿತಗಳು

ಈ ಮಾರ್ಗದರ್ಶಿಯಿಂದ ಹೆಚ್ಚಿನದನ್ನು ಪಡೆಯಲು, ನೀವು ಈ ಕೆಳಗಿನವುಗಳ ಬಗ್ಗೆ ದೃಢವಾದ ತಿಳುವಳಿಕೆಯನ್ನು ಹೊಂದಿರಬೇಕು:

• ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್: ಅಸಿಂಕ್ರೊನಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ (async/await, Promises) ಸೇರಿದಂತೆ.
• ಮೂಲಭೂತ ವೀಡಿಯೊ ಪರಿಕಲ್ಪನೆಗಳು: ಫ್ರೇಮ್‌ಗಳು, ರೆಸಲ್ಯೂಶನ್ ಮತ್ತು ಕೋಡೆಕ್‌ಗಳಂತಹ ಪದಗಳ ಪರಿಚಯ ಸಹಾಯಕವಾಗಿರುತ್ತದೆ.
• ಬ್ರೌಸರ್ APIಗಳು: ಕ್ಯಾನ್ವಾಸ್ 2D ಅಥವಾ WebGL ನಂತಹ APIಗಳ ಅನುಭವವು ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ ಆದರೆ ಕಟ್ಟುನಿಟ್ಟಾಗಿ ಅಗತ್ಯವಿಲ್ಲ.

ವೀಡಿಯೊ ಫ್ರೇಮ್‌ಗಳು, ಕಲರ್ ಸ್ಪೇಸ್‌ಗಳು ಮತ್ತು ಪ್ಲೇನ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ನಾವು API ಗೆ ಧುಮುಕುವ ಮೊದಲು, ವೀಡಿಯೊ ಫ್ರೇಮ್‌ನ ಡೇಟಾ ನಿಜವಾಗಿ ಹೇಗಿರುತ್ತದೆ ಎಂಬುದರ ಬಗ್ಗೆ ನಾವು ಮೊದಲು ಒಂದು ದೃಢವಾದ ಮಾನಸಿಕ ಮಾದರಿಯನ್ನು ನಿರ್ಮಿಸಬೇಕು. ಡಿಜಿಟಲ್ ವೀಡಿಯೊ ಎನ್ನುವುದು ಸ್ಥಿರ ಚಿತ್ರಗಳ ಅಥವಾ ಫ್ರೇಮ್‌ಗಳ ಅನುಕ್ರಮವಾಗಿದೆ. ಪ್ರತಿಯೊಂದು ಫ್ರೇಮ್ ಪಿಕ್ಸೆಲ್‌ಗಳ ಗ್ರಿಡ್ ಆಗಿರುತ್ತದೆ, ಮತ್ತು ಪ್ರತಿಯೊಂದು ಪಿಕ್ಸೆಲ್‌ಗೂ ಒಂದು ಬಣ್ಣವಿರುತ್ತದೆ. ಆ ಬಣ್ಣವನ್ನು ಹೇಗೆ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಕಲರ್ ಸ್ಪೇಸ್ ಮತ್ತು ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್ ಮೂಲಕ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ.

RGBA: ವೆಬ್‌ನ ಸ್ಥಳೀಯ ಭಾಷೆ

ಹೆಚ್ಚಿನ ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ RGBA ಕಲರ್ ಮಾಡೆಲ್ ಪರಿಚಿತವಾಗಿದೆ. ಪ್ರತಿಯೊಂದು ಪಿಕ್ಸೆಲ್ ಅನ್ನು ನಾಲ್ಕು ಘಟಕಗಳಿಂದ ಪ್ರತಿನಿಧಿಸಲಾಗುತ್ತದೆ: ಕೆಂಪು (Red), ಹಸಿರು (Green), ನೀಲಿ (Blue), ಮತ್ತು ಆಲ್ಫಾ (ಪಾರದರ್ಶಕತೆ). ಡೇಟಾವನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಮೆಮೊರಿಯಲ್ಲಿ ಇಂಟರ್‌ಲೀವ್ಡ್ ಆಗಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ, ಅಂದರೆ ಒಂದೇ ಪಿಕ್ಸೆಲ್‌ನ R, G, B, ಮತ್ತು A ಮೌಲ್ಯಗಳನ್ನು ಅನುಕ್ರಮವಾಗಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ:

[R1, G1, B1, A1, R2, G2, B2, A2, ...]

ಈ ಮಾದರಿಯಲ್ಲಿ, ಸಂಪೂರ್ಣ ಚಿತ್ರವನ್ನು ಒಂದೇ, ನಿರಂತರ ಮೆಮೊರಿ ಬ್ಲಾಕ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ. ಇದನ್ನು ನಾವು ಒಂದೇ "ಪ್ಲೇನ್" ಡೇಟಾ ಎಂದು ಭಾವಿಸಬಹುದು.

YUV: ವೀಡಿಯೊ ಕಂಪ್ರೆಷನ್‌ನ ಭಾಷೆ

ಆದಾಗ್ಯೂ, ವೀಡಿಯೊ ಕೋಡೆಕ್‌ಗಳು ವಿರಳವಾಗಿ RGBA ಯೊಂದಿಗೆ ನೇರವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ. ಅವು YUV (ಅಥವಾ ಹೆಚ್ಚು ನಿಖರವಾಗಿ, Y'CbCr) ಕಲರ್ ಸ್ಪೇಸ್‌ಗಳನ್ನು ಆದ್ಯತೆ ನೀಡುತ್ತವೆ. ಈ ಮಾದರಿಯು ಚಿತ್ರದ ಮಾಹಿತಿಯನ್ನು ಹೀಗೆ ವಿಭಜಿಸುತ್ತದೆ:

• Y (Luma): ಹೊಳಪು ಅಥವಾ ಗ್ರೇಸ್ಕೇಲ್ ಮಾಹಿತಿ. ಮಾನವನ ಕಣ್ಣು ಲೂಮಾದಲ್ಲಿನ ಬದಲಾವಣೆಗಳಿಗೆ ಹೆಚ್ಚು ಸಂವೇದನಾಶೀಲವಾಗಿರುತ್ತದೆ.
• U (Cb) ಮತ್ತು V (Cr): ಕ್ರೋಮಿನೆನ್ಸ್ ಅಥವಾ ಬಣ್ಣ-ವ್ಯತ್ಯಾಸದ ಮಾಹಿತಿ. ಮಾನವನ ಕಣ್ಣು ಹೊಳಪಿನ ವಿವರಗಳಿಗಿಂತ ಬಣ್ಣದ ವಿವರಗಳಿಗೆ ಕಡಿಮೆ ಸಂವೇದನಾಶೀಲವಾಗಿರುತ್ತದೆ.

ಈ ವಿಭಜನೆಯು ದಕ್ಷ ಸಂಕೋಚನಕ್ಕೆ (compression) ಪ್ರಮುಖವಾಗಿದೆ. U ಮತ್ತು V ಘಟಕಗಳ ರೆಸಲ್ಯೂಶನ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ—ಈ ತಂತ್ರವನ್ನು ಕ್ರೋಮಾ ಸಬ್‌ಸ್ಯಾಂಪ್ಲಿಂಗ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ—ನಾವು ಗುಣಮಟ್ಟದಲ್ಲಿ ಕನಿಷ್ಠ ಗ್ರಹಿಸಬಹುದಾದ ನಷ್ಟದೊಂದಿಗೆ ಫೈಲ್ ಗಾತ್ರವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡಬಹುದು. ಇದು ಪ್ಲಾನಾರ್ ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ, ಅಲ್ಲಿ Y, U, ಮತ್ತು V ಘಟಕಗಳನ್ನು ಪ್ರತ್ಯೇಕ ಮೆಮೊರಿ ಬ್ಲಾಕ್‌ಗಳಲ್ಲಿ ಅಥವಾ "ಪ್ಲೇನ್‌"ಗಳಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ.

ಒಂದು ಸಾಮಾನ್ಯ ಫಾರ್ಮ್ಯಾಟ್ I420 (YUV 4:2:0 ಯ ಒಂದು ವಿಧ), ಇದರಲ್ಲಿ ಪ್ರತಿ 2x2 ಪಿಕ್ಸೆಲ್‌ಗಳ ಬ್ಲಾಕ್‌ಗೆ, ನಾಲ್ಕು Y ಸ್ಯಾಂಪಲ್‌ಗಳಿರುತ್ತವೆ ಆದರೆ ಕೇವಲ ಒಂದು U ಮತ್ತು ಒಂದು V ಸ್ಯಾಂಪಲ್ ಇರುತ್ತದೆ. ಇದರರ್ಥ U ಮತ್ತು V ಪ್ಲೇನ್‌ಗಳು Y ಪ್ಲೇನ್‌ನ ಅರ್ಧದಷ್ಟು ಅಗಲ ಮತ್ತು ಅರ್ಧದಷ್ಟು ಎತ್ತರವನ್ನು ಹೊಂದಿರುತ್ತವೆ.

ಈ ವ್ಯತ್ಯಾಸವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ ಏಕೆಂದರೆ WebCodecs ನಿಮಗೆ ಈ ಪ್ಲೇನ್‌ಗಳಿಗೆ ನೇರ ಪ್ರವೇಶವನ್ನು ನೀಡುತ್ತದೆ, ಡಿಕೋಡರ್ ಅವುಗಳನ್ನು ಒದಗಿಸುವಂತೆಯೇ.

VideoFrame ಆಬ್ಜೆಕ್ಟ್: ಪಿಕ್ಸೆಲ್ ಡೇಟಾಗೆ ನಿಮ್ಮ ಗೇಟ್‌ವೇ

ಈ ಒಗಟಿನ ಕೇಂದ್ರ ಭಾಗವೆಂದರೆ VideoFrame ಆಬ್ಜೆಕ್ಟ್. ಇದು ವೀಡಿಯೊದ ಒಂದೇ ಫ್ರೇಮ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ ಮತ್ತು ಕೇವಲ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ಮಾತ್ರವಲ್ಲದೆ ಪ್ರಮುಖ ಮೆಟಾಡೇಟಾವನ್ನು ಸಹ ಒಳಗೊಂಡಿರುತ್ತದೆ.

VideoFrame ನ ಪ್ರಮುಖ ಪ್ರಾಪರ್ಟಿಗಳು

• format: ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್ ಅನ್ನು ಸೂಚಿಸುವ ಸ್ಟ್ರಿಂಗ್ (ಉದಾ., 'I420', 'NV12', 'RGBA').
• codedWidth / codedHeight: ಕೋಡೆಕ್‌ಗೆ ಅಗತ್ಯವಿರುವ ಯಾವುದೇ ಪ್ಯಾಡಿಂಗ್ ಸೇರಿದಂತೆ, ಮೆಮೊರಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾದ ಫ್ರೇಮ್‌ನ ಪೂರ್ಣ ಆಯಾಮಗಳು.
• displayWidth / displayHeight: ಫ್ರೇಮ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಬಳಸಬೇಕಾದ ಆಯಾಮಗಳು.
• timestamp: ಮೈಕ್ರೋಸೆಕೆಂಡುಗಳಲ್ಲಿ ಫ್ರೇಮ್‌ನ ಪ್ರೆಸೆಂಟೇಶನ್ ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್.
• duration: ಮೈಕ್ರೋಸೆಕೆಂಡುಗಳಲ್ಲಿ ಫ್ರೇಮ್‌ನ ಅವಧಿ.

ಮ್ಯಾಜಿಕ್ ಮೆಥಡ್: copyTo()

ರಾ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಲು ಪ್ರಾಥಮಿಕ ವಿಧಾನವೆಂದರೆ videoFrame.copyTo(destination, options). ಈ ಅಸಿಂಕ್ರೊನಸ್ ವಿಧಾನವು ಫ್ರೇಮ್‌ನ ಪ್ಲೇನ್ ಡೇಟಾವನ್ನು ನೀವು ಒದಗಿಸುವ ಬಫರ್‌ಗೆ ನಕಲಿಸುತ್ತದೆ.

• destination: ಡೇಟಾವನ್ನು ಹಿಡಿದಿಡಲು ಸಾಕಷ್ಟು ದೊಡ್ಡದಾದ ArrayBuffer ಅಥವಾ ಟೈಪ್ಡ್ ಅರೇ (Uint8Array ನಂತಹ).
• options: ಯಾವ ಪ್ಲೇನ್‌ಗಳನ್ನು ನಕಲಿಸಬೇಕು ಮತ್ತು ಅವುಗಳ ಮೆಮೊರಿ ಲೇಔಟ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಆಬ್ಜೆಕ್ಟ್. ಇದನ್ನು ಬಿಟ್ಟರೆ, ಇದು ಎಲ್ಲಾ ಪ್ಲೇನ್‌ಗಳನ್ನು ಒಂದೇ ನಿರಂತರ ಬಫರ್‌ಗೆ ನಕಲಿಸುತ್ತದೆ.

ಈ ವಿಧಾನವು ಪ್ರಾಮಿಸ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಅದು ಫ್ರೇಮ್‌ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಪ್ಲೇನ್‌ಗೆ ಒಂದರಂತೆ PlaneLayout ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಅರೇಯೊಂದಿಗೆ ರಿಸಾಲ್ವ್ ಆಗುತ್ತದೆ. ಪ್ರತಿಯೊಂದು PlaneLayout ಆಬ್ಜೆಕ್ಟ್ ಎರಡು ನಿರ್ಣಾಯಕ ಮಾಹಿತಿ ತುಣುಕುಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ:

• offset: ಡೆಸ್ಟಿನೇಶನ್ ಬಫರ್‌ನಲ್ಲಿ ಈ ಪ್ಲೇನ್‌ನ ಡೇಟಾ ಪ್ರಾರಂಭವಾಗುವ ಬೈಟ್ ಆಫ್‌ಸೆಟ್.
• stride: ಒಂದು ಸಾಲಿನ ಪಿಕ್ಸೆಲ್‌ಗಳ ಪ್ರಾರಂಭ ಮತ್ತು ಆ ಪ್ಲೇನ್‌ನ ಮುಂದಿನ ಸಾಲಿನ ಪ್ರಾರಂಭದ ನಡುವಿನ ಬೈಟ್‌ಗಳ ಸಂಖ್ಯೆ.

ಒಂದು ನಿರ್ಣಾಯಕ ಪರಿಕಲ್ಪನೆ: ಸ್ಟ್ರೈಡ್ vs. ವಿಡ್ತ್

ಕೆಳಮಟ್ಟದ ಗ್ರಾಫಿಕ್ಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್‌ಗೆ ಹೊಸಬರಾದ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಇದು ಗೊಂದಲದ ಸಾಮಾನ್ಯ ಮೂಲಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಪಿಕ್ಸೆಲ್ ಡೇಟಾದ ಪ್ರತಿಯೊಂದು ಸಾಲು ಒಂದರ ನಂತರ ಒಂದರಂತೆ ಬಿಗಿಯಾಗಿ ಪ್ಯಾಕ್ ಮಾಡಲ್ಪಟ್ಟಿದೆ ಎಂದು ನೀವು ಭಾವಿಸಲಾಗುವುದಿಲ್ಲ.

• ವಿಡ್ತ್ (Width) ಎಂದರೆ ಚಿತ್ರದ ಒಂದು ಸಾಲಿನಲ್ಲಿರುವ ಪಿಕ್ಸೆಲ್‌ಗಳ ಸಂಖ್ಯೆ.
• ಸ್ಟ್ರೈಡ್ (Stride) (ಪಿಚ್ ಅಥವಾ ಲೈನ್ ಸ್ಟೆಪ್ ಎಂದೂ ಕರೆಯುತ್ತಾರೆ) ಎಂದರೆ ಒಂದು ಸಾಲಿನ ಪ್ರಾರಂಭದಿಂದ ಮುಂದಿನ ಸಾಲಿನ ಪ್ರಾರಂಭದವರೆಗೆ ಮೆಮೊರಿಯಲ್ಲಿರುವ ಬೈಟ್‌ಗಳ ಸಂಖ್ಯೆ.

ಸಾಮಾನ್ಯವಾಗಿ, stride, width * bytes_per_pixel ಗಿಂತ ಹೆಚ್ಚಾಗಿರುತ್ತದೆ. ಏಕೆಂದರೆ CPU ಅಥವಾ GPU ಯಿಂದ ವೇಗವಾಗಿ ಪ್ರೊಸೆಸಿಂಗ್ ಮಾಡಲು ಮೆಮೊರಿಯನ್ನು ಹಾರ್ಡ್‌ವೇರ್ ಗಡಿಗಳಿಗೆ (ಉದಾ., 32- ಅಥವಾ 64-ಬೈಟ್ ಗಡಿಗಳು) ಹೊಂದಿಸಲು ಪ್ಯಾಡ್ ಮಾಡಲಾಗುತ್ತದೆ. ಒಂದು ನಿರ್ದಿಷ್ಟ ಸಾಲಿನಲ್ಲಿರುವ ಪಿಕ್ಸೆಲ್‌ನ ಮೆಮೊರಿ ವಿಳಾಸವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ನೀವು ಯಾವಾಗಲೂ ಸ್ಟ್ರೈಡ್ ಅನ್ನು ಬಳಸಬೇಕು.

ಸ್ಟ್ರೈಡ್ ಅನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು ಓರೆಯಾದ ಅಥವಾ ವಿರೂಪಗೊಂಡ ಚಿತ್ರಗಳಿಗೆ ಮತ್ತು ತಪ್ಪಾದ ಡೇಟಾ ಪ್ರವೇಶಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆ 1: ಗ್ರೇಸ್ಕೇಲ್ ಪ್ಲೇನ್ ಅನ್ನು ಪ್ರವೇಶಿಸುವುದು ಮತ್ತು ಪ್ರದರ್ಶಿಸುವುದು

ಒಂದು ಸರಳ ಆದರೆ ಶಕ್ತಿಯುತ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸೋಣ. ವೆಬ್‌ನಲ್ಲಿನ ಹೆಚ್ಚಿನ ವೀಡಿಯೊವನ್ನು I420 ನಂತಹ YUV ಫಾರ್ಮ್ಯಾಟ್‌ನಲ್ಲಿ ಎನ್‌ಕೋಡ್ ಮಾಡಲಾಗಿದೆ. 'Y' ಪ್ಲೇನ್ ಚಿತ್ರದ ಸಂಪೂರ್ಣ ಗ್ರೇಸ್ಕೇಲ್ ಪ್ರಾತಿನಿಧ್ಯವಾಗಿದೆ. ನಾವು ಈ ಪ್ಲೇನ್ ಅನ್ನು ಮಾತ್ರ ಹೊರತೆಗೆದು ಅದನ್ನು ಕ್ಯಾನ್ವಾಸ್‌ಗೆ ರೆಂಡರ್ ಮಾಡಬಹುದು.

async function displayGrayscale(videoFrame) {
  // ನಾವು ವಿಡಿಯೋಫ್ರೇಮ್ 'I420' ಅಥವಾ 'NV12' ನಂತಹ YUV ಫಾರ್ಮ್ಯಾಟ್‌ನಲ್ಲಿದೆ ಎಂದು ಭಾವಿಸುತ್ತೇವೆ.
  if (!videoFrame.format.startsWith('I4')) {
    console.error('ಈ ಉದಾಹರಣೆಗೆ YUV 4:2:0 ಪ್ಲಾನಾರ್ ಫಾರ್ಮ್ಯಾಟ್ ಅಗತ್ಯವಿದೆ.');
    videoFrame.close();
    return;
  }

  const yPlaneInfo = videoFrame.layout[0]; // Y ಪ್ಲೇನ್ ಯಾವಾಗಲೂ ಮೊದಲನೆಯದು.

  // ಕೇವಲ Y ಪ್ಲೇನ್ ಡೇಟಾವನ್ನು ಹಿಡಿದಿಡಲು ಒಂದು ಬಫರ್ ರಚಿಸಿ.
  const yPlaneData = new Uint8Array(yPlaneInfo.stride * videoFrame.codedHeight);

  // Y ಪ್ಲೇನ್ ಅನ್ನು ನಮ್ಮ ಬಫರ್‌ಗೆ ನಕಲಿಸಿ.
  await videoFrame.copyTo(yPlaneData, {
    rect: { x: 0, y: 0, width: videoFrame.codedWidth, height: videoFrame.codedHeight },
    layout: [yPlaneInfo]
  });

  // ಈಗ, yPlaneData ರಾ ಗ್ರೇಸ್ಕೇಲ್ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಹೊಂದಿದೆ.
  // ನಾವು ಅದನ್ನು ರೆಂಡರ್ ಮಾಡಬೇಕಾಗಿದೆ. ಕ್ಯಾನ್ವಾಸ್‌ಗಾಗಿ ನಾವು RGBA ಬಫರ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ.
  const canvas = document.getElementById('my-canvas');
  canvas.width = videoFrame.displayWidth;
  canvas.height = videoFrame.displayHeight;
  const ctx = canvas.getContext('2d');
  const imageData = ctx.createImageData(canvas.width, canvas.height);

  // ಕ್ಯಾನ್ವಾಸ್ ಪಿಕ್ಸೆಲ್‌ಗಳ ಮೇಲೆ ಇಟರೇಟ್ ಮಾಡಿ ಮತ್ತು Y ಪ್ಲೇನ್ ಡೇಟಾದಿಂದ ಅವುಗಳನ್ನು ತುಂಬಿಸಿ.
  for (let y = 0; y < videoFrame.displayHeight; y++) {
    for (let x = 0; x < videoFrame.displayWidth; x++) {
      // ಪ್ರಮುಖ: ಸರಿಯಾದ ಸೋರ್ಸ್ ಇಂಡೆಕ್ಸ್ ಹುಡುಕಲು ಸ್ಟ್ರೈಡ್ ಬಳಸಿ!
      const yIndex = y * yPlaneInfo.stride + x;
      const luma = yPlaneData[yIndex];

      // RGBA ImageData ಬಫರ್‌ನಲ್ಲಿ ಡೆಸ್ಟಿನೇಶನ್ ಇಂಡೆಕ್ಸ್ ಲೆಕ್ಕಾಚಾರ ಮಾಡಿ.
      const rgbaIndex = (y * canvas.width + x) * 4;

      imageData.data[rgbaIndex] = luma;     // ಕೆಂಪು
      imageData.data[rgbaIndex + 1] = luma; // ಹಸಿರು
      imageData.data[rgbaIndex + 2] = luma; // ನೀಲಿ
      imageData.data[rgbaIndex + 3] = 255;  // ಆಲ್ಫಾ
    }
  }

  ctx.putImageData(imageData, 0, 0);

  // ನಿರ್ಣಾಯಕ: VideoFrame ನ ಮೆಮೊರಿಯನ್ನು ಬಿಡುಗಡೆ ಮಾಡಲು ಅದನ್ನು ಯಾವಾಗಲೂ ಕ್ಲೋಸ್ ಮಾಡಿ.
  videoFrame.close();
}

ಈ ಉದಾಹರಣೆಯು ಹಲವಾರು ಪ್ರಮುಖ ಹಂತಗಳನ್ನು ಎತ್ತಿ ತೋರಿಸುತ್ತದೆ: ಸರಿಯಾದ ಪ್ಲೇನ್ ಲೇಔಟ್ ಅನ್ನು ಗುರುತಿಸುವುದು, ಡೆಸ್ಟಿನೇಶನ್ ಬಫರ್ ಅನ್ನು ಹಂಚುವುದು, ಡೇಟಾವನ್ನು ಹೊರತೆಗೆಯಲು copyTo ಬಳಸುವುದು, ಮತ್ತು ಹೊಸ ಚಿತ್ರವನ್ನು ನಿರ್ಮಿಸಲು stride ಬಳಸಿ ಡೇಟಾದ ಮೇಲೆ ಸರಿಯಾಗಿ ಇಟರೇಟ್ ಮಾಡುವುದು.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆ 2: ಇನ್-ಪ್ಲೇಸ್ ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ (ಸೆಪಿಯಾ ಫಿಲ್ಟರ್)

ಈಗ ನಾವು ನೇರ ಡೇಟಾ ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸೋಣ. ಸೆಪಿಯಾ ಫಿಲ್ಟರ್ ಒಂದು ಕ್ಲಾಸಿಕ್ ಎಫೆಕ್ಟ್ ಆಗಿದ್ದು, ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಸುಲಭ. ಈ ಉದಾಹರಣೆಗಾಗಿ, RGBA ಫ್ರೇಮ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು ಸುಲಭ, ಇದನ್ನು ನೀವು ಕ್ಯಾನ್ವಾಸ್ ಅಥವಾ WebGL ಕಾಂಟೆಕ್ಸ್ಟ್‌ನಿಂದ ಪಡೆಯಬಹುದು.

async function applySepiaFilter(videoFrame) {
  // ಈ ಉದಾಹರಣೆಯು ಇನ್‌ಪುಟ್ ಫ್ರೇಮ್ 'RGBA' ಅಥವಾ 'BGRA' ಎಂದು ಭಾವಿಸುತ್ತದೆ.
  if (videoFrame.format !== 'RGBA' && videoFrame.format !== 'BGRA') {
    console.error('ಸೆಪಿಯಾ ಫಿಲ್ಟರ್ ಉದಾಹರಣೆಗೆ RGBA ಫ್ರೇಮ್ ಅಗತ್ಯವಿದೆ.');
    videoFrame.close();
    return null;
  }

  // ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ಹಿಡಿದಿಡಲು ಒಂದು ಬಫರ್ ಅನ್ನು ಹಂಚಿ.
  const frameDataSize = videoFrame.allocationSize();
  const frameData = new Uint8Array(frameDataSize);
  await videoFrame.copyTo(frameData);

  const layout = videoFrame.layout[0]; // RGBA ಒಂದೇ ಪ್ಲೇನ್ ಆಗಿದೆ

  // ಈಗ, ಬಫರ್‌ನಲ್ಲಿರುವ ಡೇಟಾವನ್ನು ಮ್ಯಾನಿಪ್ಯುಲೇಟ್ ಮಾಡಿ.
  for (let y = 0; y < videoFrame.codedHeight; y++) {
    for (let x = 0; x < videoFrame.codedWidth; x++) {
      const pixelIndex = y * layout.stride + x * 4; // ಪ್ರತಿ ಪಿಕ್ಸೆಲ್‌ಗೆ 4 ಬೈಟ್‌ಗಳು (R,G,B,A)

      const r = frameData[pixelIndex];
      const g = frameData[pixelIndex + 1];
      const b = frameData[pixelIndex + 2];

      const tr = 0.393 * r + 0.769 * g + 0.189 * b;
      const tg = 0.349 * r + 0.686 * g + 0.168 * b;
      const tb = 0.272 * r + 0.534 * g + 0.131 * b;

      frameData[pixelIndex] = Math.min(255, tr);
      frameData[pixelIndex + 1] = Math.min(255, tg);
      frameData[pixelIndex + 2] = Math.min(255, tb);
      // ಆಲ್ಫಾ (frameData[pixelIndex + 3]) ಬದಲಾಗದೆ ಉಳಿಯುತ್ತದೆ.
    }
  }

  // ಮಾರ್ಪಡಿಸಿದ ಡೇಟಾದೊಂದಿಗೆ *ಹೊಸ* VideoFrame ಅನ್ನು ರಚಿಸಿ.
  const newFrame = new VideoFrame(frameData, {
    format: videoFrame.format,
    codedWidth: videoFrame.codedWidth,
    codedHeight: videoFrame.codedHeight,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  // ಮೂಲ ಫ್ರೇಮ್ ಅನ್ನು ಕ್ಲೋಸ್ ಮಾಡಲು ಮರೆಯಬೇಡಿ!
  videoFrame.close();

  return newFrame;
}

ಇದು ಸಂಪೂರ್ಣ ಓದು-ಮಾರ್ಪಡಿಸು-ಬರೆಯುವ ಚಕ್ರವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ: ಡೇಟಾವನ್ನು ನಕಲಿಸಿ, ಸ್ಟ್ರೈಡ್ ಬಳಸಿ ಅದರ ಮೂಲಕ ಲೂಪ್ ಮಾಡಿ, ಪ್ರತಿ ಪಿಕ್ಸೆಲ್‌ಗೆ ಗಣಿತದ ಪರಿವರ್ತನೆಯನ್ನು ಅನ್ವಯಿಸಿ, ಮತ್ತು ಫಲಿತಾಂಶದ ಡೇಟಾದೊಂದಿಗೆ ಹೊಸ VideoFrame ಅನ್ನು ನಿರ್ಮಿಸಿ. ಈ ಹೊಸ ಫ್ರೇಮ್ ಅನ್ನು ನಂತರ ಕ್ಯಾನ್ವಾಸ್‌ಗೆ ರೆಂಡರ್ ಮಾಡಬಹುದು, VideoEncoder ಗೆ ಕಳುಹಿಸಬಹುದು, ಅಥವಾ ಇನ್ನೊಂದು ಪ್ರೊಸೆಸಿಂಗ್ ಹಂತಕ್ಕೆ ರವಾನಿಸಬಹುದು.

ಕಾರ್ಯಕ್ಷಮತೆ ಮುಖ್ಯ: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ vs. ವೆಬ್‌ಅಸೆಂಬ್ಲಿ (WASM)

ಪ್ರತಿ ಫ್ರೇಮ್‌ಗೆ ಲಕ್ಷಾಂತರ ಪಿಕ್ಸೆಲ್‌ಗಳ ಮೇಲೆ ಇಟರೇಟ್ ಮಾಡುವುದು (1080p ಫ್ರೇಮ್ 2 ಮಿಲಿಯನ್‌ಗಿಂತಲೂ ಹೆಚ್ಚು ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಹೊಂದಿದೆ, ಅಥವಾ RGBA ಯಲ್ಲಿ 8 ಮಿಲಿಯನ್ ಡೇಟಾ ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಹೊಂದಿದೆ) ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ನಿಧಾನವಾಗಬಹುದು. ಆಧುನಿಕ JS ಇಂಜಿನ್‌ಗಳು ನಂಬಲಾಗದಷ್ಟು ವೇಗವಾಗಿದ್ದರೂ, ಅಧಿಕ-ರೆಸಲ್ಯೂಶನ್ ವೀಡಿಯೊ (HD, 4K) ದ ನೈಜ-ಸಮಯದ ಪ್ರೊಸೆಸಿಂಗ್‌ಗೆ, ಈ ವಿಧಾನವು ಸುಲಭವಾಗಿ ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ಮುಳುಗಿಸಬಹುದು, ಇದು ಅಸ್ಥಿರ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಇಲ್ಲಿಯೇ ವೆಬ್‌ಅಸೆಂಬ್ಲಿ (WASM) ಒಂದು ಅತ್ಯಗತ್ಯ ಸಾಧನವಾಗುತ್ತದೆ. WASM ನಿಮಗೆ C++, Rust, ಅಥವಾ Go ನಂತಹ ಭಾಷೆಗಳಲ್ಲಿ ಬರೆದ ಕೋಡ್ ಅನ್ನು ಬ್ರೌಸರ್‌ನೊಳಗೆ ಸುಮಾರು-ನೇಟಿವ್ ವೇಗದಲ್ಲಿ ಚಲಾಯಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ವೀಡಿಯೊ ಪ್ರೊಸೆಸಿಂಗ್‌ಗೆ ವರ್ಕ್‌ಫ್ಲೋ ಹೀಗಾಗುತ್ತದೆ:

1. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ: ರಾ ಪಿಕ್ಸೆಲ್ ಡೇಟಾವನ್ನು ArrayBuffer ಗೆ ಪಡೆಯಲು videoFrame.copyTo() ಬಳಸಿ.
2. WASM ಗೆ ರವಾನಿಸಿ: ಈ ಬಫರ್‌ನ ರೆಫರೆನ್ಸ್ ಅನ್ನು ನಿಮ್ಮ ಕಂಪೈಲ್ಡ್ WASM ಮಾಡ್ಯೂಲ್‌ಗೆ ರವಾನಿಸಿ. ಇದು ಡೇಟಾವನ್ನು ನಕಲಿಸದ ಕಾರಣ ಅತ್ಯಂತ ವೇಗದ ಕಾರ್ಯಾಚರಣೆಯಾಗಿದೆ.
3. WASM ನಲ್ಲಿ (C++/Rust): ನಿಮ್ಮ ಹೆಚ್ಚು ಆಪ್ಟಿಮೈಸ್ಡ್ ಇಮೇಜ್ ಪ್ರೊಸೆಸಿಂಗ್ ಅಲ್ಗಾರಿದಮ್‌ಗಳನ್ನು ನೇರವಾಗಿ ಮೆಮೊರಿ ಬಫರ್‌ನಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಿ. ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೂಪ್‌ಗಿಂತ ಹಲವಾರು ಪಟ್ಟು ವೇಗವಾಗಿರುತ್ತದೆ.
4. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ಹಿಂತಿರುಗಿ: WASM ಮುಗಿದ ನಂತರ, ನಿಯಂತ್ರಣವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ಹಿಂತಿರುಗುತ್ತದೆ. ನಂತರ ನೀವು ಮಾರ್ಪಡಿಸಿದ ಬಫರ್ ಅನ್ನು ಬಳಸಿ ಹೊಸ VideoFrame ಅನ್ನು ರಚಿಸಬಹುದು.

ಯಾವುದೇ ಗಂಭೀರ, ನೈಜ-ಸಮಯದ ವೀಡಿಯೊ ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ—ವರ್ಚುವಲ್ ಹಿನ್ನೆಲೆಗಳು, ಆಬ್ಜೆಕ್ಟ್ ಡಿಟೆಕ್ಷನ್, ಅಥವಾ ಸಂಕೀರ್ಣ ಫಿಲ್ಟರ್‌ಗಳಂತಹ—ವೆಬ್‌ಅಸೆಂಬ್ಲಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳುವುದು ಕೇವಲ ಒಂದು ಆಯ್ಕೆಯಲ್ಲ; ಅದು ಒಂದು ಅವಶ್ಯಕತೆಯಾಗಿದೆ.

ವಿವಿಧ ಪಿಕ್ಸೆಲ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ನಿಭಾಯಿಸುವುದು (ಉದಾ., I420, NV12)

RGBA ಸರಳವಾಗಿದ್ದರೂ, ನೀವು ಹೆಚ್ಚಾಗಿ VideoDecoder ನಿಂದ ಪ್ಲಾನಾರ್ YUV ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಲ್ಲಿ ಫ್ರೇಮ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತೀರಿ. I420 ನಂತಹ ಸಂಪೂರ್ಣ ಪ್ಲಾನಾರ್ ಫಾರ್ಮ್ಯಾಟ್ ಅನ್ನು ಹೇಗೆ ನಿಭಾಯಿಸುವುದು ಎಂದು ನೋಡೋಣ.

I420 ಫಾರ್ಮ್ಯಾಟ್‌ನಲ್ಲಿರುವ VideoFrame ತನ್ನ layout ಅರೇಯಲ್ಲಿ ಮೂರು ಲೇಔಟ್ ಡಿಸ್ಕ್ರಿಪ್ಟರ್‌ಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ:

• layout[0]: Y ಪ್ಲೇನ್ (ಲೂಮಾ). ಆಯಾಮಗಳು codedWidth x codedHeight.
• layout[1]: U ಪ್ಲೇನ್ (ಕ್ರೋಮಾ). ಆಯಾಮಗಳು codedWidth/2 x codedHeight/2.
• layout[2]: V ಪ್ಲೇನ್ (ಕ್ರೋಮಾ). ಆಯಾಮಗಳು codedWidth/2 x codedHeight/2.

ಎಲ್ಲಾ ಮೂರು ಪ್ಲೇನ್‌ಗಳನ್ನು ಒಂದೇ ಬಫರ್‌ಗೆ ಹೇಗೆ ನಕಲಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

async function extractI420Planes(videoFrame) {
  const totalSize = videoFrame.allocationSize({ format: 'I420' });
  const allPlanesData = new Uint8Array(totalSize);

  const layouts = await videoFrame.copyTo(allPlanesData);

  // layouts 3 PlaneLayout ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಅರೇ ಆಗಿದೆ
  console.log('Y ಪ್ಲೇನ್ ಲೇಔಟ್:', layouts[0]); // { offset: 0, stride: ... }
  console.log('U ಪ್ಲೇನ್ ಲೇಔಟ್:', layouts[1]); // { offset: ..., stride: ... }
  console.log('V ಪ್ಲೇನ್ ಲೇಔಟ್:', layouts[2]); // { offset: ..., stride: ... }

  // ನೀವು ಈಗ `allPlanesData` ಬಫರ್‌ನಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಪ್ಲೇನ್ ಅನ್ನು
  // ಅದರ ನಿರ್ದಿಷ್ಟ ಆಫ್‌ಸೆಟ್ ಮತ್ತು ಸ್ಟ್ರೈಡ್ ಬಳಸಿ ಪ್ರವೇಶಿಸಬಹುದು.

  const yPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[0].offset,
    layouts[0].stride * videoFrame.codedHeight
  );

  // ಗಮನಿಸಿ ಕ್ರೋಮಾ ಆಯಾಮಗಳು ಅರ್ಧದಷ್ಟು!
  const uPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[1].offset,
    layouts[1].stride * (videoFrame.codedHeight / 2)
  );

  const vPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[2].offset,
    layouts[2].stride * (videoFrame.codedHeight / 2)
  );

  console.log('ಪ್ರವೇಶಿಸಿದ Y ಪ್ಲೇನ್ ಗಾತ್ರ:', yPlaneView.byteLength);
  console.log('ಪ್ರವೇಶಿಸಿದ U ಪ್ಲೇನ್ ಗಾತ್ರ:', uPlaneView.byteLength);

  videoFrame.close();
}

ಮತ್ತೊಂದು ಸಾಮಾನ್ಯ ಫಾರ್ಮ್ಯಾಟ್ NV12, ಇದು ಸೆಮಿ-ಪ್ಲಾನಾರ್ ಆಗಿದೆ. ಇದು ಎರಡು ಪ್ಲೇನ್‌ಗಳನ್ನು ಹೊಂದಿದೆ: ಒಂದು Y ಗಾಗಿ, ಮತ್ತು ಎರಡನೇ ಪ್ಲೇನ್‌ನಲ್ಲಿ U ಮತ್ತು V ಮೌಲ್ಯಗಳನ್ನು ಇಂಟರ್‌ಲೀವ್ ಮಾಡಲಾಗಿದೆ (ಉದಾ., [U1, V1, U2, V2, ...]). WebCodecs API ಇದನ್ನು ಪಾರದರ್ಶಕವಾಗಿ ನಿಭಾಯಿಸುತ್ತದೆ; NV12 ಫಾರ್ಮ್ಯಾಟ್‌ನಲ್ಲಿರುವ VideoFrame ತನ್ನ layout ಅರೇಯಲ್ಲಿ ಸರಳವಾಗಿ ಎರಡು ಲೇಔಟ್‌ಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ.

ಸವಾಲುಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಈ ಕೆಳಮಟ್ಟದಲ್ಲಿ ಕೆಲಸ ಮಾಡುವುದು ಶಕ್ತಿಯುತವಾಗಿದೆ, ಆದರೆ ಇದು ಜವಾಬ್ದಾರಿಗಳೊಂದಿಗೆ ಬರುತ್ತದೆ.

ಮೆಮೊರಿ ನಿರ್ವಹಣೆ ಅತ್ಯಂತ ಮುಖ್ಯ

ಒಂದು VideoFrame ಗಣನೀಯ ಪ್ರಮಾಣದ ಮೆಮೊರಿಯನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ, ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಟರ್‌ನ ಹೀಪ್‌ನ ಹೊರಗೆ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ. ನೀವು ಈ ಮೆಮೊರಿಯನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಬಿಡುಗಡೆ ಮಾಡದಿದ್ದರೆ, ನೀವು ಮೆಮೊರಿ ಲೀಕ್‌ಗೆ ಕಾರಣವಾಗುತ್ತೀರಿ, ಅದು ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ ಅನ್ನು ಕ್ರ್ಯಾಶ್ ಮಾಡಬಹುದು.

ನೀವು ಒಂದು ಫ್ರೇಮ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮುಗಿಸಿದಾಗ ಯಾವಾಗಲೂ, ಯಾವಾಗಲೂ videoFrame.close() ಎಂದು ಕಾಲ್ ಮಾಡಿ.

ಅಸಿಂಕ್ರೊನಸ್ ಸ್ವಭಾವ

ಎಲ್ಲಾ ಡೇಟಾ ಪ್ರವೇಶವು ಅಸಿಂಕ್ರೊನಸ್ ಆಗಿದೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಆರ್ಕಿಟೆಕ್ಚರ್ ರೇಸ್ ಕಂಡೀಶನ್‌ಗಳನ್ನು ತಪ್ಪಿಸಲು ಮತ್ತು ಸುಗಮ ಪ್ರೊಸೆಸಿಂಗ್ ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪ್ರಾಮಿಸಸ್‌ ಮತ್ತು async/await ನ ಹರಿವನ್ನು ಸರಿಯಾಗಿ ನಿಭಾಯಿಸಬೇಕು.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

WebCodecs ಒಂದು ಆಧುನಿಕ API ಆಗಿದೆ. ಎಲ್ಲಾ ಪ್ರಮುಖ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿದ್ದರೂ, ಯಾವಾಗಲೂ ಅದರ ಲಭ್ಯತೆಯನ್ನು ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಯಾವುದೇ ಮಾರಾಟಗಾರ-ನಿರ್ದಿಷ್ಟ ಅನುಷ್ಠಾನ ವಿವರಗಳು ಅಥವಾ ಮಿತಿಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರಲಿ. API ಅನ್ನು ಬಳಸಲು ಪ್ರಯತ್ನಿಸುವ ಮೊದಲು ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್ ಬಳಸಿ.

ತೀರ್ಮಾನ: ವೆಬ್ ವೀಡಿಯೊಗೆ ಒಂದು ಹೊಸ ಗಡಿ

WebCodecs API ಮೂಲಕ VideoFrame ನ ರಾ ಪ್ಲೇನ್ ಡೇಟಾವನ್ನು ನೇರವಾಗಿ ಪ್ರವೇಶಿಸುವ ಮತ್ತು ನಿರ್ವಹಿಸುವ ಸಾಮರ್ಥ್ಯವು ವೆಬ್-ಆಧಾರಿತ ಮೀಡಿಯಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಒಂದು ಮಾದರಿ ಬದಲಾವಣೆಯಾಗಿದೆ. ಇದು <video> ಎಲಿಮೆಂಟ್‌ನ ಬ್ಲಾಕ್ ಬಾಕ್ಸ್ ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ ಮತ್ತು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹಿಂದೆ ನೇಟಿವ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಮೀಸಲಾಗಿದ್ದ ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.

ವೀಡಿಯೊ ಮೆಮೊರಿ ಲೇಔಟ್‌ನ ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು—ಪ್ಲೇನ್‌ಗಳು, ಸ್ಟ್ರೈಡ್, ಮತ್ತು ಬಣ್ಣದ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು—ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ-ನಿರ್ಣಾಯಕ ಕಾರ್ಯಾಚರಣೆಗಳಿಗಾಗಿ ವೆಬ್‌ಅಸೆಂಬ್ಲಿಯ ಶಕ್ತಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಈಗ ನೇರವಾಗಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಂಬಲಾಗದಷ್ಟು ಅತ್ಯಾಧುನಿಕ ವೀಡಿಯೊ ಪ್ರೊಸೆಸಿಂಗ್ ಪರಿಕರಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ನೈಜ-ಸಮಯದ ಬಣ್ಣ ಶ್ರೇಣೀಕರಣ ಮತ್ತು ಕಸ್ಟಮ್ ದೃಶ್ಯ ಪರಿಣಾಮಗಳಿಂದ ಹಿಡಿದು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮೆಷಿನ್ ಲರ್ನಿಂಗ್ ಮತ್ತು ವೀಡಿಯೊ ವಿಶ್ಲೇಷಣೆಯವರೆಗೆ, ಸಾಧ್ಯತೆಗಳು ಅಪಾರವಾಗಿವೆ. ವೆಬ್‌ನಲ್ಲಿ ಉತ್ತಮ-ಕಾರ್ಯಕ್ಷಮತೆಯ, ಕೆಳಮಟ್ಟದ ವೀಡಿಯೊದ ಯುಗವು ನಿಜವಾಗಿಯೂ ಪ್ರಾರಂಭವಾಗಿದೆ.