7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ラズパイを映像展示用デバイスにした話

Last updated at Posted at 2019-12-01

はじめに

FESTA 2019に参加させて頂くことになったので、デモ映像を流す映像展示用デバイスを作りました。

やったこと

  • ラズパイ上にVue.js環境を構築
  • Vue.jsで動画再生サイトを作成(複数動画を順次再生
  • 作成したサイトをオフラインで実行できるように修正

参考サイト

できたもの

ラズパイ接続のモニタに映像が表示されました。会場の通信障害が怖いのでオフラインでも動作するようにしました。


ラズパイについて

  • Raspberry Pi 3 Model B+ です。OSはこちら
$ lsb_release -a
No LSB modules are available.
Distributor ID: Raspbian
Description:    Raspbian GNU/Linux 10 (buster)
Release:        10
Codename:       buster

では、ここから作り方を紹介します。

Nodejsをインストールしよう

npmのバージョンを最新版に更新します。

sudo npm install npm@latest -g

バージョン確認

$ npm -v
5.8.0

nodejs v12をインストールします。(※以前のバージョンがあると削除してからインストールしないとバージョンが上がらないそうです)

$ sudo apt update
$ sudo apt install curl
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt install nodejs -y
$ node -v

バージョンはこのようになりました。

$ node -v
v12.13.1

vue-cliをインストールしよう

vue-cliをインストールします。

$ sudo npm install -g @vue/cli

コマンド1つで終わりです。

プロジェクトを作成しよう

プロジェクトを作成します。vue create コマンド実行後に何か聞かれますが、今回はデフォルト設定 (何も入力せずEnter)で進めます。

$ vue create usoana

これでプロジェクト作成が完了しました。

起動してみよう

起動します。

$ cd usoana
$ npm run serve

このような画面になると起動成功です。

このようなウェブサイトが開けば成功です。

動画再生サイト作ろう

サイトが作れたので、動作再生のサイトを作ります。
作成したプロジェクト配下にpublicというフォルダがあるので、そのpublicフォルダは以下にindex.htmlを作成します。(中身は以下です)

~/data/usoana/public/index.html
<!DOCTYPE html>
<html>
<head>
    <title>ウソ穴-覗きたい!を叶えたい!#ウソ穴</title>
    <script src="https://unpkg.com/vue"></script>
</script>
</head>
<body>
<h1>usoana</h>
<div id="app">
    <video id="video1" v-bind:src="video" v-on:ended="onEnded" autoplay></video>
    <a href="javascript:vplay();">再生</a>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            items: [
                {"url": "xxx1.mp4"},
                {"url": "xxx2.mp4"},
                {"url": "xxx3.mp4"}
            ],
            next: 0,
            video: ""
        },
        created: function () {
            this.getItems();
        },
        methods: {
            onEnded: function () {
                this.getItems();
            },
            getItems: function () {
                var url = this.items[this.next].url;
                console.log('success:' + new Date());
                this.video = url;
                this.next++;
                if (this.items.length <= this.next) {
                    this.next = 0;
                }
            }
        }
    });
    function vplay() {
        var v = document.getElementById("video1");
        v.play();
    }
</script>
</body>
</html>

ブラウザで、http://<ラズパイIP>:8080/index.htmlを開き、動画が再生されれば成功です。インターネット上で公開されている動画のURLを指定しても再生できました。

オフライン対応しよう

作成した動画サイトをオフラインでも動作できるように修正します。展示会場では通信障害が発生しても動画は再生できる、という算段です。

vue.jsをダウンロードします。バージョンによってURLが変わると思いますので気を付けてください。(https://unpkg.com/vueをブラウザで開くと、最新バージョンのURLが取得できると思います)

# vue.jsダウンロード
wget https://unpkg.com/vue@2.6.10/dist/vue.js

ダウンロードしたvue.jsファイルをindex.htmlと同じ階層~/data/usoana/public/に格納しました。ダウンロードしたvue.jsファイルをロードするようにindex.htmlを修正します。

~/data/usoana/public/index.html
<!DOCTYPE html>
<html>
<head>
    <title>ウソ穴-覗きたい!を叶えたい!#ウソ穴</title>
    <!-- script src="https://unpkg.com/vue"></script -->
    <script src="vue.js"></script>
</head>
<body>
<h1>usoana</h>
<div id="app">
    <video id="video1" v-bind:src="video" v-on:ended="onEnded" autoplay></video>
    <a href="javascript:vplay();">再生</a>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            items: [
                {"url": "xxx1.mp4"},
                {"url": "xxx2.mp4"},
                {"url": "xxx3.mp4"}
            ],
            next: 0,
            video: ""
        },
        created: function () {
            this.getItems();
        },
        methods: {
            onEnded: function () {
                this.getItems();
            },
            getItems: function () {
                var url = this.items[this.next].url;
                console.log('success:' + new Date());
                this.video = url;
                this.next++;
                if (this.items.length <= this.next) {
                    this.next = 0;
                }
            }
        }
    });
    function vplay() {
        var v = document.getElementById("video1");
        v.play();
    }
</script>
</body>
</html>

これでオフライン用の修正は完了です。
ラズパイのネットワーク通信を無効化しても、ラズパイ接続のモニタにてサイトが動作すれば成功です。

ネットワーク経由では再生に失敗する

image.png

余談

ラズパイについて、Raspberry Pi 3 Model B+を使ったのですが、Raspberry Pi 3 Model B(プラスじゃない)を使う予定だったのを今気が付いた。基板を変更して作り直し。。手順をまとめておいてよかった。

7
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?