[주유소] 24. vue 타자게임 openvidu 연결

오늘의 목표

1. vue 게임 openvidu 연결
2. openvidu 가상 배경화면 적용 

1. openvidu 연결

게임 버튼을 누르면 방 안에 있는 사람 모두 게임 페이지로 이동함.
Q. 한 명이 게임을 시작하면 다같이 시작해야 함. 해결 방법은?
나playing과 전체 gameinfo안에 있는 playing변수가 필요함

Q. 게임 결과를 모두와 공유할 수 있게??
현재의 문제: 게임을 시작한 사람이 항상 우승자가 됨
이유:

endGame: function () {
            console.log('타자게임 끝')
            this.isPlaying = false
            clearInterval(this.timeInterval)

            this.typingGame.scoreResult.push([-this.score, this.user.nickname])
            this.typingGame.isEnd = true

            console.log(this.typingGame.scoreResult.sort())
            this.typingGame.winner = this.typingGame.scoreResult.sort()[0][1]
            this.sendInfo()
        },

게임을 시작한 사람의 정보만 push가 되기 때문에
게임을 시작한 사람이 항상 우승함.
따라서 winner에 값을 할당하는 과정을 watch에다가 빼줌.

2. 가상 배경화면

서버에 Kurento ChromaFilter를 설치하고
프론트에 해당 코드를 넣어준다.
웹엑스나 줌처럼 완벽하진 않지만 낮은 화질로 가상 배경이 뜸.
해결방안: 가상배경이 아닌 다른 filter 기능들을 알아보기!

publisher.stream.applyFilter(
“ChromaFilter”,
{
“window”: {
“topRightCornerX”: 0,
“topRightCornerY”: 0,
“width”: 50,
“height”: 50
},
“backgroundImage”: “https://www.maxpixel.net/static/photo/1x/Cool-Blue-Liquid-Lake-Abstract-Background-Clear-316144.jpg 37”
});

---

느낀점

어제 자기 전에 오픈 비두 공부를 했다.
문서와 코드를 읽을수록 이해가 간다 ....!
내가 구현한 게임과 오픈비두를 연결하는 과정이 매우 어려울 것이라 생각해 겁을 먹었따.
고런데 생각보다 공식문서가 친절했고, 구현된 코드의 학습을 통해 연동을 성공했다 (✿◠‿◠)