{"id":22173,"date":"2026-04-09T02:09:53","date_gmt":"2026-04-09T02:09:53","guid":{"rendered":"https:\/\/umang.pk\/2026\/04\/09\/webcodecs-%db%81%db%8c%d9%86%da%88-%d8%a8%da%a9-%d8%a8%d8%b1%d8%a7%d8%a4%d8%b2%d8%b1%d8%b2-%d9%85%db%8c%da%ba-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c-%d9%88%db%8c%da%88%db%8c%d9%88-%d9%be%d8%b1%d9%88\/"},"modified":"2026-04-09T02:09:54","modified_gmt":"2026-04-09T02:09:54","slug":"webcodecs-%db%81%db%8c%d9%86%da%88-%d8%a8%da%a9-%d8%a8%d8%b1%d8%a7%d8%a4%d8%b2%d8%b1%d8%b2-%d9%85%db%8c%da%ba-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c-%d9%88%db%8c%da%88%db%8c%d9%88-%d9%be%d8%b1%d9%88","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/04\/09\/webcodecs-%db%81%db%8c%d9%86%da%88-%d8%a8%da%a9-%d8%a8%d8%b1%d8%a7%d8%a4%d8%b2%d8%b1%d8%b2-%d9%85%db%8c%da%ba-%d8%a8%d9%86%db%8c%d8%a7%d8%af%db%8c-%d9%88%db%8c%da%88%db%8c%d9%88-%d9%be%d8%b1%d9%88\/","title":{"rendered":"WebCodecs \u06c1\u06cc\u0646\u0688 \u0628\u06a9: \u0628\u0631\u0627\u0624\u0632\u0631\u0632 \u0645\u06cc\u06ba \u0628\u0646\u06cc\u0627\u062f\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af"},"content":{"rendered":"\n<div id=\"\">\n<p>\u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u06a9\u0628\u06be\u06cc \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u06cc \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u06cc\u0627 \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u0627\u06cc\u067e\u060c \u062a\u0648 \u0622\u067e \u06cc\u0627 \u062a\u0648 \u0633\u0631\u0648\u0631 \u067e\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba (\u0645\u06c1\u0646\u06af\u0627) \u06cc\u0627 ffmpeg.js (clunky) \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 WebCodecs API \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0627\u0628 \u0627\u06cc\u0633\u0627 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0627\u06cc\u06a9 \u0628\u06c1\u062a\u0631 \u0637\u0631\u06cc\u0642\u06c1 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u06d4<\/p>\n<p>WebCodecs \u0627\u06cc\u06a9 \u0646\u0633\u0628\u062a\u0627\u064b \u0646\u06cc\u0627 API \u06c1\u06d2 \u062c\u0648 \u0628\u0631\u0627\u0624\u0632\u0631 \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646\u0632 \u06a9\u0648 \u0627\u0646\u062a\u06c1\u0627\u0626\u06cc \u06a9\u0645 \u0633\u0637\u062d \u06a9\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0624\u062b\u0631 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0645\u0627\u0636\u06cc \u0645\u06cc\u06ba\u060c \u0627\u06af\u0631 \u0622\u067e \u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u0627\u06cc\u067e\u060c \u0644\u0627\u0626\u06cc\u0648 \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u0627\u0633\u0679\u0648\u0688\u06cc\u0648\u060c \u06cc\u0627 \u06a9\u0648\u0626\u06cc \u0627\u06cc\u0633\u06cc \u0686\u06cc\u0632 \u0628\u0646\u0627\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u062a\u06be\u06d2 \u062c\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 &#8216;\u06c1\u06cc\u0648\u06cc \u0644\u0641\u0679\u0646\u06af&#8217; \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u0648\u060c \u062a\u0648 \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0688\u06cc\u0633\u06a9 \u0679\u0627\u067e \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646 \u0628\u0646\u0627\u0646\u0627 \u067e\u0691\u062a\u0627 \u062a\u06be\u0627\u06d4 \u0628\u06c1\u062a \u0633\u06d2 SaaS \u0679\u0648\u0644\u0632\u060c \u062c\u06cc\u0633\u06d2 Canva\u060c \u0646\u06d2 \u0627\u0633 \u0645\u0633\u0626\u0644\u06d2 \u06a9\u0648 \u0633\u0631\u0648\u0631 \u0633\u0627\u0626\u06cc\u0688 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062d\u0644 \u06a9\u06cc\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0628\u06c1\u062a \u0628\u06c1\u062a\u0631 UX \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0632\u06cc\u0627\u062f\u06c1 \u067e\u06cc\u0686\u06cc\u062f\u06c1 \u0627\u0648\u0631 \u0645\u06c1\u0646\u06af\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>WebCodecs \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0622\u067e \u0627\u0628 \u0627\u0646 \u0627\u06cc\u067e\u0633 \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0628\u063a\u06cc\u0631 \u0622\u067e \u06a9\u06d2 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u06a9\u0648\u0626\u06cc \u0633\u0627\u0641\u0679 \u0648\u06cc\u0626\u0631 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u0627\u0648\u0631 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u06d2\u060c \u06cc\u0627 \u0645\u06c1\u0646\u06af\u06d2 \u0627\u0648\u0631 \u067e\u06cc\u0686\u06cc\u062f\u06c1 \u0633\u0631\u0648\u0631 \u0627\u0646\u0641\u0631\u0627\u0633\u0679\u0631\u06a9\u0686\u0631 \u06a9\u06d2 \u0628\u063a\u06cc\u0631\u06d4<\/p>\n<p>\u06cc\u06c1 \u0646\u0638\u0631\u06cc\u0627\u062a\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u0679\u0648\u0644\u0632 \u062c\u06cc\u0633\u06d2 Capcut \u0646\u06d2 WebCodecs + WebAssembly \u067e\u0631 \u0633\u0648\u0626\u0686 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0679\u0631\u06cc\u0641\u06a9 \u0645\u06cc\u06ba 83% \u0627\u0636\u0627\u0641\u06c1 \u062f\u06cc\u06a9\u06be\u0627\u06d4 [1]. \u06cc\u0648\u0679\u06cc\u0644\u06cc\u0679\u06cc \u0627\u06cc\u067e\u0633 \u062c\u06cc\u0633\u06d2 Remotion Convert \u0627\u0648\u0631 Free AI Video Upscaler (\u062f\u0648\u0646\u0648\u06ba \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633) \u0631\u0648\u0632\u0627\u0646\u06c1 \u06c1\u0632\u0627\u0631\u0648\u06ba \u0648\u06cc\u0688\u06cc\u0648\u0632 \u06a9\u0648 \u0628\u063a\u06cc\u0631 \u0633\u0631\u0648\u0631 \u06a9\u06cc \u0644\u0627\u06af\u062a \u06a9\u06d2 \u0627\u0648\u0631 \u06a9\u0633\u06cc \u0627\u0646\u0633\u0679\u0627\u0644\u06cc\u0634\u0646 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u067e\u0631\u0648\u0633\u06cc\u0633 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 [2].<\/p>\n<p>WebCodecs \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0646\u0626\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06d2 \u0645\u0639\u0627\u0645\u0644\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06be\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627 \u0631\u06c1\u0627 \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u067e\u0631\u0648\u06af\u0631\u0627\u0645 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u0628\u0646\u0627\u0646\u0627\u06d4 [3].<\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0642\u0633\u0645 \u06a9\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u0627\u06cc\u067e \u0628\u0646\u0627 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 WebCodecs \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u062c\u0627\u0646\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u060c \u06a9\u0645 \u0627\u0632 \u06a9\u0645 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0622\u067e\u0634\u0646 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u06d4<\/p>\n<p>\u0627\u0633 \u06af\u0627\u0626\u06cc\u0688 \u0645\u06cc\u06ba \u0622\u067e \u06a9\u0631\u06cc\u06ba \u06af\u06d2:<\/p>\n<ol>\n<li>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0627\u062a\u0648\u06ba \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>WebCodecs API \u06a9\u0627 \u062a\u0639\u0627\u0631\u0641<\/p>\n<\/li>\n<li>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u067e\u0691\u06be\u0646\u06d2 \u0627\u0648\u0631 \u0644\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u06a9\u0633\u0646\u06af + \u0688\u06cc\u0645\u06a9\u0633\u0646\u06af \u0688\u0633\u06a9\u0634\u0646<\/p>\n<\/li>\n<li>\n<p>\u0648\u06cc\u0688\u06cc\u0648\u0632 \u06a9\u0648 webm + mp4 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0645\u0642\u0627\u0645\u06cc \u062a\u0628\u0627\u062f\u0644\u0648\u06ba \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u067e\u0646\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0646\u0648\u0631\u0698\u0646 \u06cc\u0648\u0679\u06cc\u0644\u06cc\u0679\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0644\u06cc\u0648\u0644 \u06a9\u06d2 \u06a9\u0686\u06be \u0645\u0633\u0627\u0626\u0644 \u06a9\u0648 \u0637\u06d2 \u06a9\u06cc\u0627\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u0636\u0627\u0641\u06cc \u0648\u0633\u0627\u0626\u0644 \u06a9\u06cc \u0628\u062d\u062b<\/p>\n<\/li>\n<\/ol>\n<p>\u0627\u0633 \u0645\u0636\u0645\u0648\u0646 \u06a9\u0627 \u0645\u0642\u0635\u062f \u0627\u06cc\u06a9 \u0639\u0645\u0644\u06cc \u0646\u0642\u0637\u06c1 \u0622\u063a\u0627\u0632 \u0627\u0648\u0631 \u0633\u0627\u0645\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0688\u0648\u06cc\u0644\u067e\u0631\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 WebCodecs API \u06a9\u0627 \u062a\u0639\u0627\u0631\u0641 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0622\u067e \u06a9\u0648 \u0633\u06a9\u06be\u0627\u0626\u06d2 \u06af\u0627 \u06a9\u06c1 API \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0622\u067e \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u06cc\u0627 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0645\u06cc\u06ba \u0641\u0631\u0636 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba \u06a9\u06c1 \u0622\u067e \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0627\u062a\u06cc\u06ba \u062c\u0627\u0646\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633 \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u067e \u06a9\u0648 \u0633\u06cc\u0646\u0626\u0631 \u0688\u0648\u06cc\u0644\u067e\u0631 \u06cc\u0627 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u062c\u06cc\u0646\u0626\u0631 \u0628\u0646\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u0645\u06cc\u06ba \u0627\u0636\u0627\u0641\u06cc \u0633\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0648\u0633\u0627\u0626\u0644 \u0627\u0648\u0631 \u062d\u0648\u0627\u0644\u06c1 \u062c\u0627\u062a \u06a9\u0627 \u0630\u06a9\u0631 \u06a9\u0631\u0648\u06ba \u06af\u0627\u06d4 \u0645\u0633\u062a\u0642\u0628\u0644 \u06a9\u06d2 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644\u0632 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0645\u062e\u0635\u0648\u0635 \u0639\u0646\u0648\u0627\u0646\u0627\u062a \u06a9\u06cc \u06af\u06c1\u0631\u0627\u0626\u06cc \u0645\u06cc\u06ba \u062c\u0627\u0626\u06cc\u06ba \u06af\u06d2\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u06cc\u0688\u06cc\u0679\u0631 \u0628\u0646\u0627\u0646\u0627 \u06cc\u0627 WebCodecs \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0644\u0627\u0626\u06cc\u0648 \u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u06a9\u0631\u0646\u0627\u06d4 \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u06c1\u06cc\u0646\u0688 \u0628\u06a9 \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0679\u06be\u0648\u0633 \u0646\u0642\u0637\u06c1 \u0622\u063a\u0627\u0632 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u06d2 \u06af\u0627 \u06a9\u06c1 WebCodecs \u06a9\u06cc\u0627 \u06c1\u06d2\u060c \u06cc\u06c1 \u06a9\u06cc\u0627 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 WebCodecs \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646\u0632 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u0626\u06d2 \u062c\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-table-of-contents\">\u0627\u0646\u0688\u06cc\u06a9\u0633<\/h2>\n<h2 id=\"heading-prerequisites\">\u0634\u0631\u0637\u06cc\u06ba<\/h2>\n<p>\u0633\u0627\u062a\u06be \u0686\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u067e \u06a9\u0648 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u062c\u06cc\u0646\u0626\u0631 \u0628\u0646\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0622\u067e \u06a9\u0648 \u062f\u0631\u062c \u0630\u06cc\u0644 \u0633\u06d2 \u0648\u0627\u0642\u0641 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2:<\/p>\n<ul>\n<li>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc JavaScript\u060c \u0628\u0634\u0645\u0648\u0644 async\/await \u0627\u0648\u0631 \u06a9\u0627\u0644 \u0628\u06cc\u06a9\u0633<\/p>\n<\/li>\n<li>\n<p>\u0645\u0642\u0627\u0645\u06cc \u0628\u0631\u0627\u0624\u0632\u0631 APIs \u062c\u06cc\u0633\u06d2 fetch \u0627\u0648\u0631 DOM<\/p>\n<\/li>\n<li>\n<p>\u0641\u0627\u0626\u0644 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u06a9\u06cc\u0627 \u06c1\u06d2 \u0627\u0648\u0631 HTML \u0645\u06cc\u06ba \u0641\u0627\u0626\u0644 \u0627\u0646 \u067e\u0679 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u061f<\/p>\n<\/li>\n<li>\n<p>HTML5 \u06a9\u06cc\u0627 \u06c1\u06d2 \u0627\u0633 \u06a9\u06cc \u0639\u0645\u0648\u0645\u06cc \u062a\u0641\u06c1\u06cc\u0645 (\u0645\u062e\u062a\u0635\u0631 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u0644\u06cc\u06a9\u0646 \u06af\u06c1\u0631\u0627\u0626\u06cc \u0645\u06cc\u06ba \u0646\u06c1\u06cc\u06ba)<\/p>\n<\/li>\n<\/ul>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af\u060c \u06a9\u0648\u0688\u06cc\u06a9\u0633\u060c \u06cc\u0627 \u0645\u06cc\u0688\u06cc\u0627 APIs \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0639\u0644\u0645 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u0633 \u06c1\u06cc\u0646\u0688 \u0628\u06a9 \u06a9\u06d2 \u067e\u06c1\u0644\u06d2 \u0646\u0635\u0641 \u0645\u06cc\u06ba \u06c1\u0645 \u0627\u0633 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-primer-on-video-processing\">\u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u067e\u0631\u0627\u0626\u0645\u0631<\/h2>\n<p>\u0627\u0633 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u06c1 \u06c1\u0645 WebCodecs \u0645\u06cc\u06ba \u062f\u0627\u062e\u0644 \u06c1\u0648\u06ba\u060c \u0645\u06cc\u06ba \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0646\u0627 \u0686\u0627\u06c1\u062a\u0627 \u06c1\u0648\u06ba \u06a9\u06c1 \u06a9\u0648\u0688\u06cc\u06a9 \u06a9\u06cc\u0627 \u06c1\u06d2 \u0627\u0633 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u06c1 \u0622\u067e \u0627\u0633\u06d2 \u0648\u06cc\u0628 \u067e\u0631 \u0688\u0627\u0644\u0646\u06d2 \u067e\u0631 \u063a\u0648\u0631 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-video-frames\">\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/h3>\n<p>\u0645\u06cc\u0631\u06d2 \u062e\u06cc\u0627\u0644 \u0645\u06cc\u06ba \u0622\u067e \u062c\u0627\u0646\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06cc\u0627 \u06c1\u06d2\u06d4 \u0633\u062a\u0645 \u0638\u0631\u06cc\u0641\u06cc \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0646\u06cc\u0686\u06d2 \u062f\u06cc \u06af\u0626\u06cc &#8216;\u0648\u06cc\u0688\u06cc\u0648&#8217; \u062f\u0631\u0627\u0635\u0644 \u0627\u06cc\u06a9 GIF \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0622\u067e \u06a9\u0648 \u062e\u06cc\u0627\u0644 \u0622\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.gif\" alt=\"\u0628\u06af \u0628\u06a9 \u0628\u0646\u06cc\u060c \u0627\u06cc\u06a9 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u0648\u06cc\u0688\u06cc\u0648\" style=\"display:block;margin:0 auto\" width=\"320\" height=\"180\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u0635\u0631\u0641 \u062a\u0635\u0627\u0648\u06cc\u0631 \u06a9\u0627 \u0627\u06cc\u06a9 \u0633\u0644\u0633\u0644\u06c1 \u06c1\u06d2 \u062c\u0648 \u062a\u06cc\u0632\u06cc \u0633\u06d2 \u06cc\u06a9\u06d2 \u0628\u0639\u062f \u062f\u06cc\u06af\u0631\u06d2 \u062f\u06a9\u06be\u0627\u0626\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06c1\u0631 \u062a\u0635\u0648\u06cc\u0631 \u06c1\u06d2\u06d4 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em>\u06c1\u0631 \u0641\u0631\u06cc\u0645 \u0679\u0627\u0626\u0645 \u0627\u0633\u0679\u06cc\u0645\u067e \u0633\u06d2 \u0645\u0646\u0633\u0644\u06a9 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u062c\u0628 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0644\u06cc\u0626\u0631 \u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u0686\u0644\u0627\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u06cc\u06c1 \u06c1\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u0679\u0627\u0626\u0645 \u0627\u0633\u0679\u06cc\u0645\u067e \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06c1 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u0631\u062f\u06c1 \u0648\u0642\u062a \u067e\u0631 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700592_722_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645\" style=\"display:block;margin:0 auto\" width=\"540\" height=\"360\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0627 \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u067e\u06a9\u0633\u0644\u0632 \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u06cc\u06a9 4K \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 8 \u0645\u0644\u06cc\u0646 \u067e\u06a9\u0633\u0644\u0632 (3840*2160 = 8294400) \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700592_60_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba \u067e\u06a9\u0633\u0644\u0632 \u06c1\u06cc\u06ba\u06d4\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"540\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u06c1\u0631 \u067e\u06a9\u0633\u0644 \u0628\u0630\u0627\u062a \u062e\u0648\u062f \u0627\u0635\u0644 \u0645\u06cc\u06ba \u062a\u06cc\u0646 \u0627\u062c\u0632\u0627\u0621 \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2: \u0633\u0631\u062e\u060c \u0633\u0628\u0632 \u0627\u0648\u0631 \u0646\u06cc\u0644\u06cc \u0642\u062f\u0631\u06cc\u06ba (\u062c\u0633\u06d2 \u0622\u0631 \u062c\u06cc \u0628\u06cc \u0648\u06cc\u0644\u06cc\u0648\u0632 \u0628\u06be\u06cc \u06a9\u06c1\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2)\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/uploads\/covers\/6984c5b1feda93761574fcb1\/2fc2b555-265b-4d6a-8670-981e197c6566.svg\" alt=\"\u0622\u0631 \u062c\u06cc \u0628\u06cc \u0686\u06cc\u0646\u0644\" style=\"display:block;margin:0 auto\" width=\"1152\" height=\"288\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u06c1\u0631 R\u060c G\u060c \u0627\u0648\u0631 B \u0631\u0646\u06af \u06a9\u06cc \u0642\u062f\u0631 0 \u0633\u06d2 255 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0627\u06cc\u06a9 8 \u0628\u0679 \u0627\u0646\u0679\u06cc\u062c\u0631 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u060c \u062c\u0633 \u0645\u06cc\u06ba \u0633\u0631\u062e\u060c \u0633\u0628\u0632\u060c \u06cc\u0627 \u0646\u06cc\u0644\u06d2 \u0631\u0646\u06af \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0634\u062f\u062a \u06a9\u06cc \u0646\u0645\u0627\u0626\u0646\u062f\u06af\u06cc \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0646\u0645\u0628\u0631 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700592_945_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"uint8 \u0631\u0646\u06af\u06cc\u0646 \u0686\u06cc\u0646\u0644\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"384\" loading=\"lazy\" title=\"\"><\/p>\n<p>R\u060c G\u060c \u0627\u0648\u0631 B \u0627\u062c\u0632\u0627\u0621 \u0645\u06cc\u06ba \u0633\u06d2 \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u06cc \u0637\u0627\u0642\u062a \u06a9\u0648 \u0645\u0644\u0627 \u06a9\u0631\u060c \u06c1\u0645 \u0631\u0646\u06af\u06cc\u0646 \u0633\u067e\u06cc\u06a9\u0679\u0631\u0645 \u0645\u06cc\u06ba \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0631\u0646\u06af \u06a9\u06cc \u0646\u0645\u0627\u0626\u0646\u062f\u06af\u06cc \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700592_802_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u0622\u0631\u062c\u06cc\u0628\u06cc \u06a9\u0644\u0631 \u0648\u06cc\u0644\u06cc\u0648 \u06a9\u06cc \u0645\u062b\u0627\u0644\" style=\"display:block;margin:0 auto\" width=\"1152\" height=\"1152\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0644\u06c1\u0630\u0627 \u06c1\u0631 \u067e\u06a9\u0633\u0644 \u06a9\u0648 3 \u0628\u0627\u0626\u0679\u0633 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u06c1\u0631 R, G, B \u0631\u0646\u06af \u06a9\u06cc \u0642\u062f\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 1 \u0628\u0627\u0626\u0679 (1 \u0628\u0627\u0626\u0679 = 8 \u0628\u0679\u0633) \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u0644\u06c1\u0630\u0627 \u0627\u06cc\u06a9 4K \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba ~25 MB \u0688\u06cc\u0679\u0627 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/uploads\/covers\/6984c5b1feda93761574fcb1\/2fc2b555-265b-4d6a-8670-981e197c6566.svg\" alt=\"\u0622\u0631 \u062c\u06cc \u0628\u06cc \u0686\u06cc\u0646\u0644\" style=\"display:block;margin:0 auto\" width=\"1152\" height=\"288\" loading=\"lazy\" title=\"\"><\/p>\n<p>30 \u0641\u0631\u06cc\u0645 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 (\u0627\u06cc\u06a9 \u0639\u0627\u0645 \u0641\u0631\u06cc\u0645 \u0631\u06cc\u0679) \u067e\u0631\u060c \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0627\u06cc\u06a9 \u06af\u06be\u0646\u0679\u06c1 4K \u0648\u06cc\u0688\u06cc\u0648 \u0645\u0645\u06a9\u0646 \u06c1\u06d2\u06d4 <strong>746 \u062c\u06cc \u0628\u06cc \u0688\u06cc\u0679\u0627<\/strong>. \u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u06a9\u0628\u06be\u06cc \u06a9\u0648\u0626\u06cc \u0628\u0691\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u06cc \u06c1\u06d2 \u06cc\u0627 \u0627\u067e\u0646\u06d2 \u0641\u0648\u0646 \u06a9\u06d2 \u06a9\u06cc\u0645\u0631\u06d2 \u0633\u06d2 HD \u0648\u06cc\u0688\u06cc\u0648 \u0631\u06cc\u06a9\u0627\u0631\u0688 \u06a9\u06cc \u06c1\u06d2\u060c \u062a\u0648 \u0622\u067e \u062c\u0627\u0646\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u06cc\u06ba \u0628\u0691\u06cc \u06c1\u0648 \u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u0648\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4 <em>\u06a9\u06c1<\/em> \u062c\u0633\u0627\u0645\u062a \u0645\u06cc\u06ba \u0628\u0691\u0627\u06d4<\/p>\n<p>\u062f\u0631\u062d\u0642\u06cc\u0642\u062a\u060c \u062d\u0642\u06cc\u0642\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0632 \u062c\u0648 \u0622\u067e \u06cc\u0648\u0679\u06cc\u0648\u0628 \u067e\u0631 \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u067e\u0646\u06d2 \u0641\u0648\u0646 \u06a9\u06d2 \u06a9\u06cc\u0645\u0631\u06d2 \u0633\u06d2 \u0631\u06cc\u06a9\u0627\u0631\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u06cc\u0627 \u0627\u0646\u0679\u0631\u0646\u06cc\u0679 \u0633\u06d2 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0646 \u0633\u06d2 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 100 \u06af\u0646\u0627 \u0686\u06be\u0648\u0679\u06cc \u06c1\u06cc\u06ba\u06d4 \u0627\u0635\u0644 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644 \u0628\u06c1\u062a \u0686\u06be\u0648\u0679\u06cc \u06a9\u06cc\u0648\u06ba \u06c1\u06d2\u061f <em>\u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646<\/em>\u06cc\u06c1 \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u06a9\u0627 \u0627\u06cc\u06a9 \u0627\u0646\u062a\u06c1\u0627\u0626\u06cc \u0646\u0641\u06cc\u0633 \u0633\u0648\u06cc\u0679 \u06c1\u06d2 \u062c\u0648 \u0688\u06cc\u0679\u0627 \u06a9\u0648 ~100x \u062a\u06a9 \u06a9\u0645 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u06a9\u06d2 \u0628\u063a\u06cc\u0631\u060c \u0622\u067e \u062c\u062f\u06cc\u062f \u062a\u0631\u06cc\u0646 \u06c1\u0627\u0626\u06cc \u0627\u06cc\u0646\u0688 \u0633\u0645\u0627\u0631\u0679 \u0641\u0648\u0646\u0632 \u067e\u0631 10 \u0645\u0646\u0679 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0631\u06cc\u06a9\u0627\u0631\u0688 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u067e\u0627\u0626\u06cc\u06ba \u06af\u06d2\u060c \u0627\u0648\u0631 \u0646\u06c1 \u06c1\u06cc \u0622\u067e \u0627\u0633\u06d2 \u06c1\u0627\u0626\u06cc \u0627\u06cc\u0646\u0688 \u06c1\u0648\u0645 \u0627\u0646\u0679\u0631\u0646\u06cc\u0679 \u06a9\u0646\u06a9\u0634\u0646 \u067e\u0631 HD \u0645\u06cc\u06ba \u0633\u0679\u0631\u06cc\u0645 \u06a9\u0631 \u0633\u06a9\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0633\u06d2 \u06a9\u0648\u0626\u06cc \u0641\u0631\u0642 \u0646\u06c1\u06cc\u06ba \u067e\u0691\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u06d2 \u062c\u062f\u06cc\u062f \u0622\u0644\u0627\u062a \u0627\u0648\u0631 \u0627\u0646\u0679\u0631\u0646\u06cc\u0679 \u06a9\u0646\u06cc\u06a9\u0634\u0646 \u06a9\u062a\u0646\u06d2 \u06c1\u06cc \u0646\u0641\u06cc\u0633 \u06a9\u06cc\u0648\u06ba \u0646\u06c1 \u06c1\u0648\u06ba\u060c \u0622\u067e \u062c\u0627\u0631\u062d\u0627\u0646\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 HD \u0645\u06cc\u06ba \u06a9\u0686\u06be \u0628\u06be\u06cc \u0646\u06c1\u06cc\u06ba \u062f\u06cc\u06a9\u06be \u0633\u06a9\u06cc\u06ba \u06af\u06d2\u060c \u0631\u06cc\u06a9\u0627\u0631\u0688 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u06cc\u06ba \u06af\u06d2 \u06cc\u0627 \u0627\u0633 \u06a9\u0648 \u0627\u0633\u0679\u0631\u06cc\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<h3 id=\"heading-codecs\">\u06a9\u0648\u0688\u06cc\u06a9<\/h3>\n<p>\u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba <em>\u06a9\u0648\u0688\u06cc\u06a9<\/em> \u06cc\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0641\u06cc\u0646\u0633\u06cc \u0644\u0641\u0638 \u06c1\u06d2\u06d4 \u06a9\u0626\u06cc \u0642\u0627\u0626\u0645 \u06a9\u0631\u062f\u06c1 \u06a9\u0648\u0688\u06cc\u06a9\u0633\/\u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u06c1\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><code>h264<\/code>: \u06cc\u06c1 \u0633\u0628 \u0633\u06d2 \u0639\u0627\u0645 \u06a9\u0648\u0688\u06cc\u06a9 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 mp4 \u0641\u0627\u0626\u0644 \u0646\u0638\u0631 \u0622\u062a\u06cc \u06c1\u06d2\u060c \u062a\u0648 \u06cc\u06c1 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0645\u0645\u06a9\u0646\u06c1 \u0637\u0648\u0631 \u067e\u0631 h264 \u06a9\u0648\u0688\u06cc\u06a9 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0631\u06c1\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>vp9<\/code>: \u0627\u06cc\u06a9 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u06a9\u0648\u0688\u06cc\u06a9 \u062c\u0648 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 YouTube \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0627\u0646\u0641\u0631\u0646\u0633\u0646\u06af \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0648 \u0627\u06a9\u062b\u0631 webm \u0641\u0627\u0626\u0644\u0648\u06ba \u0645\u06cc\u06ba \u067e\u0627\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>av1<\/code>: \u0627\u06cc\u06a9 \u0646\u06cc\u0627 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u06a9\u0648\u0688\u06cc\u06a9 \u062c\u0648 YouTube \u0627\u0648\u0631 Netflix \u062c\u06cc\u0633\u06d2 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645\u0632 \u067e\u0631 \u062a\u06cc\u0632\u06cc \u0633\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u06cc\u06c1 \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u062a\u0646\u0627 \u067e\u06cc\u0686\u06cc\u062f\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u0627\u0633 \u06c1\u06cc\u0646\u0688 \u0628\u06a9 \u06a9\u06d2 \u062f\u0627\u0626\u0631\u06c1 \u06a9\u0627\u0631 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u06c1\u06d2\u06d4 \u0644\u06cc\u06a9\u0646 \u0627\u06cc\u06a9 \u0628\u06c1\u062a \u06c1\u06cc \u0627\u0639\u0644\u06cc \u0633\u0637\u062d \u067e\u0631\u060c \u06cc\u06c1 \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0633 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u06a9\u0686\u06be \u0627\u06c1\u0645 \u0637\u0631\u06cc\u0642\u06d2 \u06cc\u06c1 \u06c1\u06cc\u06ba:<\/p>\n<h4 id=\"heading-removing-detail\">\u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u0648 \u062d\u0630\u0641 \u06a9\u0631\u06cc\u06ba\u06d4<\/h4>\n<p>\u06cc\u06c1 \u062a\u0645\u0627\u0645 \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 &quot;\u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u0648 \u06c1\u0679\u0627\u0646\u06d2&#8221; \u06a9\u06d2 \u0644\u06cc\u06d2 Discrete Cosine Transform \u0646\u0627\u0645\u06cc \u062a\u06a9\u0646\u06cc\u06a9 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u062c\u0628 \u0622\u067e \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u0633\u06d2 &quot;\u062a\u0641\u0635\u06cc\u0644&#8221; \u06a9\u0648 \u06c1\u0679\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0641\u0631\u06cc\u0645 &quot;\u0632\u06cc\u0627\u062f\u06c1 \u062f\u06be\u0646\u062f\u0644\u0627&#8221; \u0646\u0638\u0631 \u0622\u0646\u06d2 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0679\u06cc\u06a9\u0646\u0627\u0644\u0648\u062c\u06cc \u0627\u062a\u0646\u06cc \u0645\u0648\u062b\u0631 \u06c1\u06d2 \u06a9\u06c1 \u0627\u0646\u0633\u0627\u0646\u06cc \u0622\u0646\u06a9\u06be \u0645\u06cc\u06ba \u0641\u0631\u0642 \u0646\u0638\u0631 \u0622\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u0648 10 \u0628\u0627\u0631 \u062a\u06a9 \u06a9\u0645\u067e\u0631\u06cc\u0633 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u062c\u0627\u0646\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u06a9\u0645\u067e\u06cc\u0648\u0679\u0631 \u0641\u0627\u0626\u0644 \u06a9\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06a9\u06c1 DCT \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700592_800_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u0648 \u06c1\u0679\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 DCT \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645\" style=\"display:block;margin:0 auto\" width=\"1920\" height=\"480\" loading=\"lazy\" title=\"\"><\/p>\n<h4 id=\"heading-encoding-frame-differences\">\u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u0641\u0631\u06cc\u0645 \u0641\u0631\u0642<\/h4>\n<p>\u062f\u0631\u062d\u0642\u06cc\u0642\u062a\u060c \u0627\u06af\u0631 \u0622\u067e \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u06cc \u0627\u06cc\u06a9 \u0633\u06cc\u0631\u06cc\u0632 \u06a9\u0648 \u062f\u06cc\u06a9\u06be\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2 \u06a9\u06c1 \u0648\u06c1 \u0628\u0635\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0628\u06c1\u062a \u0645\u0644\u062a\u06d2 \u062c\u0644\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u0633 \u0645\u06cc\u06ba \u062d\u0631\u06a9\u062a \u06a9\u06cc \u0688\u06af\u0631\u06cc \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0635\u0631\u0641 \u0686\u06be\u0648\u0679\u06d2 \u062d\u0635\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u06a9\u0648\u0688\u06cc\u06a9\/\u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u0635\u0631\u0641 \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0641\u0631\u0642 \u06a9\u0648 \u0627\u0646\u06a9\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u062f\u06cc\u062f \u062a\u0631\u06cc\u0646 \u0631\u06cc\u0627\u0636\u06cc \u0627\u0648\u0631 \u06a9\u0645\u067e\u06cc\u0648\u0679\u0631 \u0648\u06cc\u0698\u0646 \u062a\u06a9\u0646\u06cc\u06a9\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700592_948_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u0641\u0631\u06cc\u0645 \u0641\u0631\u0642\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"288\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0644\u06c1\u0630\u0627 \u0622\u067e \u06a9\u0648 \u0635\u0631\u0641 \u067e\u06c1\u0644\u0627 \u0641\u0631\u06cc\u0645 \u0628\u06be\u06cc\u062c\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 (a)\u06d4 <em>\u06a9\u0644\u06cc\u062f\u06cc \u0641\u0631\u06cc\u0645<\/em>) &#8211; \u067e\u06be\u0631 \u0622\u067e &quot;\u0641\u0631\u06cc\u0645 \u0641\u0631\u0642&#8221; \u0628\u06be\u06cc\u062c \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u0633\u06d2 &quot;\u0641\u0631\u06cc\u0645 \u0641\u0631\u0642&#8221; \u0628\u06be\u06cc \u06a9\u06c1\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0628\u0639\u062f \u06a9\u06d2 \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4 <em>\u0688\u06cc\u0644\u0679\u0627 \u0641\u0631\u06cc\u0645<\/em>\u06c1\u0631 \u067e\u0648\u0631\u06d2 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u0634\u06a9\u06cc\u0644 \u062f\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700592_790_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u06a9\u0644\u06cc\u062f\u06cc \u0641\u0631\u06cc\u0645 \u0627\u0648\u0631 \u0688\u06cc\u0644\u0679\u0627 \u0641\u0631\u06cc\u0645\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"288\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u062d\u0642\u06cc\u0642\u062a \u0645\u06cc\u06ba\u060c \u0627\u06cc\u06a9 \u06af\u06be\u0646\u0679\u06c1 \u0637\u0648\u06cc\u0644 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631\u060c \u0622\u067e \u0635\u0631\u0641 \u067e\u06c1\u0644\u06d2 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u0627\u0646\u06a9\u0648\u0688 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0644\u0627\u06a9\u06be\u0648\u06ba \u0688\u06cc\u0644\u0679\u0627 \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u0648 \u0630\u062e\u06cc\u0631\u06c1 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u06c1\u0631 60\u0648\u06cc\u06ba \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u06a9\u0644\u06cc\u062f\u06cc \u0641\u0631\u06cc\u0645 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0646\u06a9\u0648\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u06af\u0644\u06d2 59 \u0641\u0631\u06cc\u0645 \u0688\u06cc\u0644\u0679\u0627 \u0641\u0631\u06cc\u0645 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u0679\u06a9\u0646\u0627\u0644\u0648\u062c\u06cc \u0628\u06be\u06cc \u0628\u06c1\u062a \u0645\u0648\u062b\u0631 \u06c1\u06d2\u060c 10 \u06a9\u06d2 \u0641\u06cc\u06a9\u0679\u0631 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u06a9\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 <em>\u06a9\u0644\u06cc\u062f\u06cc \u0641\u0631\u06cc\u0645<\/em> \u0627\u0648\u0631 <em>\u0688\u06cc\u0644\u0679\u0627 \u0641\u0631\u06cc\u0645<\/em> \u06cc\u06c1 &quot;\u06cc\u06c1 \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba&#8221; \u06a9\u06d2 \u0686\u0646\u062f \u062d\u0635\u0648\u06ba \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06c1\u06d2 \u062c\u0648 \u0622\u067e \u06a9\u0648 \u0648\u0627\u0642\u0639\u06cc \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0646 \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u0627\u0648\u0631 \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u062a\u06a9\u0646\u06cc\u06a9 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0628\u06c1\u062a \u0633\u06cc \u062f\u06cc\u06af\u0631 \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06c1\u06cc\u06ba \u062c\u0648 \u0627\u0633 \u062a\u0639\u0627\u0631\u0641\u06cc \u0645\u0636\u0645\u0648\u0646 \u06a9\u06d2 \u062f\u0627\u0626\u0631\u06c1 \u06a9\u0627\u0631 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-encoding-amp-decoding\">\u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u0627\u0648\u0631 \u0688\u06cc \u06a9\u0648\u0688\u0646\u06af<\/h3>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u06a9\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u06a9\u0648 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0633 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 (\u062e\u0627\u0645 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0633\u0688 \u0628\u0627\u0626\u0646\u0631\u06cc \u0688\u06cc\u0679\u0627 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba) \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0688\u06cc\u06a9\u0645\u067e\u0631\u06cc\u0633 \u06a9\u0631\u06cc\u06ba (\u06a9\u0645\u067e\u0631\u06cc\u0633\u0688 \u0628\u0627\u0626\u0646\u0631\u06cc \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062e\u0627\u0645 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba)\u06d4<\/p>\n<p>\u062e\u0627\u0645 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0633\u0688 \u0628\u0627\u0626\u0646\u0631\u06cc \u0688\u06cc\u0679\u0627 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0645\u0637\u0627\u0644\u0628\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <em>\u0627\u0646\u06a9\u0648\u0688\u0646\u06af<\/em>\u06a9\u0645\u067e\u0631\u06cc\u0633\u0688 \u0628\u0627\u0626\u0646\u0631\u06cc \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u062e\u0627\u0645 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0622\u067e\u0631\u06cc\u0634\u0646 \u06a9\u06c1\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 <em>\u0636\u0627\u0628\u0637\u06c1 \u06a9\u0634\u0627\u0626\u06cc<\/em> \u0644\u0641\u0638 <em>\u06a9\u0648\u0688\u06cc\u06a9<\/em> &quot;\u0627\u0646\u06a9\u0648\u0688 \u0688\u06cc\u06a9\u0648\u0688&#8221; \u06a9\u0627 \u0645\u062e\u0641\u0641\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700592_583_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631 \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u06a9\u0648\u0688\u0631\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"384\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0627\u06cc\u06a9 \u0639\u0645\u0644\u06cc \u0688\u0648\u06cc\u0644\u067e\u0631 \u06a9\u06d2 \u0646\u0642\u0637\u06c1 \u0646\u0638\u0631 \u0633\u06d2\u060c \u0622\u067e \u06a9\u0648 \u06cc\u06c1 \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u06a9\u0648\u0688\u06cc\u06a9\u0633 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u0622\u067e \u06a9\u0648 \u062f\u0631\u062c \u0630\u06cc\u0644 \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2:<\/p>\n<ol>\n<li>\n<p>\u0645\u062e\u062a\u0644\u0641 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648\u0688\u06cc\u06a9\u0633 \u06c1\u06cc\u06ba\u060c \u0628\u0634\u0645\u0648\u0644: <code>h264<\/code>, <code>vp9<\/code>\u0627\u0648\u0631 <code>av1<\/code><\/p>\n<\/li>\n<li>\n<p>\u06a9\u0648\u0688\u06cc\u06a9 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a\u060c \u062c\u06cc\u0633\u06d2 <code>h264<\/code>)\u060c \u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u0686\u0644\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0644\u06cc\u0626\u0631 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 \u062c\u0648 \u0627\u0633\u06cc \u06a9\u0648\u0688\u06cc\u06a9 \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631 \u0633\u06a9\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc \u06a9\u0648\u0688\u0646\u06af \u0633\u06d2 \u06a9\u06c1\u06cc\u06ba \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u0645\u067e\u06cc\u0648\u0679\u0646\u06af \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0628\u062c\u0679 \u0641\u0648\u0646 \u067e\u0631 4K \u0648\u06cc\u0688\u06cc\u0648 \u0686\u0644\u0627\u0646\u0627 \u0679\u06be\u06cc\u06a9 \u0631\u06c1\u06d2 \u06af\u0627\u060c \u0644\u06cc\u06a9\u0646 4K \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u06a9\u0631\u0646\u0627 \u0628\u06c1\u062a \u0633\u0633\u062a \u06c1\u0648\u06af\u0627\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u06d2 \u0622\u0644\u0627\u062a (\u0633\u06cc\u0644 \u0641\u0648\u0646\u0632\u060c \u0644\u06cc\u067e \u0679\u0627\u067e\u0633) \u0645\u06cc\u06ba \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u0627\u0648\u0631 \u0688\u06cc \u06a9\u0648\u0688\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u0631\u062f\u06c1 \u062e\u0635\u0648\u0635\u06cc \u0686\u067e\u0633 \u06c1\u0648\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u062c\u0648 \u0627\u06cc\u06a9 \u0628\u0627\u0642\u0627\u0639\u062f\u06c1 \u0633\u0627\u0641\u0679 \u0648\u06cc\u0626\u0631 \u067e\u0631\u0648\u06af\u0631\u0627\u0645 \u06a9\u06cc \u0637\u0631\u062d CPU \u067e\u0631 \u0686\u0644\u0646\u06d2 \u06a9\u06d2 \u0645\u0642\u0627\u0628\u0644\u06d2 \u0645\u06cc\u06ba \u0627\u0646\u06a9\u0648\u0688\u0646\u06af\/\u0688\u06cc \u06a9\u0648\u0688\u0646\u06af \u06a9\u0648 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u06cc\u0632 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0627\u0633\u06d2 \u06a9\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <em>\u06c1\u0627\u0631\u0688 \u0648\u06cc\u0626\u0631 \u0627\u06cc\u06a9\u0633\u0644\u0631\u06cc\u0634\u0646\u06d4<\/em><\/p>\n<\/li>\n<\/ol>\n<p>\u062d\u0642\u06cc\u0642\u062a \u0645\u06cc\u06ba\u060c \u0635\u0631\u0641 \u0686\u0646\u062f \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648\u0688\u06cc\u06a9\u0633 \u0645\u0648\u062c\u0648\u062f \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0622\u0626\u06cc \u0641\u0648\u0646 \u067e\u0631 \u0631\u06cc\u06a9\u0627\u0631\u0688 \u06a9\u06cc \u06af\u0626\u06cc \u0648\u06cc\u0688\u06cc\u0648\u0632 \u06a9\u0648 \u0648\u0646\u0688\u0648\u0632 \u0688\u06cc\u0648\u0627\u0626\u0633\u0632 \u067e\u0631 \u0686\u0644\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u062f\u0646\u06cc\u0627 \u06a9\u0648 \u0627\u06cc\u06a9 \u0645\u0639\u06cc\u0627\u0631 \u067e\u0631 \u0645\u062a\u0641\u0642 \u06c1\u0648\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-containers\">\u06a9\u0646\u0679\u06cc\u0646\u0631<\/h3>\n<p>\u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0644\u0648\u06af\u0648\u06ba \u0646\u06d2 \u0627\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u06a9\u0628\u06be\u06cc \u0646\u06c1\u06cc\u06ba \u0633\u0646\u0627 \u06c1\u06d2\u06d4 <code>h264<\/code> \u06cc\u0627 <code>vp9<\/code>. \u062c\u0628 \u0622\u067e \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0633\u0648\u0686\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 MP4 \u06cc\u0627 MKV \u062c\u06cc\u0633\u06d2 \u0641\u0627\u0626\u0644 \u0641\u0627\u0631\u0645\u06cc\u0679\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0633\u0648\u0686\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0628\u06be\u06cc \u0645\u062a\u0639\u0644\u0642\u06c1 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0644\u06af \u0627\u0644\u06af \u0686\u06cc\u0632\u06cc\u06ba \u062c\u0646\u06c1\u06cc\u06ba \u06a9\u0646\u0679\u06cc\u0646\u0631\u0632 \u06a9\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0648\u06ba \u0645\u06cc\u06ba \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0622\u0688\u06cc\u0648\u060c \u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648\u060c \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0645\u06cc\u0679\u0627 \u0688\u06cc\u0679\u0627 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0641\u0627\u0631\u0645\u06cc\u0679\u060c \u062c\u06cc\u0633\u06d2 MP4\u060c \u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0622\u0688\u06cc\u0648 \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u0679\u0627 \u0627\u0648\u0631 \u0645\u06cc\u0679\u0627 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u062e\u0635\u0648\u0635 \u0641\u0627\u0631\u0645\u06cc\u0679 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700592_823_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0646\u0679\u06cc\u0646\u0631\" style=\"display:block;margin:0 auto\" width=\"624\" height=\"720\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u0633\u0648\u0641\u0679 \u0648\u06cc\u0626\u0631 \u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0622\u0688\u06cc\u0648\/\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0648\u0631 \u0645\u06cc\u0679\u0627 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u0641\u0627\u0626\u0644 \u06a9\u06cc \u0634\u06a9\u0644\/\u062a\u0635\u0631\u06cc\u062d\u0627\u062a \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0641\u0627\u0626\u0644\u0648\u06ba \u0645\u06cc\u06ba \u0627\u0633\u0679\u0648\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633\u06d2 \u06a9\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <em>\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af\u06d4<\/em><\/p>\n<p>\u0627\u0633\u06cc \u0637\u0631\u062d\u060c \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0644\u06cc\u0626\u0631\u0632 \u0645\u06cc\u0679\u0627 \u0688\u06cc\u0679\u0627 \u067e\u0691\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0641\u0627\u0626\u0644 \u0641\u0627\u0631\u0645\u06cc\u0679 \u06a9\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0622\u0688\u06cc\u0648\/\u0648\u06cc\u0688\u06cc\u0648 \u062a\u0644\u0627\u0634 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633\u06d2 \u06a9\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <em>\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af<\/em>.<\/p>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0633 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0622\u067e \u06a9\u0648 \u062f\u0648\u0646\u0648\u06ba \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 <em>\u0627\u0646\u06a9\u0648\u0688<\/em> \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be <em>\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0631<\/em> (\u0627\u0633 \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u06ba)\u06d4 \u06cc\u06c1 \u0639\u0645\u0644 \u0645\u06cc\u06ba \u062f\u0648 \u0627\u0644\u06af \u0627\u0644\u06af \u0645\u0631\u0627\u062d\u0644 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633\u06cc \u0637\u0631\u062d\u060c \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0686\u0644\u0627\u062a\u06d2 \u0648\u0642\u062a \u062f\u0648\u0646\u0648\u06ba \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 <em>\u0688\u06cc\u0645\u0648<\/em> \u0648\u06c1 \u0627\u0648\u0631 \u067e\u06be\u0631 <em>\u06a9\u06be\u0648\u0644\u0646\u0627<\/em> (\u0627\u0633 \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u06ba)\u06d4<\/p>\n<p>\u062c\u0628 \u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0644\u06cc\u0626\u0631 \u0627\u06cc\u06a9 mp4 \u0641\u0627\u0626\u0644 \u06a9\u06be\u0648\u0644\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0645\u0646\u0637\u0642 \u06a9\u0627 \u0628\u06c1\u0627\u0624 \u0627\u0633 \u0637\u0631\u062d \u06c1\u0648\u062a\u0627 \u06c1\u06d2:<\/p>\n<ul>\n<li>\n<p>\u0679\u06be\u06cc\u06a9 \u06c1\u06d2 \u0641\u0627\u0626\u0644 .mp4 \u067e\u0631 \u062e\u062a\u0645 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u06cc\u06c1 \u0627\u06cc\u06a9 mp4 \u0641\u0627\u0626\u0644 \u06c1\u0648\u0646\u06cc \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u0622\u0626\u06cc\u06d2 mp4 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u067e\u0627\u0631\u0633 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u060c \u0641\u0627\u0626\u0644 \u06a9\u0648 \u067e\u0627\u0631\u0633 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0631 \u067e\u06be\u0631 \u0627\u0633\u06d2 \u067e\u0627\u0631\u0633 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0628\u06c1\u062a\u0631\u06cc\u0646 \u0645\u06cc\u06ba \u0646\u06d2 mp4 \u0641\u0627\u0626\u0644 \u06a9\u0648 \u067e\u0627\u0631\u0633 \u06a9\u06cc\u0627\u06d4 \u0627\u0628 \u06c1\u0645\u0627\u0631\u06d2 \u067e\u0627\u0633 \u0645\u06cc\u0679\u0627 \u0688\u06cc\u0679\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06c1\u0645 \u062c\u0627\u0646\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0622\u0688\u06cc\u0648 \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0627\u0626\u0679 \u0622\u0641\u0633\u06cc\u0679 \u06a9\u06c1\u0627\u06ba \u0633\u06d2 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u0633\u06d2 \u067e\u06c1\u0644\u0627 \u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u0645\u0644\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633\u06d2 \u0688\u06cc \u06a9\u0648\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0635\u0627\u0631\u0641 \u06a9\u0648 \u0688\u06cc \u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u062f\u06a9\u06be\u0627\u0646\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u06af\u0631 \u0622\u067e \u06a9\u0627 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0644\u06cc\u0626\u0631 \u06cc\u06c1 \u067e\u06cc\u063a\u0627\u0645 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 &quot;\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644 \u06a9\u0631\u067e\u0679\u0688 \u06c1\u06d2&#8221;\u060c \u0627\u0633 \u0628\u0627\u062a \u06a9\u0627 \u0632\u06cc\u0627\u062f\u06c1 \u0627\u0645\u06a9\u0627\u0646 \u06c1\u06d2 \u06a9\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644 \u0641\u0627\u0626\u0644 \u0641\u0627\u0631\u0645\u06cc\u0679 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a\u0648\u06ba \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u067e\u0627\u0631\u0633\/\u0688\u06cc\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0627\u06cc\u06a9 \u062e\u0631\u0627\u0628\u06cc \u0648\u0627\u0642\u0639 \u06c1\u0648\u0626\u06cc \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-what-is-webcodecs\">\u0648\u06cc\u0628 \u06a9\u0648\u0688\u06cc\u06a9 \u06a9\u06cc\u0627 \u06c1\u06d2\u061f<\/h2>\n<p>\u0627\u0628 \u062c\u0628\u06a9\u06c1 \u06c1\u0645 \u0646\u06d2 \u06a9\u0648\u0688\u06cc\u06a9 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631 \u0644\u06cc\u0627 \u06c1\u06d2\u060c \u0622\u0626\u06cc\u06d2 \u0627\u0633\u06d2 \u0648\u06cc\u0628 \u067e\u0631 \u0688\u0627\u0644\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700592_179_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u0648\u06cc\u0628 \u06a9\u0648\u0688\u06cc\u06a9\u0633 = \u0648\u06cc\u0628 + \u06a9\u0648\u0688\u06cc\u06a9\u0633\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"288\" loading=\"lazy\" title=\"\"><\/p>\n<p>WebCodecs \u0627\u06cc\u06a9 API \u06c1\u06d2 \u062c\u0648 \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u0688\u0648\u06cc\u0644\u067e\u0631\u0632 \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0627\u0646\u062a\u06c1\u0627\u0626\u06cc \u06a9\u0645 \u0633\u0637\u062d \u06a9\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644 (\u0627\u06cc\u06a9 \u0641\u0631\u06cc\u0645 \u0628\u06c1 \u0641\u0631\u06cc\u0645 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u067e\u0631 \u0627\u0646\u06a9\u0648\u0688\/\u0688\u06cc \u06a9\u0648\u0688) \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0645\u0624\u062b\u0631 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0627\u0646\u06a9\u0648\u0688 \u0627\u0648\u0631 \u0688\u06cc \u06a9\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06c1\u0627\u0631\u0688\u0648\u06cc\u0626\u0631 \u0627\u06cc\u06a9\u0633\u0644\u0631\u06cc\u0634\u0646 \u0628\u0679 \u0627\u06c1\u0645 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u0635\u0631\u0641 \u067e\u0648\u0644\u06cc \u06a9\u0648 \u0646\u06c1\u06cc\u06ba \u0628\u06be\u0631 \u0633\u06a9\u062a\u06d2 \u06cc\u0627 \u062e\u0648\u062f API \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0646\u0627\u0641\u0630 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u06d2\u06d4 WebCodecs \u0627\u0646\u06a9\u0648\u0688\u0646\u06af\/\u0688\u06cc \u06a9\u0648\u0688\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u062e\u0635\u0648\u0635\u06cc \u06c1\u0627\u0631\u0688 \u0648\u06cc\u0626\u0631 \u062a\u06a9 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0631\u0633\u0627\u0626\u06cc \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u06a9\u06d2 \u0688\u06cc\u0633\u06a9 \u0679\u0627\u067e \u0648\u06cc\u0688\u06cc\u0648 \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0627\u062a\u06be \u067e\u0631\u0641\u0627\u0631\u0645 \u0628\u06be\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-before-webcodecs\">\u0648\u06cc\u0628 \u06a9\u0648\u0688\u06cc\u06a9 \u0679\u0631\u0627\u0646\u0633\u0641\u0631<\/h3>\n<p>WebCodecs \u06a9\u06cc\u0648\u06ba \u0645\u0648\u062c\u0648\u062f \u06c1\u06cc\u06ba \u06cc\u06c1 \u0633\u0645\u062c\u06be\u0646\u06d2 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0644\u0645\u062d\u06c1 \u0644\u06af\u0627\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u06d2\u06d4 WebCodecs API \u06a9\u06d2 \u0645\u0648\u062c\u0648\u062f \u06c1\u0648\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0626\u06cc \u0645\u062a\u0628\u0627\u062f\u0644 \u062f\u0633\u062a\u06cc\u0627\u0628 \u062a\u06be\u06d2\u06d4<\/p>\n<ul>\n<li>\n<p>HTMLVideoElement: \u0622\u067e \u0627\u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc \u06a9\u0648\u0688\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0641\u0631\u06cc\u0645 \u0644\u06cc\u0648\u0644 \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u0627 \u0641\u0642\u062f\u0627\u0646 \u06c1\u06d2\u06d4 \u0648\u0627\u062d\u062f \u06a9\u0646\u0679\u0631\u0648\u0644 &#8216;video.currentTime&#8217; \u067e\u0631\u0627\u067e\u0631\u0679\u06cc \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0646\u0627 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0628\u0627\u0632\u06cc\u0627\u0641\u062a \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0627\u0646\u062a\u0638\u0627\u0631 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u060c \u062c\u0633 \u06a9\u06d2 \u0646\u062a\u06cc\u062c\u06d2 \u0645\u06cc\u06ba \u0627\u06a9\u062b\u0631 \u0641\u0631\u06cc\u0645 \u06af\u0631 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u06cc\u0627 \u063a\u0627\u0626\u0628 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0645\u06cc\u0688\u06cc\u0627 \u0631\u06cc\u06a9\u0627\u0631\u0688\u0631 API: \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0622\u067e \u06a9\u0648 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u06a9\u06cc\u0646\u0648\u0633 \u0639\u0646\u0635\u0631 \u06cc\u0627 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u0633\u0679\u0631\u06cc\u0645 \u06a9\u0648 &#8216;\u0627\u0633\u06a9\u0631\u06cc\u0646 \u0631\u06cc\u06a9\u0627\u0631\u0688&#8217; \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0631\u06cc\u0646\u0688\u0631 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0631\u06cc\u06a9\u0627\u0631\u0688\u0646\u06af Adobe Premeire pro \u06a9\u06d2 \u0628\u0631\u0627\u0628\u0631 \u06c1\u06d2\u06d4 \u0645\u0646\u0638\u0631\u0646\u0627\u0645\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0641\u0631\u06cc\u0645 \u06a9\u06cc \u0633\u0637\u062d \u06a9\u0627 \u06a9\u0646\u0679\u0631\u0648\u0644 \u062e\u062a\u0645 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631 \u0635\u0631\u0641 \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u06a9\u06cc \u0631\u0641\u062a\u0627\u0631 \u0633\u06d2 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u06cc \u062c\u0627 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>FFMPEG.js: ffmpeg \u06a9\u06cc \u0627\u06cc\u06a9 \u0628\u0646\u062f\u0631\u06af\u0627\u06c1\u060c \u0627\u06cc\u06a9 \u0645\u0642\u0628\u0648\u0644 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u0679\u0648\u0644 \u062c\u0648 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba ffmpeg \u0686\u0644\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0628\u06c1\u062a \u0633\u06d2 \u0679\u0648\u0644\u0632 \u0646\u06d2 \u0627\u0633\u06d2 \u0645\u0627\u0636\u06cc \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062a\u06be\u0627\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633 \u0645\u06cc\u06ba \u06c1\u0627\u0631\u0688\u0648\u06cc\u0626\u0631 \u0627\u06cc\u06a9\u0633\u0644\u0631\u06cc\u0634\u0646 \u06a9\u0627 \u0641\u0642\u062f\u0627\u0646 \u06c1\u06d2 \u0627\u0648\u0631 \u06cc\u06c1 WebCodecs \u0633\u06d2 \u0628\u06c1\u062a \u0633\u0633\u062a \u06c1\u06d2\u06d4 \u0645\u0632\u06cc\u062f \u0628\u0631\u0622\u06ba\u060c \u0686\u0648\u0646\u06a9\u06c1 \u06cc\u06c1 WebAssembly \u067e\u0631 \u0686\u0644\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0645\u06cc\u06ba \u0641\u0627\u0626\u0644 \u06a9\u06d2 \u0633\u0627\u0626\u0632 \u06a9\u06cc \u062d\u062f\u0648\u062f \u06c1\u06cc\u06ba\u060c \u062c\u0633 \u0633\u06d2 100MB \u0633\u06d2 \u0628\u0691\u06cc \u0648\u06cc\u0688\u06cc\u0648\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u0646\u0627 \u0645\u0634\u06a9\u0644 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>WebCodecs \u06a9\u0648 2021 \u0645\u06cc\u06ba \u0628\u0646\u0627\u06cc\u0627 \u0627\u0648\u0631 \u062c\u0627\u0631\u06cc \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627 \u062a\u0627\u06a9\u06c1 \u0646\u0686\u0644\u06cc \u0633\u0637\u062d\u060c \u06c1\u0627\u0631\u0688\u0648\u06cc\u0626\u0631 \u0633\u06d2 \u062a\u06cc\u0632 \u0631\u0641\u062a\u0627\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc \u06a9\u0648\u0688\u0646\u06af \u0627\u0648\u0631 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u06d2\u06d4 \u0627\u0639\u0644\u06cc \u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc \u0648\u0627\u0644\u06cc \u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062b\u0627\u0644\u06cc\u060c \u0627\u06cc\u0633\u06d2 \u06a9\u06cc\u0633\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u062c\u0648 \u0645\u0648\u062c\u0648\u062f\u06c1 APIs \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0627\u0686\u06be\u06cc \u0637\u0631\u062d \u0633\u06d2 \u067e\u06cc\u0634 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-core-api\">\u06a9\u0648\u0631 API<\/h3>\n<p>WebCodecs \u06a9\u0627 \u0628\u0646\u06cc\u0627\u062f\u06cc API \u062f\u0648 \u0646\u0626\u06cc &quot;\u0688\u06cc\u0679\u0627 \u0627\u0642\u0633\u0627\u0645&#8221; \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u06d2: <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> \u0627\u0648\u0631 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em>\u06c1\u0627\u06ba <em>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631<\/em> \u0627\u0648\u0631 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u06a9\u0648\u0688\u0631<\/em> \u0627\u0646\u0679\u0631\u0641\u06cc\u0633<\/p>\n<h4 id=\"heading-videoframe\">\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/h4>\n<p>\u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> \u0627\u06cc\u06a9 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u062a\u0635\u0648\u0631\u0627\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u06a9\u0633\u0644 \u0688\u06cc\u0679\u0627 \u0627\u0648\u0631 \u0645\u06cc\u0679\u0627 \u0688\u06cc\u0679\u0627 \u062f\u0648\u0646\u0648\u06ba \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/uploads\/covers\/6984c5b1feda93761574fcb1\/bd341249-fab6-4c76-85b4-dd21d8de10f6.svg\" alt=\"\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u0622\u0628\u062c\u06cc\u06a9\u0679\" style=\"display:block;margin:0 auto\" width=\"1920\" height=\"816\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0622\u067e \u0648\u0627\u0642\u0639\u06cc \u06a9\u0686\u06be \u0646\u06cc\u0627 \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> \u06a9\u0633\u06cc \u0628\u06be\u06cc \u062a\u0635\u0648\u06cc\u0631\u06cc \u0645\u0627\u062e\u0630 \u0633\u06d2 \u0627\u0634\u06cc\u0627\u0621\u060c \u0628\u0634\u0645\u0648\u0644 \u0645\u06cc\u0679\u0627 \u0688\u06cc\u0679\u0627:<\/p>\n<pre><code class=\"language-javascript\">const bitmapFrame = new VideoFrame(imgBitmap, {timestamp: 0});\n\nconst imageFrame = new VideoFrame(htmlImageEl, {timestamp: 0});\n\nconst videoFrame = new VideoFrame(htmlVideoEl, {timestamp: 0});\n\nconst canvasFrame = new VideoFrame(canvasEl, {timestamp: 0});\n<\/code><\/pre>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u0627\u06cc\u067e \u0645\u06cc\u06ba\u060c \u0622\u067e \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u067e\u0631 \u0627\u0645\u06cc\u062c \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u06a9\u0627 \u0622\u067e\u0631\u06cc\u0634\u0646 \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u0627\u0648\u0631 \u067e\u06be\u0631 \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u0628\u0627\u0632\u06cc\u0627\u0641\u062a \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631\u06d4<\/p>\n<p>\u062a\u0645 \u0628\u06be\u06cc <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> Canvas 2D \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631:<\/p>\n<pre><code class=\"language-typescript\">ctx.drawImage(frame, 0, 0);\n<\/code><\/pre>\n<p>\u0622\u067e \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0648\u06cc\u0688\u06cc\u0648 \u067e\u06cc\u0634 \u06a9\u0631\u062a\u06d2\/\u0686\u0644\u0627\u062a\u06d2 \u0648\u0642\u062a \u0627\u06cc\u0633\u0627 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h4 id=\"heading-encodedvideochunk\">\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/h4>\n<p>\u0646\u06c1\u06cc\u06ba <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u06cc\u06c1 \u0635\u0631\u0641 \u06a9\u0627 \u0627\u06cc\u06a9 \u06af\u0627\u0691\u06be\u0627 \u0648\u0631\u0698\u0646 \u06c1\u06d2\u06d4 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645\u060c<\/em> \u0627\u0633 \u0645\u06cc\u06ba \u0628\u0627\u0626\u0646\u0631\u06cc \u0688\u06cc\u0679\u0627 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0627\u062a\u06be \u0641\u0631\u06cc\u0645 \u06a9\u06d2 \u0628\u0631\u0627\u0628\u0631 \u0645\u06cc\u0679\u0627 \u0688\u06cc\u0679\u0627 \u0628\u06be\u06cc \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/uploads\/covers\/6984c5b1feda93761574fcb1\/d20b9306-03ae-48a8-b10a-f462f4a620e2.svg\" alt=\"\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2\" style=\"display:block;margin:0 auto\" width=\"1728\" height=\"816\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0622\u067e \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0633\u06d2 \u062c\u0648 \u0627\u0633\u06d2 \u0646\u06a9\u0627\u0644\u062a\u06cc \u06c1\u06d2\u06d4 <em>\u0641\u0627\u0626\u0644<\/em> \u0627\u0639\u062a\u0631\u0627\u0636<\/p>\n<pre><code class=\"language-typescript\">import { getVideoChunks } from 'webcodecs-utils'\n\nconst chunks = <encodedvideochunk> await getVideoChunks(<file> file);\n<\/file><\/encodedvideochunk><\/code><\/pre>\n<p>\u06cc\u0627 \u0622\u0624\u0679 \u067e\u0679 \u062c\u0633 \u0633\u06d2 \u0622\u067e \u062d\u0627\u0635\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba: <em>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631<\/em> \u0627\u0639\u062a\u0631\u0627\u0636<\/p>\n<p>\u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0641\u06cc\u062f \u0686\u06cc\u0632\u06cc\u06ba \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba \u062c\u0648 \u0622\u067e \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> &#8211; \u06cc\u06c1 \u0635\u0631\u0641 \u0628\u0627\u0626\u0646\u0631\u06cc \u0688\u06cc\u0679\u0627 \u06c1\u06d2 \u062c\u0633\u06d2 \u0622\u067e \u06a9\u0633\u06cc \u0641\u0627\u0626\u0644 \u0633\u06d2 \u067e\u0691\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0644\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u06cc\u0627 \u0627\u0646\u0679\u0631\u0646\u06cc\u0679 \u067e\u0631 \u0627\u0633\u0679\u0631\u06cc\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700593_919_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.gif\" alt=\"\u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u0627\u0648\u0631 \u0688\u06cc \u06a9\u0648\u0688\u0646\u06af \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0648\u06cc\u0688\u06cc\u0648 \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af\" style=\"display:block;margin:0 auto\" width=\"800\" height=\"560\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u06a9\u06cc \u0642\u062f\u0631 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u06cc\u06c1 \u0627\u0635\u0644 \u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u0679\u0627 \u0633\u06d2 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 100 \u06af\u0646\u0627 \u0686\u06be\u0648\u0679\u0627 \u06c1\u06d2\u06d4 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u062e\u0627\u0645 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06cc \u0628\u062c\u0627\u0626\u06d2 (\u0627\u0648\u0631 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0644\u06a9\u06be\u0646\u0627)\u06d4<\/p>\n<h4 id=\"heading-videoencoder\">\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631<\/h4>\n<p>\u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba <em>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631<\/em> \u06af\u0631\u062f\u0634 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> \u0627\u0639\u062a\u0631\u0627\u0636 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u0627\u0634\u06cc\u0627\u0621<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/uploads\/covers\/6984c5b1feda93761574fcb1\/612a6f6a-04c6-4f24-aebd-074f232cd06e.svg\" alt=\"\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"384\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc APIs \u06c1\u06cc\u06ba: \u06cc\u06c1 \u0648\u06c1 \u062c\u06af\u06c1 \u06c1\u06d2 \u062c\u06c1\u0627\u06ba \u06c1\u0645 \u06a9\u0627\u0644 \u0628\u06cc\u06a9 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631<\/em> \u0631\u067e\u0648\u0631\u0679 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u0627\u0634\u06cc\u0627\u0621<\/p>\n<pre><code class=\"language-typescript\">const encoder = new VideoEncoder({\n    output: function(chunk: EncodedVideoChunk, meta: any){\n        \/\/ Do something with the chunk\n    },\n    error: function(e: any)=> console.warn(e);\n});\n<\/code><\/pre>\n<p>\u0630\u06c1\u0646 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06cc\u06ba \u06a9\u06c1 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0645\u062a\u0636\u0627\u062f \u0639\u0645\u0644 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u06cc\u06c1 \u0628\u0627\u0642\u0627\u0639\u062f\u06c1 \u063a\u06cc\u0631 \u0645\u0637\u0627\u0628\u0642\u062a \u067e\u0630\u06cc\u0631 \u0639\u0645\u0644 \u0628\u06be\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0622\u067e \u0627\u0633\u06d2 \u0641\u0631\u06cc\u0645 \u0628\u06c1 \u0641\u0631\u06cc\u0645 \u0622\u067e\u0631\u06cc\u0634\u0646 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">\/\/ Does not work like this\nconst frame  = await encoder.encode(chunk);\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u062f\u0631\u0627\u0635\u0644 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0637\u0648\u0631 \u067e\u0631 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u0644\u06c1\u0630\u0627 \u0622\u067e \u06a9\u0648 \u06cc\u06c1 \u0642\u0628\u0648\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u0648\u06af\u0627 \u06a9\u06c1 \u0622\u0624\u0679 \u067e\u0679 \u06a9\u0627\u0644 \u0628\u06cc\u06a9 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0648\u0627\u067e\u0633 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u060c \u0627\u0648\u0631 \u062c\u0628 \u0622\u067e \u0627\u0633\u06d2 \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u062a\u0648 \u0622\u067e \u06a9\u0648 \u0622\u0624\u0679 \u067e\u0679 \u0645\u0644\u06d2 \u06af\u0627\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0627\u0646\u06a9\u0648\u0688\u0631 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0622\u067e \u062a\u0631\u062a\u06cc\u0628 \u062f\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <em>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631<\/em> \u0645\u0637\u0644\u0648\u0628\u06c1 \u06a9\u0648\u0688\u06cc\u06a9 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba (\u06c1\u0645 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0627\u0633 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u06cc\u06ba \u06af\u06d2) \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0627\u062a\u06be \u062f\u06cc\u06af\u0631 \u067e\u06cc\u0631\u0627\u0645\u06cc\u0679\u0631\u0632 \u062c\u06cc\u0633\u06d2 \u0686\u0648\u0691\u0627\u0626\u06cc\u060c \u0627\u0648\u0646\u0686\u0627\u0626\u06cc\u060c \u0641\u0631\u06cc\u0645 \u06a9\u06cc \u0634\u0631\u062d\u060c \u0627\u0648\u0631 \u0628\u0679 \u0631\u06cc\u0679 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">encoder.configure({\n    'codec': 'vp9.00.10.08.00', \/\/ We'll get to this\n     width: 1280,\n     height: 720,\n     bitrate: 1000000 \/\/1 MBPS,\n     framerate: 25\n});\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u0622\u067e \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u0648 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u0634\u0631\u0648\u0639 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0641\u0631\u0636 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0627\u06cc\u06a9 \u06c1\u06d2\u06d4 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> \u0627\u06cc\u06a9 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u06c1\u0631 60\u0648\u06cc\u06ba \u0641\u0631\u06cc\u0645 \u067e\u0631 \u0686\u0644\u0627\u0626\u06cc\u06ba\u06d4 <em>\u06a9\u0644\u06cc\u062f\u06cc \u0641\u0631\u06cc\u0645<\/em>.<\/p>\n<pre><code class=\"language-typescript\">for (let i=0; i < frames.length; frames++){\n    encoder.encode(frames[i], {keyFrame: i%60 ==0})\n}\n<\/code><\/pre>\n<h4 id=\"heading-videodecoder\">\u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u06a9\u0648\u0688\u0631<\/h4>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u06a9\u0648\u0688\u0631 \u0627\u0633 \u06a9\u06d2 \u0628\u0631\u0639\u06a9\u0633 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u0627\u0639\u062a\u0631\u0627\u0636 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> \u0627\u0634\u06cc\u0627\u0621<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/uploads\/covers\/6984c5b1feda93761574fcb1\/47258dd5-0a7b-479a-8729-6f384ff8bc4b.svg\" alt=\"\u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u06a9\u0648\u0688\u0631\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"384\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0627\u0633\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0646\u06d2 \u06a9\u06d2 \u0637\u0631\u06cc\u0642\u06d2 \u06a9\u06cc \u0627\u06cc\u06a9 \u0641\u0648\u0631\u06cc \u0645\u062b\u0627\u0644 \u06cc\u06c1 \u06c1\u06d2: <em>\u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u06a9\u0648\u0688\u0631\u06d4<\/em> \u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u0627\u0648\u0631 \u0688\u06cc\u06a9\u0648\u0688\u0631 \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646\u06d4 \u06cc\u06c1\u0627\u06ba \u06a9\u0648\u0626\u06cc \u062a\u0631\u062a\u06cc\u0628 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0641\u0627\u0626\u0644 \u06a9\u0648 \u0627\u0646\u06a9\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0634\u062e\u0635 \u0646\u06d2 \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u06cc\u0627\u06d4 \u0636\u0627\u0628\u0637\u06c1 \u06a9\u0634\u0627\u0626\u06cc \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a\u060c \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646 \u0641\u0627\u0626\u0644 \u0633\u06d2 \u0646\u06a9\u0627\u0644\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">import { demuxVideo } from 'webcodecs-utils';\n\nconst {chunks, config} = await demuxVideo(<file> file);\n<\/file><\/code><\/pre>\n<p>\u0627\u06af\u0644\u0627 \u06c1\u0645 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u06a9\u0648\u0688\u0631<\/em> \u06a9\u0627\u0644 \u0628\u06cc\u06a9 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u06a9\u06d2 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> config \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u062a\u062e\u0644\u06cc\u0642 \u0627\u0648\u0631 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">const decoder = new VideoDecoder({\n    output: function(frame: VideoFrame){\n        \/\/do something with the VideoFrame\n    },\n    error: function(e: any)=> console.warn(e);\n});\n\ndecoder.configure(config)\n<\/code><\/pre>\n<p>\u062f\u0648\u0628\u0627\u0631\u06c1\u060c <em>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631<\/em>\u06a9\u0627\u0644 \u0628\u06cc\u06a9 \u0627\u06cc\u06a9 \u0641\u0631\u06cc\u0645 \u0644\u0648\u0679\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0679\u06a9\u0691\u0648\u06ba \u06a9\u0648 \u0688\u06cc \u06a9\u0648\u0688 \u06a9\u0631\u0646\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">for (const chunk of chunks){\n    decoder.decode(chunk);\n}\n<\/code><\/pre>\n<h4 id=\"heading-putting-it-all-together\">\u0633\u0628 \u06a9\u0686\u06be \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u0688\u0627\u0644\u0646\u0627<\/h4>\n<p>WebCodecs API \u06a9\u06d2 \u0645\u0631\u06a9\u0632 \u0645\u06cc\u06ba \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u062f\u0648 \u0627\u0642\u0633\u0627\u0645 \u06c1\u06cc\u06ba:<em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0686\u0646\u06a9\u060c \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645)<\/em> \u0627\u0648\u0631 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631<\/em> \u0627\u0648\u0631 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u06a9\u0648\u0688\u0631<\/em> \u0627\u06cc\u06a9 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u062c\u0648 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u062f\u0648 \u0627\u0642\u0633\u0627\u0645 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0628\u062f\u0644\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/uploads\/covers\/6984c5b1feda93761574fcb1\/444553ad-58af-4b0e-ba46-d8910d3d548b.svg\" alt=\"\u0648\u06cc\u0628 \u06a9\u0648\u0688\u06cc\u06a9 \u06a9\u0627 \u0628\u0646\u06cc\u0627\u062f\u06cc \u062d\u0635\u06c1\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"384\" loading=\"lazy\" title=\"\"><\/p>\n<p>WebCodecs API \u062f\u0631\u0627\u0635\u0644 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0635\u0631\u0641 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u0627\u0648\u0631 \u0688\u06cc \u06a9\u0648\u0688\u0646\u06af \u0644\u0627\u06af\u0648 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u0622\u0628\u062c\u06cc\u06a9\u0679 \u0635\u0631\u0641 \u0628\u0627\u0626\u0646\u0631\u06cc \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0646\u0645\u0627\u0626\u0646\u062f\u06af\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u067e\u0691\u06be\u0646\u0627 \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0644\u06a9\u06be\u0646\u0627 \u0627\u0644\u06af \u0627\u0644\u06af \u0622\u067e\u0631\u06cc\u0634\u0646 \u06c1\u06cc\u06ba \u062c\u0646\u06c1\u06cc\u06ba \u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af\/\u0688\u06cc\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af \u06a9\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-muxing-and-demuxing\">\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af \u0627\u0648\u0631 \u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af<\/h2>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0644\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u067e \u06a9\u0648 \u06cc\u06c1 \u0628\u06be\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u06af\u06cc: <em>\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0631<\/em> \u0648\u06cc\u0688\u06cc\u0648 \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0686\u0644\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u067e \u06a9\u0648 \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u06af\u06cc: <em>\u0688\u06cc\u0645\u0648<\/em> \u0648\u06cc\u0688\u06cc\u0648 \u0627\u0633 \u0645\u06cc\u06ba \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0646\u0679\u06cc\u0646\u0631 \u06a9\u06d2 \u0641\u0627\u0626\u0644 \u0641\u0627\u0631\u0645\u06cc\u0679 \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u0646\u0627\u060c \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644 \u06a9\u0648 \u067e\u0627\u0631\u0633 \u06a9\u0631\u0646\u0627 (\u0688\u06cc \u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2)\u060c \u06cc\u0627 \u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u0631\u06cc\u06a9\u0627\u0631\u0688 \u06a9\u06cc \u062c\u0627 \u0631\u06c1\u06cc \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0635\u062d\u06cc\u062d \u062c\u06af\u06c1 \u067e\u0631 \u0631\u06a9\u06be\u0646\u0627 (\u0688\u06cc \u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2) \u0634\u0627\u0645\u0644 \u06c1\u06d2\u06d4<\/p>\n<p>Muxing \u0627\u0648\u0631 Demuxing WebCodecs API \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e \u06a9\u0648 Muxing \u0627\u0648\u0631 Demuxing \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0639\u0644\u06cc\u062d\u062f\u06c1 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<h3 id=\"heading-demuxing\">\u0688\u06cc\u0645\u06a9\u0633\u0646\u06af<\/h3>\n<p>\u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0648\u06cc\u0688\u06cc\u0648 \u0686\u0644\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0648\u0646\u0648\u06ba \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 <em>\u0688\u06cc\u0645\u0648<\/em> \u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u067e\u0627\u0631\u0679\u0645\u0646\u0679 <em>\u06a9\u06be\u0648\u0644\u0646\u0627<\/em> \u0648\u06cc\u0688\u06cc\u0648 \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700593_28_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u0688\u06cc\u0645\u06a9\u0633\u0646\u06af \u0627\u0648\u0631 \u0688\u06cc \u06a9\u0648\u0688\u0646\u06af\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"720\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0627\u06cc\u0633\u06cc \u06a9\u0626\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0627\u06ba \u06c1\u06cc\u06ba \u062c\u0646\u06c1\u06cc\u06ba \u0622\u067e \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0688\u06cc\u0645\u06a9\u0633 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0628\u0634\u0645\u0648\u0644 MediaBunny \u06cc\u0627 web-demuxer\u06d4 \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u06a9\u06d2 \u0645\u0642\u0627\u0635\u062f \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06c1\u0645 \u0646\u06d2 \u0627\u0646 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u06d2 \u06af\u0631\u062f \u0627\u06cc\u06a9 \u0628\u06c1\u062a \u06c1\u06cc \u0622\u0633\u0627\u0646 \u0631\u06cc\u067e\u0631 \u0631\u06a9\u06be\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 webcodecs-utils \u067e\u06cc\u06a9\u062c \u06a9\u06d2 \u0633\u0627\u0645\u0646\u06d2 \u0644\u0627\u06cc\u0627 \u06c1\u06d2\u060c \u062c\u0633 \u0633\u06d2 \u0688\u06cc\u0645\u06a9\u0633\u0646\u06af \u06a9\u0648 \u0627\u06cc\u06a9 \u0628\u06c1\u062a \u06c1\u06cc \u0622\u0633\u0627\u0646 2 \u0644\u0627\u0626\u0646 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">import { demuxVideo } from 'webcodecs-utils'\nconst {chunks, config} = await demuxVideo(file);\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u0633\u06d2 \u067e\u0648\u0631\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u0645\u06cc\u0645\u0648\u0631\u06cc \u0645\u06cc\u06ba \u067e\u0691\u06be\u06cc \u062c\u0627\u0626\u06d2 \u06af\u06cc\u060c \u0644\u06c1\u0630\u0627 \u0627\u06cc\u0633\u0627 \u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4 \u062a\u0627\u06c1\u0645\u060c \u06cc\u06c1 \u0648\u06cc\u0628 \u06a9\u0648\u0688\u06cc\u06a9\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0633\u0627\u062f\u06c1 \u0627\u0648\u0631 \u067e\u0691\u06be\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u06cc\u0644\u0648 \u0648\u0631\u0644\u0688 \u0628\u0646\u0627\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u0679\u06a9\u0691\u0627 \u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2 (<em>\u0641\u0627\u0626\u0644<\/em> \u0627\u0639\u062a\u0631\u0627\u0636)\u060c \u0627\u0633\u06d2 \u0688\u06cc \u06a9\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0646\u062a\u06cc\u062c\u06c1 \u06a9\u0648 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u06cc \u0637\u0631\u0641 \u06a9\u06be\u06cc\u0646\u0686\u06cc\u06ba\u06d4 \u06cc\u06c1\u0627\u06ba \u06c1\u0645 \u0622\u0624\u0679 \u067e\u0679 \u06a9\u0627\u0644 \u0628\u06cc\u06a9 \u0633\u06d2 \u0641\u0631\u06cc\u0645 \u062d\u0627\u0635\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0688\u0631\u0627 \u06a9\u0627\u0644 \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u06a9\u0627\u0644 \u0628\u06cc\u06a9 \u0633\u06d2 \u0627\u0646\u062c\u0627\u0645 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">import { demuxVideo } from 'webcodecs-utils'\n\nasync function playFile(file: File){\n\n    const {chunks, config} = await demuxVideo(file);\n    const canvas = document.createElement('canvas');\n    const ctx = canvas.getContext('2d');\n\n    const decoder = new VideoDecoder({\n        output(frame: VideoFrame) {\n            ctx.drawImage(frame, 0, 0);\n            frame.close()\n        },\n        error(e) {}\n    });\n\n\n    decoder.configure(config);\n\n    for (const chunk of chunks){\n        decoder.decode(chunk)\n    }\n\n}\n<\/code><\/pre>\n<p>\u0627\u0635\u0644 \u0648\u06cc\u0688\u06cc\u0648 \u0686\u0644\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06cc\u06c1\u0627\u06ba \u0627\u06cc\u06a9 \u0633\u067e\u0631 \u0628\u06cc\u0626\u0631 \u0628\u0648\u0646\u0632 \u0688\u06cc\u0645\u0648 \u06c1\u06d2:<\/p>\n<p><iframe width=\"100%\" height=\"350\" src=\"https:\/\/codepen.io\/Sam-Bhattacharyya\/embed\/OPRErmj\" style=\"aspect-ratio: 16 \/ 9; width: 100%; height: auto;\" title=\"CodePen embed\" scrolling=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\"><\/iframe><\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0688\u06cc\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af \u06a9\u06cc \u0645\u0632\u06cc\u062f '\u062f\u0631\u0633\u062a' \u0645\u062b\u0627\u0644 \u062f\u06cc\u06a9\u06be\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0645\u06cc\u0688\u06cc\u0627 \u0628\u0646\u06cc \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0688\u06cc\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af \u06a9\u06cc\u0633\u0627 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0648 \u062a\u06a9\u0631\u0627\u0631\u06cc \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0679\u06a9\u0691\u0648\u06ba \u06a9\u0648 \u0646\u06a9\u0627\u0644 \u0633\u06a9\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-typescript\">import { EncodedPacketSink, Input, ALL_FORMATS, BlobSource } from 'mediabunny';\n\nconst input = new Input({\n  formats: ALL_FORMATS,\n  source: new BlobSource(<file> file),\n});\n\nconst videoTrack = await input.getPrimaryVideoTrack();\nconst sink = new EncodedPacketSink(videoTrack);\n\nfor await (const packet of sink.packets()) {\n  const chunk = <encodedvideochunk> packet.toEncodedVideoChunk();\n}\n<\/encodedvideochunk><\/file><\/code><\/pre>\n<h3 id=\"heading-muxing\">\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af<\/h3>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0646\u06d2 \u0645\u06cc\u06ba \u0635\u0631\u0641 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0634\u0627\u0645\u0644 \u06c1\u06d2 ( <em>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631<\/em>) \u0622\u067e \u06a9\u0648 \u0628\u06be\u06cc \u0686\u0627\u06c1\u0626\u06d2 <em>\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0631<\/em> \u06a9\u06c1 \u0627\u0633 \u0645\u06cc\u06ba \u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0679\u06a9\u0691\u0648\u06ba \u06a9\u0648 \u0644\u06cc\u0646\u0627 \u0627\u0648\u0631 \u0622\u0624\u0679 \u067e\u0679 \u0628\u0627\u0626\u0646\u0631\u06cc \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0635\u062d\u06cc\u062d \u062c\u06af\u06c1 \u067e\u0631 \u0631\u06a9\u06be\u0646\u0627 \u0634\u0627\u0645\u0644 \u06c1\u06d2 \u062c\u0633 \u067e\u0631 \u0622\u067e \u0644\u06a9\u06be \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700593_489_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af \u0627\u0648\u0631 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"624\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0627\u06cc\u06a9 \u0628\u0627\u0631 \u067e\u06be\u0631\u060c \u0622\u067e \u06a9\u0648 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc (MediaBunny) \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u06af\u06cc\u060c \u0644\u06cc\u06a9\u0646 \u0645\u06cc\u06ba \u0646\u06d2 \u0688\u06cc\u0645\u0648 \u0645\u0642\u0627\u0635\u062f \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0628\u06c1\u062a \u06c1\u06cc \u0622\u0633\u0627\u0646 \u0631\u06cc\u067e\u0631 \u0628\u0646\u0627\u06cc\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1\u0627\u06ba \u06c1\u0645 \u0627\u06cc\u06a9 \u0628\u06c1\u062a \u06c1\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0645\u062b\u0627\u0644 Muxer \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">import { ExampleMuxer } from 'webcodecs-utils'\n\nconst muxer = new ExampleMuxer('video');\n\nfor (const chunk of encodedChunks){\n    muxer.addChunk(chunk);\n}\n\nconst outputBlob = await muxer.finish();\n<\/code><\/pre>\n<p>\u0627\u06cc\u06a9 \u0645\u06a9\u0645\u0644 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af + \u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af \u0688\u06cc\u0645\u0648 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u0622\u0626\u06cc\u06d2 \u0627\u06cc\u06a9 \u0627\u0646\u06a9\u0648\u0688\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0622\u0624\u0679 \u067e\u0679 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u06a9\u06d2 \u0679\u06a9\u0691\u0648\u06ba \u06a9\u06d2 \u0648\u0627\u067e\u0633 \u0622\u062a\u06d2 \u06c1\u06cc \u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0633\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">const encoder = new VideoEncoder({\n    output: function(chunk, meta){\n        muxer.addChunk(chunk, meta);\n    },\n    error: function(e){}\n})\n\nencoder.configure({\n    'codec': 'avc1.4d0034', \/\/ We'll get to this\n     width: 1280,\n     height: 720,\n     bitrate: 1000000 \/\/1 MBPS,\n     framerate: 25\n});\n<\/code><\/pre>\n<p>\u067e\u06be\u0631 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0622\u06cc\u0627 \u06cc\u06c1 \u0627\u06cc\u06a9 \u06a9\u06cc\u0646\u0648\u0633 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u06a9\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0641\u0631\u06cc\u0645 \u0646\u0645\u0628\u0631 \u06a9\u0648 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u06a9\u06be\u06cc\u0646\u0686\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">const canvas = new OffscreenCanvas(640, 360);\nconst ctx = canvas.getContext('2d');\nconst TOTAL_FRAMES=300;\nlet frameNumber = 0;\nlet chunksMuxed = 0;\nconst fps = 30;\n\n\nfunction renderFrame(){\n    ctx.fillStyle=\"#000\";\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n    ctx.fillStyle=\"white\";\n    ctx.font = `bold ${Math.min(canvas.width \/ 10, 72)}px Arial`;\n    ctx.textAlign = 'center';\n    ctx.textBaseline=\"middle\";\n    ctx.fillText(`Frame ${frameNumber}`, canvas.width \/ 2, canvas.height \/ 2);\n}\n<\/code><\/pre>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0627\u06cc\u06a9 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u0644\u0648\u067e \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u06a9\u06be\u06cc\u0646\u0686\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u06be\u0631 \u0627\u0633\u06d2 \u0627\u0646\u06a9\u0648\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">\nlet flushed = false;\n\nasync function encodeLoop(){\n\n    renderFrame();\n\n    const frame = new VideoFrame(canvas, {timestamp: frameNumber\/fps*1e6});\n    encoder.encode(frame, {keyFrame: frameNumber %60 ===0});\n    frame.close();\n\n    frameNumber++;\n\n    if(frameNumber === TOTAL_FRAMES) {\n        if (!flushed) encoder.flush();\n    }\n    else return requestAnimationFrame(encodeLoop);\n}\n<\/code><\/pre>\n<p>\u0627\u0646 \u0633\u0628 \u06a9\u0648 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u0631\u06a9\u06be \u06a9\u0631\u060c \u0622\u067e \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u06cc \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646\u0632 \u06a9\u0648 \u0641\u0631\u06cc\u0645 \u0644\u06cc\u0648\u0644 \u06a9\u06cc \u062f\u0631\u0633\u062a\u06af\u06cc \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644\u0648\u06ba \u0645\u06cc\u06ba \u0627\u0646\u06a9\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><iframe width=\"100%\" height=\"350\" src=\"https:\/\/codepen.io\/Sam-Bhattacharyya\/embed\/KwgebEJ\" style=\"aspect-ratio: 16 \/ 9; width: 100%; height: auto;\" title=\"CodePen embed\" scrolling=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\"><\/iframe><\/p>\n<p>\u0622\u067e \u0648\u06cc\u0688\u06cc\u0648 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u06cc\u06c1 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06c1 \u0627\u0633 \u0645\u06cc\u06ba \u06c1\u0631 \u0627\u06cc\u06a9 \u0641\u0631\u06cc\u0645 \u0646\u0645\u0628\u0631 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700593_575_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u0641\u0631\u06cc\u0645 \u0644\u06cc\u0648\u0644 \u06a9\u06cc \u062f\u0631\u0633\u062a\u06af\u06cc \u06a9\u0627 \u0648\u06cc\u0688\u06cc\u0648\" style=\"display:block;margin:0 auto\" width=\"915\" height=\"630\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u06cc\u06c1 \u0627\u0646 \u0627\u06c1\u0645 \u0641\u0631\u0642\u0648\u06ba \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06c1\u06d2 \u062c\u0648 \u0627\u0633\u06d2 \u062f\u0648\u0633\u0631\u06d2 \u0648\u06cc\u0628 APIs \u0633\u06d2 \u0627\u0644\u06af \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 MediaRecorder\u060c \u062c\u0648 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0627\u0646\u06a9\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u0644\u06cc\u06a9\u0646 \u0641\u0631\u06cc\u0645 \u0644\u06cc\u0648\u0644 \u06a9\u06cc \u062f\u0631\u0633\u062a\u06af\u06cc \u06a9\u06d2 \u0628\u063a\u06cc\u0631\u06d4 WebCodecs \u0622\u067e \u06a9\u0648 \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u06a9\u06cc \u0645\u0633\u062a\u0642\u0644 \u0645\u0632\u0627\u062c\u06cc \u06a9\u0648 \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u06cc\u06c1\u0627\u06ba MediaBunny \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u0645\u0646\u0627\u0633\u0628 \u0645\u06a9\u0645\u0644 \u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af \u0645\u062b\u0627\u0644 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-typescript\">import {\n  EncodedPacket,\n  EncodedVideoPacketSource,\n  BufferTarget,\n  Mp4OutputFormat,\n  Output\n} from 'mediabunny';\n\nasync function muxChunks(chunks: EncodedVideoChunk[]): Promise <blob>{\n\n    const output = new Output({\n        format: new Mp4OutputFormat(),\n        target: new BufferTarget(),\n    });\n\n    const source = new EncodedVideoPacketSource('avc');\n    output.addVideoTrack(source);\n\n    await output.start();\n\n    for (const chunk of chunks){\n        source.add(EncodedPacket.fromEncodedChunk(chunk))\n    }\n\n    await output.finalize();\n    const buffer = <arraybuffer> output.target.buffer;\n    return new Blob([buffer], { type: 'video\/mp4' });\n\n});\n<\/arraybuffer><\/blob><\/code><\/pre>\n<h2 id=\"heading-building-a-video-converter-utility\">\u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0646\u0648\u0631\u0679\u0631 \u06cc\u0648\u0679\u06cc\u0644\u06cc\u0679\u06cc \u0628\u0646\u0627\u0646\u0627<\/h2>\n<p>\u0627\u0628 \u062c\u0628\u06a9\u06c1 \u06c1\u0645 \u0646\u06d2 WebCodecs \u0627\u0648\u0631 Muxing \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0627\u062a\u0648\u06ba \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631 \u0644\u06cc\u0627 \u06c1\u06d2\u060c \u06c1\u0645 \u0648\u0627\u0642\u0639\u06cc \u0627\u06cc\u06a9 \u0645\u0641\u06cc\u062f MVP \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06cc \u0637\u0631\u0641 \u0628\u0691\u06be\u06cc\u06ba \u06af\u06d2: \u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0646\u0648\u0631\u0679\u0631 \u06cc\u0648\u0679\u06cc\u0644\u06cc\u0679\u06cc\u06d4 \u06c1\u0645 \u0627\u0633\u06d2 mp4 \u0627\u0648\u0631 webm \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u06a9\u0686\u06be \u0628\u0646\u06cc\u0627\u062f\u06cc \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc\u0648\u06ba \u06a9\u0648 \u0627\u0646\u062c\u0627\u0645 \u062f\u06cc\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0648\u06cc\u0688\u06cc\u0648\u0632 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u0627 \u0627\u0648\u0631 \u067e\u0644\u0679\u0646\u0627\u06d4<\/p>\n<h3 id=\"heading-transcoding\">\u0679\u0631\u0627\u0646\u0633 \u06a9\u0648\u0688\u0646\u06af<\/h3>\n<p>\u0633\u0627\u0626\u0632 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u067e\u0644\u0679\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0622\u0626\u06cc\u06d2 \u067e\u06c1\u0644\u06d2 \u0628\u0646\u06cc\u0627\u062f\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644 \u0644\u06cc\u06ba\u060c \u062c\u0633 \u0645\u06cc\u06ba \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0688\u06cc \u06a9\u0648\u0688 \u06a9\u0631\u0646\u0627 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0627\u06cc\u06a9 \u0646\u0626\u06d2 \u0641\u0627\u0631\u0645\u06cc\u0679 \u0645\u06cc\u06ba \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u06a9\u0631\u0646\u0627 \u0634\u0627\u0645\u0644 \u06c1\u06d2\u06d4 \u0627\u0633\u06d2 \u0679\u0631\u0627\u0646\u0633 \u06a9\u0648\u0688\u0646\u06af \u06a9\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0679\u0631\u0627\u0646\u0633 \u06a9\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u06a9\u0648 \u062f\u0631\u062c \u0630\u06cc\u0644 \u0639\u0645\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2:<\/p>\n<ul>\n<li>\n<p><strong>\u0688\u06cc\u0645\u06a9\u0633\u0646\u06af<\/strong>: \u067e\u0691\u06be\u06cc\u06ba <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644 \u0633\u06d2<\/p>\n<\/li>\n<li>\n<p><strong>\u0636\u0627\u0628\u0637\u06c1 \u06a9\u0634\u0627\u0626\u06cc<\/strong>: \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u0627 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u06a9\u0648 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em><\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u0646\u06a9\u0648\u0688\u0646\u06af<\/strong>: \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u0627 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> \u0646\u06cc\u0627 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em><\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af<\/strong>: \u0644\u06a9\u06be\u0646\u0627 <em>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/em> \u0627\u06cc\u06a9 \u0646\u0626\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba<\/p>\n<\/li>\n<\/ul>\n<p>\u06c1\u0645\u0627\u0631\u06cc \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u06c1\u06d2:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700593_85_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"\u0679\u0631\u0627\u0646\u0633 \u06a9\u0648\u0688\u0646\u06af \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"576\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0627\u0628 \u062a\u06a9 \u0627\u0633 \u0645\u0636\u0645\u0648\u0646 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2\u060c \u0622\u067e \u0627\u0633 \u0637\u0631\u062d \u0627\u06cc\u06a9 \u0645\u06a9\u0645\u0644 \u0648\u0631\u06a9\u0646\u06af \u0688\u06cc\u0645\u0648 \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <em>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631<\/em> \u0627\u0648\u0631 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u06a9\u0648\u0688\u0631<\/em> \u062c\u06cc\u0633\u0627 \u06a9\u06c1 \u0628\u062d\u062b \u06a9\u06cc \u06af\u0626\u06cc \u06c1\u06d2\u06d4 \u062a\u0627\u06c1\u0645\u060c \u0631\u06cc\u0627\u0633\u062a\u06cc \u0627\u0646\u062a\u0638\u0627\u0645 \u0627\u0648\u0631 \u0679\u0631\u06cc\u06a9\u0646\u06af \u0641\u0631\u06cc\u0645 \u067e\u06cc\u0686\u06cc\u062f\u06c1 \u0627\u0648\u0631 \u063a\u0644\u0637\u06cc \u06a9\u0627 \u0634\u06a9\u0627\u0631 \u06c1\u0648 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u06c1\u0645 Streams API \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u0627\u0648\u0631 \u062a\u062c\u0631\u06cc\u062f \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06c1\u0645\u0627\u0631\u06cc \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u0627\u0633 \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u06cc: \u06cc\u06c1 \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u06a9\u06d2 \u0630\u06c1\u0646\u06cc \u0645\u0627\u0688\u0644 \u0633\u06d2 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u062a\u0639\u0644\u0642 \u0631\u06a9\u06be\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u062a\u0639\u062f\u062f \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u062c\u06cc\u0633\u06d2 \u0631\u06cc\u0627\u0633\u062a\u06cc \u0627\u0646\u062a\u0638\u0627\u0645 \u06a9\u0648 \u0622\u0633\u0627\u0646 \u0628\u0646\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">const transcodePipeline = demuxerReader\n    .pipeThrough(new VideoDecoderStream(videoDecoderConfig))\n    .pipeThrough(new VideoEncoderStream(videoEncoderConfig))\n    .pipeTo(createMuxerWriter(muxer));\n\nawait transcodePipeline;\n<\/code><\/pre>\n<p>\u0627\u06cc\u0633\u0627 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06c1\u0645 \u0627\u06cc\u06a9 TransformStream \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u06a9\u0648\u0688\u0631<\/em> \u0627\u0648\u0631 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0631\u06d4<\/em><\/p>\n<pre><code class=\"language-typescript\">class VideoDecoderStream extends TransformStream<{ chunk: EncodedVideoChunk; index: number }, { frame: VideoFrame; index: number }> {\n  constructor(config: VideoDecoderConfig) {\n    let pendingIndices: number[] = [];\n    super(\n      {\n        start(controller) {\n          decoder = new VideoDecoder({\n            output: (frame) => {\n              const index = pendingIndices.shift()!;\n              controller.enqueue({ frame, index });\n            },\n            error: (e) => controller.error(e),\n          });\n\n          decoder.configure(config);\n        },\n\n        async transform(item, controller) {\n          pendingIndices.push(item.index);\n          decoder.decode(item.chunk);\n        },\n\n        async flush(controller) {\n          await decoder.flush();\n          if decoder.state !== 'closed' decoder.close();\n        },\n      }\n    );\n  }\n}\n<\/code><\/pre>\n<p>\u0645\u06cc\u06ba \u0622\u067e \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u06a9\u0648\u0688 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0648\u0631 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u0648\u06ba \u06af\u0627\u060c \u0644\u06cc\u06a9\u0646 \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0646 \u06cc\u0648\u0679\u06cc\u0644\u06cc\u0679\u06cc\u0632 \u06a9\u0648 webcodecs-utils \u067e\u06cc\u06a9\u06cc\u062c \u0645\u06cc\u06ba \u067e\u06cc\u06a9 \u06a9\u06cc\u0627 \u06c1\u06d2\u060c \u062c\u0633\u06d2 \u0622\u067e \u0627\u0633 \u0637\u0631\u062d \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<pre><code class=\"language-typescript\">import {\n  SimpleDemuxer,\n  VideoDecodeStream,\n  VideoEncodeStream,\n  SimpleMuxer,\n} from \"webcodecs-utils\";\n<\/code><\/pre>\n<p>\u0641\u0627\u0626\u0644 \u06a9\u0648 \u0679\u0631\u0627\u0646\u0633 \u06a9\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u06a9\u0648\u0688 \u06cc\u06c1 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-typescript\">const demuxer = new SimpleDemuxer(videoFile);\nawait demuxer.load();\nconst decoderConfig = await demuxer.getVideoDecoderConfig();\n\nconst encoderConfig = {\/*Whatever we decide*\/};\n\n\/\/ Set up muxer\nconst muxer = new SimpleMuxer({ video: \"avc\" });\n\n\/\/ Build the upscaling pipeline\nawait demuxer.videoStream()\n  .pipeThrough(new VideoDecodeStream(decoderConfig))\n  .pipeThrough(new VideoEncodeStream(encoderConfig))\n  .pipeTo(muxer.videoSink());\n\n\/\/ Get output\nconst blob = await muxer.finalize();\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0627\u0646\u0679\u0631\u0645\u06cc\u0688\u06cc\u0679 \u0688\u06cc\u0645\u0648 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0628\u0646\u06cc \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0627\u06cc\u0645 \u067e\u06cc 4 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0622\u0624\u0679 \u067e\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0679\u0648\u06af\u0644 \u0645\u062a\u0639\u0627\u0631\u0641 \u06a9\u0631\u0627\u06cc\u0627 \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u0679\u0631\u0627\u0646\u0633 \u06a9\u0648\u0688\u0646\u06af \u06a9\u0648 \u0627\u0635\u0644 \u0645\u06cc\u06ba \u06a9\u0627\u0645 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u06d2 (\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2: <code>h264)<\/code> \u06cc\u0627 \u0648\u06cc\u0628 \u0627\u06cc\u0645 \u0641\u0627\u0626\u0644 (\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 <code>vp9<\/code>)\u06d4<\/p>\n<p>\u06c1\u0645 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2 <code>avc1.4d0034<\/code> h264 (\u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0639\u0627\u0648\u0646 \u06cc\u0627\u0641\u062a\u06c1 h264 \u06a9\u0648\u0688\u06cc\u06a9 \u0633\u0679\u0631\u0646\u06af) \u0627\u0648\u0631 <code>vp09.00.40.08.00<\/code> vp9 \u06a9\u06d2 \u0644\u06cc\u06d2 (\u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0639\u0627\u0648\u0646 \u06cc\u0627\u0641\u062a\u06c1 vp9 \u0633\u0679\u0631\u0646\u06af)\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba CodePen \u0633\u06d2 \u0627\u06cc\u06a9 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0679\u0631\u0627\u0646\u0633 \u06a9\u0648\u0688\u0646\u06af \u0688\u06cc\u0645\u0648 \u06c1\u06d2:<\/p>\n<p><iframe width=\"100%\" height=\"350\" src=\"https:\/\/codepen.io\/Sam-Bhattacharyya\/embed\/YPGvBgO\" style=\"aspect-ratio: 16 \/ 9; width: 100%; height: auto;\" title=\"CodePen embed\" scrolling=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\"><\/iframe><\/p>\n<h3 id=\"heading-transformations\">\u062a\u0628\u062f\u06cc\u0644\u06cc<\/h3>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0648\u06cc\u0688\u06cc\u0648 \u0679\u0631\u0627\u0646\u0633\u0641\u0627\u0631\u0645\u06cc\u0634\u0646 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u06cc\u0633\u06d2 \u067e\u0644\u0679\u0646\u0627\u060c \u06a9\u0631\u0627\u067e \u06a9\u0631\u0646\u0627\u060c \u06af\u06be\u0648\u0645\u0646\u0627\u060c \u0633\u0627\u0626\u0632 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u0627\u060c \u0648\u063a\u06cc\u0631\u06c1\u060c \u062a\u0648 \u0635\u0631\u0641 \u062e\u0627\u0644\u0635 \u0622\u067e\u0631\u06cc\u0634\u0646 \u06c1\u06cc \u06a9\u0627\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> \u0627\u0634\u06cc\u0627\u0621<\/p>\n<p>\u0627\u0633 \u06a9\u0648 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0633\u0628 \u0633\u06d2 \u0622\u0633\u0627\u0646 \u0637\u0631\u06cc\u0642\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u06cc\u06a9 \u06a9\u06cc\u0646\u0648\u0633 \u0639\u0646\u0635\u0631 \u0645\u062a\u0639\u0627\u0631\u0641 \u06a9\u0631\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u062c\u0648 2D \u06a9\u06cc\u0646\u0648\u0633 \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u06a9\u0648 \u0633\u0648\u0631\u0633 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba \u06c1\u06cc\u0631\u0627 \u067e\u06be\u06cc\u0631\u06cc \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u06a9\u06be\u06cc\u0646\u0686\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">const canvas = new OffscreenCanvas(width, height);\nconst ctx = canvas.getContext('2d');\n\n\/\/ Very easy to do transformations\nctx.drawImage(sourceFrame, 0, 0);\n<\/code><\/pre>\n<p>\u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u06c1\u0645 \u0622\u0624\u0679 \u067e\u0679 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u0633\u0648\u0631\u0633 \u0627\u0645\u06cc\u062c \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">const outFrame = new VideoFrame(canvas, {timestamp: sourceFrame.timestamp});\n<\/code><\/pre>\n<p>\u0633\u0627\u0626\u0632 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0639\u0645\u0644 \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u067e\u06c1\u0644\u06d2 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u0622\u0624\u0679 \u067e\u0679 \u06a9\u06cc \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u0627\u0648\u0631 \u0686\u0648\u0691\u0627\u0626\u06cc \u067e\u0631 \u0633\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">const canvas = new OffscreenCanvas(outputWidth, outputHeight);\nconst ctx = canvas.getContext('2d');\n\n\/\/ Resize sourceFrame to fit output dimensions\nctx.drawImage(sourceFrame, 0, 0, outputWidth, outputHeight);\n<\/code><\/pre>\n<p>canvas2d \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u0641\u0642\u06cc \u0641\u0644\u067e \u0622\u067e\u0631\u06cc\u0634\u0646 \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u067e \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0627\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<pre><code class=\"language-typescript\">ctx.scale(-1, 1);\nctx.translate(-outputWidth, 0);\nctx.drawImage(sourceFrame, 0, 0, outputWidth, outputHeight);\n<\/code><\/pre>\n<p>\u0622\u067e \u0627\u06cc\u06a9 \u0645\u06a9\u0645\u0644 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u0641\u0646\u06a9\u0634\u0646 \u062a\u0634\u06a9\u06cc\u0644 \u062f\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u06cc \u0637\u0631\u062d \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">function render(videoFrame, outW, outH, flipped) {\n\n  canvas.width  = outW;\n  canvas.height = outH;\n\n  if (flipped) {\n    ctx.scale(-1, 1);\n    ctx.translate(-outW, 0);\n  }\n  ctx.drawImage(videoFrame, 0, 0, outW, outH);\n\n}\n<\/code><\/pre>\n<p>\u0630\u06cc\u0644 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u0688\u06cc\u0645\u0648 \u06c1\u06d2 \u062c\u0633 \u0645\u06cc\u06ba \u062f\u06a9\u06be\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06cc\u0633\u06cc \u062f\u06a9\u06be\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p><iframe width=\"100%\" height=\"350\" src=\"https:\/\/codepen.io\/Sam-Bhattacharyya\/embed\/WbGymNQ\" style=\"aspect-ratio: 16 \/ 9; width: 100%; height: auto;\" title=\"CodePen embed\" scrolling=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\"><\/iframe><\/p>\n<h3 id=\"heading-transform-pipeline\">\u062a\u0628\u062f\u06cc\u0644\u06cc \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646<\/h3>\n<p>\u0627\u0646 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0622\u067e \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06d2 \u0645\u0631\u0627\u062d\u0644 \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u067e\u0646\u06cc \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u06a9\u0648 \u0688\u06be\u0627\u0644\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0644\u06d2 \u062c\u0627\u0626\u06d2 \u06af\u0627 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em>\u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u06c1 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u0644\u0648\u0679\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cdn.hashnode.com\/uploads\/covers\/6984c5b1feda93761574fcb1\/0111f887-1f27-4436-a68e-ec91b2dd9959.svg\" alt=\"\u0679\u0631\u0627\u0646\u0633\u0641\u0627\u0631\u0645\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0679\u0631\u0627\u0646\u0633 \u06a9\u0648\u0688\u0646\u06af \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646\" style=\"display:block;margin:0 auto\" width=\"1344\" height=\"576\" loading=\"lazy\" title=\"\"><\/p>\n<p>webcodecs-utils \u067e\u06cc\u06a9\u06cc\u062c \u0645\u06cc\u06ba \u0627\u0633 \u0645\u0642\u0635\u062f \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 VideoProcessStream \u0622\u0628\u062c\u06cc\u06a9\u0679 \u06c1\u06d2\u06d4 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> \u0627\u0648\u0631 \u067e\u06be\u0631 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645:<\/em><\/p>\n<pre><code class=\"language-typescript\">import { VideoProcessStream} from \"webcodecs-utils\";\n \nnew VideoProcessStream(async (frame) => {\n      \/\/ Apply transformations\n      return procesedFrame;\n    }),\n<\/code><\/pre>\n<p>\u0644\u06c1\u0630\u0627 \u0627\u06af\u0631 \u0622\u067e \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0622\u067e \u0627\u0633\u06d2 \u0627\u0633 \u0637\u0631\u062d \u062a\u0631\u062a\u06cc\u0628 \u062f\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<pre><code class=\"language-typescript\">import { VideoProcessStream} from \"webcodecs-utils\";\n \n\nconst canvas = new OffscreenCanvas(outW, outH);\nconst ctx = canvas.getContext('2d');\n\nconst processStream = new VideoProcessStream(async (frame) => {\n  \n  if (flipped) {\n    ctx.scale(-1, 1);\n    ctx.translate(-outW, 0);\n  }\n  ctx.drawImage(frame, 0, 0, outW, outH);\n\n  return new VideoFrame(canvas, {timestamp: frame.timestamp});\n\n});\n<\/code><\/pre>\n<p>\u067e\u06be\u0631 \u0645\u06a9\u0645\u0644 \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u0627\u0633 \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u06cc:<\/p>\n<pre><code class=\"language-typescript\">const demuxer = new SimpleDemuxer(videoFile);\nawait demuxer.load();\nconst decoderConfig = await demuxer.getVideoDecoderConfig();\n\nconst encoderConfig = {\/*Whatever we decide*\/};\n\n\/\/ Set up muxer\nconst muxer = new SimpleMuxer({ video: \"avc\" });\n\n\/\/ Build the upscaling pipeline\nawait demuxer.videoStream()\n  .pipeThrough(new VideoDecodeStream(decoderConfig))\n  .pipeThrough(processStream) \/\/ Just defined this\n  .pipeThrough(new VideoEncodeStream(encoderConfig))\n  .pipeTo(muxer.videoSink());\n\n\/\/ Get output\nconst blob = await muxer.finalize();\n<\/code><\/pre>\n<p>\u067e\u0631\u0648\u0633\u06cc\u0633 \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06cc\u06c1\u0627\u06ba \u0627\u06cc\u06a9 \u0645\u06a9\u0645\u0644 \u0648\u0631\u06a9\u0646\u06af \u0688\u06cc\u0645\u0648 \u06c1\u06d2:<\/p>\n<p><iframe width=\"100%\" height=\"350\" src=\"https:\/\/codepen.io\/Sam-Bhattacharyya\/embed\/PwGaLPM\" style=\"aspect-ratio: 16 \/ 9; width: 100%; height: auto;\" title=\"CodePen embed\" scrolling=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\"><\/iframe><\/p>\n<h3 id=\"heading-complete-demo\">\u0645\u06a9\u0645\u0644 \u0688\u06cc\u0645\u0648<\/h3>\n<p>\u0627\u0628 \u0622\u0626\u06cc\u06d2 \u067e\u0648\u0631\u06d2 \u0679\u0648\u0644 \u0645\u06cc\u06ba \u06a9\u0686\u06be \u0628\u0691\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<ul>\n<li>\n<p>\u0622\u067e \u0627\u067e\u0646\u06cc \u0648\u06cc\u0688\u06cc\u0648\u0632 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0627 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0641\u0631\u06cc\u0645 \u0646\u06a9\u0627\u0644\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0622\u0626\u06cc\u06d2 \u062a\u0631\u0642\u06cc \u06a9\u06cc \u067e\u06cc\u0645\u0627\u0626\u0634 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u0646 \u067e\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06cc\u06c1 \u0622\u0633\u0627\u0646 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-html\"><input type=\"file\" onchange=\"handler(event)\"\/>\n<\/code><\/pre>\n<p>\u0641\u0631\u06cc\u0645 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 WebCodecs \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u0686\u0648\u0646\u06a9\u06c1 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0641\u0631\u06cc\u0645 \u06a9\u06cc \u0633\u0637\u062d \u06a9\u06cc \u062f\u0631\u0633\u062a\u06af\u06cc \u06cc\u0627 \u0627\u0639\u0644\u06cc\u0670 \u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 HTML5 VideoElement \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0633\u0648\u0631\u0633 \u0641\u0627\u0626\u0644 \u0633\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">async function getFirstFrame(file) {\n  const video = document.createElement(\"video\");\n  video.src = URL.createObjectURL(file);\n  video.muted = true;\n\n  await new Promise((resolve) => video.addEventListener(\"loadeddata\", resolve, { once: true }));\n  video.currentTime = 0;\n  await new Promise((resolve) => video.addEventListener(\"seeked\", resolve, { once: true }));\n\n  return new VideoFrame(video, {timestamp: 0});\n}\n<\/code><\/pre>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u0641\u0631\u06cc\u0645 \u0679\u0627\u0626\u0645 \u0627\u0633\u0679\u06cc\u0645\u067e\/\u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0627 \u062f\u0648\u0631\u0627\u0646\u06cc\u06c1 \u067e\u0631\u0648\u0633\u06cc\u0633 \u0641\u0646\u06a9\u0634\u0646 \u06a9\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">const {duration} = await demuxer.getMediaInfo();\n\n\nconst processStream = new VideoProcessStream(async (frame) => {\n  \n  if (flipped) {\n    ctx.scale(-1, 1);\n    ctx.translate(-outW, 0);\n  }\n  ctx.drawImage(frame, 0, 0, outW, outH);\n\n   \/\/ Frame timestamps are in microseconds, duration in seconds\n  const progress = frame.timestamp\/(duration*1e6); \n\n  return new VideoFrame(canvas, {timestamp: frame.timestamp});\n\n});\n<\/code><\/pre>\n<p>\u0627\u0646 \u0633\u0628 \u06a9\u0648 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u0648\u0626\u06d2\u060c \u06c1\u0645 \u0622\u062e\u0631 \u06a9\u0627\u0631 \u0627\u06cc\u06a9 \u0628\u06c1\u062a\u0631\u06cc\u0646 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0646\u0648\u0631\u0679\u0631 \u0627\u0641\u0627\u062f\u06cc\u062a \u06a9\u0648 \u0627\u06a9\u0679\u06be\u0627 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><iframe width=\"100%\" height=\"350\" src=\"https:\/\/codepen.io\/Sam-Bhattacharyya\/embed\/WbGymaj\" style=\"aspect-ratio: 16 \/ 9; width: 100%; height: auto;\" title=\"CodePen embed\" scrolling=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" loading=\"lazy\"><\/iframe><\/p>\n<p>\u0627\u0648\u0631 \u0628\u0633! \u06c1\u0645 \u0646\u06d2 WebCodecs  \u067e\u0631 Demuxing\u060c Decoding\u060c Canvas Transforms\u060c Encoding \u0627\u0648\u0631 Muxing \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0648\u0627\u0642\u0639\u06cc \u0627\u06cc\u06a9 \u0645\u0641\u06cc\u062f MVP \u0628\u0646\u0627\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0645\u06cc\u06ba \u0627\u0648\u0631 Capcut \u062c\u06cc\u0633\u06d2 \u0645\u06a9\u0645\u0644 \u0628\u0631\u0627\u0624\u0632\u0631 \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u0633\u0648\u06cc\u0679 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0641\u0631\u0642 \u0635\u0631\u0641 \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0627 \u067e\u06cc\u0645\u0627\u0646\u06c1 \u0627\u0648\u0631 \u062f\u0627\u0626\u0631\u06c1 \u06a9\u0627\u0631 \u06c1\u06d2\u06d4 \u062a\u0627\u06c1\u0645\u060c \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u0645\u0646\u0637\u0642 \u062a\u0642\u0631\u06cc\u0628\u0627 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06cc \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-production-concerns\">\u067e\u06cc\u062f\u0627\u0648\u0627\u0631 \u06a9\u06d2 \u0645\u0633\u0627\u0626\u0644<\/h2>\n<p>\u0645\u062c\u06be\u06d2 \u062e\u0648\u0634\u06cc \u06c1\u06d2 \u06a9\u06c1 \u06c1\u0645 \u06a9\u0686\u06be \u06a9\u0627\u0631\u0622\u0645\u062f \u0628\u0646\u0627\u0646\u06d2 \u0645\u06cc\u06ba \u06a9\u0627\u0645\u06cc\u0627\u0628 \u06c1\u0648\u0626\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633 \u06a9\u0648 \u0633\u0645\u06cc\u0679\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u067e\u06cc\u062f\u0627\u0648\u0627\u0631\u06cc \u0633\u0637\u062d \u06a9\u06d2 \u0686\u0646\u062f \u0645\u0633\u0627\u0626\u0644 \u06a9\u0648 \u062d\u0644 \u06a9\u0631\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-codecs\">\u06a9\u0648\u0688\u06cc\u06a9<\/h3>\n<p>\u0622\u067e \u06a9\u0648 \u0627\u0633 \u0637\u0631\u062d \u06a9\u06d2 \u062a\u0627\u0631 \u0645\u0644 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <code>vp09.00.10.08<\/code> \u0688\u06cc\u0645\u0648 \u0646\u06d2 \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u067e\u0631 \u0631\u0648\u0634\u0646\u06cc \u0688\u0627\u0644\u06cc\u06d4 \u0622\u0626\u06cc\u06d2 \u0627\u0628 \u0627\u0633 \u0633\u06d2 \u0646\u0645\u0679\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u067e\u06c1\u0644\u06d2\u060c WebCodecs \u0645\u062e\u0635\u0648\u0635 \u06a9\u0648\u0688\u06cc\u06a9 \u062a\u0627\u0631\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>vp09.00.10.08<\/code>\u060c '\u06c1\u0627\u06ba<code>vp9<\/code>' \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u06a9\u0627\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627:<\/p>\n<pre><code class=\"language-plaintext\">const codec = VideoEncoder({\n    codec: 'vp9', \/\/This won't work!\n    \/\/...\n})\n<\/code><\/pre>\n<p>\u062c\u06cc\u0633\u0627 \u06a9\u06c1 \u067e\u06c1\u0644\u06d2 \u0628\u06cc\u0627\u0646 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u060c \u0622\u067e \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0688\u06cc \u06a9\u0648\u0688 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0627\u0635\u0644 \u0645\u06cc\u06ba \u06a9\u0648\u0688\u06cc\u06a9 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u06d2\u06d4 \u0686\u0648\u0646\u06a9\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u06c1\u06d2\u060c \u06c1\u0645\u06cc\u06ba \u0648\u06cc\u0688\u06cc\u0648 \u0633\u06d2 \u06a9\u0648\u0688\u06cc\u06a9 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 \u062c\u06cc\u0633\u0627 \u06a9\u06c1 \u067e\u0686\u06be\u0644\u06d2 \u0688\u06cc\u0645\u0648 \u0645\u06cc\u06ba \u062f\u06a9\u06be\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0630\u06a9\u0631 \u06a9\u0631\u062f\u06c1 \u0688\u06cc\u0645\u0644\u0679\u06cc \u067e\u0644\u06cc\u06a9\u0633\u0646\u06af \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0635\u062d\u06cc\u062d \u06a9\u0648\u0688\u06cc\u06a9 \u0633\u0679\u0631\u0646\u06af \u06a9\u06cc \u0646\u0634\u0627\u0646\u062f\u06c1\u06cc \u06a9\u0631\u06d2 \u06af\u06cc \u0644\u06c1\u0630\u0627 \u0622\u067e \u06a9\u0648 \u0627\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0641\u06a9\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">const decoderConfig = await demuxer.getVideoDecoderConfig();\n\/\/decoderConfig.codec = exact codec string for the video\n<\/code><\/pre>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0622\u067e \u06a9\u0648\u0688\u06cc\u06a9 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06a9\u0686\u06be \u0644\u0648\u06af \u06a9\u0648\u0688\u06cc\u06a9 \u06a9\u06d2 \u0627\u0646\u062a\u062e\u0627\u0628 \u067e\u0631 \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0648\u062c\u06c1 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u0627\u06cc\u06a9 \u0628\u06c1\u062a \u06c1\u06cc \u0639\u0645\u0644\u06cc \u0627\u0648\u0631 \u0639\u0645\u0644\u06cc \u0646\u0642\u0637\u06c1 \u0646\u0638\u0631 \u0633\u06d2\u060c \u062f\u0631\u062c \u0630\u06cc\u0644 \u0627\u0635\u0648\u0644\u0648\u06ba \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0688\u0648\u06cc\u0644\u067e\u0631\u0632 \u067e\u0631 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2:<\/p>\n<ul>\n<li>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0635\u0627\u0631\u0641\u06cc\u0646 \u0648\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba \u062c\u0648 \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u060c \u06cc\u0627 mp4 \u0641\u0627\u0626\u0644 \u0622\u0624\u0679 \u067e\u0679 \u06a9\u0631\u06cc\u06ba\u060c \u062a\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba: <code>h264<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0627\u06af\u0631 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06c1\u06d2\u060c \u06cc\u0627 \u0622\u067e \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0644\u06d2 \u0628\u06cc\u06a9 \u06a9\u0648 \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0641\u0627\u0631\u0645\u06cc\u0679 \u0633\u06d2 \u0645\u062a\u0639\u0644\u0642 \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba: <code>vp9<\/code> \u0648\u06cc\u0628 \u0627\u06cc\u0645 (\u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633\u060c \u0628\u06c1\u062a\u0631 \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646\u060c \u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0639\u0627\u0648\u0646 \u06cc\u0627\u0641\u062a\u06c1 \u06a9\u0648\u0688\u06cc\u06a9) \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06cc\u06c1 \u062f\u0648 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u0644\u0627\u06af\u0648 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06af\u06c1\u0631\u0627 \u06a9\u0648\u0688\u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u06cc\u06a9 \u062e\u0631\u06af\u0648\u0634 \u0633\u0648\u0631\u0627\u062e \u06c1\u06d2 \u062c\u0633\u06d2 \u0622\u067e \u06a9\u0648 \u0627\u0628\u06be\u06cc \u0646\u06cc\u0686\u06d2 \u0646\u06c1\u06cc\u06ba \u062c\u0627\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u06a9\u0648\u0688\u06cc\u06a9 \u0641\u06cc\u0645\u0644\u06cc \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0645\u062e\u0635\u0648\u0635 \u06a9\u0648\u0688\u06cc\u06a9 \u0633\u0679\u0631\u0646\u06af \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u0646\u0627 \u06c1\u0648\u06af\u0627: <code>avc1.42001f<\/code>.<\/p>\n<p>\u0633\u0679\u0631\u0646\u06af \u0645\u06cc\u06ba \u062f\u06cc\u06af\u0631 \u0646\u0645\u0628\u0631 \u0645\u062e\u0635\u0648\u0635 \u06a9\u0648\u0688\u06cc\u06a9 \u067e\u06cc\u0631\u0627\u0645\u06cc\u0679\u0631\u0632 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0688\u0648\u06cc\u0644\u067e\u0631 \u06a9\u06d2 \u0646\u0642\u0637\u06c1 \u0646\u0638\u0631 \u0633\u06d2 \u06a9\u0645 \u0627\u06c1\u0645 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u0627 \u0645\u0642\u0635\u062f \u0632\u06cc\u0627\u062f\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0637\u0627\u0628\u0642\u062a \u06c1\u06d2\u060c \u062a\u0648 \u06cc\u06c1\u0627\u06ba \u0627\u06cc\u06a9 \u062f\u06be\u0648\u06a9\u06c1 \u062f\u06c1\u06cc \u06a9\u06cc \u0634\u06cc\u0679 \u06c1\u06d2 \u062c\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0648\u0688\u06cc\u06a9 \u0633\u0679\u0631\u0646\u06af\u0632 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<h5 id=\"heading-h264-for-mp4-files\"><strong>h264<\/strong> (mp4 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2)<\/h5>\n<ul>\n<li>\n<p><code>avc1.42001f<\/code>    - \u0688\u06cc\u0641\u0627\u0644\u0679 \u067e\u0631\u0648\u0641\u0627\u0626\u0644\u060c \u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0637\u0627\u0628\u0642\u062a \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u060c 720p \u062a\u06a9 (99.6\u066a \u0633\u067e\u0648\u0631\u0679) \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>avc1.4d0034<\/code>    - \u0645\u06cc\u0646 \u067e\u0631\u0648\u0641\u0627\u0626\u0644\u060c \u0644\u06cc\u0648\u0644 5.2 (4K \u0633\u067e\u0648\u0631\u0679 \u062a\u06a9) (98.9% \u0633\u067e\u0648\u0631\u0679)<\/p>\n<\/li>\n<li>\n<p><code>avc1.42003e<\/code>    - \u0628\u0646\u06cc\u0627\u062f\u06cc \u067e\u0631\u0648\u0641\u0627\u0626\u0644\u060c \u0633\u0637\u062d 6.2 (8k \u062a\u06a9 \u062a\u0639\u0627\u0648\u0646 \u06cc\u0627\u0641\u062a\u06c1) (86.8% \u062a\u0639\u0627\u0648\u0646 \u06cc\u0627\u0641\u062a\u06c1)<\/p>\n<\/li>\n<li>\n<p><code>avc1.64003e<\/code>    - \u06c1\u0627\u0626\u06cc \u067e\u0631\u0648\u0641\u0627\u0626\u0644 - \u0644\u06cc\u0648\u0644 6.2 (8k \u0633\u067e\u0648\u0631\u0679 \u062a\u06a9) (85.9% \u0633\u067e\u0648\u0631\u0679)<\/p>\n<\/li>\n<\/ul>\n<h5 id=\"heading-vp9-for-webm-files\"><strong>vp9<\/strong> (\u0648\u06cc\u0628 \u0627\u06cc\u0645 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2)<\/h5>\n<p>\u0622\u067e \u0628\u06be\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <em>getCodecString<\/em> webcodecs-utils \u067e\u06cc\u06a9\u06cc\u062c \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a:<\/p>\n<pre><code class=\"language-typescript\">import { getCodecString } from 'webcodecs-utils'\n\nconst codec_string = getCodecString('vp9', width, height, bitrate)\n<\/code><\/pre>\n<p>\u0622\u067e \u0648\u06cc\u0628 \u06a9\u0648\u0688\u06cc\u06a9\u0633 \u0645\u06cc\u06ba \u062f\u0633\u062a\u06cc\u0627\u0628 \u06a9\u0648\u0688\u06cc\u06a9\u0633 \u0627\u0648\u0631 \u06a9\u0648\u0688\u06cc\u06a9 \u0633\u0679\u0631\u0646\u06af\u0632 \u06a9\u06cc \u0645\u06a9\u0645\u0644 \u0641\u06c1\u0631\u0633\u062a \u06cc\u06c1\u0627\u06ba \u062d\u0627\u0635\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-bit-rate\">\u0628\u0679 \u06a9\u06cc \u0634\u0631\u062d<\/h3>\n<p>\u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u0627\u0648\u0631 \u0686\u0648\u0691\u0627\u0626\u06cc (\u0645\u0648\u0627\u062f \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06c1 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2) \u0627\u0648\u0631 \u06a9\u0648\u0688\u06cc\u06a9 \u0633\u0679\u0631\u0646\u06af (\u062c\u0633 \u067e\u0631 \u06c1\u0645 \u0646\u06d2 \u0627\u0628\u06be\u06cc \u0628\u0627\u062a \u06a9\u06cc \u06c1\u06d2) \u06a9\u06d2 \u0639\u0644\u0627\u0648\u06c1\u060c \u0622\u067e \u06a9\u0648 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0628\u0679 \u0631\u06cc\u0679 \u0628\u06be\u06cc \u0628\u062a\u0627\u0646\u0627 \u06c1\u0648\u06af\u0627\u06d4<\/p>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u0627\u0644\u06af\u0648\u0631\u062a\u06be\u0645 \u0645\u0639\u06cc\u0627\u0631 \u0627\u0648\u0631 \u0641\u0627\u0626\u0644 \u06a9\u06d2 \u0633\u0627\u0626\u0632 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0648\u0627\u0632\u0646 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0628\u0691\u06cc \u0641\u0627\u0626\u0644 \u0633\u0627\u0626\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0639\u0644\u06cc\u0670 \u0645\u0639\u06cc\u0627\u0631 \u06a9\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u06c1\u0648 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u060c \u06cc\u0627 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0686\u06be\u0648\u0679\u06cc \u0641\u0627\u0626\u0644 \u0633\u0627\u0626\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0645 \u0645\u0639\u06cc\u0627\u0631 \u06a9\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u06c1\u0648 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>1080p \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062e\u062a\u0644\u0641 \u0628\u0650\u0679\u0631\u06cc\u0679\u0633 \u067e\u0631 \u0627\u0646\u06a9\u0648\u0688 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u0645\u062e\u062a\u0644\u0641 \u06a9\u0648\u0627\u0644\u0679\u06cc \u0644\u06cc\u0648\u0644\u0632 \u06a9\u0627 \u0641\u0648\u0631\u06cc \u062a\u0635\u0648\u0631 \u06cc\u06c1\u0627\u06ba \u06c1\u06d2\u06d4<\/p>\n<p><strong>300kbps<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700593_932_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"300kbps \u0641\u0631\u06cc\u0645\" style=\"display:block;margin:0 auto\" width=\"256\" height=\"256\" loading=\"lazy\" title=\"\"><\/p>\n<p><strong>1Mbps<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700593_338_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"1 \u0627\u06cc\u0645 \u0628\u06cc \u067e\u06cc \u0627\u06cc\u0633 \u0641\u0631\u06cc\u0645\" style=\"display:block;margin:0 auto\" width=\"256\" height=\"256\" loading=\"lazy\" title=\"\"><\/p>\n<p><strong>3Mbps<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700593_869_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"3Mbps \u0641\u0631\u06cc\u0645\" style=\"display:block;margin:0 auto\" width=\"256\" height=\"256\" loading=\"lazy\" title=\"\"><\/p>\n<p><strong>10Mbps<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/1775700593_704_WebCodecs-\u06c1\u06cc\u0646\u0688-\u0628\u06a9-\u0628\u0631\u0627\u0624\u0632\u0631\u0632-\u0645\u06cc\u06ba-\u0628\u0646\u06cc\u0627\u062f\u06cc-\u0648\u06cc\u0688\u06cc\u0648-\u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af.png\" alt=\"10Mbps \u0641\u0631\u06cc\u0645\" style=\"display:block;margin:0 auto\" width=\"256\" height=\"256\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u0628\u0679\u0631\u06cc\u0679 \u06a9\u06d2 \u0631\u06c1\u0646\u0645\u0627 \u062e\u0637\u0648\u0637 \u06a9\u06d2 \u0644\u0626\u06d2 \u0627\u06cc\u06a9 \u0641\u0648\u0631\u06cc \u062a\u0644\u0627\u0634 \u06a9\u06cc \u0645\u06cc\u0632 \u06c1\u06d2:<\/p>\n<table>\n<thead>\n<tr>\n<th><strong>\u062d\u0644<\/strong><\/th>\n<th><strong>\u0628\u0679\u0631\u06cc\u0679 (30fps)<\/strong><\/th>\n<th><strong>\u0628\u0679\u0631\u06cc\u0679 (60fps)<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>4K<\/td>\n<td>13~20Mbps<\/td>\n<td>20-30Mbps<\/td>\n<\/tr>\n<tr>\n<td>1080\u0635<\/td>\n<td>4.5~6Mbps<\/td>\n<td>6~9Mbps<\/td>\n<\/tr>\n<tr>\n<td>720\u0635<\/td>\n<td>2~4Mbps<\/td>\n<td>3~6Mbps<\/td>\n<\/tr>\n<tr>\n<td>480\u0635<\/td>\n<td>1.5~2Mbps<\/td>\n<td>2-3Mbps<\/td>\n<\/tr>\n<tr>\n<td>360\u0635<\/td>\n<td>0.5-1Mbps<\/td>\n<td>1~1.5Mbps<\/td>\n<\/tr>\n<tr>\n<td>240\u0635<\/td>\n<td>300~500kbps<\/td>\n<td>500-800kbps<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u0622\u067e \u0627\u0633 \u06cc\u0648\u0679\u06cc\u0644\u06cc\u0679\u06cc \u0641\u0646\u06a9\u0634\u0646 \u06a9\u0648 \u0627\u067e\u0646\u06cc \u0627\u06cc\u067e\u0633 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0641\u0648\u0631\u06cc \u062a\u062e\u0645\u06cc\u0646\u06c1 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0628\u06be\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">function getBitrate(width, height, fps, quality = 'good') {\n    const pixels = width * height;\n\n    const qualityFactors = {\n      'low': 0.05,\n      'good': 0.08,\n      'high': 0.10,\n      'very-high': 0.15\n    };\n\n    const factor = qualityFactors[quality] || qualityFactors['good'];\n\n    \/\/ Returns bitrate in bits per second\n    return pixels * fps * factor;\n  }\n<\/code><\/pre>\n<p>\u06cc\u06c1\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a webcodecs-utils \u067e\u06cc\u06a9\u06cc\u062c \u0645\u06cc\u06ba \u0628\u06be\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">import { getBitrate } from 'webcodecs-utils'\n<\/code><\/pre>\n<h3 id=\"heading-gpu-vs-cpu\">GPU \u0628\u0645\u0642\u0627\u0628\u0644\u06c1 CPU<\/h3>\n<p>\u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0622\u0644\u0627\u062a \u0645\u06cc\u06ba \u06a9\u0686\u06be \u0642\u0633\u0645 \u06a9\u06d2 \u06af\u0631\u0627\u0641\u06a9\u0633 \u06a9\u0627\u0631\u0688 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba (\u062c\u0633\u06d2 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0645\u0631\u0628\u0648\u0637 \u06af\u0631\u0627\u0641\u06a9\u0633 \u06a9\u06c1\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2)\u06d4 \u06cc\u06c1 \u0645\u062e\u0635\u0648\u0635 \u0633\u0644\u06a9\u0627\u0646 \u0641\u0646 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062e\u0635\u0648\u0635\u06cc \u0686\u067e\u0633 \u06c1\u06cc\u06ba \u062c\u0648 \u0628\u0646\u06cc\u0627\u062f\u06cc \u06af\u0631\u0627\u0641\u06a9\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0627\u062a\u06be \u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688\u0646\u06af \u0627\u0648\u0631 \u0688\u06cc \u06a9\u0648\u0688\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0648\u0632\u0648\u06ba \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u062c\u0628 \u0622\u067e \"GPU\" \u06a9\u0627 \u0644\u0641\u0638 \u0633\u0646\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0622\u067e AI \u0688\u06cc\u0679\u0627 \u0633\u06cc\u0646\u0679\u0631\u0632 \u0627\u0648\u0631 \u06af\u06cc\u0645\u0631\u0632 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0633\u0648\u0686 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0644\u06cc\u06a9\u0646 \u062c\u0628 \u0628\u0627\u062a \u0648\u06cc\u0628 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u0632 \u06a9\u06cc \u06c1\u0648 \u062a\u0648 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u06d2 \u067e\u0627\u0633 GPU \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u0627\u06c1\u0645 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u0688\u06cc\u0648\u0644\u067e\u0645\u0646\u0679 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u062e\u0635\u0648\u0635\u06cc \u0637\u0648\u0631 \u067e\u0631 CPUs \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 WebCodec \u0627\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 GPUs \u067e\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u0627\u06cc\u06a9 \u0641\u0648\u0631\u06cc \u06af\u0627\u0626\u06cc\u0688 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0633 \u0642\u0633\u0645 \u06a9\u0627 \u0688\u06cc\u0679\u0627 \u06a9\u06c1\u0627\u06ba \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<table>\n<thead>\n<tr>\n<th><strong>\u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0642\u0633\u0645<\/strong><\/th>\n<th><strong>\u0645\u0642\u0627\u0645<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/td>\n<td>\u062c\u06cc \u067e\u06cc \u06cc\u0648<\/td>\n<\/tr>\n<tr>\n<td>\u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2<\/td>\n<td>\u0633\u06cc \u067e\u06cc \u06cc\u0648<\/td>\n<\/tr>\n<tr>\n<td>\u062a\u0635\u0648\u06cc\u0631 \u06a9\u0627 \u0628\u0679 \u0645\u06cc\u067e<\/td>\n<td>\u062c\u06cc \u067e\u06cc \u06cc\u0648<\/td>\n<\/tr>\n<tr>\n<td>\u0635\u0641 \u0628\u0641\u0631<\/td>\n<td>\u0633\u06cc \u067e\u06cc \u06cc\u0648<\/td>\n<\/tr>\n<tr>\n<td>\u0641\u0627\u0626\u0644<\/td>\n<td>CPU + \u0688\u0633\u06a9<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u0688\u06cc\u0679\u0627 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc \u06a9\u06cc \u0644\u0627\u06af\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u062c\u0648 \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u06d2 \u0627\u0646\u062a\u0638\u0627\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06be\u06cc \u0627\u06c1\u0645 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-memory\">\u06cc\u0627\u062f\u062f\u0627\u0634\u062a<\/h3>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u0627\u0634\u06cc\u0627\u0621 \u06a9\u0627\u0641\u06cc \u0628\u0691\u06cc \u06c1\u0648 \u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba\u060c 4K \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0644\u06cc\u06d2 30 MB \u062a\u06a9\u06d4 \u0622\u067e \u06a9\u0627 \u06af\u0631\u0627\u0641\u06a9\u0633 \u06a9\u0627\u0631\u0688 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 RAM \u06a9\u0627 \u0627\u06cc\u06a9 \u062d\u0635\u06c1 \"\u0648\u06cc\u0688\u06cc\u0648 \u0645\u06cc\u0645\u0648\u0631\u06cc\" \u06cc\u0627 \"VRAM\" \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062d\u0641\u0648\u0638 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645<\/em> \u0627\u0639\u062a\u0631\u0627\u0636 \u0645\u062d\u0641\u0648\u0638 \u06c1\u0648 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0644\u06c1\u0630\u0627 \u0627\u06af\u0631 \u06a9\u0633\u06cc \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u067e\u0627\u0633 8 \u062c\u06cc \u0628\u06cc \u0631\u06cc\u0645 \u06c1\u06d2\u060c \u062a\u0648 \u0627\u0633 \u06a9\u06d2 \u067e\u0627\u0633 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 2 \u062c\u06cc \u0628\u06cc VRAM \u06c1\u0648\u06af\u06cc (\u0622\u067e\u0631\u06cc\u0679\u0646\u06af \u0633\u0633\u0679\u0645 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06c1 \u06a9\u062a\u0646\u0627 \u0637\u06d2 \u06c1\u0648\u062a\u0627 \u06c1\u06d2)\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0645\u0642\u062f\u0627\u0631 VRAM \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u062a\u0648 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u06a9\u0631\u06cc\u0634 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4 \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u0648\u0633\u0637 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0627\u06af\u0631 \u0645\u06cc\u0645\u0648\u0631\u06cc \u0645\u06cc\u06ba 67 4K \u0641\u0631\u06cc\u0645 (\u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 2 \u0633\u06cc\u06a9\u0646\u0688 \u062a\u06a9) \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06c1\u0648\u06ba \u062a\u0648 \u067e\u0631\u0648\u06af\u0631\u0627\u0645 \u06a9\u0631\u06cc\u0634 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<h4 id=\"heading-when-videoframes-are-generated\">\u062c\u0628 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u0628\u0646\u062a\u0627 \u06c1\u06d2\u06d4<\/h4>\n<p>\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u06c1\u06d2\u06d4 <code>new VideoFrame(source)<\/code> \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0628\u06be\u06cc <code>VideoDecoder<\/code>\u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u0622\u0624\u0679 \u067e\u0679 \u06a9\u0627\u0644 \u0628\u06cc\u06a9\u06d4 \u062c\u0628 \u0628\u06be\u06cc \u0641\u0631\u06cc\u0645 \u0628\u0646\u062a\u0627 \u06c1\u06d2\u060c \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0628\u0691\u06be \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-how-to-remove-videoframes\">\u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u06c1\u0679\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/h4>\n<p>\u0622\u067e VideoFrame \u0627\u0634\u06cc\u0627\u0621 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0639\u06cc\u0627\u0631\u06cc \u06a9\u0648\u0691\u0627 \u06a9\u0631\u06a9\u0679 \u062c\u0645\u0639 \u06a9\u0631\u0646\u06d2 \u067e\u0631 \u0627\u0646\u062d\u0635\u0627\u0631 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u06d2\u06d4 \u0645\u06a9\u0645\u0644 \u06c1\u0648\u0646\u06d2 \u067e\u0631\u060c \u0622\u067e \u06a9\u0648 \u0648\u0627\u0636\u062d \u0637\u0648\u0631 \u067e\u0631 \u0628\u0646\u062f () \u06a9\u0648 \u0641\u0631\u06cc\u0645 \u067e\u0631 \u06a9\u0627\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">frame.close()\n<\/code><\/pre>\n<p>\u067e\u06c1\u0644\u06d2 \u062f\u06a9\u06be\u0627\u0626\u06d2 \u06af\u0626\u06d2 \u0627\u0633\u0679\u0631\u06cc\u0645\u0632\/\u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u06a9\u0648\u0688 \u0627\u0648\u0631 \u0688\u06cc\u0645\u0648 \u0645\u06cc\u06ba\u060c \u0641\u0631\u06cc\u0645 \u0627\u0646\u06a9\u0648\u0688 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc \u0627\u0635\u0644 \u0645\u06cc\u06ba \u0628\u0646\u062f \u06c1\u0648 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0639\u0645\u0644 \u06a9\u0627 \u0633\u0644\u0633\u0644\u06c1<\/em> \u0627\u0648\u0631 <em>\u0648\u06cc\u0688\u06cc\u0648 \u0627\u0646\u06a9\u0648\u0688 \u0627\u0633\u0679\u0631\u06cc\u0645<\/em> \u0627\u0646\u0679\u0631\u0641\u06cc\u0633<\/p>\n<p>\u0627\u0633\u0679\u0631\u06cc\u0645\u0632 \u0633\u06d2 WebCodecs \u06a9\u0648 \u0641\u0627\u0626\u062f\u06c1 \u067e\u06c1\u0646\u0686\u0627\u0646\u06d2 \u06a9\u06cc \u0627\u06cc\u06a9 \u0627\u0648\u0631 \u0648\u062c\u06c1 \u06c1\u06d2\u06d4 <code>highWaterMark<\/code> \u0627\u0633 \u067e\u0631\u0627\u067e\u0631\u0679\u06cc \u06a9\u06cc \u0688\u06cc\u0641\u0627\u0644\u0679 \u0648\u06cc\u0644\u06cc\u0648 10 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u062c\u0628 \u0622\u067e \u0686\u0644\u0627\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<pre><code class=\"language-typescript\">await demuxer.videoStream()\n  .pipeThrough(new VideoDecodeStream(decoderConfig))\n  .pipeThrough(processStream) \n  .pipeThrough(new VideoEncodeStream(encoderConfig))\n  .pipeTo(muxer.videoSink());\n<\/code><\/pre>\n<p>\u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0648\u0642\u062a 10 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u0645\u0648\u0631\u06cc \u0645\u06cc\u06ba \u0646\u06c1 \u06c1\u0648\u06ba\u06d4 \u0627\u0633\u0679\u0631\u06cc\u0645\u0632 API \u0622\u067e \u06a9\u0648 \u0627\u0633 \u062d\u062f \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u06a9\u06c1 \u0628\u0631\u0627\u0624\u0632\u0631 \u062e\u0648\u062f \u0627\u0633 \u0645\u0646\u0637\u0642 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0627\u0633\u06d2 \u06a9\u06cc\u0633\u06d2 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e Streams API \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06cc \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u06cc \u062d\u062f\u0648\u062f \u0627\u0648\u0631 \u06a9\u06be\u0644\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u06a9\u0648 \u062e\u0648\u062f \u0679\u0631\u06cc\u06a9 \u06a9\u0631\u0646\u0627 \u06c1\u0648\u06af\u0627\u06d4<\/p>\n<h2 id=\"heading-further-resources\">\u0627\u0636\u0627\u0641\u06cc \u0648\u0633\u0627\u0626\u0644<\/h2>\n<p>\u0627\u0633 \u0645\u0636\u0645\u0648\u0646 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2\u060c \u06c1\u0645 \u0646\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0627\u062a\u0648\u06ba \u06a9\u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u06cc\u0627\u060c WebCodecs API \u06a9\u06d2 \u0628\u0646\u06cc\u0627\u062f\u06cc \u062a\u0635\u0648\u0631\u0627\u062a \u06a9\u0648 \u0645\u062a\u0639\u0627\u0631\u0641 \u06a9\u0631\u0627\u06cc\u0627\u060c \u0627\u0648\u0631 \u0627\u067e\u0646\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0646\u0648\u0631\u0679\u0631 \u06cc\u0648\u0679\u06cc\u0644\u06cc\u0679\u06cc \u06a9\u0627 MVP \u0628\u0646\u0627\u06cc\u0627\u06d4 \u06cc\u06c1 \u062f\u0631\u0627\u0635\u0644 \u0627\u06cc\u06a9 \u0622\u0633\u0627\u0646 \u062a\u0631\u06cc\u0646 \u0688\u06cc\u0645\u0648 \u06c1\u06d2 \u062c\u0648 API \u06a9\u06d2 \u062a\u0645\u0627\u0645 \u062d\u0635\u0648\u06ba \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06c1\u0645 \u0646\u06d2 \u06a9\u0686\u06be \u0628\u0646\u06cc\u0627\u062f\u06cc \u067e\u06cc\u062f\u0627\u0648\u0627\u0631\u06cc \u0645\u0633\u0627\u0626\u0644 \u06a9\u0627 \u0628\u06be\u06cc \u0627\u062d\u0627\u0637\u06c1 \u06a9\u06cc\u0627\u06d4<\/p>\n<p>\u06cc\u06c1 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u062a\u0639\u0627\u0631\u0641 \u06c1\u06d2 \u0627\u0648\u0631 \u0635\u0631\u0641 WebCodecs \u06a9\u06cc \u0633\u0637\u062d \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06c1 API \u06a9\u062a\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u060c \u0627\u06cc\u06a9 \u0645\u0646\u0627\u0633\u0628\u060c \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 WebCodecs \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646 \u06a9\u0648 \u0635\u0631\u0641 \u06c1\u06cc\u0644\u0648 \u0648\u0631\u0644\u0688 \u0688\u06cc\u0645\u0648 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<p>WebCodecs \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0645\u0632\u06cc\u062f \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c MDN \u0627\u0648\u0631 WebCodecsFundamentals \u062f\u06cc\u06a9\u06be\u06cc\u06ba\u060c \u0627\u06cc\u06a9 \u062c\u0627\u0645\u0639 \u0622\u0646 \u0644\u0627\u0626\u0646 \u062f\u0631\u0633\u06cc \u06a9\u062a\u0627\u0628 \u062c\u0648 WebCodecs \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u06af\u06c1\u0631\u0627\u0626\u06cc \u0645\u06cc\u06ba \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u067e \u0645\u0648\u062c\u0648\u062f\u06c1\u060c \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0679\u06cc\u0633\u0679 \u0634\u062f\u06c1 \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0645\u0627\u062e\u0630 \u06a9\u0648\u0688 \u06a9\u0627 \u0628\u06be\u06cc \u062c\u0627\u0626\u0632\u06c1 \u0644\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 Remotion Convert (\u0645\u0627\u062e\u0630 \u06a9\u0648\u0688) \u062c\u0648 \u06c1\u0645 \u0646\u06d2 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u06cc\u0627 \u0688\u06cc\u0645\u0648 \u0627\u06cc\u067e \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0634\u0627\u0628\u06c1\u062a \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 Free AI Video Upscaler (\u0645\u0627\u062e\u0630 \u06a9\u0648\u0688\u060c \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646)\u060c \u062c\u0633 \u0646\u06d2 \u06cc\u06c1\u0627\u06ba \u067e\u06cc\u0634 \u06a9\u0631\u062f\u06c1 \u0688\u06cc\u0632\u0627\u0626\u0646 \u067e\u06cc\u0679\u0631\u0646 \u06a9\u0648 \u0645\u062a\u0627\u062b\u0631 \u06a9\u06cc\u0627 \u0627\u0648\u0631 webcodecs-utils \u0645\u06cc\u06ba \u0644\u0627\u06af\u0648 \u06a9\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c WebCodecs \u0644\u06af\u062a\u0627 \u06c1\u06d2 \u0627\u0633 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0634\u06a9\u0644 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 MediaBunny \u062c\u06cc\u0633\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u062c\u0648 \u0628\u06c1\u062a \u0633\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u0648 \u0622\u0633\u0627\u0646 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0645\u06cc\u0645\u0648\u0631\u06cc \u06a9\u0627 \u0627\u0646\u062a\u0638\u0627\u0645\u060c \u0641\u0627\u0626\u0644 I\/O\u060c \u0627\u0648\u0631 \u062f\u06cc\u06af\u0631 \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u0622\u067e \u06a9\u06cc \u0632\u0646\u062f\u06af\u06cc \u06a9\u0648 \u0628\u06c1\u062a \u0622\u0633\u0627\u0646 \u0628\u0646\u0627 \u0633\u06a9\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0645\u06cc\u06ba \u0627\u0633\u06d2 \u0627\u067e\u0646\u06cc \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 WebCodecs \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba\u06d4<\/p>\n<p>\u0686\u0627\u06c1\u06d2 \u0622\u067e \u0648\u0627\u0642\u0639\u06cc \u0627\u06cc\u06a9 \u0645\u06a9\u0645\u0644 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06af\u0631\u06cc\u0688 WebCodecs \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06cc\u0627 \u0646\u06c1\u06cc\u06ba\u060c \u0622\u067e \u062c\u0627\u0646\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0627\u0628 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0622\u067e\u0634\u0646 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0646\u0633\u0628\u062a\u0627\u064b \u0646\u06cc\u0627 \u06c1\u06d2\u060c \u0633\u0631\u0648\u0631 \u06a9\u06cc \u06a9\u0645 \u0642\u06cc\u0645\u062a \u067e\u0631 \u0628\u06c1\u062a\u0631 UX \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u0633 \u06a9\u06d2 \u0641\u0648\u0627\u0626\u062f \u06a9\u06cc \u0648\u062c\u06c1 \u0633\u06d2 \u0628\u0691\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646\u0632 \u062c\u06cc\u0633\u06d2 Capcut \u0627\u0648\u0631 Descript \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0627\u0633\u06d2 \u062a\u06cc\u0632\u06cc \u0633\u06d2 \u0627\u067e\u0646\u0627\u06cc\u0627 \u062c\u0627 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u06a9\u0628\u06be\u06cc \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u06cc \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0627\u06cc\u0688\u06cc\u0679\u0646\u06af \u06cc\u0627 \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u0627\u06cc\u067e\u060c \u062a\u0648 \u0622\u067e \u06cc\u0627 \u062a\u0648 \u0633\u0631\u0648\u0631 \u067e\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba (\u0645\u06c1\u0646\u06af\u0627) \u06cc\u0627 ffmpeg.js (clunky) \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 WebCodecs API \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0627\u0628 \u0627\u06cc\u0633\u0627 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0627\u06cc\u06a9 \u0628\u06c1\u062a\u0631 \u0637\u0631\u06cc\u0642\u06c1 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u06d4 WebCodecs [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":22174,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-22173","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/22173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/comments?post=22173"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/22173\/revisions"}],"predecessor-version":[{"id":22175,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/22173\/revisions\/22175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media\/22174"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=22173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=22173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=22173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}