Skywayをpixiv Sketch Liveへ導入したときの話 / skyway ug tokyo #2

Transcript

1. 4LZ8BZΛQJYJW
   4LFUDI
   -JWF
   ΁ಋೖͨ͠ͱ͖ͷ࿩ XBMG
   
   ZPTIJNJO
   4LZXBZ
   6(
   5PLZP
   
2. ஫ҙ w ৭ʑͳࣄ৘ʹΑΓQJYJW
   4LFUDI
   -JWFͰ͸ݱࡏ͸4LZ8BZ Λར༻ͯ͠͸͍·ͤΜɻ
3. QJYJW
   4LFUDI
   -JWFͱ͸ w IUUQTTLFUDIQJYJWOFUMJWFT
   w ͓ֆඳ͖΍૑࡞׆ಈʹಛԽͨ͠഑৴αʔϏε
   w 8FC35$ʹΑΔ഑৴
   35.1ͳͲ͸ະαϙʔτ
   w ਓ·Ͱಉ࣌ʹ഑৴͕Ͱ͖Δ
   w ༷ʑͳϞʔυͷαϙʔτ
   w υϩʔπʔϧ
   $BOWBTʹඳըͨ͠΋ͷΛ഑৴
   w Χϝϥ
   w ը໘ڞ༗
   w ը໘ͳ͠
   ݱࡏ͸ະαϙʔτ
4. QJYJW
   4LFUDI
   -JWFͷΞʔΩς Ϋνϟมભͷྺ࢙ w ݄Լ०ɺΞϧόΠτ
   !IBLBUBTIJ
   ͕ϓϩτλΠϓͷ։ൃ ։࢝
   w ݄ɺ4LZ8BZΛར༻ͨ͠ϕʔλ൛ͷϦϦʔε
   w ݄ɺ࣌ӍಊͷTPSBΛར༻ͨ͠4'6αʔόʔͷӡ༻։࢝
   w ݄Լ०ɺ
   ࢹௌऀ͸)-4ʹΑΔಈըΛࢹௌͰ͖ΔΑ͏ʹ
5. 4'6ʹΑΔ഑৴ ഑৴ऀ 4'6αʔόʔ ࢹௌऀ ࢹௌऀ ࢹௌऀ ഑৴ऀ
6. 4'6
   4FMFDUJWF
   'PSXBSEJOH
   6OJU
   w 11ʹΑΔϑϧϝογϡ઀ଓͷ৔߹ɺ഑৴ऀࢹௌऀ͕૿͑Ε͹૿͑Δ ΄Ͳ֤ʑͷϚγϯͷ഑৴ෛՙ͕͕͋Δ
   w ഑৴αʔϏεͷ৔߹ɺ഑৴͢ΔίϯγϡʔϚͷ؀ڥ͸͋·Γ੍ݶΛ͔ ͚ͨ͘ͳ͍ɻ
   w 11Ͱ͸ͳ͘4'6αʔόʔΛ௨ͯ͠8FC35$͢Δͱ഑৴ऀͷϚγϯͷ ഑৴ෛՙΛԼ͛Δ͜ͱ͕Ͱ͖Δɻ
   w 4'6ͷαʔόʔͷ͋ΔճઢΛ͔ͭͬͯαʔϏε͢Δ͜ͱʹͳΔͷͰ௨ ৴ྉͳͲʹ஫ҙ͕ඞཁ
   w 4LZ8BZͷ৔߹͸(#·ͰແྉɺҎ߱͸ԁ(#ͱͷ͜ͱͰ͢ɻ
7. ݱࡏͷαʔόʔߏ੒ ࢹௌऀ ഑৴ऀ )-4
   GSPOU
   /HJOY 4USFBNFSE /HJOY NV UT UT UT 4PSB
   4'6
   4FSWFS 351 4351 )-4Ͱࢹௌ (16
   4FSWFS
8. 4LZ8BZ൛ͷ࣮૷ w 4LZ8BZͷ3PPN؅ཧػೳΛϕʔεʹ࡞੒
   w ͭͷ഑৴ʹ͍ͭͯͭͷSPPNׂ͕Γ౰ͯΒΕΔΑ͏ʹ
   w νϟοτػೳ͸ࣗલͰ࡞੒ͤͣɺ4LZ8BZͷνϟοτػೳ Λ࢖͏
   w ࢀՃϦΫΤετ
9. 4LZ8BZΛར༻͍ͯͯ͠
   ࠔͬͨ͜ͱ w 4LZ8BZͷ઀ଓ*%ͱɺϢʔβʔ৘ใͷϚοϐϯά
   w ഑৴ͷऴྃॲཧ
   w ؅ཧऀݖݶʹΑΔಛݖॲཧ͕Ͱ͖ͳ͍
10. Ϣʔβʔ৘ใͷϚοϐϯά w ͭϢʔβʔʹ͖ͭͭͷSBOEPNͳUPLFOΛੜ੒ͯͦ͠ΕΛ4LZ8BZͷ઀ଓ*%ͱ ͯ͠ར༻͍ͯͨ͠
    w ઀ଓ*%ͱɺϢʔβʔ৘ใ͸༻్ʹΑͬͯ૬ޓʹม׵͢Δඞཁ͕͋Δ
    w ਓͷϢʔβʔ͕ෳ਺λϒ։͍ͨΓͯ͠ෳ਺઀ଓ͢Δ͜ͱ͕͋Δ
    w KPJOMFBWFͳͲͰඈΜͰ͘Δ৘ใͰ͸઀ଓ*%͔͠Θ͔Βͳ͍
    w ΫϥΠΞϯταΠυ͕طʹ஌͍ͬͯΔ઀ଓ*%Ͱ͋Ε͹ϢʔβʔΛಛఆͰ͖Δ͕ɺ ஌Βͳ͍৔߹৘ใΛऔಘ͢Δ·Ͱ୭͔Θ͔Βͳ͍ɻ
    w ઀ଓ࣌ʹϝλσʔλΛඥ͚ͮΔ͜ͱ͕Ͱ͖Δͱศརͦ͏
    w ৴པੑͷ໰୊ΛͲ͏ղܾ͢Δ͔͕೉ͦ͠͏
11. ϧʔϜʹ͍ΔϢʔβʔͷҰཡͷੜ੒ w 3PPN಺ʹ઀ଓ͍ͯ͠ΔશϢʔβʔͷ઀ଓ*%Λऔಘ͢Δํ ๏͕ͳ͔ͬͨ
    w "1*ΩʔͰඥͮ͘઀ଓ*%ҰཡΛऔಘ͢Δํ๏͸͋ͬͨͷͰɺ ͦΕͱ%#ͷ஋Λর߹͢Δ͜ͱͰ3PPNʹ͍ΔਓͷϦετ Λੜ੒͍ͯͨ͠
    w ৽4%,ͩͱɺMJTU"MM1FFST ͸ͳ͘ͳ͍ͬͯΔΑ͏ͩ
12. ഑৴ͷऴྃॲཧ w 4LZ8BZͷ3PPNͰ͸جຊతʹϢʔβʔ͕ࣗओతʹൈ͚ͯ ͍͖୭΋͍ͳ͘ͳͬͨΒऴྃ͠ɺ؅ཧऀͱ͍͏֓೦͕ͳ ͍
    w ӡӦαΠυʹΑΔ#"/ͳͲͰڧ੍ୀग़ͤͨ͞Γ഑৴ऀ͕ ऴྃ͞Εͨͱ͖ʹ௨஌͢Δʹ͸޻෉͕ඞཁ
    w ϧʔϜશମ΁8FC4PDLFUܦ༝Ͱ௨஌͢Δ"1*͸͋ΔͷͰ ಛघͳϝοηʔδΛૹΔͱऴྃͨ͠ɺͱৼΔ෣͏Α͏ʹ ͨ͠
13. ϋʔτϏʔτ w ഑৴ओͷ઀ଓ͕੾Εͨͱ͖ʹ഑৴ऴྃͱ͍͏ѻ͍ʹͯ͠͠ ·͏ͱௐࢠ͕ѱͯ͘ϒϥ΢βΛϦϩʔυ͚ͨͩ͠Ͱ෦԰ ͕ղࢄͯ͠͠·͏
    w ୀग़ϘλϯΛԡͨ͠Βऴྃʹ͍͕ͯͨ͠ɺϒϥ΢βͷλϒ Λด͍ͯ͡ͳ͘ͳͬͯ͠·͏ਓ͸͚ͬ͜͏͍Δ
    w ഑৴ओ͕ຖ෼"1*Λ࣮ߦ͠ɺͦͷ"1*͕෼ؒԠ౴͕ͳ ͔ͬͨΒαʔόʔͰऴྃͱ͍͏ѻ͍ʹ͢Δ
14. ͨͩ࠷΋େมͩͬͨͷ͸4LZ8BZ ʹؔ܎ͳ͍8FC35$ͷରԠ w %SBXϞʔυ
    w ΧϝϥϞʔυ
    w ը໘ڞ༗Ϟʔυ
    w ը໘ͳ͠Ϟʔυ
    w ͦΕͧΕ͔ΒͦΕͧΕͷભҠʹՃ͑ͯɺԻ੠͋Γͳ͠ɺͷ৔߹ ͕͋Δɻ
    w ˠ
    ख࡞ۀͰ΍Δ͔͠ͳ͍͚Ͳಈ࡞νΣοΫ͕େม
15. %SBXϞʔυ QJYJW
    4LFUDIͷυϩʔπʔϧΛ8FC35$Ͱ഑৴Ͱ͖Δ
16. %SBXϞʔυ w .FEJB4USFBN
    
    DBOWBTDBQUVSF4USFBN GSBNF3BUF
    w Ի੠͕ඞཁͳ৔߹͸ɺผ్HFU6TFS.FEJBͰऔͬͯ͘Δ
    w ݕূ͍ͯͨ͠ͱ͖ͷ$ISPNF
    $BOBSZͱ$ISPNFͰ͏·͘ ಈ͔ͳ͔ͬͨΓͯۤ͠͠ΊΒΕͨ
17. USBDLͷ߹੒ Const stream2 = canvas.captureStream(24); // 24fps const stream = new MediaStream(); stream.addTrack(stream1.getAudioTracks()[0].clone()); stream.addTrack(stream2.getVideoTracks()[0].clone()); room.replaceStream(stream); w .FEJB4USFBNಉ͔࢜Β.FEJB4USFBN5SBDLΛநग़͠ɺ߹੒ͨ͠ .FEJB4USFBNΛ࡞੒͢Δ
    w ͜ΕͰɺϚΠΫೖྗͷԻ੠͋Γͷ$BOWBTͷ഑৴͕Ͱ͖Δ
18. WJEFPBVEJP
    USBDLΛผʑʹ ؅ཧ͢ΔΑ͏ʹ w ͲͷϞʔυ͔ΒͲͷϞʔυʹҠͬͨ৔߹ʹΑͬͯಈ͍ͨΓ ಈ͔ͳ͔ͬͨΓಈ࡞֬ೝ͕େมͩͬͨͷͰɺWJEFP5SBDL
    BVEJP5SBDLΛผʑʹอ࣋͢ΔΑ͏ʹͯ͠ɺৗʹ4FU͢Δ௚ લʹ.FEJB4USFBN΁߹੒ͯ͠࢖͏Α͏ʹͨ͠
19. Χϝϥ w 8FC35$ͱ͍͑͹࠷΋ఆ൪ͷ΍ͭ
    w JEFBMΛࢦఆ͠ͳ͍ͱΑΓߴղ૾౓ʹͰ͖Δ৔߹Ͱ΋ղ ૾౓͕͕͋Βͳ͍͜ͱ͕͋Δ
20. ը໘ڞ༗ w $ISPNFͷ৔߹͸DISPNF֦ுͰͷΈՄೳ
    w DISPNFEFTLUPQ$BQUVSFDIPPTF%FTLUPQ.FEJB
    w *OMJOF
    JOTUBMMΛαϙʔτ͢ΔͱΑ͍
    XJOEPXDISPNFXFCTUPSFJOTUBMM
    
    w HFU6TFS.FEJB͢Δͱ͖ʹNBYΛࢦఆ͠ͳ͍ͱ͔ͳΓը࣭͕ѱ͘ͳΔ
    w 4BGBSJ&EHF͸"1*͕ଘࡏ͠ͳ͍
    w ͋ΔͳΒ஌Γ͍ͨͰ͢
    w 'JSFGPY͸֦ு΋ඞཁͳͯ͘HFU6TFS.FEJB࣌ʹTDSFFOBQQMJDBUJPOXJOEPXΛࢦఆ͢ ΔͷΈ
    w MPDBMIPTUͰ͋ͬͯ΋IUUQTͰͳ͍ͱಈ͔ͳ͍
21. ෳ਺ಉ࣌഑৴ͷಈ࡞֬ೝ w ྑ͍1$Λ༻ҙ͢Δ
    w ෳ਺ਓ഑৴
    
    ࢹௌ
    ෼ը໘Λ༻ҙ͢Δͱ͔ͳΓॏ͘ͳΔ
    w 049Ͱ։ൃ͚ͨ͠ͲIͷ৔߹ɺϋʔυ΢ΣΞΤϯίʔμΛ࢖͑ΔͷͰ8JOEPXTͷํ͕ϕλʔ ͔΋
    w ޿͍Ϟχλ , Λ༻ҙ͢Δ
    w ը໘ʹಉ࣌ʹදࣔͰ͖ͳ͍ͱͲ͜ͰͲͷΞΧ΢ϯτΛ഑৴͍ͯ͠Δ͔Θ͔Βͳ͘ͳͬͯೳ཰͕௿ Լ͢Δ
    w ࣗಈͰλΠϧঢ়ʹ഑ஔ͞ΕΔιϑτΛ࢖ͬͯ഑ஔͷखؒΛݮΒͨ͠
    w $ISPNF
    $ISPNF
    $BOBSZ
    7JWBMEJ
    
    ͦΕͧΕͰγʔΫϨοτϞʔυΛۦ࢖͢Δ͜ͱͰෳ਺ΞΧ΢ϯ τʹରԠ͢Δ
    w ॳظ͸$ISPNFͷΈ͔͠αϙʔτ͠ͳ͔ͬͨͷͰෳ਺ϢʔβʔͰ഑৴ͷಈ࡞ςετ͢Δͷ͕ࠓΑ Γେมͩͬͨ
22. ·ͱΊ w ॳظϑΣʔζͰ4LZ8BZΛར༻ͨ͜͠ͱʹΑΓɺ8FC35$ Λར༻ͨ͠ΞϓϦέʔγϣϯͷ։ൃͷຊ࣭తͳͱ͜Ζʹ ूதͰ͖ͨ
    w 4LZ8BZ͔Β࢝Ίͨ͜ͱͰॳظ౤ࢿͷίετΛখ͞Ίʹ࢝ ΊΔ͜ͱ͕Ͱ͖ͯ૊৫Λઆಘ͠΍͔ͬͨ͢
    w 8FC35$ϕʔεͷ഑৴αʔϏεΛ΍Γ͍ͨਓΛืूͯ͠ ͍·͢ɻ