Live+Kollus Chat 테스트 해보기

HTML

본 가이드는 기존 챗롤(Chatrol)이 아닌 콜러스 라이브 서비스 전용 채팅 사용과 관련 테스트 가이드 입니다.
실제 서비스 적용 시에는 사내 관련 부서- 운영 및 개발 담당자와 서비스 정책 관련 충분한 내부 협의 후 진행하시기 바랍니다.

채팅 기능을 사용하기 위해서는 반드시 담당 AM으로부터 기능 활성화에 대해 신청 후 공지를 받으시기 바랍니다,

라이브 콘솔 로그인 / 채팅 설정

콜러스 라이브 콘솔 (https://live-kr.kollus.com/login)에 ADMIN 계정으로 로그인 합니다. 채팅을 적용 채널 관리>채널 수정으로 접근합니다.

채팅 설정은 복잡한 내용은 없습니다.

HTML5 플레이어 연동 '사용함'으로 체크합니다. (Default 입니다.)
1 분간 전송 가능한 메시지 수
- 한 사용자가 1 분 동안 전송할 수 있는 메시지의 수 입니다. 이는 접속자가 광고 혹은 스팸과 같은 정보를 다량으로 입력할 경우
  차단하기 위한 기능으로, 예를 들어 특정 사용자가 1 분 동안 30건 이상의 광고 홍보 성 문구를 보낸다면 31번째 메시지는 채팅방에 참여한 사람들에게는 노출되지 않습니다.
- 이후 관리자는 해당 메시지를 보낸 참여자를 모니터링 페이지에서 차단하거나 후속 조치를 취할 수 있습니다. (이후 설명합니다.)
사용자 환영 메시지를 설정합니다.
프로파일 사진 노출을 결정하거나 혹은 기본 프로파일 이미지를 업로드 할 수 있습니다.

간단한 JWT URL생성

CHAT을 포함한 라이브 방송은 JWT 기반 URL을 생성해야 합니다.

상세한 내용은 Developer page내 JWT 및 LIVE Streaming 를 참조하며 라이브 콘솔 내 몇 가지 키 (KEY)값을 참조해야 합니다.

비디오 연동 키 (KEY) -VOD | LIVE 통합

JWT URL은 https://v-live-kr.kollus.com/s?jwt=인코딩된 PAYLOAD값&custom_key=사용자 키 로 구성되며, 간단히 아래와 같은 예제를 활용합니다.

구분

구분
URL 시작	https://v-live-kr.kollus.com/s?jwt=
Payload	{ "client_user_id": "시청자 ID", "client_user_name": "시청자 채팅 닉네임", "expire_time": 1607169600, "live_media_channel_key": "sqvmvul3emvxh6io", "title": "콜러스 라이브 채팅 테스트" }
Custom key	&custom_key=8243c93a819395cfa407ad65ac2276d94df0986882bb4354a95b19964c45ef5a

간단한 샘플 URL 작성을 위해 https://jwt.io/ 내 Debugger를 활용합니다

Algorithm은 HS256 임을 확인합니다.
기존 내용을 지우고 상기 예제 내용을 복사하여 붙여 넣습니다.
1. LIVE_라이브 미디어 채널 키 (lmckey | live_media_channel_key)는채널관리>채널수정에서 확인합니다.
2. expire, play_expt는 생성 시점 기준 라이브 채팅을 유지하는 시간을 초 단위 (second)로 환산합니다. (Max=2147483647)
기존 값을 지우고 테스트 계정의 보안 키 값을 넣습니다. 해당 보안 키 값은 설정>기본정보>서비스계정 에서 확인할 수 있습니다. (대소문자 구분합니다.)
JWT.io의 debugger 내 왼쪽 "Encoded"를 복사합니다.
JWT URL시작 부분과 사용자 키 (custom_key, 설정>기본정보>서비스계정)를 연결합니다.

구분에 삽입하여 완성된 JWT URL은 다음과 같습니다.

보안 관계 상 일부 문자는 치환되었습니다. 그대로 사용할 수 없으며, 중간에 빈칸이나 삭제된 문자가 있으면 안됩니다.

https://v-live-kr.kollus.com/s?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGllbnRfdXNlcl9pZCI6IuyLnOyyreyekCBJRCIsImNsaWVudF91c
2VyX25hbWUiOiLsi5zssq3snpAg7LGE7YyFIOuLieuEpOyehCIsImV4cGlyZV90aW1lIjoxNjA3MTY5NjAwLCJsaXZlX21lZGlhX2NoYW5uZWxfa2V5Ijoic3F2bXZ1b
DNlbXZ4aDZpbyIsInRpdGxlIjoi7L2c65s7IqkIOudvOydtOu4jCDssYTtjIUg7YWM7Iqk7Yq4In0.p$$$$$$$sOxMFNqdrFWwzkW3ysFCQH0p2VejyA
&custom_key=8243c93a819395cfa407ad65ac2276d94df0986882bb4354a95b19964c45ef5a

JWT URL이 완성되었습니다. 해당 링크를 브라우저 검색창에 입력하고 ENTER 시 브라우저에 스크린+채팅 창이 로딩 되는지 확인합니다.

테스트 용 방송 준비

라이브 방송 송출을 위해서는 OBS를 비롯한 여러가지 인코더 소프트웨어를 사용할 수 있습니다. 그 중 Kollus Live Encoder (콜러스 라이브 인코더)를
앱 마켓에서 설치하여 모바일 라이브 방송을 테스트 해봅니다. (IOS, Android 앱마켓에서 다운로드 받을 수 있습니다.

애플리케이션 설치 후 로그인을 위해서는 라이브 콘솔>채널 관리>채널 수정 에서 Creator 코드, Creator 스트림 키를 확인합니다.
- 상세한 내용은 모바일 라이브 인코더 게시글을 참조합니다.

Live + Chat UI

참조: 모바일 라이브 인코더

예를 들어 모바일 커머스의 경우, 보통 모바일-세로(portrait) 촬영-송출이지만 다른 경우 가로 촬영-송출도 있습니다.
또한 라이브 콘솔>채널관리 내 인코딩 프로파일은 크게 2가지로 환경을 구분합니다. (가로-Landscape / 세로-Portrait)
상기 설정을 토대로 HTML5 환경에서 라이브+채팅을 구현하려면 4가지정도로 채팅창 노출 방식을 정할 수 있습니다.

세로 촬영 - 세로 인코딩 (Portrait- Portrait)

세로촬영 - 가로 인코딩 (Portrait - Landscape)

가로 촬영 - 세로 인코딩 (Landscape - Portrait)

가로 촬영 - 가로 인코딩 (Landscape - Landscape)

촬영 시작 전 스마트폰의 방향 - 가로 촬영 / 세로 촬영을 미리 정해야 합니다. 방향을 바꾸고자 한다면 방송을 중단한 뒤 재 시작합니다.
오버레이 (Overlay)는 시청자가 스마트폰시청일 경우에만 적용되며, 채팅방을 오버레이 기본으로 할 경우는 인코딩 프로파일을 Portrait로 합니다.

촬영-인코딩 프로파일-송출-시청 시 채팅방 및 오버레이 위치는 정리하면 다음과 같습니다. (가로 촬영 시 스마트폰 화면 전환 기능을 On 한 뒤 촬영합니다.)

	인코딩 프로파일	랩탑	스마트폰 시청-가로	스마트폰 시청-세로

	인코딩 프로파일	랩탑	스마트폰 시청-가로	스마트폰 시청-세로
세로 촬영 (Portrait)	Portrait	우측	오버레이 기본	오버레이 기본	일반적인 모바일 라이브 커머스 등
세로 촬영 (Portrait)	Landscape	우측	우측	하단 창
가로 촬영 (Landscape)	Portrait	우측	오버레이 기본	오버레이 (하단) 기본	세미나, 웹 컨퍼런스, 일반
가로 촬영 (Landscape)	Landscape	우측	우측 창 or &landscape_overlay 옵션	하단 창	JWT URL뒤에 &landscape_overlay 추가로 가로 보기 시 오버레이 강제지정 가능

채팅 차단 (라이브 콘솔>모니터링페이지)

1 분간 전송 가능한 메시지 수 와 관련이 있습니다.
- 한 사용자가 1 분 동안 전송할 수 있는 메시지의 수 입니다. 이는 접속자가 광고 혹은 스팸과 같은 정보를 다량으로 입력할 경우
  차단하기 위한 기능으로, 예를 들어 특정 사용자가 1 분 동안 30건 이상의 광고 홍보 성 문구를 보낸다면 31번째 메시지는
  채팅방에 참여한 사람들에게는 노출되지 않습니다.
관리자는 해당 메시지를 보낸 참여자를 모니터링 페이지에서 차단하거나 후속 조치를 취할 수 있습니다.
- 관리자가 특정 타 참여자를 차단하고자 할 경우 차단하고자 하는 참여자의 메시지 위에 마우스 오버를 하면 차단 버튼이 표시 되며
- 차단 버튼을 클릭 시 대상 참여자가 차단됩니다. 차단 시킨 참여자만 차단된 대상 참여자의 채팅을 볼 수 없습니다.

채팅 손님 모드 (Guest mode)

채팅 참여자의 이름을 미리 지정할 수 없을 경우 참여자가 직접 닉네임을 설정할 수 있습니다.
플레이어 주소 뒤에 &anonymous_chat 옵션을 설정함으로 기능을 사용 할 수 있습니다.

https://v-live-kr.kollus.com/s?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGllbnRfdXNlcl9pZCI6IuyLnOyyreyekCBJRCIsImNsaWVudF91c 2VyX25hbWUiOiLsi5zssq3snpAg7LGE7YyFIOuLieuEpOyehCIsImV4cGlyZV90aW1lIjoxNjA3MTY5NjAwLCJsaXZlX21lZGlhX2NoYW5uZWxfa2V5Ijoic3F2bXZ1b DNlbXZ4aDZpbyIsInRpdGxlIjoi7L2c65s7IqkIOudvOydtOu4jCDssYTtjIUg7YWM7Iqk7Yq4In0.p$$$$$$$sOxMFNqdrFWwzkW3ysFCQH0p2VejyA &custom_key=8243c93a819395cfa407ad65ac2276d94df0986882bb4354a95b19964c45ef5a&anonymous_chat

채팅 참여자 상호 차단 방지

채팅 참여자가 다른 참여자를 임의 차단하는 기능을 방지할 수 있습니다. (채팅 참여자 차단은 관리자에 의해서만 가능합니다.)
플레이어 주소 뒤에 &disable_block 옵션을 설정함으로 기능을 사용 할수 있습니다.