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

WebRTC 기반 게임 리모트 플레이

kakao
PRO
December 09, 2022

WebRTC 기반 게임 리모트 플레이

#WebRTC

게임 리모트 플레이 서비스에 WebRTC 를 도입하게 된 이유와 WebRTC 기반 백엔드 아키텍처 및 프로젝트 진행 중 고민했던 내용에 대해서 공유합니다.

발표자 : eddy.games
카카오게임즈에서 백엔드 개발자로 일하고 있는 에디입니다.

kakao
PRO

December 09, 2022
Tweet

More Decks by kakao

Other Decks in Programming

Transcript

  1. 실시간 커뮤니케이션 서비스를 위한 WebRTC
    Copyright 2022. Kakao Corp. All rights reserved. Redistribution or public display is not permitted without written permission from Kakao.
    김시은 eddy.games
    카카오게임즈
    if(kakao)2022
    WebRTC 기반 게임 리모트 플레이

    View Slide

  2. 게임 리모트 플레이에 WebRTC 를 도입하게 된 이유
    WebRTC 기반 게임 리모트 플레이 백엔드 아키텍처
    프로젝트를 진행하면서 고민했던 백엔드 관련 내용
    세션 요약 및 마무리

    View Slide

  3. 게임 리모트 플레이에 WebRTC 를 도입하게 된 이유
    WebRTC 기반 게임 리모트 플레이 백엔드 아키텍처
    프로젝트를 진행하면서 고민했던 백엔드 관련 내용
    세션 요약 및 마무리

    View Slide

  4. 리모트 플레이 개발 배경

    View Slide

  5. MMORPG, 자동 사냥
    MMORPG는 다수의 게임 사용자가 온라인 공간에서
    즐길 수 있는 롤플레잉 게임입니다. MMORPG 에서
    는 게임 속 캐릭터의 레벨과 능력치가 중요해서, 게임
    사용자는 캐릭터를 키우기 위해서 많은 시간과 노력
    이 필요합니다.
    자동 사냥은 온라인 게임 공간의 내 캐릭터가 자동으
    로 몬스터를 사냥하며 레벨과 경험치를 쌓게 하는 시
    스템입니다. 자동 사냥을 활용하면 시간 없는 직장인
    입장에서는 짧은 시간에 내 캐릭터를 성장시킬 수 있
    습니다.
    MMORPG 자동 사냥

    View Slide

  6. 원격 데스크톱
    - 집에 실행중인 PC 게임에 원격 접속해서 게임 플레이
    - 잠깐 접속해서 게임 상태를 확인하는 용도로는 적합하지만 게임 플레이 불편함
    - 원격 데스크톱의 대안으로 리모트 플레이 서비스를 검토하게 됨
    집에 실행중인 PC 게임 다른 PC 에서 원격으로 내PC에 접속
    원격 데스크톱

    View Slide

  7. 게임 스트리밍 이란?
    라이브 방송 스트리밍 클라우드 게임 리모트 플레이

    View Slide

  8. 리모트 플레이에 WebRTC는 어떻게 활용되었나?

    View Slide

  9. Web Real≥Time Communication

    View Slide

  10. WebRTC 유스케이스
    코로나 팬데믹으로 인한 사회적 거리두기 영향으로 비대면 기반의 온라인 서비스를 많이 사용하게 되었습니다. 재택
    근무로 인한 온라인 화상 회의 비중이 늘어났으며, 오디오 기반 소셜서비스가 폭발적인 인기를 얻게 되었습니다. 이
    와 같은 실시간 커뮤니케이션 서비스를 위한 기술이 바로 WebRTC 이며 메타버스, 게임 스트리밍, 헬스케어 등 다
    양한 업계에서 WebRTC 는 활용되고 있습니다.

    View Slide

  11. 화상 회의 서비스 vs 게임 리모트 플레이
    WebRTC 기반 화상 회의 서비스 WebRTC 기반 게임 리모트 플레이
    Video, Audio
    Video, Audio
    Video, Audio
    Data
    WebRTC WebRTC

    View Slide

  12. WebRTC! 선택이 아닌, 필수인 이유?

    View Slide

  13. Real Time

    View Slide

  14. Real™Time
    Latency Real Time

    View Slide

  15. Client - Server Architecture
    PC Game Client
    Server
    Internet
    HTTP
    Remote Device

    View Slide

  16. WebSocket vs WebRTC
    WebSocket
    Server Server
    WebRTC
    PC Game Client Remote Device PC Game Client Remote Device

    View Slide

  17. No Plugin

    View Slide

  18. 플러그인 설치 없이, WebRTC 에서 제공하는 기능
    Capturing Encoding Streaming
    Decoding
    Game Play
    Remote Control
    PC Game Client

    View Slide

  19. Demo

    View Slide

  20. View Slide

  21. WebRTC 적합한 서비스는?

    View Slide

  22. 게임 리모트 플레이 서비스에 WebRTC 를 도입하게 된 이유
    WebRTC 기반 게임 리모트 플레이 백엔드 아키텍처
    프로젝트를 진행하면서 고민했던 백엔드 관련 내용
    세션 요약 및 마무리

    View Slide

  23. Signaling Server
    Web Server
    PC Game Client Remote Device
    NAT
    1. Direct
    NAT
    Stun Server
    3. Turn Relay
    Stun Server
    2. Server Reflexive
    Turn Server
    WebRTC 백엔드 아키텍처

    View Slide

  24. Signaling Server Stun/Turn Server
    WebRTC는 실시간으로 영상, 음성 데이터를 통신하는
    기술입니다. 서로 다른 네트워크에 있는 클라이언트가
    상대방의 IP, 미디어 유형, 코덱 등 초기화하는 과정을 시
    그널링이라 부르며, 이를 지원하는 서버가 시그널링 서
    버 입니다.
    NAT 는 퍼블릭망과 내부망의 IP와 Port 를 매핑해주
    는 역할을 하는데, Stun 서버는 클라이언트가 NAT 환
    경에 있는 경우 Public 종단에서 접근 가능한 IP 와
    Port 를 판단해서 알려주는 역할을 합니다.
    하지만, Stun 서버를 사용해도 P2P 통신이 어려운 경
    우가 있는데, 이때는 Turn 서버를 구축해서 미디어 데
    이터를 대신 전달해줘야 합니다. Turn 서버는 퍼블릭
    환경에서 접근 가능하며 미디어 데이터를 대신 전달하
    기 때문에 서버 리소스가 소모됩니다.
    WebRTC 백엔드 아키텍처

    View Slide

  25. 시그널링 서버

    View Slide

  26. 시그널링 프로세스
    Offer SDP
    Answer SDP
    Ice Candidates
    Ice Candidates
    Signaling Server
    PC Game Client Remote Device
    Media Stream (WebRTC)

    View Slide

  27. Offer
    Offer
    Answer Answer
    Signaling Server Web Server
    PC Game Client Remote Device
    1
    2
    3 4
    Ice Candidates
    5
    6

    View Slide

  28. Offer
    Offer
    Answer Answer
    Signaling Server Web Server
    PC Game Client
    1
    2
    3 4
    Ice Candidates
    5
    6
    Remote Device

    View Slide

  29. Offer
    Offer
    Answer Answer
    Signaling Server Web Server
    PC Game Client
    1
    2
    3 4
    Ice Candidates
    5
    6
    Remote Device

    View Slide

  30. Offer
    Offer
    Answer Answer
    Signaling Server Web Server
    PC Game Client
    1
    2
    3 4
    Ice Candidates
    5
    6
    Remote Device

    View Slide

  31. Offer
    Offer
    Answer Answer
    Signaling Server Web Server
    PC Game Client
    1
    2
    3 4
    Ice Candidates
    5
    6
    Remote Device

    View Slide

  32. Offer
    Offer
    Answer Answer
    Signaling Server Web Server
    PC Game Client
    1
    2
    3 4
    Ice Candidates
    5
    6
    Remote Device

    View Slide

  33. C
    B
    A
    A
    A
    B
    C
    Signaling Server
    Signaling
    Signaling
    B C

    View Slide

  34. Signaling & Pub/Sub Architecture
    EC2™A EC2™B
    Load Balancer
    Subscribe
    Publish
    Offer SDP
    Offer SDP
    PC Game Client Remote Device

    View Slide

  35. Signaling & Pub/Sub Architecture
    EC2™A EC2™B
    Load Balancer
    Subscribe
    Publish
    Offer SDP
    Offer SDP
    PC Game Client Remote Device

    View Slide

  36. Stun/Turn Server

    View Slide

  37. Stun(Session Traversal Utilities for NAT)
    Stun
    NAT
    PC Game Client
    Signaling Server
    NAT
    PC Game Client
    Signaling Server
    1
    2
    Stun 에 의한 P2P 통신
    NAT에 의한 Direct 통신 불가
    Remote Device Remote Device

    View Slide

  38. NAT
    PC Game Client
    Signaling Server
    NAT
    PC Game Client
    Signaling Server
    Stun Stun
    Turn
    Turn(Traversal Using Relays around NAT)
    Stun을 사용해도 통신 불가 Turn 에 의한 릴레이 통신
    Remote Device Remote Device

    View Slide

  39. Coturn
    - Free open source implementation of TURN and STUN Server
    - https:/
    /github.com/coturn/coturn

    View Slide

  40. Coturn
    - Free open source implementation of TURN and STUN Server
    - https:/
    /github.com/coturn/coturn

    View Slide

  41. Signaling Server
    Web Server
    PC Game Client
    NAT
    1. Direct
    NAT
    Stun Server
    3. Turn Relay
    Stun Server
    2. Server Reflexive
    Turn Server
    WebRTC 백엔드 아키텍처
    Remote Device

    View Slide

  42. 게임 리모트 플레이 서비스에 WebRTC 를 도입하게 된 이유
    WebRTC 기반 게임 리모트 플레이 백엔드 아키텍처
    프로젝트를 진행하면서 고민했던 백엔드 관련 내용
    세션 요약 및 마무리

    View Slide

  43. 시그널링 서버 기술스택

    View Slide

  44. 시그널링 서버 기술 스택
    Amazon API
    Gateway
    AWS Lambda
    +
    Chrome
    Spring Boot
    Chrome
    선택 A 선택 B
    WebSocket

    View Slide

  45. 시그널링 서버 역할에 대해서

    View Slide

  46. 클라이언트 접속 종료
    Signaling Server
    원격 디바이스 접속 종료
    PC Game Client
    Remote Device

    View Slide

  47. 클라이언트 접속 종료
    Signaling Server
    PC Game Client
    DataChannel
    원격 디바이스 접속 종료
    PeerConnection
    PeerConnection
    Remote Device

    View Slide

  48. 클라이언트 중복 접속
    Signaling Server
    PC Game Client
    기존 연결
    신규 연결
    새로운 원격 디바이스 연결
    중복 접속으로
    기존 연결 종료
    Remote Device

    View Slide

  49. WebRTC 보안

    View Slide

  50. WebRTC Security
    Signaling Server
    (WSS/TLS)
    IDP
    IDP
    Web Server
    (HTTPS/TLS)
    Video, Audio (SRTP)
    Data (SCTP)
    PC Game Client
    DTLS
    Remote Deivce

    View Slide

  51. NAT Stun
    Turn Server
    IDP
    Stun NAT
    Signaling Server
    IDP
    PC Game Client
    1
    2
    3
    WebRTC Security
    Remote Device

    View Slide

  52. NAT Stun
    IDP
    Stun NAT
    IDP
    PC Game Client
    Signaling Server
    Turn Server
    4
    5
    WebRTC Security
    Remote Device

    View Slide

  53. 미디어 서버는 꼭 필요한가?

    View Slide

  54. 미디어 서버 꼭 필요한가?
    Mesh(리모트 플레이)
    Media
    SFU/MCU
    Media Server
    PC Game Client PC Game Client
    Remote Device
    Remote Device

    View Slide

  55. 게임 리모트 플레이 서비스에 WebRTC 를 도입하게 된 이유
    WebRTC 기반 게임 리모트 플레이 백엔드 아키텍처
    프로젝트를 진행하면서 고민했던 백엔드 관련 내용
    세션 요약 및 마무리

    View Slide

  56. 세션 요약
    - 게임 사용자의 플레이 환경 개선을 위한 WebRTC 기반 게임 리모트 플레이 개발
    - 리모트 플레이는 플러그인 설치 없이 저사양 모바일에서도 원격으로 게임 플레이 가능
    - 백엔드 시스템의 핵심 모듈은 시그널링 서버, Stun/Turn 서버
    - 상대방의 IP 주소, 미디어 정보 등 사전 협의를 위한 웹소켓 기반 시그널링 서버 구축
    - 3가지 통신 방법 (직접 P2P 통신, Stun 에 의한 P2P 통신, Turn 에 의한 릴레이 통신)
    - 백엔드 파트에서의 고민 (시그널링 서버 역할, WebRTC 보안, 미디어 서버 등)

    View Slide

  57. WebRTC 처음 접하는 개발자 분들에게
    - 1:1 온라인 화상 회의 서비스 개발
    - 백엔드 파트 : 시그널링 서버, 웹소켓 기술 이해, Turn Server, UDP
    - 프론트엔드 파트 : WebRTC JavaScript API 이해
    (getUserMedia, RTCPeerConnection, RTCDataChannel)
    - PeerConnection, DataChannel 에 대한 이해
    - 같은 네트워크 대역의 로컬 환경에서는 Turn Sever 없이 통신 가능

    View Slide

  58. 카카오게임즈 리모트 플레이 미래
    - 2022년 4분기에 MMORPG 게임에 리모트 플레이 서비스 오픈 예정
    - 사용자의 게임 플레이 환경 개선을 위한 다양한 프로젝트를 진행 중

    View Slide

  59. 감사합니다.

    View Slide