개요

htp : // bg. 니코 ゔ에서. jp / 니코네 ws / 34167. HTML
왠지 여기 보고 있으면・・・
구현일 미정입니다만, 동영상 인용 기능이・・・
호...

좋아, 만들어 보자.
ぃ tp // m / k와 d / ms / 04d7c7865f2570f53
여기에서 쓴 takcast에 구현해 보았습니다.
실제로 사용해 보는 경우

$ git clone [email protected]:taktod/takcast
$ cd takcast
$ npm install
$ npm install --save taktod/takcast.source.youtube
$ npm run setup
$ npm test

갈 수 있다고 생각합니다.

실제 화면은 이렇게 되었습니다.

선택에 youtube가 증가하고 있습니다.


방송하고 싶은 동영상의 ID를 넣고 오른쪽 버튼을 클릭하여 캡처


동영상이 제대로 캡처되면 오른쪽 하단의 [+] 버튼으로 실제로 아이템으로 캡처할 수 있습니다.


이런 식으로 재생할 수 있습니다.


물론 어느 곳에서나 회전하거나 크기를 조정할 수 있습니다.

뭐, 시크가 없고, 리로드를 할 수 없고 등, 여러가지 문제가 있습니다만, 우선 iframe에서 video 태그에 의한 재생할 수 있는 소스라면 뭐든지 같은 방법으로 전달할 수 있을 것 같습니다.

감상 여러가지

iframe

iframe의 내용의 데이터는 기본 cross domain의 문제로 액세스 할 수 없습니다만, electron에서 모체의 html이 file://로 액세스 하고 있는 경우는 그 제한의 밖에 갈 수 있는 것 같네요.

iframe.contentWindow.document.getElementsByTagName("video")

에서 내용의 요소에 액세스할 수 있기 때문에, 갈 수 없어・・・가 되었습니다.

iframe 리로드의 와나

iframe의 요소를 react로 컨트롤 하고 있는 왼쪽의 팔레트부에 배치하면, react의 재묘화가 달릴 때마다 reload가 달려 버려, youtube의 동영상이 처음부터 다시 시작된다는, 상황에 빠졌습니다.
이것은 iframe의 특징과 같습니다.

회피하는 좋은 방법이 발견되지 않았기 때문에 다른 보이지 않는 곳에서 youtube의 외부 플레이어를 배치해, 내용을 미러링 한 video 태그를 배치하는 방법으로 대책해 보았습니다.

구성 요소 취급 조정

원래 옆의 아이템의 부분은 HTMLMediaElement만 배치 가능하게 하고 있었습니다만, 이번의 조정 테스트하고 있을 때에 HTMLLElement의 배치를 가능하게 해 보았습니다.
뭐, 결국 youtube -> canvas -> video라는 것으로 HTMLVideoElement를 배치하고 있는 것입니다만・・・

2번째의 리로드의 문제가 있기 때문에, 보이지 않는 곳에 외부 플레이어를 설치해 동작시키고 있는 것입니다만, 만일 니코동의 데이터를 당기고 싶은 경우는, youtube와 같이 「javascript만으로 보이지 않는 플레이어 재생하기"
라고 할 수 없을 것 같기 때문에, 조금 귀찮은 것 같네요.

그래서

우선 youtube의 외부 플레이어(iframe 사용해 동작해, 내부적으로 video 태그를 사용하고 있다)를 캡처하는 것에 성공했습니다.

좀 더 사용하기 쉽다면 검색 API를 사용하여 원하는 동영상을 쉽게 볼 수 있습니다.
제대로 리로드나 시크할 수 있도록 개량해야 합니다만, 돌관으로 만든다면, 이런 것일까라고 하는 것이 되었습니다.