Sgrin Werdd yn y Porwr Gyda Chynfas HTML

Sgrin Werdd yn y Porwr Gyda Chynfas HTML 1

Mae Kapwing’s Studio bellach yn cefnogi tynnu cefndir croma yn seiliedig ar allweddi, a elwir hefyd yn golygu sgrin werdd. Mae hyn yn galluogi defnyddwyr i uwchlwytho fideos sgrin werdd, tynnu’r cefndir gwyrdd, a rhoi beth bynnag maen nhw’n ei ddewis yn ei le.

Gall Kapwing Creators nawr gyfansoddi pobl a gwrthrychau ar ddelweddau cefndir a fideos heb orfod lawrlwytho meddalwedd cymhleth. Isod mae demo:

Cyn i ni ei adeiladu, yr offeryn Chroma Key oedd un o nodweddion mwyaf poblogaidd Kapwing. Nawr, gall defnyddwyr fewnforio asedau sgrin werdd o YouTube neu farchnadoedd stoc eraill, gan ddatgloi cydweithredu â chymuned fyd-eang. Yn yr erthygl hon, rydym yn esbonio sut mae technoleg Chroma Key Kapwing yn gweithio i ddatblygwyr eraill ac entrepreneuriaid fideo adeiladu offer tebyg ar gyfer eu cais eu hunain.

Sgrin Werdd yn y Porwr Gyda Chynfas HTML 2Mae templed Sgrin Werdd Cat Jam yn enghraifft o droshaen fideo poblogaidd

Cefndir

Mae Chroma key wedi bod yn dechneg allweddol mewn prosesu effeithiau gweledol ers dros hanner can mlynedd. Mae’r broses yn dechrau trwy ffilmio pwnc o flaen cefndir unffurf lliw llachar. Yna rhoddir hidlydd i ganfod a thynnu’r cefndir, fel mai dim ond y gwrthrych sy’n weddill. Yna gellir cyfansoddi’r pwnc i amrywiaeth o gefndiroedd eraill.

Sgrin Werdd yn y Porwr Gyda Chynfas HTML 3Sgrin las a ddefnyddir ar gyfer ffilmio Star Wars III

Cyn camerâu digidol, cyflawnwyd cyfansoddi bysellau chroma gan ddefnyddio ffilm gemegol. Rhoddwyd allbwn camera trwy ffilter a oedd yn gadael golau o amleddau glas neu uwch yn unig, gan greu print du-a-gwyn a oedd yn cynnwys rhannau glas y llun yn unig. Defnyddiwyd y print hwn wedyn i hidlo’r llun gwreiddiol, i ynysu’r rhannau o’r ddelwedd nad oeddent yn las yn unig. Arweiniodd hyn at sgriniau glas fel y safon ar gyfer cyfansoddi bysellau croma.

Pan ddaeth camerâu digidol i mewn i’r llun, gwnaed cyfansoddi yn lle hynny trwy hidlo yn seiliedig ar fewnbwn un o’r tair sianel lliw a gofnodwyd gan gamerâu digidol: coch, gwyrdd a glas. Er bod sgriniau glas yn parhau i fod y safon ar gyfer ffilmiau, daeth gwyrdd yn safon ar gyfer teledu oherwydd bod castwyr tywydd yn tueddu i wisgo llawer o las. Cafodd coch ei osgoi oherwydd ei fod yn gorgyffwrdd â thonau croen.

Heddiw, gyda chymorth cyfrifiaduron, mae gennym ystod ehangach o bosibiliadau ar gyfer bysellu lliw digidol a chyfansoddi, sy’n ein galluogi i allweddi lliwiau heblaw coch, glas a gwyrdd.

Sgrin Werdd yn y Porwr Gyda Chynfas HTML 4Enghraifft o fideo gyda chefndir ysgafn wedi’i allweddu gan ddefnyddio Kapwing.

Mae sgriniau gwyrdd a glas yn parhau i fod y safon mewn cynhyrchu fideo, felly pan wnaethom olygydd Chroma Key Kapwing, roeddem am gynnal cefnogaeth gref i gael gwared ar y sianeli gwyrdd a glas. Ar yr un pryd, roeddem am fanteisio ar yr hyblygrwydd ychwanegol i ganiatáu i ddefnyddwyr dynnu cefndiroedd yn seiliedig ar god hecs arferol (a ddewisir gan ddefnyddio eyedropper), gweithred sydd wedi dod yn fwy a mwy poblogaidd wrth i bobl ddod i arfer â defnyddio “rhithwir gefndiroedd” y tu allan i setiau proffesiynol ar lwyfannau fideo fel Zoom a TikTok.

Y Ddamcaniaeth

Mae’r syniad y tu ôl i allwedd croma digidol yn ymddangos yn syml: o ystyried fideo a lliw, rydym yn tybio bod unrhyw bicseli sy’n cyfateb i’r lliw hwnnw’n cynrychioli’r cefndir, ac rydym yn ei wneud yn dryloyw. Pe bai gennych chi gefndir gwastad lle roedd popeth yn union yr un lliw, byddai hyn yn syml.

Pan fydd pobl yn ffilmio o flaen cefndiroedd corfforol, fodd bynnag, mae yna amrywiadau mewn goleuadau a chysgodion ar draws y cefndir. Mae hyn yn golygu nad ydym am nodi un lliw yn unig; yn lle hynny rydym am ddal ystod o liwiau sy’n “ddigon agos” at y lliw targed.

Sgrin Werdd yn y Porwr Gyda Chynfas HTML 5Ac enghraifft o ffilmio ar gyfer Yr Hobbit: The Desolation of Smaug, yn dangos amrywiaeth o arlliwiau ar draws yr ardaloedd gwyrdd.

Wrth ymchwilio i algorithmau posibl ar gyfer bysellu croma digidol, daethom o hyd i ddau ddull sylfaenol, y byddwn yn eu galw’n “seiliedig ar liw” ac yn “seiliedig ar sianel”. Mae’r cyntaf yn canolbwyntio ar werth lliw penodol, tra bod yr ail yn lle hynny yn cymhwyso hidlydd yn seiliedig ar un o’r sianeli lliw (coch, gwyrdd neu las). Mae gan bob un gryfderau a gwendidau, ac yn y diwedd fe benderfynon ni gefnogi’r ddau.

Seiliedig ar Lliw

Mewn algorithmau seiliedig ar liw, mae’r defnyddiwr yn dewis gwerth lliw RGB penodol. Yna byddwn yn cymharu pob picsel â’r lliw hwnnw i benderfynu a yw’n ddigon agos i’w allweddu. Mae gan hyn y fantais o weithio ar gyfer lliwiau cefndir nad ydynt yn nodweddiadol, ond gall ei gwneud yn anoddach addasu ar draws gwahaniaethau goleuo.

Roeddem am roi mwy o reolaeth fanwl i’r defnyddiwr fel y gallant ddiffinio’r ystod lliw sy’n gweithio orau iddynt. Er mwyn gwneud hyn, rydym yn ystyried lliwiau yn seiliedig ar HSV (lliw, dirlawnder, gwerth) yn hytrach na RGB.

Diagram yn dangos y gofod lliw RGB, wedi'i gynrychioli fel ciwb, o'i gymharu â'r gofod lliw HSV, wedi'i gynrychioli fel silindr.Cymharodd RGB Cube â’r Silindr HSV

Er bod RGB yn diffinio lliwiau yn seiliedig ar faint o olau coch, gwyrdd a glas y dylai sgrin ei allyrru i’w brasamcanu, mae HSV yn gwahanu’r lliw (lle byddai gwerth yn ymddangos ar olwyn lliw) oddi wrth dirlawnder (pa mor ddwfn y mae’n ymddangos) a disgleirdeb (pa mor olau / tywyll y mae’n ymddangos). Yn hytrach na chymharu RGB yn uniongyrchol, rydym yn cyfieithu’r ddau liw i HSV ac yn gwirio pob priodoledd yn erbyn trothwy.

chromaKeyOut = (red, green, blue, data) => {                                                    
    const {
      key,
      hueThreshold,
      valThreshold,
      satThreshold,
    } = data; 

    const { H, S, V } = this.rgbToHsv(red, green, blue);
    if (Math.abs(key.H - H) >= hueThreshold) return false;
    if (Math.abs(key.S - S) >= satThreshold) return false;
    if (Math.abs(key.V - V) >= valThreshold) return false;
    return true;
} 

Mae hyn yn gadael i’r defnyddiwr osod y trothwyon pellter ar gyfer pob nodwedd yn unigol, gan roi hyblygrwydd i ni ar gyfer achosion defnydd gwahanol. Os ydynt am dynnu cefnlen lliw sydd â chrychau arno, er enghraifft efallai y bydd arnynt eisiau trothwy goddefiant bach ar gyfer lliw, ond goddefiannau mawr ar gyfer dirlawnder a gwerth i gwmpasu rhannau tywyllach ac ysgafnach y cefndir.

Ar y llaw arall, os yw’r defnyddiwr am ynysu gwrthrych tywyll yn erbyn cefndir gwyn, efallai y bydd eisiau goddefgarwch uchel ar gyfer gwahaniaeth lliw, ond goddefiannau is ar gyfer dirlawnder neu newidiadau gwerth.

Addasiad dewisydd allwedd ChromaLliw, Dirlawnder, a Disgleirdeb (Gwerth) Trothwyau yn ngolygydd Kapwing

Seiliedig ar Sianel

Gan fod cefndir go iawn yn cynnwys llawer iawn o amrywiad, gall fod yn anodd mireinio dull seiliedig ar liw. Mae hefyd yn dibynnu ar ddewis gwerth lliw da sy’n agos at ganol yr ystod o werthoedd yr ydym am ei ddileu. Ar gyfer yr achosion defnydd mwyaf cyffredin o dynnu sgriniau gwyrdd neu las, gall fod yn symlach ac yn fwy effeithiol i seilio’r byselliad lliw ar y sianeli gwyrdd neu las.

Yn yr achos hwn, gadewch i ni dybio ein bod yn ynysu blaendir yn erbyn cefndir gwyrdd llachar. Nid yw’n ddigon edrych ar signal gwyrdd picsel ar ei ben ei hun oherwydd bod y signal o sianeli eraill yn newid y lliw yn gyfan gwbl. Er enghraifft, yn y gwerthoedd hecs canlynol, nodwch fod gwerth y sianel werdd yr un peth (G = 256) er bod y lliwiau picsel canlyniadol yn wahanol iawn.

Sgrin Werdd yn y Porwr Gyda Chynfas HTML 6

Yn hytrach na gwirio gwerth y sianel werdd ar ei phen ei hun, rydym am wirio ai gwyrdd yw’r brif sianel. Hynny yw, rydym am wneud yn siŵr bod y picsel yn cynnwys llawer mwy o olau gwyrdd na naill ai coch neu las. I wneud hyn, rydym yn cymryd y gwahaniaeth rhwng gwerth y sianel werdd a gwerth y sianel uchaf nesaf, a’i gymharu â throthwy:

chromaKeyOut = (red, green, blue, data) => {
    const { threshold } = data; 

    const max = Math.max(red, green, blue);
    if (max !== green) return false;

    const mid = Math.max(red, blue);
    return max - mid > threshold;
} 

Gall y defnyddiwr barhau i reoli’r trothwy i benderfynu pa mor wyrdd y mae’n rhaid i liw fod cyn iddo gael ei allweddu.

Y Manylion

Note: Mae Kapwing yn App React, felly bydd yr holl bytiau cod yn React.

Isod mae diagram bloc o gydran fideo Kapwing. Fel arfer mae’r fideo yn chwarae ac mae pob ffrâm yn cael ei rhyng-gipio a’i dynnu i gynfas. Pan fydd addasiadau, megis ffilterau neu dynnu cefndir, mae’r fframiau’n cael eu rhyng-gipio, eu haddasu mewn cynfas canolradd, ac yna’n cael eu tynnu i’r prif gynfas

Sgrin Werdd yn y Porwr Gyda Chynfas HTML 7

Rydym yn creu elfen fideo a chynfas canolradd, ac nid yw’r naill na’r llall wedi’i rendro yn y DOM:

this.video = document.createElement("video");
this.intermediateCanvas = document.createElement("canvas");

Rydyn ni’n cyflwyno cynfas:

 {
    this.canvas = canvas; 
  }}        
  style={videoStyle}
  width={videoWidth}
  height={videoHeight}
/>; 

Pan fydd y cynfas yn mowntio, rydyn ni’n galw drawVideoToCanvas i ysgrifennu i’r cynfas ar bob ffrâm.

drawVideoToCanvas = async () => {
    const { chromaKey } = this.props;
    const { width, height } = this.canvas;
    if (chromaKey) {
        await this.drawChromaKeyImage(this.video);
    } else {
        const ctx = this.canvas.getContext("2d");
        ctx.drawImage(this.video, 0, 0, width, height);
    }
    window.requestAnimationFrame(this.drawVideoToCanvas);
}

Os nad yw chromaKey wedi’i osod, bydd y swyddogaeth hon yn tynnu ffrâm gyfredol y fideo heb unrhyw addasiadau. Os yw chromaKey wedi’i osod, mae’n galw drawChromaKeyImage:

drawChromaKeyImage = async (video) => {
    const { layer } = this.props;
    const {
        hueThreshold,
        satThreshold,
        valThreshold,
        chromaKeyColor,
    } = layer;

    // Assumes color is in hex format, get RGB values
    const keyRed = parseInt(chromaKeyColor.slice(1, 3), 16);
    const keyGreen = parseInt(chromaKeyColor.slice(3, 5), 16);
    const keyBlue = parseInt(chromaKeyColor.slice(5, 7), 16);
    let key = this.rgbToHsv(keyRed, keyBlue, keyGreen);

    let intermediateData = this.drawToIntermediateCanvas(
        video,
        this.fullIntermediateCanvas
    ); 

    const message = {
        key,
        hueThreshold,
        satThreshold,
        valThreshold,
        pixels: intermediateData,
    };

    // do calculation in web worker
    window.webWorker.postMessage(message);
    const response = await new Promise((res) => {
        webWorker.onmessage = (e) => res(e.data);
    });

    intermediateData = response.pixels;

    this.drawIntermediateDataToCanvas(
        intermediateData,
        this.fullIntermediateCanvas
    );
};    

(Mae’r cod cynhyrchu yn fwy cymhleth gan fod yn rhaid iddo drin achosion ymyl, megis porwyr nad ydynt yn cefnogi gweithwyr gwe, mewnbynnau annilys, ac ati).

Mae’r pyt hwn yn galw tair swyddogaeth:

  1. drawToIntermediateCanvas: mae angen hwn i gael arae picsel, sydd ei angen oherwydd ni allwn anfon elfen DOM at y gweithiwr gwe. Mae’r gweithiwr gwe yn ein galluogi i ailadrodd dros arae picsel fawr unwaith y ffrâm heb rwystro’r prif edefyn neu ddiraddiol yr ymatebolrwydd i raglenni. Mae’r cod ar gyfer hyn isod:
drawToIntermediateCanvas = (video, intermediateCanvas) => {
    const {
        width: intermediateCanvasWidth,
        height: intermediateCanvasHeight,
    } = intermediateCanvas;

    const intermediateCtx = intermediateCanvas.getContext("2d");
    intermediateCtx.drawImage(    
        video,
        0,  
        0,  
        intermediateCanvasWidth,
        intermediateCanvasHeight
    );  
    const intermediateData = intermediateCtx.getImageData(
        0,
        0,
        intermediateCanvasWidth,
        intermediateCanvasHeight
    );
    return intermediateData;
}; 

2. WebWorker.postMessage: Note bod y gweithiwr gwe ei hun yn cael ei ysgogi y tu allan i’r gydran hon fel y cyfryw:

window.webWorker = new Worker("/chromakey-worker.js");

Rhaid i’r gweithiwr gwe weithredu’r alwad yn ôl ar neges, sy’n anfon data yn ôl i’r prif edefyn trwy ei alwad neges post ei hun:

onmessage = async function (e) {
    let pxs = e.data.pixels.data;
    for (let p = 0; p < pxs.length; p += 4) {
        if (this.chromaKeyOut(pxs[p], pxs[p + 1], pxs[p + 2], e.data))
            pxs[p + 3] = 0;
    }

    postMessage({
        pixels: e.data.pixels,
    });
};

Mae'r arae picsel yn amgodio picsel i mewn 4 cofnodion: coch gwyrdd, glas, didreiddedd. Rydym yn gosod picsel n afloyw trwy osod picsel[4*n+3] = 0. Penderfynir a ddylai picsel fod yn afloyw ai peidio y tu mewn i this.chromaKeyOut, a amlinellwyd yn yr adran theori.

3. drawIntermediateDataToCanvas: Mae hyn yn eithaf syml, mae data a anfonir yn ôl gan y gweithiwr gwe yn cael ei ysgrifennu i'r cynfas canolradd, sydd yn ei dro yn cael ei dynnu i'r cynfas terfynol.

drawIntermediateDataToCanvas = (intermediateData, intermediateCanvas) => {
    if (!intermediateCanvas) return;
    const { layer } = this.props;
    const {
        width: intermediateCanvasWidth,
        height: intermediateCanvasHeight,
    } = intermediateCanvas;

    const intermediateCtx = intermediateCanvas.getContext("2d");

    const ctx = this.canvas.getContext("2d");
    ctx.imageSmoothingEnabled = true;
    const { width: canvasWidth, height: canvasHeight } = this.canvas;

    intermediateCtx.putImageData(intermediateData, 0, 0);

    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.drawImage(
        intermediateCanvas,
        0,
        0,
        intermediateCanvasWidth,
        intermediateCanvasHeight,
        0,
        0,
        canvasWidth,
        canvasHeight
    );
}; 

Mae golygydd bysellau Chroma Kapwing yn gweithio trwy chwarae fideo, gan ryng-gipio pob ffrâm, allweddu'r cefndir yn seiliedig ar sianel neu liw, ac yna tynnu'r canlyniad i gynfas html. Rydym yn cyflawni ein cyfradd ffrâm dymunol trwy berfformio ein cyfrifiannau mewn gweithiwr gwe, ac rydym yn delio ag amrywiad lliw y byd go iawn trwy drosi RGB i HSV a chaniatáu i'r defnyddiwr osod eu trothwyon eu hunain.

Sgrin Werdd yn y Porwr Gyda Chynfas HTML 8Ased sgrin werdd enghreifftiol ar gyfer fframio darllediad sgrin symudol

Mae golygydd Chroma Key yn ymuno â'n hofferyn Dileu Cefndir awtomatig i roi mwy o ryddid ac addasu i grewyr ar ymddangosiad eu fideo allbwn.

Mae golygu fideo Kapwing yn cymryd technoleg a oedd yn arfer bod yn dechnegol iawn ac yn anhygyrch ac yn ei gwneud yn hygyrch i bawb. Gall gwneuthurwyr meme, artistiaid, myfyrwyr, crewyr cyfryngau cymdeithasol, ac unrhyw olygydd fideo ledled y byd nawr ymgorffori asedau sgrin werdd yn eu prosiect heb fod angen trwydded Adobe Premiere. Gobeithiwn y daw'r offeryn hwn yn adnodd gwerthfawr i set fawr ac amrywiol o grewyr fideo.