Help us understand the problem. What is going on with this article?

イベント用にSkyWayを利用したサイネージを作った

More than 1 year has passed since last update.

この記事は SkyWay Advent Calendar 2018 の18日目の記事です。

はじめに

作った動機

自分が絡んでいるイベントの会場に、少しでもホスピタリティを高められる何かを作れないかと思い、SkyWayを利用したサイネージを企画・開発しました。とはいえ、たいしたモノではないです。

これを導入したイベントについて

山口県で行われている、Web・DTP・デザインなどのセッションが一堂に会する年1回レベルのセミナーイベント CREATIVE HUNT(クリエイティブハント) で導入しました。会場は山口大学で、セッションは4ライン(4部屋同時進行)制。今年は約160名の皆様に参加いただけました。

実際にイベントでの使用した時の様子

配信側

_MG_0866.png
配信用のデバイスは、各教室の背面側の黒板に固定。今回はiPod touch(Wi-Fi接続)を4台使用しました。
音声も配信してしまうとサイネージがごちゃごちゃしてしまうので、配信は映像のみ。

この固定方法でアウトカメラを使うと、「どんな目的・アングルで何を撮っているのか」が解りにくくなってしまい、参加者さんに不安を与えてしまうため、映像はインカメラから取得。
副次的な効果として、設置するときのアングル決めが簡単でした。

安価に済ませたかったため、固定まわりは100均のソフトカードケースとマグネットクリップで自作。

「こん感じでカジュアルに配信してます!すごいシステムとか配線とか機器とか用意しなくてもできます!」感が参加者さんに伝わったとしたらラッキー。

受信側(サイネージ本体)

_MG_0955.png
実際にサイネージとして設置したモノがこちらです。
総合受付の背後に自立式100インチスクリーンを設置し、そこに4会場のライブ映像やお知らせを表示するページをプロジェクターで投影しました。(青色枠のカメラがななめになっている)
このライブ配信サービス自体に「HUNT A CLUE」という名前をつけました。 

技術的なこと

SkyWay…というか、まだWebすら初心者レベルから抜け出せてないので、要所を抜粋して。

配信側デバイス

まず、配信側デバイスをどうするか考えたとき、ネットワークは会場に設置したWi-Fiを利用すればいいやということで、iPod touchのみを使うことにしました。これにより、iPod touch(iOS Safari)のコトだけを考えれば良かったので、作るのがラクでした。

半固定peer idを付与

スクリーンショット 2018-12-18 22.40.35.png
iOSでアクセスするとこのような画面になり、配信担当の部屋(ステージ)を選択します。この操作によって、配信側に半固定peer idを付与しました。
半固定とは、「ランダムな接頭文字列+固定文字列」という意味です。

localStream取得
localStreamを取得する
var constraints = {
    audio: false,
    video: {facingMode: "user"}
};
constraints.video.width = {
    min: 640,
    max: 640
};
constraints.video.height = {
    min: 480,
    max: 480
};
constraints.video.frameRate = {
    min: 10,
    max: 24
};
constraints.video.sampleRate = {
    min: 10,
    max: 24
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
    $('#mycam').get(0).srcObject = stream;
    localStream = stream;
    if(existingCall){
        existingCall.replaceStream(stream);
    }
});

iPod touchはaudioに対応していないらしい(SkyWayサポート 参照)ので、
localStreamを取得する場合は、audio: false,とします。
もともと音声は配信しない予定だったので、ぴったり。

さらに、インカメラの映像を取得したいので、videofacingMode"user"に。

フレームレートとかサイズは適当です。
ですが、全くの自由というわけでもなく、取得映像のサイズは、
1280×768か上記設定(640×480)くらいしか有効にならなかったです。

受信側

受信モード

スクリーンショット 2018-12-18 22.54.25.png
iOSデバイス以外でアクセスするとこのような画面になり、そもそも配信ができない(localStreamを取得しない)ような仕組みにしました。

ちなみに、投影先スクリーンの比率が16:9で、それにぴったり映したかったので、プロジェクタ投影比率を取得して16:9じゃなかった場合にこのように警告がでるようにしました。

受信特化のjoinRoom
受信側のjoinRoom
const call = cpeer.joinRoom(roomkey, {
    mode: 'mesh',
    videoReceiveEnabled: true
});

Roomにjoinするとき、メッシュ接続のみ使用可能な、映像を受信のみで使う場合のフラグを立ててます。
localStreamは持ち込んでません。受信のみ。

SafariはRoom APIがMeshRoomにしか対応していないので、MeshRoomで。

受け取った映像は決め打ちで配置

配信側デバイスからcall.on 'stream'された時、半固定peer idの固定文字列部分で判別し、受信した映像をしかるべき位置に配置されるようにしました。そうすることで色々悩まなくて済みました。配信側デバイス機器が不調になった場合、別のデバイスから配信を始めると、動画(配信映像)がオーバーライドされるし。

作ってみた感想

実際に参加者様のホスピタリティが向上したかどうかは別として、
SkyWayをちょっと勉強するだけで、Web初心者でもここまで作ることができたことに感動しました。

「SkyWay(WebRTC)での映像配信」といえば、どうしても「遠隔同士の利用」と考えがちですが、映像ケーブルが要らない簡易的な会場用生撮影(録画しない撮影=配信)システムとして使えちゃうなと思いました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした