StreamSync - アニメ、映画同時視聴のためのChrome拡張開発①

はじめに

youtubeの動画や配信で、主と視聴者がアニメや動画を同時視聴するという企画があります。
配信なら「同時視聴」と呼ばれるし、動画なら「リアクション動画」と呼ばれることが多いけど構造は同じ。

これ個人的に結構好きで、好きな生主とかyoutuberと好きなアニメを一緒に見てるような体験ができて楽しい。

ただ、これを実際にやろうとすると問題が色々ある。
ずばりそれは著作権の問題で、アニメなどのコンテンツを配信者が自分の動画に含めることができないため、その２つを分離せざるを得ない。
要は、ブラウザのあるタブでnetflixを開き、もう一つのタブで配信をみる。そしてその２つのタイミングを合わせるという作業が必要になってくるわけです。

これがすごくめんどくさいので、同時視聴というコンテンツが増えてこない原因になっているんじゃないかと思います。

こういった動機から、いま趣味で作っているのが
異なる複数のブラウザで同じ動画を再生し、リアルタイムでそのタイミングを同期するというchrome拡張機能です。

この記事では

このアイデアを思いついた当初に考えたこと（動機だったり、実現したいことだったり、実現する方法について）は走り書きに残してあるので、今回は備忘もかねてそれを以下に書いておきたい。

次回からは実際にchrome拡張とか後から必要になったwebsocketサーバーとかの開発状況を書いていきたいと思います。

開発中のレポジトリ

なお、開発中のプログラムは以下で管理してます

同時視聴、リアクション動画のタイミング同期手法

動機

生主が、映画やアニメの同時視聴をする場合、著作権の関係からその放送の中でコンテンツを流すのではなく生主と視聴者が各々タイミングを合わせて、コンテンツを再生する方法が取られる

めんどくさい点

最初にいっせーので、とかやるのがだるい
いっせーので、のやつでタイミングがずれてしまうと後からタイミングを合わせるのが難しい
途中で一時停止しちゃたりすると、再開時にタイミングを合わせられない（ずれる）

今ある手法

わかりやすい地点をキーに、再生開始のタイミングを合わせる（動画のはじめ、チャプターの始まりなど）　
but 生主と視聴者で見るソースが違うと、始まりのタイミングが違うことがある　例えば、アマプラだとすぐに本編が始まるが、netflixだと映画会社の宣伝が入るなど
実況動画のほうに、タイムコードを表示する（ストップウォッチ形式）
しかし、ストップウォッチは再生開始からの時間を数えているだけで、たぶん動画のタイムコードと一致してはいない　つまり、途中で一時停止する場合などずれちゃう（動画を止めるタイミングでストップウォッチも止める必要がある）　さらに、ストップウォッチを表示したところでそれに合わせて再生する方法がない（手動しか）

できたらいいこと

生主が見ているタイミングと、自分が見ているタイミングを完全にsyncできる（しかも簡単に）
syncは動画のコンテンツをキーにできる（動画の音や映像、タイムコード）
違うサイトで見てもいい
netflixとamazon primeのどちらでみてもいい
視聴サイト、方式にかかわらずsyncできるといい
生放送がニコニコ、youtube、twitch
動画がyoutube、ニコニコ、amazonprime、netflix、mp4

やりたいことからわかる条件

少なくとも、自分がみる動画のシークバーをプログラムでいじる必要がある
→タイミングsyncのため
youtubeをブラウザで見るならyoutubeのシークバー
netflixをブラウザで見るならnetflixのシークバー（以下略
全部に対応するのは難しそう？？？　なんかしらまとめてできないか・・・・
なんらかのプロトコルで、生主が見ている動画のタイミングを取得する必要がある
sync用サーバーを介して？
　→生放送が視聴者に届くまでの時間と、sync情報が届くまでの時間にラグが発生する課題 and 生放送じゃないといけない？
★生放送にsync情報を埋め込み、それを元にsyncを行う
　→リアクション動画と生放送どちらでもいい、ラグ問題はない
あくまで合わせるべきタイミングは
俺が見ている、生主が見ている動画のタイミング　（生主が見ている動画のリアルタイムのタイミングではないことに注意）
と
俺が見ている動画のタイミング

登場人物（構成要素）

Host
リアクション動画、〇〇同時視聴生放送の配信
Virtual Meeting
視聴者が見るリアクション動画、放送
Hosts Content
Hostが見ている、リアクション対象のコンテンツ
Viewer
リアクション動画の視聴者
Viewers Content
視聴者が見ている動画

syncフロー

生放送を開始
生放送中で動画視聴を開始
生放送の中に、何らかの動画タイミングを表すデータを付加
視聴者が生放送データを受けとり視聴する
生放送中に埋め込まれたタイムデータを取得
生主が見ているのと同じコンテンツを再生
受け取ったタイムデータをもとに、再生コンテンツのシークバーを調整

生主が動画視聴を中断
それと同期した形でタイムデータが停止を示す
視聴者はタイムデータを取得
自動でコンテンツ再生を停止

生主が再生再開
タイムデータが動き出す
視聴者側でも再生を再開（このとき単に停止、再生のタイミングを合わせるのではずれる可能性があるため、シークバーを合わせる）

issue

ストリーミング動画からタイムスタンプを継続的に取得する方法
youtube、amazon primeとnetflixについては、再生しているplayerに対してjsでapiを叩くことで　タイムスタンプを取得できることがわかった。
かつ、タイムスタンプを指定してシークすることも可能
タイムデータを動画内に埋め込む方式
これは秒数でいいと思う
取得した数字をウィンドウ上に表示し更新していく
Meeting動画からタイムデータをautomaticに取得する方法
javascriptでweb画面の選択範囲のスクリーンショットのとり方
スクリーンショットを画像認識にかけ、数字化する OCR
再生コンテンツのシークバーを自動で操作する方法
ブラウザ上でjavascriptを叩くことにより、各サイトのプレイヤーAPIを使ってシークする
syncのキーとなるタイミングデータは何がふさわしいか
動画のタイムスタンプ
　→Host ContentとViewer Contentの中身が完全一致してないといけない
　　一旦シンプルにするために、生主と視聴者は同じソースを参照することにする
コンテンツの一部（音声の一部）（画像の一部）（その時点の映像をコード化したもの）
　→コンテンツの内容が微妙に違う場合だめ（画質、音質、色味？）
　　サイト間の差分問題は解消（冒頭の「松竹富士山」の有無とか）
UIをどうするか
chrome拡張？
ブラウザ上でJavascriptを実行することがキーになってくるため