littlewing

人間とコンピューターとメディアの接点をデザインするために考えたこと

gstreamerの覚書

  • インストール
$ sudo apt-get install gstreamer1.0-*
  • カメラのサポートするフォーマットを確認
$ v4l2-ctl --list-formats
$ v4l2-ctl --list-formats-ext
  • とりあえず画面に出す
$ gst-launch-1.0 v4l2src ! videoconvert ! ximagesink
  • USBカメラの映像を30秒間録画して保存
timeout 30 gst-launch-1.0 -v v4l2src \
! videorate \
! video/x-raw,framerate=30/1 \
! clockoverlay \
! omxh264enc \
! h264parse \
! mpegtsmux \
! filesink location=`date -I`.ts
  • HLS配信モジュールでファイルを出力します。
gst-launch-1.0 -v v4l2src \
    ! videorate \
    ! video/x-raw,framerate=30/1 \
    ! clockoverlay \
    ! omxh264enc \
    ! h264parse \
    ! mpegtsmux \
    ! hlssink max-files=8 target-duration=5 \
    location=/home/pi/stream/segment%05d.ts \
    playlist-location=/home/pi/stream/output.m3u8 \
    playlist-root=/stream/ 

5秒ぐらいでファイルを切り分け、8ファイルまで維持します。その他、m3u8ファイルの出力先、tsファイルの出力先、m3u8ファイル内でのtsファイルの位置、などを指定します。

  • Node-redでストリーミング配信

Node-redで以下のコードをインポートすると、ライブ配信ができます。Node-redをWEBサーバーにするわけです。

[{"id":"889e444d.7761b8","type":"template","z":"66783da5.9987c4","name":"show html","field":"payload","format":"handlebars","template":"<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\">\n  <title>HTTP Live Streaming Test</title>\n  <link href=\"//vjs.zencdn.net/5.0/video-js.min.css\" rel=\"stylesheet\">\n<script src=\"//vjs.zencdn.net/5.0/video.min.js\"></script>\n\n<script src=\"https://raw.githubusercontent.com/videojs/videojs-contrib-media-sources/master/src/videojs-media-sources.js\"></script>\n<script src=\"https://raw.githubusercontent.com/videojs/videojs-contrib-hls/master/src/videojs-hls.js\"></script>\n\n\n\n</head>\n<body>\n  <header>\n    <h1>HTTP Live Streaming Test</h1>\n  </header>\n  <div>\n    <video id=\"test\" class=\"video-js vjs-default-skin\" width=\"640\" height=\"360\"   controls data-setup='{}'>\n    <source type=\"application/x-mpegURL\" src=\"/stream/output.m3u8\"/>\n    </video>\n        \n\n  </div>\n</body>\n</html>\n","x":428,"y":44,"wires":[["9bf6e565.640918"]]}]

今のところ、Androidのみ対応(Nexus 9で確認)

参考サイト:

Theta Sやウェブカメラをラズパイ上のgstreamer+HLSでストリーミング配信してGearVRとかで再生 - はむ!の空想具現化したいブログ

続きは後日