Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Dea4fe079aec284744ad02eb3d2594f5?s=128

Keiji, Yoshimi

February 05, 2018
Tweet

Other Decks in Programming

Transcript

  1. 4LZ8BZΛQJYJW4LFUDI -JWF΁ಋೖͨ͠ͱ͖ͷ࿩ XBMG ZPTIJNJO  4LZXBZ6(5PLZP

  2. ஫ҙ w ৭ʑͳࣄ৘ʹΑΓQJYJW4LFUDI-JWFͰ͸ݱࡏ͸4LZ8BZ Λར༻ͯ͠͸͍·ͤΜɻ

  3. QJYJW4LFUDI-JWFͱ͸ w IUUQTTLFUDIQJYJWOFUMJWFT w ͓ֆඳ͖΍૑࡞׆ಈʹಛԽͨ͠഑৴αʔϏε w 8FC35$ʹΑΔ഑৴ 35.1ͳͲ͸ະαϙʔτ  w

    ਓ·Ͱಉ࣌ʹ഑৴͕Ͱ͖Δ w ༷ʑͳϞʔυͷαϙʔτ w υϩʔπʔϧ $BOWBTʹඳըͨ͠΋ͷΛ഑৴  w Χϝϥ w ը໘ڞ༗ w ը໘ͳ͠ ݱࡏ͸ະαϙʔτ
  4. QJYJW4LFUDI-JWFͷΞʔΩς Ϋνϟมભͷྺ࢙ w ݄Լ०ɺΞϧόΠτ!IBLBUBTIJ͕ϓϩτλΠϓͷ։ൃ ։࢝ w ݄ɺ4LZ8BZΛར༻ͨ͠ϕʔλ൛ͷϦϦʔε w ݄ɺ࣌ӍಊͷTPSBΛར༻ͨ͠4'6αʔόʔͷӡ༻։࢝ w

    ݄Լ०ɺࢹௌऀ͸)-4ʹΑΔಈըΛࢹௌͰ͖ΔΑ͏ʹ
  5. 4'6ʹΑΔ഑৴ ഑৴ऀ 4'6αʔόʔ ࢹௌऀ ࢹௌऀ ࢹௌऀ ഑৴ऀ

  6. 4'6 4FMFDUJWF'PSXBSEJOH6OJU w 11ʹΑΔϑϧϝογϡ઀ଓͷ৔߹ɺ഑৴ऀࢹௌऀ͕૿͑Ε͹૿͑Δ ΄Ͳ֤ʑͷϚγϯͷ഑৴ෛՙ͕͕͋Δ w ഑৴αʔϏεͷ৔߹ɺ഑৴͢ΔίϯγϡʔϚͷ؀ڥ͸͋·Γ੍ݶΛ͔ ͚ͨ͘ͳ͍ɻ w 11Ͱ͸ͳ͘4'6αʔόʔΛ௨ͯ͠8FC35$͢Δͱ഑৴ऀͷϚγϯͷ

    ഑৴ෛՙΛԼ͛Δ͜ͱ͕Ͱ͖Δɻ w 4'6ͷαʔόʔͷ͋ΔճઢΛ͔ͭͬͯαʔϏε͢Δ͜ͱʹͳΔͷͰ௨ ৴ྉͳͲʹ஫ҙ͕ඞཁ w 4LZ8BZͷ৔߹͸(#·ͰແྉɺҎ߱͸ԁ(#ͱͷ͜ͱͰ͢ɻ
  7. ݱࡏͷαʔόʔߏ੒ ࢹௌऀ ഑৴ऀ )-4GSPOU /HJOY 4USFBNFSE /HJOY NV UT UT

    UT 4PSB4'6 4FSWFS 351 4351 )-4Ͱࢹௌ (164FSWFS
  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Ϟʔυ QJYJW4LFUDIͷυϩʔπʔϧΛ8FC35$Ͱ഑৴Ͱ͖Δ

  16. %SBXϞʔυ w .FEJB4USFBNDBOWBTDBQUVSF4USFBN 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. WJEFPBVEJPUSBDLΛผʑʹ ؅ཧ͢ΔΑ͏ʹ w ͲͷϞʔυ͔ΒͲͷϞʔυʹҠͬͨ৔߹ʹΑͬͯಈ͍ͨΓ ಈ͔ͳ͔ͬͨΓಈ࡞֬ೝ͕େมͩͬͨͷͰɺWJEFP5SBDL  BVEJP5SBDLΛผʑʹอ࣋͢ΔΑ͏ʹͯ͠ɺৗʹ4FU͢Δ௚ લʹ.FEJB4USFBN΁߹੒ͯ͠࢖͏Α͏ʹͨ͠

  19. Χϝϥ w 8FC35$ͱ͍͑͹࠷΋ఆ൪ͷ΍ͭ w JEFBMΛࢦఆ͠ͳ͍ͱΑΓߴղ૾౓ʹͰ͖Δ৔߹Ͱ΋ղ ૾౓͕͕͋Βͳ͍͜ͱ͕͋Δ

  20. ը໘ڞ༗ w $ISPNFͷ৔߹͸DISPNF֦ுͰͷΈՄೳ w DISPNFEFTLUPQ$BQUVSFDIPPTF%FTLUPQ.FEJB w *OMJOFJOTUBMMΛαϙʔτ͢ΔͱΑ͍ 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$ϕʔεͷ഑৴αʔϏεΛ΍Γ͍ͨਓΛืूͯ͠

    ͍·͢ɻ