WebCodecs-ல் தேர்ச்சி பெறுதல்: டெம்போரல் இரைச்சல் குறைப்பு மூலம் வீடியோ தரத்தை மேம்படுத்துதல்

இணையம் சார்ந்த வீடியோ தொடர்பு, ஸ்ட்ரீமிங், மற்றும் நிகழ்நேரப் பயன்பாடுகளின் உலகில், தரம் முதன்மையானது. உலகெங்கிலும் உள்ள பயனர்கள், ஒரு வணிக சந்திப்பில் இருந்தாலும், ஒரு நேரலை நிகழ்வைப் பார்த்தாலும், அல்லது ஒரு தொலைநிலை சேவையுடன் தொடர்பு கொண்டாலும், தெளிவான, துல்லியமான வீடியோவை எதிர்பார்க்கிறார்கள். இருப்பினும், வீடியோ ஸ்ட்ரீம்கள் பெரும்பாலும் ஒரு நிலையான மற்றும் கவனத்தை சிதறடிக்கும் கலைப்பொருள் மூலம் பாதிக்கப்படுகின்றன: இரைச்சல். இந்த டிஜிட்டல் இரைச்சல், பெரும்பாலும் ஒரு தானியமான அல்லது நிலையான அமைப்பாகத் தெரியும், இது பார்க்கும் அனுபவத்தைக் கெடுப்பதுடன், ஆச்சரியப்படும் விதமாக, அலைவரிசை நுகர்வையும் அதிகரிக்கிறது. அதிர்ஷ்டவசமாக, ஒரு சக்திவாய்ந்த உலாவி API, WebCodecs, டெவலப்பர்களுக்கு இந்த சிக்கலை நேரடியாகச் சமாளிக்க முன்னோடியில்லாத குறைந்த-நிலை கட்டுப்பாட்டை வழங்குகிறது.

இந்த விரிவான வழிகாட்டி, ஒரு குறிப்பிட்ட, அதிக தாக்கத்தை ஏற்படுத்தும் வீடியோ செயலாக்க நுட்பமான: டெம்போரல் இரைச்சல் குறைப்பு-க்காக WebCodecs-ஐப் பயன்படுத்துவது குறித்து உங்களை ஆழமாக அழைத்துச் செல்லும். வீடியோ இரைச்சல் என்றால் என்ன, அது ஏன் தீங்கு விளைவிக்கிறது, மற்றும் உலாவியில் நேரடியாக ஒரு வடிகட்டி பைப்லைனை உருவாக்க VideoFrame பொருளை நீங்கள் எவ்வாறு பயன்படுத்தலாம் என்பதை நாங்கள் ஆராய்வோம். அடிப்படை கோட்பாட்டிலிருந்து ஒரு நடைமுறை ஜாவாஸ்கிரிப்ட் செயலாக்கம், WebAssembly உடனான செயல்திறன் பரிசீலனைகள், மற்றும் தொழில்முறை-தர முடிவுகளை அடைவதற்கான மேம்பட்ட கருத்துக்கள் வரை அனைத்தையும் நாங்கள் உள்ளடக்குவோம்.

வீடியோ இரைச்சல் என்றால் என்ன, அது ஏன் முக்கியமானது?

ஒரு சிக்கலைச் சரிசெய்வதற்கு முன், நாம் முதலில் அதைப் புரிந்து கொள்ள வேண்டும். டிஜிட்டல் வீடியோவில், இரைச்சல் என்பது வீடியோ சிக்னலில் பிரகாசம் அல்லது வண்ணத் தகவல்களில் ஏற்படும் சீரற்ற மாறுபாடுகளைக் குறிக்கிறது. இது படத்தைப் பிடிப்பது மற்றும் அனுப்புதல் செயல்முறையின் விரும்பத்தகாத துணை விளைபொருள் ஆகும்.

இரைச்சலின் மூலங்கள் மற்றும் வகைகள்

• சென்சார் இரைச்சல்: முதன்மைக் குற்றவாளி. குறைந்த ஒளி நிலைகளில், கேமரா சென்சார்கள் போதுமான பிரகாசமான படத்தை உருவாக்க உள்வரும் சிக்னலை பெருக்குகின்றன. இந்த பெருக்க செயல்முறை சீரற்ற மின்னணு ஏற்ற இறக்கங்களையும் அதிகரிக்கிறது, இதன் விளைவாகத் தெரியும் தானியம் ஏற்படுகிறது.
• வெப்ப இரைச்சல்: கேமராவின் எலக்ட்ரானிக்ஸ் மூலம் உருவாக்கப்படும் வெப்பம் எலக்ட்ரான்களை சீரற்ற முறையில் நகரச் செய்யலாம், இது ஒளி அளவைப் பொருட்படுத்தாமல் இரைச்சலை உருவாக்குகிறது.
• அளவாக்க இரைச்சல் (Quantization Noise): அனலாக்-டு-டிஜிட்டல் மாற்றம் மற்றும் சுருக்க செயல்முறைகளின் போது அறிமுகப்படுத்தப்பட்டது, அங்கு தொடர்ச்சியான மதிப்புகள் ஒரு வரையறுக்கப்பட்ட தனித்துவ நிலைகளின் தொகுப்பிற்கு வரைபடமாக்கப்படுகின்றன.

இந்த இரைச்சல் பொதுவாக காஸியன் இரைச்சல் (Gaussian noise) ஆக வெளிப்படுகிறது, அங்கு ஒவ்வொரு பிக்சலின் செறிவும் அதன் உண்மையான மதிப்பைச் சுற்றி சீரற்ற முறையில் மாறுபடுகிறது, இது முழு ஃபிரேம் முழுவதும் ஒரு மெல்லிய, மினுமினுக்கும் தானியத்தை உருவாக்குகிறது.

இரைச்சலின் இரு மடங்கு தாக்கம்

வீடியோ இரைச்சல் ஒரு அழகு சார்ந்த பிரச்சினை என்பதை விட மேலானது; இது குறிப்பிடத்தக்க தொழில்நுட்ப மற்றும் புலனுணர்வு விளைவுகளைக் கொண்டுள்ளது:

1. குறைந்த பயனர் அனுபவம்: மிகவும் வெளிப்படையான தாக்கம் காட்சித் தரத்தில் உள்ளது. இரைச்சலான வீடியோ தொழில்முறையற்றதாகத் தெரிகிறது, கவனத்தை சிதறடிக்கிறது, மற்றும் முக்கியமான விவரங்களை அறிவதை கடினமாக்குகிறது. தொலைконபரன்சிங் போன்ற பயன்பாடுகளில், இது பங்கேற்பாளர்களை தானியமாகவும் தெளிவற்றதாகவும் காட்டலாம், இது இருப்பின் உணர்வைக் குறைக்கிறது.
2. குறைக்கப்பட்ட சுருக்கத் திறன்: இது குறைவாக உள்ளுணர்வுடன் ஆனால் சமமாக முக்கியமான பிரச்சினை. நவீன வீடியோ கோடெக்குகள் (H.264, VP9, AV1 போன்றவை) தேவையற்ற தன்மையைப் பயன்படுத்துவதன் மூலம் அதிக சுருக்க விகிதங்களை அடைகின்றன. அவை ஃபிரேம்களுக்கு இடையேயான ஒற்றுமைகளையும் (காலமுறை தேவையற்ற தன்மை) மற்றும் ஒரு ஃபிரேமிற்குள் (இடஞ்சார்ந்த தேவையற்ற தன்மை) தேடுகின்றன. இரைச்சல், அதன் இயல்பிலேயே, சீரற்றது மற்றும் கணிக்க முடியாதது. இது இந்த தேவையற்ற வடிவங்களை உடைக்கிறது. குறியாக்கி, சீரற்ற இரைச்சலை பாதுகாக்கப்பட வேண்டிய உயர்-அதிர்வெண் விவரமாகக் கருதுகிறது, இதனால் உண்மையான உள்ளடக்கத்திற்கு பதிலாக இரைச்சலைக் குறியாக்க அதிக பிட்களை ஒதுக்க வேண்டிய கட்டாயத்தில் உள்ளது. இது அதே உணரப்பட்ட தரத்திற்கு ஒரு பெரிய கோப்பு அளவிற்கு அல்லது அதே பிட்ரேட்டில் குறைந்த தரத்திற்கு வழிவகுக்கிறது.

குறியாக்கம் செய்வதற்கு முன்பு இரைச்சலை அகற்றுவதன் மூலம், வீடியோ சிக்னலை மேலும் கணிக்கக்கூடியதாக மாற்றலாம், இது குறியாக்கி மிகவும் திறமையாக வேலை செய்ய அனுமதிக்கிறது. இது சிறந்த காட்சித் தரம், குறைந்த அலைவரிசை பயன்பாடு, மற்றும் எல்லா இடங்களிலும் உள்ள பயனர்களுக்கு ஒரு மென்மையான ஸ்ட்ரீமிங் அனுபவத்திற்கு வழிவகுக்கிறது.

WebCodecs-ன் வருகை: குறைந்த-நிலை வீடியோ கட்டுப்பாட்டின் சக்தி

பல ஆண்டுகளாக, உலாவியில் நேரடி வீடியோ கையாளுதல் குறைவாகவே இருந்தது. டெவலப்பர்கள் பெரும்பாலும் <video> உறுப்பு மற்றும் கேன்வாஸ் API-யின் திறன்களுக்குள் கட்டுப்படுத்தப்பட்டனர், இது பெரும்பாலும் GPU-விலிருந்து செயல்திறனைக் கொல்லும் ரீட்பேக்குகளை உள்ளடக்கியது. WebCodecs இந்த விளையாட்டை முற்றிலுமாக மாற்றுகிறது.

WebCodecs என்பது ஒரு குறைந்த-நிலை API ஆகும், இது உலாவியின் உள்ளமைக்கப்பட்ட மீடியா குறியாக்கிகள் மற்றும் டிகோடர்களுக்கு நேரடி அணுகலை வழங்குகிறது. இது வீடியோ எடிட்டர்கள், கிளவுட் கேமிங் தளங்கள் மற்றும் மேம்பட்ட நிகழ்நேரத் தொடர்பு கிளையண்டுகள் போன்ற மீடியா செயலாக்கத்தில் துல்லியமான கட்டுப்பாடு தேவைப்படும் பயன்பாடுகளுக்காக வடிவமைக்கப்பட்டுள்ளது.

நாம் கவனம் செலுத்தப் போகும் முக்கிய கூறு VideoFrame பொருள் ஆகும். ஒரு VideoFrame வீடியோவின் ஒரு ஃபிரேமை ஒரு படமாக பிரதிநிதித்துவப்படுத்துகிறது, ஆனால் இது ஒரு எளிய பிட்மேப்பை விட அதிகம். இது பல்வேறு பிக்சல் வடிவங்களில் (RGBA, I420, NV12 போன்றவை) வீடியோ தரவை வைத்திருக்கக்கூடிய ஒரு மிகவும் திறமையான, மாற்றக்கூடிய பொருள் மற்றும் இது போன்ற முக்கியமான மெட்டாடேட்டாவைக் கொண்டுள்ளது:

• timestamp: ஃபிரேமின் விளக்கக்காட்சி நேரம் மைக்ரோ விநாடிகளில்.
• duration: ஃபிரேமின் கால அளவு மைக்ரோ விநாடிகளில்.
• codedWidth and codedHeight: ஃபிரேமின் பரிமாணங்கள் பிக்சல்களில்.
• format: தரவின் பிக்சல் வடிவம் (எ.கா., 'I420', 'RGBA').

முக்கியமாக, VideoFrame ஆனது copyTo() என்ற ஒரு முறையை வழங்குகிறது, இது சுருக்கப்படாத மூல பிக்சல் தரவை ஒரு ArrayBuffer-க்குள் நகலெடுக்க அனுமதிக்கிறது. இது பகுப்பாய்வு மற்றும் கையாளுதலுக்கான நமது நுழைவுப் புள்ளியாகும். மூல பைட்டுகள் கிடைத்தவுடன், நமது இரைச்சல் குறைப்பு அல்காரிதத்தைப் பயன்படுத்தலாம், பின்னர் மாற்றியமைக்கப்பட்ட தரவிலிருந்து ஒரு புதிய VideoFrame-ஐ உருவாக்கி, அதை செயலாக்கப் பைப்லைனில் மேலும் அனுப்பலாம் (எ.கா., ஒரு வீடியோ குறியாக்கிக்கு அல்லது ஒரு கேன்வாஸுக்கு).

டெம்போரல் ஃபில்டரிங்கைப் புரிந்துகொள்ளுதல்

இரைச்சல் குறைப்பு நுட்பங்களை இரண்டு வகைகளாகப் பிரிக்கலாம்: இடஞ்சார்ந்த மற்றும் டெம்போரல்.

• இடஞ்சார்ந்த ஃபில்டரிங் (Spatial Filtering): இந்த நுட்பம் ஒரு ஃபிரேமில் தனித்தனியாக செயல்படுகிறது. இது இரைச்சலை அடையாளம் கண்டு மென்மையாக்க அண்டை பிக்சல்களுக்கு இடையிலான உறவுகளை பகுப்பாய்வு செய்கிறது. ஒரு எளிய உதாரணம் ஒரு மங்கலான வடிகட்டி (blur filter). இரைச்சலைக் குறைப்பதில் திறம்பட இருந்தாலும், இடஞ்சார்ந்த வடிகட்டிகள் முக்கியமான விவரங்களையும் விளிம்புகளையும் மென்மையாக்கக்கூடும், இது குறைவான கூர்மையான படத்திற்கு வழிவகுக்கிறது.
• டெம்போரல் ஃபில்டரிங் (Temporal Filtering): இது நாம் கவனம் செலுத்தும் மிகவும் அதிநவீன அணுகுமுறை. இது காலப்போக்கில் பல ஃபிரேம்களில் செயல்படுகிறது. உண்மையான காட்சிகளின் உள்ளடக்கம் அடுத்தடுத்த ஃபிரேம்களில் தொடர்புபடுத்தப்பட வாய்ப்புள்ளது, அதேசமயம் இரைச்சல் சீரற்றது மற்றும் தொடர்பற்றது என்பது அடிப்படைக் கொள்கையாகும். பல ஃபிரேம்களில் ஒரு குறிப்பிட்ட இடத்தில் ஒரு பிக்சலின் மதிப்பை ஒப்பிடுவதன் மூலம், சீரான சிக்னலையும் (உண்மையான படம்) சீரற்ற ஏற்ற இறக்கங்களையும் (இரைச்சல்) வேறுபடுத்தி அறியலாம்.

டெம்போரல் ஃபில்டரிங்கின் எளிய வடிவம் டெம்போரல் சராசரி (temporal averaging) ஆகும். உங்களிடம் தற்போதைய ஃபிரேம் மற்றும் முந்தைய ஃபிரேம் இருப்பதாக கற்பனை செய்து பாருங்கள். எந்தவொரு பிக்சலுக்கும், அதன் 'உண்மையான' மதிப்பு தற்போதைய ஃபிரேமில் உள்ள அதன் மதிப்பிற்கும் முந்தைய ஃபிரேமில் உள்ள அதன் மதிப்பிற்கும் இடையில் எங்காவது இருக்க வாய்ப்புள்ளது. அவற்றைக் கலப்பதன் மூலம், சீரற்ற இரைச்சலை நாம் சராசரியாகக் குறைக்கலாம். புதிய பிக்சல் மதிப்பை ஒரு எளிய எடையிடப்பட்ட சராசரி மூலம் கணக்கிடலாம்:

new_pixel = (alpha * current_pixel) + ((1 - alpha) * previous_pixel)

இங்கே, alpha என்பது 0 மற்றும் 1 க்கு இடையிலான ஒரு கலவைக் காரணி. அதிக alpha என்பது நாம் தற்போதைய ஃபிரேமை அதிகம் நம்புகிறோம், இதன் விளைவாக குறைந்த இரைச்சல் குறைப்பு ஆனால் குறைவான இயக்கக் கலைப்பொருட்கள் ஏற்படுகின்றன. குறைந்த alpha வலுவான இரைச்சல் குறைப்பை வழங்குகிறது, ஆனால் இயக்கமுள்ள பகுதிகளில் 'கோஸ்டிங்' அல்லது தடங்களை ஏற்படுத்தக்கூடும். சரியான சமநிலையைக் கண்டறிவது முக்கியம்.

ஒரு எளிய டெம்போரல் சராசரி ஃபில்டரை செயல்படுத்துதல்

WebCodecs-ஐப் பயன்படுத்தி இந்த கருத்தின் ஒரு நடைமுறைச் செயலாக்கத்தை உருவாக்குவோம். நமது பைப்லைன் மூன்று முக்கிய படிகளைக் கொண்டிருக்கும்:

1. VideoFrame பொருட்களின் ஒரு ஸ்ட்ரீமைப் பெறுங்கள் (எ.கா., ஒரு வெப்கேமிலிருந்து).
2. ஒவ்வொரு ஃபிரேமிற்கும், முந்தைய ஃபிரேமின் தரவைப் பயன்படுத்தி நமது டெம்போரல் ஃபில்டரைப் பயன்படுத்துங்கள்.
3. ஒரு புதிய, சுத்தம் செய்யப்பட்ட VideoFrame-ஐ உருவாக்குங்கள்.

படி 1: ஃபிரேம் ஸ்ட்ரீமை அமைத்தல்

VideoFrame பொருட்களின் நேரடி ஸ்ட்ரீமைப் பெறுவதற்கான எளிதான வழி MediaStreamTrackProcessor-ஐப் பயன்படுத்துவதாகும், இது ஒரு MediaStreamTrack-ஐ (getUserMedia-விலிருந்து வருவது போன்றது) எடுத்து அதன் ஃபிரேம்களை படிக்கக்கூடிய ஸ்ட்ரீமாக வெளிப்படுத்துகிறது.

கருத்தியல் ஜாவாஸ்கிரிப்ட் அமைப்பு:

async function setupVideoStream() { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); const track = stream.getVideoTracks()[0]; const trackProcessor = new MediaStreamTrackProcessor({ track }); const reader = trackProcessor.readable.getReader(); let previousFrameBuffer = null; let previousFrameTimestamp = -1; while (true) { const { value: frame, done } = await reader.read(); if (done) break; // இங்கே தான் நாம் ஒவ்வொரு 'frame'-ஐயும் செயலாக்குவோம் const processedFrame = await applyTemporalFilter(frame, previousFrameBuffer); // அடுத்த மறுசெய்கைக்கு, நாம் *அசல்* தற்போதைய ஃபிரேமின் தரவை சேமிக்க வேண்டும் // நீங்கள் அசல் ஃபிரேமின் தரவை மூடுவதற்கு முன் 'previousFrameBuffer'-க்கு நகலெடுக்க வேண்டும். // நினைவகத்தை விடுவிக்க ஃபிரேம்களை மூட மறக்காதீர்கள்! frame.close(); // processedFrame உடன் ஏதாவது செய்யுங்கள் (எ.கா., கேன்வாஸில் ரெண்டர் செய்தல், குறியாக்கம் செய்தல்) // ... பின்னர் அதையும் மூடுங்கள்! processedFrame.close(); } }

படி 2: ஃபில்டரிங் அல்காரிதம் - பிக்சல் தரவுடன் வேலை செய்தல்

இது நமது வேலையின் மையப்பகுதி. நமது applyTemporalFilter செயல்பாட்டிற்குள், உள்வரும் ஃபிரேமின் பிக்சல் தரவை நாம் அணுக வேண்டும். எளிமைக்காக, நமது ஃபிரேம்கள் 'RGBA' வடிவத்தில் இருப்பதாகக் கொள்வோம். ஒவ்வொரு பிக்சலும் 4 பைட்டுகளால் குறிப்பிடப்படுகிறது: சிவப்பு, பச்சை, நீலம் மற்றும் ஆல்பா (ஒளிபுகுவு).

async function applyTemporalFilter(currentFrame, previousFrameBuffer) { // நமது கலவைக் காரணியை வரையறுக்கவும். 0.8 என்பது புதிய ஃபிரேமின் 80% மற்றும் பழைய ஃபிரேமின் 20%. const alpha = 0.8; // பரிமாணங்களைப் பெறுங்கள் const width = currentFrame.codedWidth; const height = currentFrame.codedHeight; // தற்போதைய ஃபிரேமின் பிக்சல் தரவை வைத்திருக்க ஒரு ArrayBuffer-ஐ ஒதுக்கவும். const currentFrameSize = width * height * 4; // RGBA-க்கு ஒரு பிக்சலுக்கு 4 பைட்டுகள் const currentFrameBuffer = new Uint8Array(currentFrameSize); await currentFrame.copyTo(currentFrameBuffer); // இது முதல் ஃபிரேம் என்றால், கலப்பதற்கு முந்தைய ஃபிரேம் இல்லை. // அதை அப்படியே திருப்பி அனுப்பவும், ஆனால் அடுத்த மறுசெய்கைக்காக அதன் பஃபரை சேமிக்கவும். if (!previousFrameBuffer) { const newFrameBuffer = new Uint8Array(currentFrameBuffer); // இந்த செயல்பாட்டிற்கு வெளியே இந்த ஒன்றைக் கொண்டு நமது உலகளாவிய 'previousFrameBuffer'-ஐ புதுப்பிப்போம். return { buffer: newFrameBuffer, frame: currentFrame }; } // நமது வெளியீட்டு ஃபிரேமிற்கு ஒரு புதிய பஃபரை உருவாக்கவும். const outputFrameBuffer = new Uint8Array(currentFrameSize); // முக்கிய செயலாக்கச் சுற்று. for (let i = 0; i < currentFrameSize; i++) { const currentPixelValue = currentFrameBuffer[i]; const previousPixelValue = previousFrameBuffer[i]; // ஒவ்வொரு வண்ண சேனலுக்கும் டெம்போரல் சராசரி சூத்திரத்தைப் பயன்படுத்தவும். // நாம் ஆல்பா சேனலைத் தவிர்க்கிறோம் (ஒவ்வொரு 4வது பைட்). if ((i + 1) % 4 !== 0) { outputFrameBuffer[i] = Math.round(alpha * currentPixelValue + (1 - alpha) * previousPixelValue); } else { // ஆல்பா சேனலை அப்படியே வைத்திருக்கவும். outputFrameBuffer[i] = currentPixelValue; } } return { buffer: outputFrameBuffer, frame: currentFrame }; }

YUV வடிவங்கள் (I420, NV12) பற்றிய ஒரு குறிப்பு: RGBA புரிந்துகொள்ள எளிதானது என்றாலும், பெரும்பாலான வீடியோக்கள் செயல்திறனுக்காக YUV வண்ண இடைவெளிகளில் இயல்பாகவே செயலாக்கப்படுகின்றன. YUV-ஐ கையாள்வது மிகவும் சிக்கலானது, ஏனெனில் வண்ணம் (U, V) மற்றும் பிரகாசம் (Y) தகவல்கள் தனித்தனியாக சேமிக்கப்படுகின்றன ('தளங்களில்'). வடிகட்டுதல் தர்க்கம் அப்படியே உள்ளது, ஆனால் நீங்கள் ஒவ்வொரு தளத்தையும் (Y, U, மற்றும் V) தனித்தனியாக மறுசெய்கை செய்ய வேண்டும், அவற்றின் அந்தந்த பரிமாணங்களைக் கவனத்தில் கொள்ள வேண்டும் (வண்ணத் தளங்கள் பெரும்பாலும் குறைந்த தெளிவுத்திறன் கொண்டவை, இது குரோமா சப்சாம்பிளிங் எனப்படும் ஒரு நுட்பம்).

படி 3: புதிய வடிகட்டப்பட்ட `VideoFrame`-ஐ உருவாக்குதல்

நமது சுற்று முடிந்த பிறகு, outputFrameBuffer நமது புதிய, தூய்மையான ஃபிரேமிற்கான பிக்சல் தரவைக் கொண்டுள்ளது. இப்போது இதை ஒரு புதிய VideoFrame பொருளில் போர்த்த வேண்டும், அசல் ஃபிரேமிலிருந்து மெட்டாடேட்டாவை நகலெடுப்பதை உறுதி செய்ய வேண்டும்.

// applyTemporalFilter-ஐ அழைத்த பிறகு உங்கள் முக்கிய சுற்றிற்குள்... const { buffer: processedBuffer, frame: originalFrame } = await applyTemporalFilter(frame, previousFrameBuffer); // நமது செயலாக்கப்பட்ட பஃபரிலிருந்து ஒரு புதிய VideoFrame-ஐ உருவாக்கவும். const newFrame = new VideoFrame(processedBuffer, { format: 'RGBA', codedWidth: originalFrame.codedWidth, codedHeight: originalFrame.codedHeight, timestamp: originalFrame.timestamp, duration: originalFrame.duration }); // முக்கியமானது: அடுத்த மறுசெய்கைக்காக முந்தைய ஃபிரேம் பஃபரைப் புதுப்பிக்கவும். // நாம் வடிகட்டப்பட்ட தரவை அல்ல, *அசல்* ஃபிரேமின் தரவை நகலெடுக்க வேண்டும். // வடிகட்டுவதற்கு முன் ஒரு தனி நகல் எடுக்கப்பட வேண்டும். previousFrameBuffer = new Uint8Array(originalFrameData); // இப்போது நீங்கள் 'newFrame'-ஐப் பயன்படுத்தலாம். அதை ரெண்டர் செய்யுங்கள், குறியாக்கம் செய்யுங்கள், முதலியன. // renderer.draw(newFrame); // மற்றும் முக்கியமாக, நினைவகக் கசிவுகளைத் தடுக்க நீங்கள் முடித்ததும் அதை மூடவும். newFrame.close();

நினைவக மேலாண்மை மிகவும் முக்கியம்: VideoFrame பொருள்கள் அதிக அளவு சுருக்கப்படாத வீடியோ தரவை வைத்திருக்கக்கூடும் மற்றும் ஜாவாஸ்கிரிப்ட் குவியலுக்கு வெளியே உள்ள நினைவகத்தால் ஆதரிக்கப்படலாம். நீங்கள் முடித்த ஒவ்வொரு ஃபிரேமிலும் frame.close()-ஐ அழைக்க வேண்டும். அவ்வாறு செய்யத் தவறினால் விரைவாக நினைவகம் தீர்ந்துவிடும் மற்றும் தாவல் செயலிழந்துவிடும்.

செயல்திறன் பரிசீலனைகள்: ஜாவாஸ்கிரிப்ட் மற்றும் WebAssembly ஒப்பீடு

மேலே உள்ள தூய ஜாவாஸ்கிரிப்ட் செயலாக்கம் கற்றல் மற்றும் விளக்கத்திற்கு சிறந்தது. இருப்பினும், ஒரு 30 FPS, 1080p (1920x1080) வீடியோவிற்கு, நமது சுற்று ஒரு வினாடிக்கு 248 மில்லியனுக்கும் அதிகமான கணக்கீடுகளைச் செய்ய வேண்டும்! (1920 * 1080 * 4 பைட்டுகள் * 30 fps). நவீன ஜாவாஸ்கிரிப்ட் இயந்திரங்கள் நம்பமுடியாத அளவிற்கு வேகமாக இருந்தாலும், இந்த ஒவ்வொரு பிக்சல் செயலாக்கமும் செயல்திறன் சார்ந்த தொழில்நுட்பத்திற்கு ஒரு சரியான பயன்பாட்டு நிகழ்வாகும்: WebAssembly (Wasm).

WebAssembly அணுகுமுறை

WebAssembly உங்களை C++, Rust, அல்லது Go போன்ற மொழிகளில் எழுதப்பட்ட குறியீட்டை உலாவியில் ஏறக்குறைய நேட்டிவ் வேகத்தில் இயக்க அனுமதிக்கிறது. நமது டெம்போரல் ஃபில்டருக்கான தர்க்கம் இந்த மொழிகளில் செயல்படுத்துவது எளிது. நீங்கள் உள்ளீடு மற்றும் வெளியீட்டு பஃபர்களுக்கான சுட்டிகளை எடுத்து அதே மறுசெய்கை கலவை செயல்பாட்டைச் செய்யும் ஒரு செயல்பாட்டை எழுதுவீர்கள்.

Wasm-க்கான கருத்தியல் C++ செயல்பாடு:

extern "C" { void apply_temporal_filter(unsigned char* current_frame, unsigned char* previous_frame, unsigned char* output_frame, int buffer_size, float alpha) { for (int i = 0; i < buffer_size; ++i) { if ((i + 1) % 4 != 0) { // ஆல்பா சேனலைத் தவிர்க்கவும் output_frame[i] = (unsigned char)(alpha * current_frame[i] + (1.0 - alpha) * previous_frame[i]); } else { output_frame[i] = current_frame[i]; } } } }

ஜாவாஸ்கிரிப்ட் பக்கத்திலிருந்து, நீங்கள் இந்த தொகுக்கப்பட்ட Wasm தொகுதியை ஏற்றுவீர்கள். முக்கிய செயல்திறன் நன்மை நினைவகத்தைப் பகிர்வதிலிருந்து வருகிறது. நீங்கள் ஜாவாஸ்கிரிப்ட்டில் ArrayBuffer-களை உருவாக்கலாம், அவை Wasm தொகுதியின் நேரியல் நினைவகத்தால் ஆதரிக்கப்படுகின்றன. இது ஃபிரேம் தரவை எந்தவிதமான விலையுயர்ந்த நகலெடுப்பும் இல்லாமல் Wasm-க்கு அனுப்ப உங்களை அனுமதிக்கிறது. முழு பிக்சல்-செயலாக்கச் சுற்றும் ஒரு ஒற்றை, மிகவும் உகந்ததாக்கப்பட்ட Wasm செயல்பாட்டு அழைப்பாக இயங்குகிறது, இது ஒரு ஜாவாஸ்கிரிப்ட் `for` சுற்றை விட கணிசமாக வேகமானது.

மேம்பட்ட டெம்போரல் ஃபில்டரிங் நுட்பங்கள்

எளிய டெம்போரல் சராசரி ஒரு சிறந்த தொடக்கப் புள்ளியாகும், ஆனால் அதில் ஒரு குறிப்பிடத்தக்க குறைபாடு உள்ளது: இது இயக்க மங்கல் அல்லது 'கோஸ்டிங்' ஐ அறிமுகப்படுத்துகிறது. ஒரு பொருள் நகரும்போது, தற்போதைய ஃபிரேமில் உள்ள அதன் பிக்சல்கள் முந்தைய ஃபிரேமிலிருந்து பின்னணி பிக்சல்களுடன் கலக்கப்படுகின்றன, இது ஒரு தடத்தை உருவாக்குகிறது. ஒரு உண்மையான தொழில்முறை-தர வடிகட்டியை உருவாக்க, நாம் இயக்கத்தைக் கணக்கில் கொள்ள வேண்டும்.

இயக்க-ஈடுசெய்யப்பட்ட டெம்போரல் ஃபில்டரிங் (MCTF)

டெம்போரல் இரைச்சல் குறைப்பிற்கான தங்கத் தரம் இயக்க-ஈடுசெய்யப்பட்ட டெம்போரல் ஃபில்டரிங் ஆகும். முந்தைய ஃபிரேமில் அதே (x, y) ஒருங்கிணைப்பில் உள்ள பிக்சலுடன் ஒரு பிக்சலை கண்மூடித்தனமாக கலப்பதற்குப் பதிலாக, MCTF முதலில் அந்த பிக்சல் எங்கிருந்து வந்தது என்பதைக் கண்டுபிடிக்க முயற்சிக்கிறது.

செயல்முறை உள்ளடக்கியது:

1. இயக்க மதிப்பீடு: அல்காரிதம் தற்போதைய ஃபிரேமை தொகுதிகளாகப் பிரிக்கிறது (எ.கா., 16x16 பிக்சல்கள்). ஒவ்வொரு தொகுதிக்கும், அது மிகவும் ஒத்த தொகுதியைக் கண்டுபிடிக்க முந்தைய ஃபிரேமில் தேடுகிறது (எ.கா., குறைந்தபட்ச முழுமையான வேறுபாடுகளின் கூட்டுத்தொகையைக் கொண்டுள்ளது). இந்த இரண்டு தொகுதிகளுக்கு இடையிலான இடப்பெயர்ச்சி 'இயக்க திசையன்' என்று அழைக்கப்படுகிறது.
2. இயக்க ஈடுசெய்தல்: பின்னர் அது அவற்றின் இயக்க திசையன்களின்படி தொகுதிகளை மாற்றுவதன் மூலம் முந்தைய ஃபிரேமின் 'இயக்க-ஈடுசெய்யப்பட்ட' பதிப்பை உருவாக்குகிறது.
3. வடிகட்டுதல்: இறுதியாக, இது தற்போதைய ஃபிரேமிற்கும் இந்த புதிய, இயக்க-ஈடுசெய்யப்பட்ட முந்தைய ஃபிரேமிற்கும் இடையில் டெம்போரல் சராசரியைச் செய்கிறது.

இந்த வழியில், ஒரு நகரும் பொருள் முந்தைய ஃபிரேமிலிருந்து அது இப்போது வெளிப்படுத்திய பின்னணியுடன் அல்ல, தன்னுடன் கலக்கப்படுகிறது. இது கோஸ்டிங் கலைப்பொருட்களை வியத்தகு முறையில் குறைக்கிறது. இயக்க மதிப்பீட்டைச் செயல்படுத்துவது கணக்கீட்டு ரீதியாக தீவிரமானது மற்றும் சிக்கலானது, பெரும்பாலும் மேம்பட்ட அல்காரிதம்கள் தேவைப்படுகிறது, மேலும் இது கிட்டத்தட்ட பிரத்தியேகமாக WebAssembly அல்லது WebGPU கணக்கீட்டு ஷேடர்களுக்கான ஒரு பணியாகும்.

தகவமைப்பு வடிகட்டுதல் (Adaptive Filtering)

மற்றொரு மேம்பாடு வடிகட்டியை தகவமைப்புள்ளதாக மாற்றுவதாகும். முழு ஃபிரேமிற்கும் ஒரு நிலையான alpha மதிப்பைப் பயன்படுத்துவதற்குப் பதிலாக, உள்ளூர் நிலைமைகளின் அடிப்படையில் அதை நீங்கள் மாற்றலாம்.

• இயக்க தகவமைப்பு: அதிக இயக்கம் கண்டறியப்பட்ட பகுதிகளில், நீங்கள் alpha-வை அதிகரிக்கலாம் (எ.கா., 0.95 அல்லது 1.0 க்கு), கிட்டத்தட்ட முழுவதுமாக தற்போதைய ஃபிரேமை நம்பி, எந்த இயக்க மங்கலையும் தடுக்கலாம். நிலையான பகுதிகளில் (பின்னணியில் ஒரு சுவர் போன்றது), நீங்கள் alpha-வை குறைக்கலாம் (எ.கா., 0.5 க்கு), மிகவும் வலுவான இரைச்சல் குறைப்பிற்காக.
• ஒளிர்வு தகவமைப்பு: இரைச்சல் பெரும்பாலும் ஒரு படத்தின் இருண்ட பகுதிகளில் அதிகமாகத் தெரியும். நிழல்களில் வடிகட்டியை மேலும் தீவிரமாகவும், விவரங்களைப் பாதுகாக்க பிரகாசமான பகுதிகளில் குறைவாகவும் ஆக்கலாம்.

நடைமுறைப் பயன்பாடுகள் மற்றும் உபயோகங்கள்

உலாவியில் உயர்தர இரைச்சல் குறைப்பைச் செய்யும் திறன் பல சாத்தியங்களைத் திறக்கிறது:

• நிகழ்நேரத் தொடர்பு (WebRTC): ஒரு பயனரின் வெப்கேம் ஃபீடை வீடியோ குறியாக்கிக்கு அனுப்பும் முன் முன்-செயலாக்கம் செய்யுங்கள். இது குறைந்த-ஒளி சூழல்களில் வீடியோ அழைப்புகளுக்கு ஒரு பெரிய வெற்றியாகும், இது காட்சித் தரத்தை மேம்படுத்துகிறது மற்றும் தேவைப்படும் அலைவரிசையைக் குறைக்கிறது.
• இணையம் சார்ந்த வீடியோ எடிட்டிங்: உலாவி-உள்ளான வீடியோ எடிட்டரில் ஒரு அம்சமாக 'Denoise' வடிகட்டியை வழங்குங்கள், இது பயனர்கள் தங்கள் பதிவேற்றிய காட்சிகளை சர்வர்-பக்க செயலாக்கம் இல்லாமல் சுத்தம் செய்ய அனுமதிக்கிறது.
• கிளவுட் கேமிங் மற்றும் ரிமோட் டெஸ்க்டாப்: சுருக்கக் கலைப்பொருட்களைக் குறைக்கவும், தெளிவான, நிலையான படத்தை வழங்கவும் உள்வரும் வீடியோ ஸ்ட்ரீம்களை சுத்தம் செய்யுங்கள்.
• கணினி பார்வை முன்-செயலாக்கம்: இணையம் சார்ந்த AI/ML பயன்பாடுகளுக்கு (பொருள் கண்காணிப்பு அல்லது முக அங்கீகாரம் போன்றவை), உள்ளீட்டு வீடியோவை இரைச்சல் நீக்குவது தரவை நிலைப்படுத்தலாம் மற்றும் மேலும் துல்லியமான மற்றும் நம்பகமான முடிவுகளுக்கு வழிவகுக்கும்.

சவால்கள் மற்றும் எதிர்கால திசைகள்

சக்திவாய்ந்ததாக இருந்தாலும், இந்த அணுகுமுறை சவால்கள் இல்லாமல் இல்லை. டெவலப்பர்கள் கவனத்தில் கொள்ள வேண்டியவை:

• செயல்திறன்: HD அல்லது 4K வீடியோவிற்கான நிகழ்நேர செயலாக்கம் தேவைப்படுகிறது. திறமையான செயலாக்கம், பொதுவாக WebAssembly உடன், அவசியமானது.
• நினைவகம்: ஒன்று அல்லது அதற்கு மேற்பட்ட முந்தைய ஃபிரேம்களை சுருக்கப்படாத பஃபர்களாக சேமிப்பது குறிப்பிடத்தக்க அளவு RAM-ஐப் பயன்படுத்துகிறது. கவனமான மேலாண்மை அவசியம்.
• தாமதம்: ஒவ்வொரு செயலாக்கப் படியும் தாமதத்தைச் சேர்க்கிறது. நிகழ்நேரத் தொடர்புக்கு, இந்த பைப்லைன் குறிப்பிடத்தக்க தாமதங்களைத் தவிர்க்க மிகவும் உகந்ததாக இருக்க வேண்டும்.
• WebGPU உடன் எதிர்காலம்: வளர்ந்து வரும் WebGPU API இந்த வகையான வேலைக்கு ஒரு புதிய எல்லையை வழங்கும். இது இந்த ஒவ்வொரு பிக்சல் அல்காரிதம்களையும் கணினியின் GPU-வில் மிகவும் இணையான கணக்கீட்டு ஷேடர்களாக இயக்க அனுமதிக்கும், இது CPU-வில் உள்ள WebAssembly-ஐ விட செயல்திறனில் மற்றொரு பெரிய பாய்ச்சலை வழங்கும்.

முடிவுரை

WebCodecs API இணையத்தில் மேம்பட்ட மீடியா செயலாக்கத்திற்கு ஒரு புதிய சகாப்தத்தைக் குறிக்கிறது. இது பாரம்பரிய பிளாக்-பாக்ஸ் <video> உறுப்பின் தடைகளை உடைத்து, டெவலப்பர்களுக்கு உண்மையான தொழில்முறை வீடியோ பயன்பாடுகளை உருவாக்கத் தேவையான நுண்ணிய கட்டுப்பாட்டைக் கொடுக்கிறது. டெம்போரல் இரைச்சல் குறைப்பு அதன் சக்தியின் ஒரு சரியான எடுத்துக்காட்டு: பயனர் உணரும் தரம் மற்றும் அடிப்படை தொழில்நுட்பத் திறன் ஆகிய இரண்டையும் நேரடியாக நிவர்த்தி செய்யும் ஒரு அதிநவீன நுட்பம்.

தனிப்பட்ட VideoFrame பொருட்களை இடைமறிப்பதன் மூலம், இரைச்சலைக் குறைக்கவும், சுருக்கத்தன்மையை மேம்படுத்தவும், மற்றும் ஒரு உயர்ந்த வீடியோ அனுபவத்தை வழங்கவும் சக்திவாய்ந்த வடிகட்டுதல் தர்க்கத்தை நாம் செயல்படுத்த முடியும் என்பதைப் பார்த்தோம். ஒரு எளிய ஜாவாஸ்கிரிப்ட் செயலாக்கம் ஒரு சிறந்த தொடக்கப் புள்ளியாக இருந்தாலும், ஒரு உற்பத்திக்குத் தயாரான, நிகழ்நேரத் தீர்வுக்கான பாதை WebAssembly-யின் செயல்திறன் மூலமாகவும், எதிர்காலத்தில், WebGPU-வின் இணையான செயலாக்க சக்தி மூலமாகவும் செல்கிறது.

அடுத்த முறை நீங்கள் ஒரு வலைப் பயன்பாட்டில் ஒரு தானியமான வீடியோவைப் பார்க்கும்போது, அதைச் சரிசெய்வதற்கான கருவிகள் இப்போது, முதல் முறையாக, வலை டெவலப்பர்களின் கைகளில் நேரடியாக உள்ளன என்பதை நினைவில் கொள்ளுங்கள். இது இணையத்தில் வீடியோவைக் கொண்டு உருவாக்குவதற்கு ஒரு அற்புதமான நேரம்.