ブラウザ経由でradikoをコントロール

ODROID や Raspberry Pi に Webサーバを乗せてクライアント側からブラウザ経由で radiko の再生とか音量をコントロールしてみる。

目標:

ブラウザ経由でラジコの再生・停止、録音データの再生・停止、音量のコントロールをできるようにする。

まずは Web サーバのNginX(えんじんえっくす)、PHPをインストール。

sudo pacman -S nginx php php-fpm

環境設定:

php の設定

php.ini の修正

sudo vi /etc/php/php.ini
    :
;htmlドキュメントのroot、録音データの保存先を追記
;open_basedir = /srv/http/:/home/:/tmp/:/usr/share/pear/:/usr/share/webapps/
open_basedir = /share/html/:/home/:/tmp/:/usr/share/pear/:/usr/share/webapps/:/share/media/
    :
;default_charset = "UTF-8"    ;コメント解除
default_charset = "UTF-8"
    :
;date.timezone =              ;コメント解除 & エリアの指定
date.timezone = Asia/Tokyo
    :

※html のルートを/share/html/、ラジコの録音データの保存場所を/share/media/として設定してます

php-fpm.conf の修正

sudo vi /etc/php/php-fpm.conf
    :
user = http                         ;NginXのuserと合わせる
group = http                        ;NginXのgroupと合わせる
    :
;listen = 127.0.0.1:9000            ;NginXのfastcgi_passと合わせる
listen = /run/php-fpm/php-fpm.sock
    :
NginX の設定

nginx.conf の編集

sudo vi /etc/nginx/nginx.conf
    :
#user html;            #コメント解除 & userとgropuの指定
user http http;
    :
;worker_processes  1;  #使用するCPUコア数の指定 ODROID-U2なら4
worker_processes  4;
    :
http {
    :
    server {
    :
        #charset koi8-r;      #文字コードをUTF-8に指定
        charset utf-8;
        root    /share/html;  #htmlのrootを指定
    :
        location / {
            #root   /usr/share/nginx/html;    #serverセクションで指定したのでコメント
            #index  index.html index.htm;     #indexファイルに.phpを追加
            index   index.html index.htm index.php;
    }
    :
        location ~ \.php$ {
            fastcgi_pass    unix:/run/php-fpm/php-fpm.sock;
            fastcgi_index   index.php;
            fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include         fastcgi_params;
    }

NginXのテスト

sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

と表示されればOK。

テスト用のページを書き込む。

mkdir /share/html
vi /share/html/index.php
<?php
phpinfo();
?>

htmlドキュメントのルート以下のオーナーを http に変更。

sudo chown -R http:http /share/html

起動確認

sudo systemctl start php-fpm nginx

ローカルからブラウザでアクセスして動作確認。PHPの情報が表示されればOK。

http://10.0.0.xx

ブラウザでリモコン化

ユーザ http に sound グループを付ける。

sudo gpasswd -a http audio

iPhone の Safari からアクセスしたときの雰囲気作りに UIUIKit を利用して html(php)を作ってみました。html を掲載するのが面倒なので試してみたい方は下のリンクからダウンロードして試してください。

※ラジコの再生用シェルスクリプトはradikoの録音・再生で作ったものを利用していています
※ラジコ再生用のシェルスクリプトは/share/radiko/radiko.shで保存されているものとして作ってあります
※radiko.shで録音した音声データは/share/mediaに保存されるものとして作ってあります

圧縮ファイルの内容:

html/
html/stylesheets/
html/stylesheets/iphone.css
html/stylesheets/images/
html/stylesheets/images/chevron_dg.png
html/stylesheets/images/chat_bubbles_purple_r.png
html/stylesheets/images/chat_bubbles_aqua_l.png
html/stylesheets/images/image-loading.gif
html/stylesheets/images/chat_bubbles_clear_l.png
html/stylesheets/images/kitbg.png
html/stylesheets/images/stripes.png
html/stylesheets/images/chat_bubbles_orange_r.png
html/stylesheets/images/chevron_w.png
html/stylesheets/images/camera-icon-draw.ai
html/stylesheets/images/chat_bubbles_orange_l.png
html/stylesheets/images/toolButton.png
html/stylesheets/images/chevron.png
html/stylesheets/images/greenButton.png
html/stylesheets/images/chat_bubbles_aqua_r.png
html/stylesheets/images/blackbg.png
html/stylesheets/images/chat_bubbles_graphite_l.png
html/stylesheets/images/chat_bubbles_pink_r.png
html/stylesheets/images/profile-user.png
html/stylesheets/images/blueButton.png
html/stylesheets/images/redButton.png
html/stylesheets/images/chat_bubbles_clear_r.png
html/stylesheets/images/chat_bubbles.psd
html/stylesheets/images/chat_bubbles_lemon_r.png
html/stylesheets/images/chat_bubbles_graphite_r.png
html/stylesheets/images/chat_bubbles_lime_l.png
html/stylesheets/images/backButton.png
html/stylesheets/images/grayButton.png
html/stylesheets/images/chat_bubbles_lemon_l.png
html/stylesheets/images/camera-roll.png
html/stylesheets/images/PSD/
html/stylesheets/images/PSD/chevrons.psd
html/stylesheets/images/PSD/iphone-favicon.psd
html/stylesheets/images/PSD/chat_bubbles.psd
html/stylesheets/images/chat_bubbles_lime_r.png
html/stylesheets/images/apple-touch-icon.png
html/stylesheets/images/chat_bubbles_purple_l.png
html/stylesheets/images/whiteButton.png
html/stylesheets/images/chat_bubbles_pink_l.png
html/stylesheets/images/bgHeader.png
html/stylesheets/images/chevron_b.png
html/stylesheets/images/bgMetal.png
html/stylesheets/images/bglight.png
html/stylesheets/images/actionButton.png
html/ctl/
html/ctl/sub/
html/ctl/sub/volume-zero.php
html/ctl/sub/music-list.php
html/ctl/sub/volume-down.php
html/ctl/sub/volume-up.php
html/ctl/sub/music-stop.php
html/ctl/sub/cmd-ps.php
html/ctl/sub/cmd-exec.php
html/ctl/sub/radiko-play.php
html/ctl/sub/music-play.php
html/ctl/cmd-list.php
html/ctl/media-ctl.php
html/ctl/index.php

※ctl 以下のファイルがリモコン用ソース
※stylesheets の内容は UIUIKit のもの

母艦側で圧縮ファイルをダウンロード

Odroid-U2 へコピー(母艦側で scp コマンド発行)。

scp ~/Download/html.tgz USER-NAME@10.0.0.xx:/home/USER-NAME/

htmlドキュメントのルートへ解凍してオーナーを変更(ここから ODROID-U2 側作業)。

cd /share
sudo tar zxvf ~/html.tgz
sudo chown -R http:http /share/html

iPhone や母艦側のブラウザからアクセスしてページが表示されればOK。

http://10.0.0.xx/ctl

トップ画面(ctl/index.php)

トップ画面
※Media Control で Media Control 画面へ
※Command Exec で Command 画面へ

Media Control 画面(ctl/media-ctl.php)

Media Control画面
※Volume 0 で消音(ctl/sub/volume-zero.php)amixer sset PCM 0%
※Stop で再生中の mplayer プロセスを停止(ctl/sub/music-stop.php)kill -3 $PID
※Volume ▲ でボリュームアップ(ctl/sub/volume-up.php)amixer sset PCM 5%+
※Volume ▼ でボリュームダウン(ctl/sub/volume-down.php)amixer sset PCM 5%-
※Music List で Music List 画面へ
※Radiko のリストでラジコを再生(ctl/sub/radiko-play.php)/share/radiko/radiko.sh -p
→xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxで導入した radiko.sh を再生モードで実行
※ラジコの再生を開始する時には、事前に再生中の mplayer プロセスを停止します

Media List 画面(ctl/sub/music-list.php)

/share/mediaのファイル一覧を表示する。(更新時刻の新しいもの順)
Media List画面
※タップで再生(ctl/sub/music-play.php)
※再生を開始する時には、事前に再生中の mplayer プロセスを停止する

Command 画面(ctl/cmd-list.php)おまけ

Command画面
※Disk Info [ df -h ](ctl/sub/cmd-exec.php)コマンドの実行結果を表示
※Memory Info [ free -m ](ctl/sub/cmd-exec.php)コマンドの実行結果を表示
※Process Info [ ps auxw ](ctl/sub/cmd-ps.php)コマンドの実行結果を表示

dfコマンド実行画面(ctl/sub/cmd-exec.php)

df実行画面

freeコマンド実行画面(ctl/sub/cmd-exec.php)

free実行画面

psコマンド実行画面(ctl/sub/cmd-ps.php)

ps実行画面
※ps auxw の結果から USER、PID、CPU、MEM、COMMANDのみをピックアップして表示

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。