Qiita 첫 투고입니다.
백엔드에 가까운 것만 하고 있었습니다만, 무엇인가를 만들고 싶었고, Electron이 좋은 느낌이었으므로, Youtube Live ROM 전용 플레이어를 만들어 보았습니다.
앱 이름은 "Madoka"입니다.

소스 코드 및 다운로드

소스 코드 : htps : // 기주 b. 코 m / 미나 카와 다이 키 / 마도카
다운로드: htps : // 기주 b. 코 m/미나카와다이키/마도카/레아세 s/타 g/v0.1.0
※동작은 Mac/Windows에서 확인하고 있습니다.

주로 사용한 것

Electron v1.7.9
v1.8.1을 처음 사용했지만 통신이 안정되지 않았기 때문에 버전을 낮췄습니다.

React
모든 것을 React가 아니라 조금 복잡한 구성 요소 만 React로 작성했습니다.

Webpack
트랜스 파일로 사용했습니다.

YouTube Data API (v3)
코멘트의 취득 부분에서 사용했습니다.

Shuvi-lib
플레이어 본체에 사용했습니다. (Qiita)

Madoka -마도카-

생긴 물건의 외형은 이런 느낌입니다.


주요 기능으로는

YouTube Live 영상 재생

코멘트 표시

입니다. 매우 간단하게 만들고 있습니다.
사용법으로는 동영상 ID를 입력하고 "엔터 키"를 누르거나 "검색 마크"를 누르면 영상과 코멘트가 흐릅니다.
Live 전용이므로, 시크 바는 굳이 준비하지 않았습니다.
플레이어 조작으로는 재생, 정지, 갱신, 화질 변경 등이 가능합니다.
또, 코멘트를 숨기는 것으로 영상만으로 하는 것도 가능합니다.

기술보다는 없음

YouTube Data API (v3)로 댓글 받기

코멘트를 얻는 데 VideoId가 아닌 liveChatId가 필요하다는 것을 알기까지 약간의 시간이 걸렸습니다.
그리고 이번에 마도카에서는 VideoId에서 코멘트 취득까지 추적하고 있습니다만, ChannelId에서 추적하고 있는 예도 있었습니다.

VideoId에서 실제로 주석을 얻는 코드의 예

comment.js

import googleApi from 'googleapis';
const youtube = googleApi.youtube({version: 'v3'});

youtube.videos.list({part: 'snippet, liveStreamingDetails', id: 'ここにVIDEO_ID', auth: 'ここにAPI_KEY'}, (err, data) => {
  if (data && data.items[0] && data.items[0].liveStreamingDetails && data.items[0].liveStreamingDetails.activeLiveChatId) {
    youtube.liveChatMessages.list({
        part: 'snippet',
        liveChatId: data.items[0].liveStreamingDetails.activeLiveChatId,
        pageToken: '前回の続きからのコメントを取得する際に指定',
        auth: 'API_KEY'
    }, 
    (err, data) => {
      if (data) {
        //次にコメントを取得する際に必要になるトークン
        console.log(data.nextPageToken);
        //コメントを取得
        data.items.map(item => console.log(item.snippet.displayMessage));
        //次回コメントを取得可能になるまでの時間（ポーリング待機時間）
        console.log(data.pollingIntervalMillis);
      }
    });
  }
});

여기서 주의해 주었으면 하는 것은, 니코니코 생방송의 코멘트와 같이 WebSocket을 통해 코멘트를 취득하는 것이 아니라,
여기에서 GET 요청을 통해 매번 코멘트를 얻기 위해 폴링 대기 시간이 있다는 것입니다.
서버의 부하 상태나 시간대에 따라 변동하는 것 같습니다.

Webpack을 사용할 때 dotenv를 사용하는 방법

원래 Webpack이 아니라 babel-register를 사용하고 있었지만, 로드가 매회 상당히 시간이 걸려 버리므로, Webpack으로 변경했을 때, 「.env」에 기술한 내용을 읽어내지 않게 되어 버렸기 때문에 조금 손잡이 붙었습니다.
자신의 해결 방법으로서는 「webpack.config.js」파일로 「.env」를 읽어 버린다고 하는 방식으로 했습니다. (그 이외의 좋은 방법 있는 사람은 가르쳐 주세요.)

webpack.config.js

const webpack = require('webpack');
const path = require('path');
require('dotenv').config({ path: __dirname + '/.env' });

module.exports = {
  省略,
  plugins: [
    new webpack.DefinePlugin({
      // process.env.NODE_ENVを'production'に置き換える
      'process.env.NODE_ENV': JSON.stringify('production'),
      //ここで「.env」ファイルの「YOUTUBE_API_KRY」の値を「process.env.YOUTUBE_API_KRY」に格納している
      'process.env.YOUTUBE_API_KRY': JSON.stringify(process.env.YOUTUBE_API_KRY)
    })
  ]
};

모달 등을 그 요소 이외를 클릭했을 때에 닫는 동작

수수함에 집착한 포인트입니다.
하는 방법은 다양하다고 생각합니다만, 제일 제대로 된 방법을 써 둡니다.

setting.js

//画面のどこをクリックしても呼ばれるリスナ
document.addEventListener('click', (e) => {
  //「#setting-wrap」はクリックした時に出現する要素
  //クリックした場所が「#setting-wrap」以外の場合分岐に入る
  if(e.target.closest('#setting-wrap') === null) {
    //あとはdisplay:noneにするだけ
    const settingMenuStyle = document.getElementById('setting-menu').style;
    if(settingMenuStyle.display === 'flex'){ settingMenuStyle.display = 'none'; }
  }
});

미해결

css에서 -webkit-app-region: drag를 지정하면 Windows 환경에서 해당 요소의 hover 또는 클릭이 이상합니다.

끝에

처음으로 Electron을 만져 보았습니다만, 꽤 좋았습니다.
개인적으로 이러한 앱을 만드는 것이 꽤 오랜 시간이었기 때문에 매우 즐거웠습니다.
앞으로도 점점 앱을 만들어 가므로 잘 부탁드립니다!

HP : h tps : / / 모두 카와다이키. 이 m
GitHub : htps : // 기주 b. 코 m / 미나카와 다이 키
트위터 : htps : // 라고 해서 r. 코 m / 오 ゔ ぇ r_ 아 ry
FaceBook : htps //w w. 후세보 k. 코 m/미나카와. 다이키

참고로 한 사이트 등

Qiita - YouTube IFrame Player API를 느슨하게 랩핑해 보았다.

hinosita's diary - 개발 시 자바스크립트 환경 변수 등 관리

Qiita - # jQuery에서 특정 요소 이외의 클릭시 이벤트 얻기