One IT Thing

IT業界で飯を食う為の学習系雑記

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
-,

執筆者:

関連記事

Android+ChromeでlocalhostアクセスしてPCサーバへPort Forward(Fwdアプリ使用)

昨今はプライバシーの侵害防止、セキュリティ観点から、HTTPS環境下でないと使えないHTML5 APIが増えました。 反してAndroid7でオレオレ証明書に関する仕様が変わり、Android6だった …

Linux、Mac、Windows間のネットワーク速度をiperf3で調べる

なんかネットワークが遅いから調べたい。あのLANケーブルひょっとして100Mbps用じゃない?1Gbpsじゃないかも。試験的にネットワーク帯域を絞ったから通信速度を確認したい。 こういった時、通信する …

JavaとPerlでUDPソケット通信

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

SSHトンネルを使ってリモートデータベースをBI

クラウド上のDBを分析する為、ローカルPCにSSHトンネル(ポートフォワード)環境を作ります。 リモートDBポートにクラウド外からセキュアに接続できれば、クラウドにBIツールを入れる手間が省けます。 …

Angular、React、VueのDL数をnpmtrends.comで調べる

目次1 対象読者2 3つの内どれを選ぶべきか3 npmtrends.comについて4 比較結果5 それぞれの長所6 で、どれを採用するべきか 対象読者 これからフロントエンドの勉強をしようと考えている …

 

shingo.nakanishi
 

東京在勤、職歴20年越え中年ITエンジニアです。まだ開発現場で頑張っています。

19歳(1996年)から書き始めた個人日記が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけどフリーランスで孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。