hoshimure-47’s blog

プログラミング修業中の人

【PiCAST】ChromeCastっぽいものを作ってみた。

"ChromeCast"ってご存知ですか。

Chromecast - Google
https://www.google.com/intl/ja_jp/chromecast/
 今の子はYouTube世代なので勿論知ってますよね。YouTubeの動画とかをTVで楽しめるやつです。ちなみに僕はでんぱ組.incのCMが好きでした。
 僕も今年から晴れて大学生になったので、オシャレ大学生目指して買っちゃおうかな~と思ってGoogleで探してみたら、
f:id:hoshimure-47:20170610024453p:plain
 え、高くね。YouTubeをTVで見るだけなのに5000円とかありえん。買うの諦めました。

作ろう。

 自分でChromeCastっぽいものを作ろうという結論に達しました。必要は発明の母とはよく言ったもんです。 
 「RaspberryPI Chromecast」で探したら、どうやらおんなじ考えを持っていた人がいましたので、今回はその方のプログラムを使ってみることにします。
github.com
 こちらのページのREADME.mdに書かれている手順に従ってやってみます。
 結果から先に言うと、YouTubeライブ配信動画はTVでキャストすることができました。 

必要なもの

手順

1. GitHubからセットアップスクリプト(setup.sh)をダウンロードして実行
$ curl -OL http://raw.github.com/lanceseidman/PiCAST/master/setup.sh
$ sudo sh setup.sh

どえらい時間かかります。我が家の貧弱なWi-fi環境では4時間くらいかかりました。気長に待ちましょう。

2. PiCASTで必要なファイルをホームディレクトリにコピー
$ sudo cp -R /root/PiCAST
$ sudo chown -R pi:pi /home/pi/PiCAST
3. 足りないモジュールを追加するのと環境変数のPATHを設定
$ sudo npm install -g express
$ export NODE_PATH=/usr/local/lib/node_modules

 
 "express"っていうのは、JavaScriptのサーバサイド実行環境である"Node.js"のフレームワークらしいです。

4. とりあえずPiCASTを実行してみる
$ cd /home/pi/PiCAST
$ ./picast_start.sh

 picast_start.shがプロセスを開始してくれるスクリプトで、picast_stop.shがプロセスを終了してくれるスクリプトです。

5. スマホからアクセスしてみる。

 GoogleChromeなどインターネットブラウザから”http://[自分のラズベリーパイIPアドレス]:3000”にアクセスしてみる。今までの手順が正しく実行されていれば、「Welcome to PiCAST 3! in the URL, type what you want to do...」と表示されます。
f:id:hoshimure-47:20170610035431j:plain

 とりあえずラズベリーパイHDMI端子でテレビにつないでみます。ここで続けて”http://[自分のラズベリーパイIPアドレス]:3000/yt-stream/[見たいYouTube動画のビデオID]”にアクセスしてみる。ビデオIDとはYouTubeの各動画のURLの末尾にある"v="より後ろの部分の英数字列です。ここで、動画はライブ動画を選ぶことに注意しましょう。正しく実行されると次のような画面になります。
f:id:hoshimure-47:20170610035434j:plain

6. テレビにキャストされる

 さて、僕はこちらのNASAの心躍る壮大なライブ映像をキャストしてみることにしました。
f:id:hoshimure-47:20170610024513p:plain

 今までの手順で一応動きます。こんな感じでテレビにキャストされます。
f:id:hoshimure-47:20170610024505j:plain


 ちなみに"picast.js"の12行目あたりを

exec("livestreamer --player='mplayer -fs' https://www.youtube.com/watch?v=" + req.params.url + " best")

に変えるとフルスクリーンで実行されます。また最後の" best"を" worst"や" 480p"とすると画質を調整できます。
 
 手順通りいったあなたはおめでとうございます。以下、この処理の内容と僕がハマった点について述べておきます。

処理の内容

 PiCASTの処理についての簡単なイメージ図です。JavaScriptに明るい方は直接”picast.js”を読めばすぐに理解できるかと思いますが、スマホとラズパイの間で同期させてなんやかんやさせるみたいなカッコイイ処理ではなく、ただ単にブラウザに入力されたURLをサーバが読み込んで、サーバからラズパイに動画再生しろっていう命令をぶん投げてるだけです。
f:id:hoshimure-47:20170610025706j:plain

ハマったポイント

そもそもライブ配信動画にしか対応してない

 CMのみたいに、でんぱ組.incの「でんでんぱっしょん」をキャストしようと試行錯誤していたわけですが、今回ラズパイ上で実行した"livestreamer"は、YouTubeライブ配信動画しかサポートされていないので、普通の動画のビデオIDを指定するとエラー出されます。
f:id:hoshimure-47:20170610035437p:plain
 "livestreamer"の代わりに"youtube-dl"とかいうプラグインを使えば普通の動画でも行けそうな気がします。でも著作権とか怖いので実装してません。誰かできた人いたら教えてください。

picast_start.sh実行しまくってプロセスがいっぱいできちゃう
// picastを実行
$ ./picast_start.sh
// 生成されたプロセスのリストを表示
$ forever list
// logが見れる。picast.jsのエラーとかもここにでてくる
$ forever logs pycast.js

 
 いっぱいプロセスが出てきたときは

$ ./picast_stop.sh

 で消しておきましょう。


結論

なんとなくChromeCast”っぽい”のはできたかな。
でもやっぱりChromeCast欲しい。