WebRTCを独自構築するためのWSSサーバーの構築

2020年10月10日

テクノロジー プログラミング

eyecatch 自分がやったことのない技術を見聞きすると、やりたくなるしやらずにはいられない、ユゲタです。 最近のトレンドは、WebRTC。 テレワークが世の中で増えてきて、パソコンでテレビ電話をする利用率がかなり高くなってきているし、それが当たり前な世の中になってきているんだが、 zoomやskypeを使っている時に、なんとなく機能が物足りないな〜と感じてしまったら、それはもう、自分で作ってみるしかないでしょう。 そして、世の中の環境としても、iPhoneのsafariブラウザでwebRTCの対応もできる状態になっている事を考えると、世の中の環境が、自分に対して、webRTCを作れと言っているようにも思えてきて、軽い腰が浮き上がってしまった。

WebRTCとは?

この記事を読んでいる人は、webエンジニアの人がほとんどだと思うけれど、もしかしたら書かれている単語がわからない人のために、ヒジョーに簡単に説明しておきますね。 WebRTCというのは、「Web Real-Time Communication」の略で、インターネットで簡単にビデオ電話できてしまうという、なんとも通信事業者泣かせで、一般の人の見方になれるいい技術なのです。 大手企業のN*Tさん、通信事業が50%ほどの売上で成り立っているようですが、時代変革は目の前ですよ。 参考:https://www.ntt.co.jp/ir/fin/segment.html そして、このwebRTCの最もイケている仕様は、インターネットwebブラウザでなんのプラグインも入れずにそのままテレビ電話ができてしまうという点がユーザーライクという事。 一般企業のユーザーサポートもホームページを見ていて、電話を書けるのではなく、そのまま電話やビデオチャットで繋がるというより人間味のあるユーサポができるホームページが作れるんですが、コレまだやっているwebサイトはなさそう。 あれ?色々な機能をつけたら事業化することができそうだぞ・・・

wssサーバー構築する話

話が脱線しましたが、今回は、便利なWebRTCを実現させるために、必要なシグナリングサーバーというのを構築しないと、インターネットで簡単なビデオチャット通心ができないので、そのサーバーを構築してみることにした。 シグナリングサーバーについてのうんちくは、色々なサイトでだらだらと語っているので、そっちをみてくれ。 今回のメインテーマは、シブリングサーバーアクセスには、WebSocket技術が必要で、これはnodejsのwsというモジュールをインストールすればさくっとできてしまうんだが、 そもそも、通常ブラウザでwebRTCを使うときは、アクセスするサーバーがhttpsでなければならないという成約があるので、s化させる必要がある。 そしてそれに対応するのが「wss」だ。 httpのs化で「https」と同じで、wsのs化で「wss」というところだろう。

wssプログラム掲載

このサーバー構築のやり方を書いているwebサイトはいくつかあったんだが、どれも実行したらエラーがでるものだらけ、 もしかしたら、昔は動いていて、今現在は不具合になっているのだろうか? バグっているソースコードをネットに上げて、してやったり面しているほど、迷惑なサイトはなくない? そんな事で、そうしたソースを自分なりに修正したのが以下のコード。 "use strict"; const port = 3001; const fs = require('fs'); const ws = require('ws'); const https = require('https'); const ssl = https.createServer({ cert : fs.readFileSync('/etc/letsencrypt/live/対象のドメイン/cert.pem'), ca : fs.readFileSync('/etc/letsencrypt/live/対象のドメイン/chain.pem'), key : fs.readFileSync('/etc/letsencrypt/live/対象のドメイン/privkey.pem') }, function(req, res){ console.log((new Date()) + ' Received request for ' + req.url); res.writeHead(404); res.end(); }); const srv = new ws.Server({server : ssl}); srv.on('connection', function(res,req) { console.log('-- websocket connected --'); res.on('message', function(message) { srv.clients.forEach(function each(client) { if (isSame(res, client)) { console.log('- skip sender -'); } else { client.send(message); } }); }); }); function isSame(ws1, ws2) { // -- compare object -- return (ws1 === ws2); } ssl.listen(port, function() { console.log('websocket server start. port=' + port); }); 簡単に解説しておくと、ポート番号は、3001を使っているが、好きに変えてもらって大丈夫。 エラーが発生していたポイントは、 const srv = new ws.Server({server : ssl}); の箇所。 他のサイトでは、 const srv = new ws.Server({sssl}); と書かれているのがほとんどで、エラーにつながっていた。 とりあえず、これで、"node signaling.js"とするだけで、サーバーがwss起動することができるので、 webRTCプログラムが書かれたwebサイトを作って底にアクセスした人のブラウザ同士がカメラとマイクで繋がることができるわけです。 そっちのプログラムも今はサンプルしかないので、出来上がったらブログで掲載したいと思うけど、このブログ書いていて、ビジネスアイデアが山のように浮かんできたので、自分の会社で立ち上げてみるとする。 気になる人が居たら、連絡ちょーだい!!

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。