Linux PCのデスクトップ画面をブラウザから監視する - コアダンプの数だけ強くなれるよ

やりたいこと

こんな感じでブラウザから外部のPC(Linux)のモニターに表示している内容をできる限りリアルタイムで表示したい。

f:id:segmentation-fault:20200226211949p:plain

HLS(HTTP Live Streaming)

HLS(HTTP Live Streaming)を使えば、多少遅延はあるがほぼリアルタイムの映像をみることができるようです。Youtubeとかで良くあるLive配信的なやつですね。

具体的には、ffmpegを使ってLinux PCのモニターの表示内容(X11)を録画 + HLS用ファイルとして出力 + Nginx等のWebサーバを立てて、HLS用ファイルにアクセス可能にします。

ただ、HLSはAppleが開発した仕組みであり、現時点で標準サポートしているブラウザSafariだけっぽいです。

が、世の中には優秀な素晴らしい方々がおり、Video.jsを使えば他のブラウザでもLive Stremingの動画再生が可能になります(感謝)。

実施例

ここでは、Virtual-BOXにCentOS7(GUIモード) + WEBサーバ + HLSファイルの出力処理を構築 –> ホスト側のブラウザからCentOSのWEBサーバにアクセスし、CentOSのGUI画面を表示してみます。

事前準備

まずは必要なパッケージを取得します。

nginxのインストール

$ sudo vim /etc/yum.repos.conf.d/nginx.repo
$ cat /etc/yum.repos.conf.d/nginx.repo
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1
$ sudo yum -y install nginx

$ sudo vim /etc/yum.repos.conf.d/nginx.repo

$ cat /etc/yum.repos.conf.d/nginx.repo

name=nginx repo

baseurl=http://nginx.org/packages/centos/7/$basearch/

gpgcheck=0

enabled=1

$ sudo yum -y install nginx

ffmpegのインストール

$ sudo yum -y install epel-release http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm
$ sudo yum -y install ffmpeg

1 2	$ sudo yum -y install epel-release http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm $ sudo yum -y install ffmpeg

WEBサーバの設定

今回の例ではhttp://＜IPアドレス＞/hlsにアクセスした際に動画が見えるようにします。

必要なDirectoryを掘ります。

$ sudo mkdir /var/www/html/hls
$ sudo mkdir /var/www/html/hls/static/js
$ sudo mkdir /var/www/html/hls/static/css

$ sudo mkdir /var/www/html/hls

$ sudo mkdir /var/www/html/hls/static/js

$ sudo mkdir /var/www/html/hls/static/css

VideoJsを配置します。

$ cd /var/www/html/hls
$ tree
└── static
├── css
│   └── video-js.min.css
└── js
├── video.min.js
├── videojs-contrib-hls.min.js
└── videojs-contrib-media-sources.min.js

$ cd /var/www/html/hls

$ tree

└── static

├── css

│ └── video-js.min.css

└── js

├── video.min.js

├── videojs-contrib-hls.min.js

└── videojs-contrib-media-sources.min.js

index.htmlを作成します。

$ sudo vim /var/www/html/hls/index.html
$ cat /var/www/html/hls/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Video.jsのお試し</title>
  <link href="http://192.168.56.103/hls/static/css/video-js.min.css" rel="stylesheet">
  <script src="./static/js/video.min.js"></script>
  <script src="./static/js/videojs-contrib-media-sources.min.js"></script>
  <script src="./static/js/videojs-contrib-hls.min.js"></script> 
</head>
<body>
<h2>ffmpeg + HLSでデクストップ画面をモニタリング</h2>
<video id="test" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
 width="640" height="360" data-setup="{}">
  <source src="./output.m3u8" type="application/x-mpegURL">
</video>
</body>
</html>

$ sudo vim /var/www/html/hls/index.html

$ cat /var/www/html/hls/index.html

<!DOCTYPE html>

<head>

<title>Video.jsのお試し</title>

</head>

<body>

<h2>ffmpeg + HLSでデクストップ画面をモニタリング</h2>

<video id="test" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"

width="640" height="360" data-setup="{}">

</video>

</body>

</html>

nginxのconfigを編集します。

$ sudo vim /etc/nginx/conf/default.conf
$ cat /etc/nginx/conf/default.conf
...(途中略)...
location / {
root   /var/www/html;
index index.html;
}
...(途中略)...

$ sudo vim /etc/nginx/conf/default.conf

$ cat /etc/nginx/conf/default.conf

...(途中略)...

location / {

root /var/www/html;

index index.html;

}

...(途中略)...

ポート80番号を開放します。

$ sudo firewall-cmd --add-service=http --zone=public --permanent
$ sudo firewall-cmd --reload

1 2	$ sudo firewall-cmd --add-service=http --zone=public --permanent $ sudo firewall-cmd --reload

nginxを起動します。

$ sudo systemctl start nginx

1	$ sudo systemctl start nginx

HLS開始

下記のコマンドでCentOSのGUI画面を録画しHLS形式のファイルで出力します。

$ cd /var/www/html/hls
$ sudo ffmpeg -f x11grab -r 60 -s 800x600 -i :0.0+0,0 -vcodec h264 -b:v 250K -pix_fmt yuv420p -segment_format mpegts  -hls_time 5 -hls_list_size 5 -hls_flags delete_segments output.m3u8

1 2	$ cd /var/www/html/hls $ sudo ffmpeg -f x11grab -r 60 -s 800x600 -i :0.0+0,0 -vcodec h264 -b:v 250K -pix_fmt yuv420p -segment_format mpegts -hls_time 5 -hls_list_size 5 -hls_flags delete_segments output.m3u8