Live+Kollus Chat 테스트 해보기

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

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

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

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

 

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

  • HTML5 플레이어 연동 '사용함'으로 체크합니다. (Default 입니다.) 

  • 1 분간 전송 가능한 메시지 수

    • 한 사용자가 1 분 동안 전송할 수 있는 메시지의 수 입니다. 이는 접속자가 광고 혹은 스팸과 같은 정보를 다량으로 입력할 경우 
      차단하기 위한 기능으로, 예를 들어 특정 사용자가 1 분 동안 30건 이상의  광고 홍보 성 문구를 보낸다면 31번째 메시지는 채팅방에 참여한 사람들에게는 노출되지 않습니다.  

    • 이후 관리자는 해당 메시지를 보낸 참여자를 모니터링 페이지에서 차단하거나 후속 조치를 취할 수 있습니다. (이후 설명합니다.)   

  • 사용자 환영 메시지를 설정합니다. 

  • 프로파일 사진 노출을 결정하거나 혹은 기본 프로파일 이미지를 업로드 할 수 있습니다. 

간단한 JWT URL생성 

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

상세한 내용은 Developer page내 https://catenoid-support.atlassian.net/wiki/spaces/SUP/pages/3311085  및 https://catenoid-support.atlassian.net/wiki/spaces/SUP/pages/3310415 를 참조하며 라이브 콘솔 내 몇 가지 키 (KEY)값을 참조해야 합니다. 

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를 활용합니다 

  1. Algorithm은 HS256 임을 확인합니다. 

  2. 기존 내용을 지우고 상기 예제 내용을 복사하여 붙여 넣습니다. 

    1.  LIVE_라이브 미디어 채널 키 (lmckey | live_media_channel_key)는채널관리>채널수정에서 확인합니다. 

    2. expire, play_expt는 생성 시점 기준 라이브 채팅을 유지하는 시간을 초 단위 (second)로 환산합니다. (Max=2147483647)  

  3. 기존 값을 지우고 테스트 계정의 보안 키 값을 넣습니다. 해당 보안 키 값은 설정>기본정보>서비스계정 에서 확인할 수 있습니다. (대소문자 구분합니다.) 


  4. JWT.io의 debugger 내 왼쪽 "Encoded"를 복사합니다. 

  5. 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

우측 

오버레이 기본

오버레이 기본 

일반적인 모바일 라이브 커머스 등

Landscape

우측

우측

하단 창 



가로 촬영
(Landscape)

Portrait

우측

오버레이 기본

오버레이 (하단)  기본

세미나, 웹 컨퍼런스, 일반 

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

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

 

채팅 참여자 상호 차단 방지

  • 채팅 참여자가 다른 참여자를 임의 차단하는 기능을 방지할 수 있습니다.  (채팅 참여자 차단은 관리자에 의해서만 가능합니다.)

  • 플레이어 주소 뒤에 &disable_block 옵션을 설정함으로 기능을 사용 할수 있습니다.

Copyright © CATENOID, lnc. All Rights Reserved.
E-mail. support@catenoid.net | Tel. 1544-4367