YouTube Live 댓글 뷰어를 만들어 보았습니다.
경위
이전, YouTube Live Player "마도카"를 만들었을 때, 뻐꾸기 부분이 API의 사정상, 폴링으로 밖에 취득할 수 없고, 꽤 엄격한 것이 있었으므로, 리얼타임으로 취득할 수 없을까 생각하고 있었습니다.
잘 생각해 보면 WebView에서 타면 좋지? 라고 생각했기 때문에 해 보았습니다.
소스 코드 및 다운로드
소스 코드 : htps : // 기주 b. 코m/미나카와다이키/YLCV
다운로드: htps : // 기주 b. 코 m/미나카와다이키/YLCV/레아세 s/타 g/v0.1.0
※동작은 Mac/Windows에서 확인하고 있습니다.
YCV - YouTube Live Comment Viewer
생긴 코메뷔는 이런 느낌입니다.
사용법
소스 코드 : htps : // 기주 b. 코m/미나카와다이키/YLCV
다운로드: htps : // 기주 b. 코 m/미나카와다이키/YLCV/레아세 s/타 g/v0.1.0
※동작은 Mac/Windows에서 확인하고 있습니다.
YCV - YouTube Live Comment Viewer
생긴 코메뷔는 이런 느낌입니다.
사용법
응용 프로그램에 마우스 커서를 올려 놓으면 오른쪽 상단에 톱니 바퀴 아이콘이 나오므로 거기를 클릭하십시오.
htps //w w. 요츠베. 이 m/ぃゔぇ_짱? v=? ? ? 형식으로 입력하십시오.
"htps // 짱 TV2. 세프 뿌프 s. 이 m"을 사용하면 CSS를 쉽게 변경할 수 있습니다.
변경한 예는 이런 느낌입니다.
앱 자체의 투과 처리를 하고 싶었는데, Windows라고 잘 동작하지 않았기 때문에 포기하고 있습니다.
배달자 분의 도움이 되면 좋다고 생각합니다.
기술보다는 없음
WebView
ぇtps://에에ctct론. 그리고 m. 이오/도 cs/아피/우ぇ bゔぃ에 w-g/
여기에 쓰여진 거리입니다.
html에 태그를 작성하는 것만으로 쉽게 사용할 수있었습니다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YouTube Live コメントビューアー</title>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
<webview
id="wv"
src="https://www.youtube.com/live_chat?v=">
</webview>
</body>
js 측에서 다양한 괴롭히기 때문에 편리합니다.
app.jsconst webview = document.querySelector('webview');
webview.addEventListener('dom-ready', () => {
//WevView専用のDevToolが開きます。
webview.openDevTools()
//WebView上の要素のCSSを書き換えることも可能です。
const css = '#overflow.yt-live-chat-header-renderer{ margin-right: 32px; }';
webview.insertCSS(css);
});
document.getElementById('connect-button').addEventListener('click', ()=>{
//WebViewの表示内容を変更
webview.loadURL('https://hogehoge.com');
});
미해결
Windows에서 앱 투명
끝에
YouTubeLive의 코멘트 취득은 API를 경유하면 폴링 기간이 정해져 있어 좀처럼 실시간감이 나오지 않았습니다만, WebView로 하는 것으로 해결할 수 있었다고 생각하고 있습니다.
꼭 좋으면 배달자는 사용해보십시오.
HP : h tps : / / 모두 카와다이키. 이 m
GitHub : htps : // 기주 b. 코 m / 미나카와 다이 키
트위터 : htps : // 라고 해서 r. 코 m / 오 ゔ ぇ r_ 아 ry
FaceBook : htps //w w. 후세보오 k. 코 m/미나카와. 다이키
Reference
이 문제에 관하여(YouTube Live 댓글 뷰어를 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/minakawa-daiki/items/2568afdc6d88a0de705a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YouTube Live コメントビューアー</title>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
<webview
id="wv"
src="https://www.youtube.com/live_chat?v=">
</webview>
</body>
const webview = document.querySelector('webview');
webview.addEventListener('dom-ready', () => {
//WevView専用のDevToolが開きます。
webview.openDevTools()
//WebView上の要素のCSSを書き換えることも可能です。
const css = '#overflow.yt-live-chat-header-renderer{ margin-right: 32px; }';
webview.insertCSS(css);
});
document.getElementById('connect-button').addEventListener('click', ()=>{
//WebViewの表示内容を変更
webview.loadURL('https://hogehoge.com');
});
YouTubeLive의 코멘트 취득은 API를 경유하면 폴링 기간이 정해져 있어 좀처럼 실시간감이 나오지 않았습니다만, WebView로 하는 것으로 해결할 수 있었다고 생각하고 있습니다.
꼭 좋으면 배달자는 사용해보십시오.
HP : h tps : / / 모두 카와다이키. 이 m
GitHub : htps : // 기주 b. 코 m / 미나카와 다이 키
트위터 : htps : // 라고 해서 r. 코 m / 오 ゔ ぇ r_ 아 ry
FaceBook : htps //w w. 후세보오 k. 코 m/미나카와. 다이키
Reference
이 문제에 관하여(YouTube Live 댓글 뷰어를 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/minakawa-daiki/items/2568afdc6d88a0de705a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
