html5 network

hidden.inとSoftEtherで無料のビデオ会議環境を構築する

投稿日:

自粛が続いて会えない人も多くなり、人との交流が恋しくなりますね。

仕事ではミーティングをオンライン化するニーズが増え、以下メジャーなパブリックサービスを使っている人も増えていると思います。

  • Skype
  • Google Hangouts Meet(旧Google Hangout)
  • Whereby(旧Appear.in)

ただアカウント作成時に制約があったり、無料の枠を超えてしまうリスクや、Zoomのようにセキュリティ問題で使えなくなる可能性も考慮しておかなければいけません。

技術者の端くれとしてはOSSを使って自由にビデオチャット出来る環境をオンプレで作っておきたい、と調べているとメジャー処は結構難点もあるな、と気が付きました。

  • Jitsi(Ubuntu、Debianでしか動かない)
  • BigBlueButton(同上)
  • Apache Openmeeting(DB使ったり構築が面倒)

プラットフォームを選ばず、インストール、構築も簡単なビデオチャットサーバが欲しい、そう思って探していたら・・・有りました。「hidden.in」作者さんは日本人の方です。

Node.jsで動き、STUN/TURNが無いけどその分シンプルに起動出来るWebRTCプログラム。ニーズにピッタリです。

開発、公開してくれた作者さん、さては神ですね。

構築環境

Qiitaにも書いてあるようにSTUN/TURNは実装してないとのことなのでSoftEtherを使って宅内Windows10とAndroidを同一ネットワークセグメントに置きます。

AndroidのAさんとWindows10のBさんでビデオチャットする想定で。

両端末ともLAN内で疎通させるならSoftEtherは不要です。外出先などLAN外からビデオチャットする際はインストールしておきます。

hidden.inはJavascript製でExpressを使用するのでNode.js必須。今回はWindows10上のNode.jsで起動しましたがプラットフォームは不問です。以下使用したバージョン。

> node --version
v10.16.1

> npm --version
6.9.0

Node.jsが入っていない場合はnvmなりで入れておきます。

hidden.inを起動する

githubからソースを頂いてきます。感謝。

https://github.com/ukiuni/hidden.in

> git clone https://github.com/ukiuni/hidden.in
Cloning into 'hidden.in'...
remote: Enumerating objects: 115, done.
remote: Total 115 (delta 0), reused 0 (delta 0), pack-reused 115Receiving objects:  47% (55/115), 388.01 KiB | 740.00 KiB/s
Receiving objects: 100% (115/115), 404.92 KiB | 740.00 KiB/s, done.
Resolving deltas: 100% (49/49), done.

hidden.inディレクトリに入ってnpm installで依存JSモジュールをインストール。

> cd hidden.in

> npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ws@7.2.3 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.2.3 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN hiddenin@1.0.0 No repository field.

added 102 packages from 69 contributors and audited 209 packages in 36.702s
found 0 vulnerabilities

npm startで起動!と行きたいところですが、ChromeのAPI仕様変更でURL.createObjectURL()が廃止になり、ブラウザで接続しても以下のエラーが発生して映像が流れてきません。

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
    at prepareStream (index.js:194)
    at index.js:215

static/js/index.jsの199行目と220行目のコードを変更させて貰います。

    // remoteVideo.src = URL.createObjectURL(event.stream);
    remoteVideo.srcObject = event.stream;

    // localVideo.src = URL.createObjectURL(stream);
    localVideo.srcObject = stream;

改めてnpm startで起動。Expressが起動して3000ポートが開きます。

> npm start

> hiddenin@1.0.0 start C:\src\node\hidden.in
> node index.js

mode https
listening on *:3000

動作確認してみる

PC版Chromeでhttps://192.168.0.5:3000にアクセス。ルーム作成画面が表示されます。(アニメーションがめちゃかっこいい)

AndroidのVPN機能で宅内SoftEtherに繋ぎ、ローカルIPを貰ってからChromeでアクセス。

「test」ルームを作って両端末でルームに入りました。

いざビデオチャット開始

(羞恥心溢れる中年なのでぼかしを入れています)

PC版Chrome(Bさん利用想定)

  • 左側:PCのWebカメラからのBさん自身映像
  • 右側:AndroidのインカメラからのAさん映像

Android版Chrome(Aさん利用想定)

上側:AndroidのインカメラからのAさん自身映像
下側:PCのWebカメラからのBさん映像

イイ感じに動作してくれることを確認できました。

使用感

いやー、映像、音声とも大変良好です。

Webカメラとスマホが近いとハウリングするのでちょっと注意ですが、こんな孤独な使用方法は想定していないので問題無しですね。

まとめ

git cloneしてNode.jsで起動するだけで簡単にビデオチャット出来てしまいました。VPNがあれば遠隔地同士でも問題は無さそうです。

またプログラムはシンプルかつ綺麗に書かれていてWebRTCの入門サンプルプログラムとしても最適なものになっています。

パブリックなサービスにお金を支払わなくても、中小規模の会社さんならこの構成でビデオ会議環境を自作出来ちゃうんじゃないでしょうか。

流行りのオンライン呑みをこれでやってマシンリソースが何人まで持つか、とかやってみるのも面白いかも知れませんね。

作者のukiuniさんに感謝。

-html5, network
-,

執筆者:

関連記事

JavaとPerlでUDPソケット通信

目次1 はじめに2 対象読者3 実装3.1 UDPサーバ(Perl)3.2 UDPクライアント(Java)3.3 実行4 まとめ はじめに 本棚を整理していたらラクダ本が出てきました。うわー懐かしい、 …

Chrome75に実装された「Web Share API Level 2」を使ってみた

(2019/06現在、個人的な感想としては実戦投入はまだ早い印象でした) Webアプリにシェア機能を付けたい時があります。OSネイティブAPIを呼べないWebアプリではsharer.jsやremote …

宅内CentOS8にSoftEtherをインストールしてインターネット外部からLAN参加出来るVPN環境を無料で作る

2020/04現在、COVID-19の影響を受けて自宅から会社のVPNに繋いでリモートワークに移行している方も増えてきたんじゃないでしょうか。(残念ながら私はまだ出社必須ですが(-_-; そもそも、も …

IndexedDBにblob保存されたPDFファイルを外部アプリに頼らずにJavascriptで表示(前編)

目次1 はじめに2 検証環境3 Ionicプロジェクト作成4 PDFダウンロード、IndexedDB保存を実装5 実行してみる はじめに PDFをHTTPダウンロードするとHDDに保存されるか、外部ビ …

ionic3(SPA)のServiceWorkerライブラリをsw-toolboxからWorkboxに切り替える

昨今は閲覧速度向上やオフラインでも使える利便性が求められ、Webアプリ開発とPWAはセットで考えられるようになってきましたね。 PWAは「ServiceWorker API」を使ってキャッシュする資源 …

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯技術者として楽しく生きることを目指しています。デスマに負けず健康第一。