yf-dev / open-dccon-selector

Twitch Extension for quick Dccon chat

Open Dccon Selector

한국어

Open Dccon Selector is a Twitch overlay extension for Streamers that support Dccon chat. By using Open Dccon Selector, viewers can find and use Dccons through overlay.

Video Tutorial

You can watch the video tutorial by clicking thumbnail below.

What is Dccon chat?

Dccon chat is a feature that displays a small image on a video chat screen with a chat message, such as a KakaoTalk emoticons and a telegram sticker. Dccon Chat can be used by typing specific keywords of each Dccon starting with ~ characters in the chat window like ~hello.

Streamers can always add/remove/modify Dccon, which viewers can use in their broadcasts, so Dccon chat is a good way to show the personality of each broadcast.

How to apply Dccon chat to broadcast

Currently, you can use JSAssist Open DCcon, Bridge BBCC, ChatAssistX-Client which are open source.

For how to apply each program, refer to the program guide.

• JSAssist Open DCcon: https://github.com/rishubil/jsassist-open-dccon
• Bridge BBCC: https://github.com/krynen/BridgeBBCC
• ChatAssistX-Client: https://github.com/Lastorder-DC/ChatAssistX-Client

Why Open Dccon Selector?

Each streamer has a different Dccon for chatting, so each streamer gives viewers a list of Dccons available on their broadcasts on a separate website.

Examples:

• Funzinnu
  • http://funzinnu.com/dccon.html
• Yeokka
  • https://krynen.github.io/jsassist-custom-css/list.html
• Telk
  • http://tv.telk.kr/list

However, it is very troublesome to find Dccon on a separate website during the broadcast and use it back to broadcast. (Especially, it is more inconvenient when you are watching the broadcast on full screen.)

So I created an Open Dccon Selector to use Dccon chat quickly without leaving the current viewing screen.

How to apply Open Dccon Selector to broadcasts

First, go to the URL below.

https://dashboard.twitch.tv/extensions/iotylqfktkxdjwyk1gdq2rlc7kw7zo

Click on the 'Install' button in the upper right corner and click 'Configure' button to set Dccon chat data.

In the extension configuration, enter the URL of your Dccon chat data in the Dccon URL field and click the 'Submit' button.

(Example of Dccon chat data - https://rishubil.github.io/jsassist-open-dccon/static/dccon_list.json)

Now You can go to the "Extensions" section of the Twitch dashboard and activate the Open Dccon Selector.

For more detailed settings, see configuration document.

License

MIT

open-dccon-selector's Issues

텔크콘 형식 지원

http://tv.telk.kr/?mode=json

변환 API에 추가해야할듯

Bridge BBCC (beta) 디시콘 포멧 지원

https://github.com/krynen/yeokka/blob/master/dccon/dccon_list.js

JSONP 같은 느낌

LAMP.GG 지원

LAMP.GG에서 제공하는 형식의 디시콘 목록 조회 기능 지원

graphql 사용하므로 참고할 것

참고 링크

https://lamp.gg/user/4/emoji/
https://tgd.kr/tip/40672969

백엔드 재구축

개인 서버만으로 운영하기는 조금 부담스러움(Downtime이 언제든지 발생할 수 있음)

따라서 로드밸런서를 하나 두고, 평소에는 개인 서버에서 운용하다가 문제 발생시에 다른 서버에서 서비스를 제공했으면 좋겠음.

AWS나 Azure, Google Cloud 등을 최소 가격으로 운용할 수 있는 방안을 찾아볼 예정.

디시콘 지원 프로그램 Bridge BBCC 추가

hosted 모드에서 동작 안함

이유를 모르겠음 ㅠㅠ

올바르지 못한 JWT 사용

채널 정보를 업데이트할 때 사용하는 required_configuration 관련 API에서, JWT에 사용되는 User ID는 스트리머의 ID가 아닌 익스텐션 소유자의 ID입니다.

open-dccon-selector/backend/flask/app/apis/channels.py

Lines 43 to 86 in 32d244f

	def put(self, user_id):
	def twitch_rc_dccon(dccon_url):
	if dccon_url:
	update_twitch_rc(decoded_token, ['dcconUrl'])
	else:
	update_twitch_rc(decoded_token, [])
	parser = reqparse.RequestParser()
	parser.add_argument('token', type=str, required=True)
	parser.add_argument('dccon_url', type=str, required=False)
	parser.add_argument('dccon_type', type=str, required=False)
	parser.add_argument('is_using_cache', type=int, required=False)
	args = parser.parse_args()
	token = args['token']
	dccon_url = args['dccon_url'] if 'dccon_url' in args else None
	dccon_type = args['dccon_type'] if 'dccon_type' in args else None
	is_using_cache = parse_bool(args['is_using_cache']) if 'is_using_cache' in args else None
	if dccon_type not in Channel.DCCON_TYPES:
	abort(400, '{dccon_type} is invalid dccon_type'.format(dccon_type=dccon_type))
	decoded_token = decode_twitch_token(token)
	broadcaster_user_id = verify_broadcaster(decoded_token)
	if user_id != broadcaster_user_id:
	abort(400, 'Mismatched user_id')
	channel = get_channel_by_user_id(user_id)
	old_dccon_url = channel.dccon_url
	if dccon_url is not None:
	channel.dccon_url = dccon_url
	twitch_rc_dccon(dccon_url)
	if dccon_type is not None:
	channel.dccon_type = dccon_type
	if is_using_cache is not None:
	channel.is_using_cache = is_using_cache
	update_db(cb_rollback=lambda: twitch_rc_dccon(old_dccon_url))
	return channel.json(), 200

아래 문서를 참조하여 수정해야 합니다

https://dev.twitch.tv/docs/extensions/building/#signing-the-jwt

imgproxy v3 포멧 지원

imgproxy/imgproxy#749

지원하는 디시콘 타입 목록 API 작성

디시콘 타입이 추가되었을 때마다 Twitch extension을 업데이트하기보단 API로 불러오도록 하는 편이 나아보임

Config 페이지 UI 개선

초기 설정이 너무 불친절함
대부분의 설정은 별도의 설명 없이 선택할 수 있도록 하고,
스트리머의 디시콘 URL을 어디서 확인할 수 있는지 가이드가 필요함

CSP 관련 변경사항 적용

https://discuss.dev.twitch.tv/t/new-extensions-policy-for-content-security-policy-csp-directives-and-timeline-for-enforcement/33695