NOMO.asia
외부 사이트에서 Twitch 재생 시 보라색 화면이 뜨는 증상에 대한 분석
개발/UserScript 2020. 12. 24. 12:28

외부 사이트에서 재생 시 나타나는 Twitch 의 보라색 화면 Twitch 는 twitch.tv 가 아닌 외부 페이지에서 실시간 스트림을 iframe 으로 삽입하여 함께 볼 수 있도록 하는 기능을 기본 기능으로 제공한다. 그런데 12월 18일경부터 멀티트위치와 같은 외부 페이지에서 iframe 으로 삽입된 비디오를 재생할경우, 아래의 그림과 같은 보라색 화면을 띄우며, 광고 차단툴을 사용하는 경우(?) 대략 20~30초를 대기하여야하는 프리롤 메시지를 내보이기 시작했다. 보라색 화면 발생 메커니즘 이 메시지가 뜨는 메커니즘에 대해 살펴보았다. 재생 전 Twitch player 는 Twitch 로부터 마스터 플레이리스트라는 것을 받아오는데, 이 안에는 각 화질별 플레이리스트(m3u8) 링크가 존재한다. 각..

VIEW POST
Twitch Plays 모여봐요 동물의숲 - 첫 24시간의 기록
게임/동물의숲 2020. 4. 19. 02:16

Twitch Plays 모여봐요 동물의숲 지난 3월 20일부터 Twitch 의 NookInc 채널(https://www.twitch.tv/nookinc) 에서, 채팅으로 게임에 참여할 수 있는 Twitch Plays 모여봐요 동물의숲 방송을 시작했다. 트위치 채팅창에 Move right, Move left 등의 키워드를 입력하면 실제 게임 내 캐릭터를 움직일 수도 있고, 실제 컨트롤러 조작법을 따라 게임을 조작할 수 있는 시청자 참여 방송이다. 혹시라도 스위치가 없는데 게임을 해보고싶은 사람이나, 게임을 여러 사람과 함께 플레이해보길 원하는 사람이 있다면 트위치(https://www.twitch.tv/nookinc)나 믹서(https://mixer.com/nookinc)에서 채팅을 통해 직접 게임에 참여..

VIEW POST
모여봐요 동물의 숲 - 사용된 일부 컬러 및 폰트 정보 정리
개발 2020. 3. 8. 12:25

현재 개발 중인 Twitch Plays 모여봐요 동물의 숲에 게임과 유사한 디자인을 적용하기 위하여, 인게임에 사용된 사용된 일부 컬러와 폰트 정보를 정리하였다. 폰트 정보 웹서핑을 통해 찾거나 font identifier 를 이용하여 직접 찾았다.영문 Logo폰트 명 - Ministry Medium https://www.myfonts.com/fonts/device/ministry 영문 Dialog폰트 명 - Quicksand Bold https://fonts.google.com/specimen/Quicksand32px 기준 letter-spacing 을 0.5px 으로 하면 폰트 간격까지 매우 비슷하다.다만 게임 내 letter-spacing 값이 부분마다 다르게 들어가 있는 것으로 보여서, 완벽한 일..

VIEW POST
PC에서 포레스트 집중유형분석 하는 법 (forest-mt)
정보 2020. 2. 27. 19:36

PC 웹브라우저에서 포레스트 집중유형분석 페이지에 접속하면, 스마트폰을 통해 QR 코드로 접속하라는 메시지가 나타난다. http://forest-mt.seekrtech.com/ Plant your personal flower Test Your Focus Type x Find Your Personal Flower forest-mt.seekrtech.com PC 화면에서 해보길 원한다면 아래와 같이 하면 된다. 크롬 브라우저를 실행한다. http://forest-mt.seekrtech.com/ 에 접속한 후 F12 키를 눌러 개발자도구를 연다. Ctrl+Shift+M 을 눌러 Mobile view 로 전환한다. F5 를 눌러 새로고침 한다. 나의 결과는 해바라기로 나왔다. 열정과 긍정이라니 정말 좋다.

VIEW POST
병적증명서 인터넷 발급 시 "신청하신 민원은 소재지의 기관에서 처리할 수 없습니다" 오류가 나는 경우
정보 2020. 2. 24. 09:59

병적증명서는 정부24 (https://www.gov.kr/) 의 메인페이지에서 "병적증명서 발급" 버튼을 클릭하거나, 정부24의 메인 검색창에 "병적증명서"를 검색하여 나오는 메뉴로 진입하거나, 다음의 링크 (https://www.gov.kr/main?a=AA020InfoCappViewApp&HighCtgCD=A01002&CappBizCD=13000000016&tp_seq=02) 에서 신청할 수 있다. 참고로, 병적증명서 발급을 위해서는 공인인증서를 통한 로그인이 필요하다. 병적증명서를 발급하는 과정 중, 주소를 입력하는 과정에서 오류가 발생한 경험을 적어본다. 문제 발생 병적증명서 발급을 위해서는 주소검색을 통해 행정처리기관을 선택해야 한다. 그런데 내 경우, 우리집 주소나 집 근처 주소를 입력하면 아..

VIEW POST
Twitch Plays 모여봐요 동물의 숲 개발 일기 ② - Chatbox 에 이모티콘 적용, 서버 시간 및 UPTIME 달기
개발 2020. 2. 17. 04:42

본 글은 [Twitch Plays 모여봐요 동물의 숲 개발 일기 ① - 장면 틀 만들기] 에서 이어지는 글이다. Chatbox 수정 이전 글에서 직접 만든 Chatbox 는 받아온 메시지의 내용만을 다시 바로 뿌려주는 구조라서 이모티콘 등을 표시할 수 없었다. 이것을 더 보기좋게 고쳐보자고 마음먹고 작업을 시작했다. 가장 먼저 이모티콘의 표시를 도와줄 적당한 라이브러리를 찾아봤다. 처음에는 twitch-emoticon 을 사용하여 이모티콘을 표시하려고 했는데, 이유는 기본 Twitch 의 이모티콘을 비롯하여 BTTV, FFZ 와 같은 서드파티 이모티콘까지 한 번에 보여줄 수 있다는 것이 매력적으로 느껴져서이다. 그런데 직접 적용해보니 Twitch Emotes API 를 이용하는데, 버전이 v4 가 아닌 ..

VIEW POST
Twitch Plays 모여봐요 동물의 숲 개발 일기 ① - 장면 틀 만들기
개발 2020. 2. 11. 01:31

본 글은 [새로운 목표 - PC로 제어가능한 닌텐도 스위치 컨트롤러 만들기]와 [PC로 제어가능한 닌텐도 스위치 컨트롤러 제작기 - 3. 예제 코드 실행 및 트위치 채팅 연동 테스트]에서 이어지는 글이다. 앞선 트위치 채팅 연동 테스트에서 사용한 파이썬 코드의 아쉬운 점은 컨트롤러 제어와 채팅 수신 등을 모두 하나의 python 프로세스에서 한다는 것이었다. 프로세스, 쓰레드 관리, 에러 발생 시 프로세스가 재시작 하는 것 등을 효과적으로 관리하고, 개발 편의를 높이기 위하여 컨트롤러 부분을 제외한 나머지는 nodejs 를 이용하여 개발하기로 마음먹었다.이번 주말의 개발 목표 Twitch Plays 에서 시청자에게 보여주어야 하는 것들은 Chatbox, Game Screen, 배경 이미지, 현재 동작 모..

VIEW POST
Next.js 사용 시 fs(fs-extra), net, tls 패키지를 찾을 수 없다는 오류가 나는 경우
개발 2020. 2. 3. 04:45

간단한 서버 사이드 렌더링 프로그램 제작을 위해 처음으로 Next.js 를 사용하면서, 기본 Next.js 예제인 page/index.js 에다가 테스트겸 이런저런 패키지와 예제 코드를 가져다가 붙였다. 사용자가 페이지에 접속하면 제3의 백그라운드 어플리케이션을 실행시키려는 의도였다. 그런데 테스트를 해보니 몇몇 모듈을 찾을 수 없다며 에러가 발생했다. 대표적으로 fs, net, tls 같은 모듈과 관련된 오류가 있었다.Failed to compile ./node_modules/twitch-bot/lib/bot.js Module not found: Can't resolve 'tls' in 'F:\Google Drive\3. Hobbies\switch_controller\nodejs_server\node_..

VIEW POST
PC로 제어가능한 닌텐도 스위치 컨트롤러 제작기 - 3. 예제 코드 실행 및 트위치 채팅 연동 테스트
개발 2020. 1. 31. 04:40

앞선 글에서 Python 개발 환경을 구성하였고, 이번 글에서는 실제 코드를 실행하여 작동이 되는 것을 확인하는 과정을 정리하였다. 배선 연결 일단 FT232RL USB to UART(Serial) 모듈과 아두이노 우노 R3간 케이블을 아래 사진과 같이 연결해주었다. (RX-RX(로 향하는), TX-TX(가 들어오는), VCC-5V, GND-GND) 코드 수정https://github.com/ItsDeidara/CommunityController 에서 코드를 내려받아 개발 환경을 구축하고, Twitch Plays Nintendo Switch/CommunityController v3/BOTW/ 경로의 코드를 테스트삼아 RUN 해보기로 계획했다. 다만 코드를 실행해보니 몇 군데 수정할 부분이 있었고, 이것을..

VIEW POST
PC로 제어가능한 닌텐도 스위치 컨트롤러 제작기 - 2. Python 개발환경 구축하기
개발 2020. 1. 31. 03:56

내가 테스트를 위해 사용할 코드는 Python 언어로 작성된 ItsDeidara / CommunityController 이다. 따라서 Python 개발 환경을 구축해야한다. 혹시 이 글을 보며 따라할 사람이 있을지는 모르겠지만 Python 을 모르는 사용자에게 모든 내용을 일일히 설명할 수는 없어서 간단히만 정리했다. 아무래도 Python 을 아예 모르는 사용자는 본 단계부터 따라하기 어려울 수도 있겠다. 1. Anaconda 가상환경 구축 및 필요 패키지 설치효과적인 버전 관리를 위해 Anaconda 를 설치하는 것을 권장한다. 나는 이전부터 Anaconda 를 사용하던 관계로 설치 과정은 본 포스트에 적지 않았다. 구글에 [Python Anaconda 설치]로 검색하면 많은 결과가 나오니 찾아보아도 ..

VIEW POST