બ્રાઉઝરમાં ઉચ્ચ-ગુણવત્તાવાળા વિડિઓ સ્ટ્રીમિંગને અનલોક કરો. વેબકોડેક્સ API અને વિડિઓફ્રેમ મેનીપ્યુલેશનનો ઉપયોગ કરીને નોઈઝ રિડક્શન માટે અદ્યતન ટેમ્પોરલ ફિલ્ટરિંગ લાગુ કરવાનું શીખો.
વેબકોડેક્સમાં નિપુણતા: ટેમ્પોરલ નોઈઝ રિડક્શન વડે વિડિઓ ગુણવત્તામાં સુધારો
વેબ-આધારિત વિડિઓ સંચાર, સ્ટ્રીમિંગ અને રિયલ-ટાઇમ એપ્લિકેશન્સની દુનિયામાં, ગુણવત્તા સર્વોપરી છે. વિશ્વભરના વપરાશકર્તાઓ સ્પષ્ટ, શુદ્ધ વિડિઓ અપેક્ષા રાખે છે, ભલે તેઓ બિઝનેસ મીટિંગમાં હોય, કોઈ લાઈવ ઇવેન્ટ જોઈ રહ્યા હોય, અથવા રિમોટ સેવા સાથે વાતચીત કરી રહ્યા હોય. જોકે, વિડિઓ સ્ટ્રીમ્સમાં ઘણીવાર એક સતત અને ધ્યાનભંગ કરનાર ખામી હોય છે: નોઈઝ. આ ડિજિટલ નોઈઝ, જે ઘણીવાર દાણાદાર અથવા સ્ટેટિક ટેક્સચર તરીકે દેખાય છે, તે જોવાનો અનુભવ બગાડી શકે છે અને, આશ્ચર્યજનક રીતે, બેન્ડવિડ્થનો વપરાશ વધારી શકે છે. સદભાગ્યે, એક શક્તિશાળી બ્રાઉઝર API, WebCodecs, ડેવલપર્સને આ સમસ્યાનો સીધો સામનો કરવા માટે અભૂતપૂર્વ નીચલા-સ્તરનું નિયંત્રણ આપે છે.
આ વ્યાપક માર્ગદર્શિકા તમને એક વિશિષ્ટ, ઉચ્ચ-પ્રભાવી વિડિઓ પ્રોસેસિંગ ટેકનિક માટે WebCodecsનો ઉપયોગ કરવામાં ઊંડાણપૂર્વક લઈ જશે: ટેમ્પોરલ નોઈઝ રિડક્શન. અમે વિડિઓ નોઈઝ શું છે, તે શા માટે નુકસાનકારક છે, અને તમે બ્રાઉઝરમાં સીધી ફિલ્ટરિંગ પાઇપલાઇન બનાવવા માટે VideoFrame ઓબ્જેક્ટનો કેવી રીતે લાભ લઈ શકો છો તે શોધીશું. અમે મૂળભૂત સિદ્ધાંતથી લઈને વ્યવહારિક જાવાસ્ક્રિપ્ટ અમલીકરણ, વેબએસેમ્બલી સાથે પ્રદર્શન વિચારણાઓ, અને વ્યાવસાયિક-ગ્રેડ પરિણામો પ્રાપ્ત કરવા માટે અદ્યતન ખ્યાલો સુધી બધું આવરી લઈશું.
વિડિઓ નોઈઝ શું છે અને તે શા માટે મહત્વનું છે?
આપણે કોઈ સમસ્યાને ઠીક કરીએ તે પહેલાં, આપણે તેને સમજવી જોઈએ. ડિજિટલ વિડિઓમાં, નોઈઝ એ વિડિઓ સિગ્નલમાં બ્રાઇટનેસ અથવા રંગની માહિતીમાં રેન્ડમ ભિન્નતાનો ઉલ્લેખ કરે છે. તે છબી કેપ્ચરિંગ અને ટ્રાન્સમિશન પ્રક્રિયાનું અનિચ્છનીય ઉપ-ઉત્પાદન છે.
નોઈઝના સ્ત્રોતો અને પ્રકારો
- સેન્સર નોઈઝ: મુખ્ય કારણ. ઓછી-પ્રકાશની સ્થિતિમાં, કેમેરા સેન્સર પૂરતી તેજસ્વી છબી બનાવવા માટે આવતા સિગ્નલને વિસ્તૃત કરે છે. આ વિસ્તરણ પ્રક્રિયા રેન્ડમ ઇલેક્ટ્રોનિક વધઘટને પણ વેગ આપે છે, જેના પરિણામે દૃશ્યમાન દાણા બને છે.
- થર્મલ નોઈઝ: કેમેરાના ઇલેક્ટ્રોનિક્સ દ્વારા ઉત્પન્ન થતી ગરમી ઇલેક્ટ્રોનસને રેન્ડમ રીતે ખસેડવાનું કારણ બની શકે છે, જે પ્રકાશના સ્તરથી સ્વતંત્ર નોઈઝ બનાવે છે.
- ક્વોન્ટાઇઝેશન નોઈઝ: એનાલોગ-થી-ડિજિટલ રૂપાંતરણ અને કમ્પ્રેશન પ્રક્રિયાઓ દરમિયાન દાખલ થાય છે, જ્યાં સતત મૂલ્યોને મર્યાદિત સમૂહના અલગ સ્તરો પર મેપ કરવામાં આવે છે.
આ નોઈઝ સામાન્ય રીતે ગોસિયન નોઈઝ તરીકે દેખાય છે, જ્યાં દરેક પિક્સેલની તીવ્રતા તેના સાચા મૂલ્યની આસપાસ રેન્ડમ રીતે બદલાય છે, જે સમગ્ર ફ્રેમમાં એક સુંદર, ઝબકતા દાણા બનાવે છે.
નોઈઝની બેવડી અસર
વિડિઓ નોઈઝ માત્ર એક કોસ્મેટિક સમસ્યા કરતાં વધુ છે; તેના નોંધપાત્ર તકનીકી અને ધારણાત્મક પરિણામો છે:
- બગડેલો વપરાશકર્તા અનુભવ: સૌથી સ્પષ્ટ અસર દ્રશ્ય ગુણવત્તા પર છે. નોઈઝવાળો વિડિઓ અવ્યાવસાયિક દેખાય છે, ધ્યાન ભંગ કરનાર હોય છે, અને મહત્વપૂર્ણ વિગતોને પારખવામાં મુશ્કેલી ઊભી કરી શકે છે. ટેલિકોન્ફરન્સિંગ જેવી એપ્લિકેશન્સમાં, તે સહભાગીઓને દાણાદાર અને અસ્પષ્ટ બનાવી શકે છે, જે હાજરીની ભાવનાને ઘટાડે છે.
- ઘટેલી કમ્પ્રેશન કાર્યક્ષમતા: આ ઓછી સાહજિક પરંતુ સમાન રીતે જટિલ સમસ્યા છે. આધુનિક વિડિઓ કોડેક્સ (જેમ કે H.264, VP9, AV1) પુનરાવર્તનનો લાભ લઈને ઉચ્ચ કમ્પ્રેશન રેશિયો પ્રાપ્ત કરે છે. તેઓ ફ્રેમ્સ વચ્ચેની સમાનતાઓ (ટેમ્પોરલ પુનરાવર્તન) અને એક જ ફ્રેમની અંદર (સ્પેશિયલ પુનરાવર્તન) શોધે છે. નોઈઝ, તેના સ્વભાવથી, રેન્ડમ અને અણધારી છે. તે પુનરાવર્તનના આ પેટર્નને તોડે છે. એન્કોડર રેન્ડમ નોઈઝને ઉચ્ચ-આવર્તન વિગત તરીકે જુએ છે જેને સાચવવી આવશ્યક છે, જે તેને વાસ્તવિક સામગ્રીને બદલે નોઈઝને એન્કોડ કરવા માટે વધુ બિટ્સ ફાળવવા દબાણ કરે છે. આના પરિણામે સમાન દેખાતી ગુણવત્તા માટે મોટી ફાઇલ સાઈઝ અથવા સમાન બિટરેટ પર ઓછી ગુણવત્તા મળે છે.
એન્કોડિંગ પહેલાં નોઈઝ દૂર કરીને, અમે વિડિઓ સિગ્નલને વધુ અનુમાનિત બનાવી શકીએ છીએ, જે એન્કોડરને વધુ અસરકારક રીતે કામ કરવાની મંજૂરી આપે છે. આનાથી વધુ સારી દ્રશ્ય ગુણવત્તા, ઓછો બેન્ડવિડ્થ વપરાશ અને દરેક જગ્યાએ વપરાશકર્તાઓ માટે સરળ સ્ટ્રીમિંગ અનુભવ મળે છે.
વેબકોડેક્સનો પરિચય: નીચલા-સ્તરના વિડિઓ નિયંત્રણની શક્તિ
વર્ષોથી, બ્રાઉઝરમાં સીધું વિડિઓ મેનીપ્યુલેશન મર્યાદિત હતું. ડેવલપર્સ મોટે ભાગે <video> એલિમેન્ટ અને કેનવાસ APIની ક્ષમતાઓ સુધી સીમિત હતા, જેમાં ઘણીવાર GPUમાંથી પ્રદર્શન-ઘટાડનાર રીડબેક્સ સામેલ હતા. WebCodecs આ રમતને સંપૂર્ણપણે બદલી નાખે છે.
WebCodecs એ એક નીચલા-સ્તરનું API છે જે બ્રાઉઝરના બિલ્ટ-ઇન મીડિયા એન્કોડર્સ અને ડીકોડર્સને સીધો એક્સેસ પ્રદાન કરે છે. તે એવા એપ્લિકેશન્સ માટે રચાયેલ છે જેને મીડિયા પ્રોસેસિંગ પર ચોક્કસ નિયંત્રણની જરૂર હોય છે, જેમ કે વિડિઓ સંપાદકો, ક્લાઉડ ગેમિંગ પ્લેટફોર્મ્સ અને અદ્યતન રિયલ-ટાઇમ કોમ્યુનિકેશન ક્લાયન્ટ્સ.
આપણે જે મુખ્ય ઘટક પર ધ્યાન કેન્દ્રિત કરીશું તે VideoFrame ઓબ્જેક્ટ છે. એક VideoFrame વિડિઓની એક જ ફ્રેમને છબી તરીકે રજૂ કરે છે, પરંતુ તે એક સરળ બિટમેપ કરતાં ઘણું વધારે છે. તે એક અત્યંત કાર્યક્ષમ, ટ્રાન્સફર કરી શકાય તેવો ઓબ્જેક્ટ છે જે વિવિધ પિક્સેલ ફોર્મેટ્સ (જેમ કે RGBA, I420, NV12) માં વિડિઓ ડેટા રાખી શકે છે અને મહત્વપૂર્ણ મેટાડેટા ધરાવે છે જેમ કે:
timestamp: માઇક્રોસેકન્ડમાં ફ્રેમનો પ્રસ્તુતિ સમય.duration: માઇક્રોસેકન્ડમાં ફ્રેમનો સમયગાળો.codedWidthandcodedHeight: પિક્સેલ્સમાં ફ્રેમના પરિમાણો.format: ડેટાનું પિક્સેલ ફોર્મેટ (દા.ત., 'I420', 'RGBA').
મહત્વપૂર્ણ રીતે, VideoFrame copyTo() નામની એક પદ્ધતિ પ્રદાન કરે છે, જે આપણને કાચો, અનકમ્પ્રેસ્ડ પિક્સેલ ડેટા ArrayBuffer માં કોપી કરવાની મંજૂરી આપે છે. આ વિશ્લેષણ અને મેનીપ્યુલેશન માટે અમારો પ્રવેશ બિંદુ છે. એકવાર આપણી પાસે કાચા બાઇટ્સ હોય, પછી આપણે આપણું નોઈઝ રિડક્શન અલ્ગોરિધમ લાગુ કરી શકીએ છીએ અને પછી સંશોધિત ડેટામાંથી એક નવો VideoFrame બનાવી શકીએ છીએ જેથી તેને પ્રોસેસિંગ પાઇપલાઇનમાં આગળ મોકલી શકાય (દા.ત., વિડિઓ એન્કોડર અથવા કેનવાસ પર).
ટેમ્પોરલ ફિલ્ટરિંગને સમજવું
નોઈઝ રિડક્શન તકનીકોને વ્યાપક રીતે બે પ્રકારોમાં વર્ગીકૃત કરી શકાય છે: સ્પેશિયલ અને ટેમ્પોરલ.
- સ્પેશિયલ ફિલ્ટરિંગ: આ તકનીક એક જ ફ્રેમ પર એકલતામાં કાર્ય કરે છે. તે નોઈઝને ઓળખવા અને તેને સરળ બનાવવા માટે પડોશી પિક્સેલ્સ વચ્ચેના સંબંધોનું વિશ્લેષણ કરે છે. એક સરળ ઉદાહરણ બ્લર ફિલ્ટર છે. નોઈઝ ઘટાડવામાં અસરકારક હોવા છતાં, સ્પેશિયલ ફિલ્ટર્સ મહત્વપૂર્ણ વિગતો અને કિનારીઓને પણ નરમ કરી શકે છે, જે ઓછી તીક્ષ્ણ છબી તરફ દોરી જાય છે.
- ટેમ્પોરલ ફિલ્ટરિંગ: આ વધુ અત્યાધુનિક અભિગમ છે જેના પર આપણે ધ્યાન કેન્દ્રિત કરી રહ્યા છીએ. તે સમય જતાં બહુવિધ ફ્રેમ્સ પર કાર્ય કરે છે. મૂળભૂત સિદ્ધાંત એ છે કે વાસ્તવિક દ્રશ્ય સામગ્રી એક ફ્રેમથી બીજી ફ્રેમમાં સંબંધિત હોવાની સંભાવના છે, જ્યારે નોઈઝ રેન્ડમ અને અસંબંધિત છે. ઘણી ફ્રેમ્સમાં ચોક્કસ સ્થાન પર પિક્સેલના મૂલ્યની તુલના કરીને, આપણે સુસંગત સિગ્નલ (વાસ્તવિક છબી) અને રેન્ડમ વધઘટ (નોઈઝ) વચ્ચે તફાવત કરી શકીએ છીએ.
ટેમ્પોરલ ફિલ્ટરિંગનું સૌથી સરળ સ્વરૂપ ટેમ્પોરલ એવરેજિંગ છે. કલ્પના કરો કે તમારી પાસે વર્તમાન ફ્રેમ અને પાછલી ફ્રેમ છે. કોઈ પણ આપેલા પિક્સેલ માટે, તેનું 'સાચું' મૂલ્ય વર્તમાન ફ્રેમમાં તેના મૂલ્ય અને પાછલી ફ્રેમમાં તેના મૂલ્યની વચ્ચે ક્યાંક હોવાની સંભાવના છે. તેમને મિશ્રિત કરીને, આપણે રેન્ડમ નોઈઝને સરેરાશ કરી શકીએ છીએ. નવા પિક્સેલનું મૂલ્ય એક સરળ ભારિત સરેરાશ સાથે ગણી શકાય છે:
new_pixel = (alpha * current_pixel) + ((1 - alpha) * previous_pixel)
અહીં, alpha 0 અને 1 ની વચ્ચેનું મિશ્રણ પરિબળ છે. ઉચ્ચ alpha નો અર્થ છે કે આપણે વર્તમાન ફ્રેમ પર વધુ વિશ્વાસ કરીએ છીએ, જેના પરિણામે ઓછું નોઈઝ રિડક્શન થાય છે પરંતુ ઓછી ગતિની ખામીઓ થાય છે. નીચું alpha મજબૂત નોઈઝ રિડક્શન પૂરું પાડે છે પરંતુ ગતિવાળા વિસ્તારોમાં 'ઘોસ્ટિંગ' અથવા ટ્રેઇલ્સનું કારણ બની શકે છે. યોગ્ય સંતુલન શોધવું મુખ્ય છે.
એક સરળ ટેમ્પોરલ એવરેજિંગ ફિલ્ટરનો અમલ
ચાલો WebCodecs નો ઉપયોગ કરીને આ ખ્યાલનું વ્યવહારિક અમલીકરણ બનાવીએ. અમારી પાઇપલાઇનમાં ત્રણ મુખ્ય પગલાં હશે:
VideoFrameઓબ્જેક્ટ્સનો સ્ટ્રીમ મેળવો (દા.ત., વેબકેમમાંથી).- દરેક ફ્રેમ માટે, પાછલી ફ્રેમના ડેટાનો ઉપયોગ કરીને અમારું ટેમ્પોરલ ફિલ્ટર લાગુ કરો.
- એક નવો, સાફ કરેલો
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 ઓબ્જેક્ટ્સ મોટી માત્રામાં અનકમ્પ્રેસ્ડ વિડિઓ ડેટા રાખી શકે છે અને જાવાસ્ક્રિપ્ટ હીપની બહારની મેમરી દ્વારા બેકઅપ લઈ શકે છે. તમે જે દરેક ફ્રેમ સાથે પૂર્ણ કરી લો તેના પર તમારે must frame.close() કૉલ કરવો જ જોઇએ. આમ કરવામાં નિષ્ફળતા ઝડપથી મેમરી ખલાસ થવા અને ટેબ ક્રેશ થવા તરફ દોરી જશે.
પ્રદર્શન વિચારણાઓ: જાવાસ્ક્રિપ્ટ વિ. વેબએસેમ્બલી
ઉપરોક્ત શુદ્ધ જાવાસ્ક્રિપ્ટ અમલીકરણ શીખવા અને પ્રદર્શન માટે ઉત્તમ છે. જોકે, 30 FPS, 1080p (1920x1080) વિડિઓ માટે, આપણી લૂપને પ્રતિ સેકન્ડ 248 મિલિયનથી વધુ ગણતરીઓ કરવાની જરૂર છે! (1920 * 1080 * 4 બાઇટ્સ * 30 fps). જ્યારે આધુનિક જાવાસ્ક્રિપ્ટ એન્જિન અતિ ઝડપી છે, ત્યારે આ પ્રતિ-પિક્સેલ પ્રોસેસિંગ વધુ પ્રદર્શન-લક્ષી ટેકનોલોજી માટે એક સંપૂર્ણ ઉપયોગ કેસ છે: વેબએસેમ્બલી (Wasm).
વેબએસેમ્બલી અભિગમ
વેબએસેમ્બલી તમને 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) { // Skip alpha channel
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 પહેલા એ જાણવાનો પ્રયાસ કરે છે કે તે પિક્સેલ ક્યાંથી આવ્યો.
પ્રક્રિયામાં શામેલ છે:
- ગતિ અંદાજ: અલ્ગોરિધમ વર્તમાન ફ્રેમને બ્લોક્સમાં વિભાજિત કરે છે (દા.ત., 16x16 પિક્સેલ્સ). દરેક બ્લોક માટે, તે પાછલી ફ્રેમમાં સૌથી સમાન બ્લોક શોધવા માટે શોધ કરે છે (દા.ત., જેમાં સૌથી ઓછો નિરપેક્ષ તફાવતોનો સરવાળો હોય). આ બે બ્લોક્સ વચ્ચેના વિસ્થાપનને 'મોશન વેક્ટર' કહેવાય છે.
- ગતિ વળતર: તે પછી તેમના મોશન વેક્ટર્સ અનુસાર બ્લોક્સને શિફ્ટ કરીને પાછલી ફ્રેમનું 'મોશન-કમ્પેન્સેટેડ' સંસ્કરણ બનાવે છે.
- ફિલ્ટરિંગ: છેલ્લે, તે વર્તમાન ફ્રેમ અને આ નવી, મોશન-કમ્પેન્સેટેડ પાછલી ફ્રેમ વચ્ચે ટેમ્પોરલ એવરેજિંગ કરે છે.
આ રીતે, એક ગતિશીલ વસ્તુ પાછલી ફ્રેમમાંથી પોતાની સાથે ભળી જાય છે, તેણે હમણાં જ ઉઘાડેલી પૃષ્ઠભૂમિ સાથે નહીં. આ ઘોસ્ટિંગ આર્ટિફેક્ટ્સને નાટકીય રીતે ઘટાડે છે. ગતિ અંદાજ અમલમાં મૂકવો ગણતરીની દ્રષ્ટિએ સઘન અને જટિલ છે, જેમાં ઘણીવાર અદ્યતન અલ્ગોરિધમ્સની જરૂર પડે છે, અને તે લગભગ ફક્ત વેબએસેમ્બલી અથવા તો વેબજીપીયુ કમ્પ્યુટ શેડર્સ માટેનું કાર્ય છે.
અનુકૂલનશીલ ફિલ્ટરિંગ
બીજો સુધારો એ છે કે ફિલ્ટરને અનુકૂલનશીલ બનાવવો. આખા ફ્રેમ માટે નિશ્ચિત alpha મૂલ્યનો ઉપયોગ કરવાને બદલે, તમે તેને સ્થાનિક પરિસ્થિતિઓના આધારે બદલી શકો છો.
- ગતિ અનુકૂલનશીલતા: ઉચ્ચ શોધાયેલ ગતિવાળા વિસ્તારોમાં, તમે લગભગ સંપૂર્ણપણે વર્તમાન ફ્રેમ પર આધાર રાખવા માટે
alphaવધારી શકો છો (દા.ત., 0.95 અથવા 1.0), જે કોઈપણ ગતિ ધૂંધળાપણાને અટકાવે છે. સ્થિર વિસ્તારોમાં (જેમ કે પૃષ્ઠભૂમિમાં દીવાલ), તમે વધુ મજબૂત નોઈઝ રિડક્શન માટેalphaઘટાડી શકો છો (દા.ત., 0.5). - લ્યુમિનેન્સ અનુકૂલનશીલતા: નોઈઝ ઘણીવાર છબીના ઘાટા વિસ્તારોમાં વધુ દેખાય છે. ફિલ્ટરને પડછાયામાં વધુ આક્રમક અને વિગતને સાચવવા માટે તેજસ્વી વિસ્તારોમાં ઓછું આક્રમક બનાવી શકાય છે.
વ્યવહારિક ઉપયોગો અને એપ્લિકેશન્સ
બ્રાઉઝરમાં ઉચ્ચ-ગુણવત્તાવાળા નોઈઝ રિડક્શન કરવાની ક્ષમતા અસંખ્ય શક્યતાઓ ખોલે છે:
- રિયલ-ટાઇમ કોમ્યુનિકેશન (WebRTC): વપરાશકર્તાના વેબકેમ ફીડને વિડિઓ એન્કોડરને મોકલવામાં આવે તે પહેલાં પ્રી-પ્રોસેસ કરો. ઓછી-પ્રકાશવાળા વાતાવરણમાં વિડિઓ કોલ્સ માટે આ એક મોટી જીત છે, જે દ્રશ્ય ગુણવત્તામાં સુધારો કરે છે અને જરૂરી બેન્ડવિડ્થ ઘટાડે છે.
- વેબ-આધારિત વિડિઓ સંપાદન: ઇન-બ્રાઉઝર વિડિઓ સંપાદકમાં 'ડીનોઈઝ' ફિલ્ટરને એક સુવિધા તરીકે ઓફર કરો, જે વપરાશકર્તાઓને સર્વર-સાઇડ પ્રોસેસિંગ વિના તેમના અપલોડ કરેલા ફૂટેજને સાફ કરવાની મંજૂરી આપે છે.
- ક્લાઉડ ગેમિંગ અને રિમોટ ડેસ્કટોપ: કમ્પ્રેશન આર્ટિફેક્ટ્સ ઘટાડવા અને સ્પષ્ટ, વધુ સ્થિર ચિત્ર પ્રદાન કરવા માટે આવનારા વિડિઓ સ્ટ્રીમ્સને સાફ કરો.
- કમ્પ્યુટર વિઝન પ્રી-પ્રોસેસિંગ: વેબ-આધારિત AI/ML એપ્લિકેશન્સ (જેમ કે ઓબ્જેક્ટ ટ્રેકિંગ અથવા ચહેરાની ઓળખ) માટે, ઇનપુટ વિડિઓને ડીનોઈઝ કરવાથી ડેટાને સ્થિર કરી શકાય છે અને વધુ સચોટ અને વિશ્વસનીય પરિણામો તરફ દોરી શકાય છે.
પડકારો અને ભવિષ્યની દિશાઓ
શક્તિશાળી હોવા છતાં, આ અભિગમ તેના પડકારો વિના નથી. ડેવલપર્સે આ બાબતોનું ધ્યાન રાખવાની જરૂર છે:
- પ્રદર્શન: HD અથવા 4K વિડિઓ માટે રિયલ-ટાઇમ પ્રોસેસિંગ માંગણીભર્યું છે. કાર્યક્ષમ અમલીકરણ, સામાન્ય રીતે વેબએસેમ્બલી સાથે, આવશ્યક છે.
- મેમરી: એક અથવા વધુ પાછલી ફ્રેમ્સને અનકમ્પ્રેસ્ડ બફર તરીકે સંગ્રહિત કરવાથી નોંધપાત્ર પ્રમાણમાં RAM નો વપરાશ થાય છે. સાવચેતીપૂર્વકનું સંચાલન આવશ્યક છે.
- લેટન્સી: દરેક પ્રોસેસિંગ પગલું લેટન્સી ઉમેરે છે. રિયલ-ટાઇમ કોમ્યુનિકેશન માટે, આ પાઇપલાઇનને નોંધપાત્ર વિલંબ ટાળવા માટે અત્યંત ઓપ્ટિમાઇઝ કરવી આવશ્યક છે.
- WebGPU સાથેનું ભવિષ્ય: ઉભરતું WebGPU API આ પ્રકારના કાર્ય માટે એક નવી સીમા પ્રદાન કરશે. તે આ પ્રતિ-પિક્સેલ અલ્ગોરિધમ્સને સિસ્ટમના GPU પર અત્યંત સમાંતર કમ્પ્યુટ શેડર્સ તરીકે ચલાવવાની મંજૂરી આપશે, જે CPU પર વેબએસેમ્બલી કરતાં પણ પ્રદર્શનમાં બીજો મોટો ઉછાળો આપશે.
નિષ્કર્ષ
WebCodecs API વેબ પર અદ્યતન મીડિયા પ્રોસેસિંગ માટે એક નવા યુગની નિશાની છે. તે પરંપરાગત બ્લેક-બોક્સ <video> એલિમેન્ટના અવરોધોને તોડી પાડે છે અને ડેવલપર્સને ખરેખર વ્યાવસાયિક વિડિઓ એપ્લિકેશન્સ બનાવવા માટે જરૂરી ઝીણવટભર્યું નિયંત્રણ આપે છે. ટેમ્પોરલ નોઈઝ રિડક્શન તેની શક્તિનું એક ઉત્તમ ઉદાહરણ છે: એક અત્યાધુનિક તકનીક જે વપરાશકર્તા-અનુભવી ગુણવત્તા અને અંતર્ગત તકનીકી કાર્યક્ષમતા બંનેને સીધી રીતે સંબોધિત કરે છે.
આપણે જોયું છે કે વ્યક્તિગત VideoFrame ઓબ્જેક્ટ્સને અટકાવીને, આપણે નોઈઝ ઘટાડવા, કમ્પ્રેસિબિલિટી સુધારવા અને શ્રેષ્ઠ વિડિઓ અનુભવ પ્રદાન કરવા માટે શક્તિશાળી ફિલ્ટરિંગ તર્ક અમલમાં મૂકી શકીએ છીએ. જ્યારે એક સરળ જાવાસ્ક્રિપ્ટ અમલીકરણ એક ઉત્તમ પ્રારંભિક બિંદુ છે, ત્યારે ઉત્પાદન-તૈયાર, રિયલ-ટાઇમ ઉકેલનો માર્ગ વેબએસેમ્બલીના પ્રદર્શન અને, ભવિષ્યમાં, WebGPU ની સમાંતર પ્રોસેસિંગ શક્તિમાંથી પસાર થાય છે.
આગલી વખતે જ્યારે તમે વેબ એપ્લિકેશનમાં દાણાદાર વિડિઓ જુઓ, ત્યારે યાદ રાખો કે તેને ઠીક કરવાના સાધનો હવે, પ્રથમ વખત, વેબ ડેવલપર્સના હાથમાં સીધા છે. વેબ પર વિડિઓ સાથે નિર્માણ કરવાનો આ એક ઉત્તેજક સમય છે.