質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

VPS

VPS(バーチャル・プライベート・サーバ)は、仮想化されたサーバをレンタルするサービスで、共有サーバでありながら専門サーバと同等の機能を果たします。物理的な専門サーバより安価で提供できるメリットがあります。

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

Q&A

0回答

2307閲覧

VPSをシグナリングサーバにしてWebRTCを実現したい、シグナリングにはNodeJSを使用、WebSocketのエラー?

Y.NINOMIYA

総合スコア32

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

VPS

VPS(バーチャル・プライベート・サーバ)は、仮想化されたサーバをレンタルするサービスで、共有サーバでありながら専門サーバと同等の機能を果たします。物理的な専門サーバより安価で提供できるメリットがあります。

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

0グッド

0クリップ

投稿2020/10/08 14:02

編集2020/10/12 02:39

お世話になります。

現在VPS環境にてWebRTCを実現しようとしているのですが、苦戦してしまっています。

大きな流れとしては、
ApacheでHTML配信

HTMLからWSSでサーバ(Apache)に接続

ApacheからNodeにプロキシを通す

構築には以下の記事を参考にしました。
シグナリングサーバーを動かそう ーWebRTC入門2016

コードに関しては以下のGitHubを参考にしました。(上の記事の人にものです)
mganeko/webrtcexpjp - GitHub

該当の記事はHTTPとWebSocket(セキュアではない)を使用しているので、VPS環境ではカメラを使用する際などにエラーになってしまいます。
改修したコードを以下に貼り付けます。

HTML・JavaScript(フロント)のコードについて

HTMLはほぼ記事のままです。
wsの接続先をws://localhost:3001/からwss://<< サーバーのドメイン >>:8000へ変更しただけです。

HTMLはNodeではなく、Apacheで配信しています。
(文字数制限のため、全文載せられませんでした)

HTML

1    ・ 2    ・ 3    ・ 4 5<script type="text/javascript"> 6 let localVideo = document.getElementById('local_video'); 7 let remoteVideo = document.getElementById('remote_video'); 8 let localStream = null; 9 let peerConnection = null; 10 let textForSendSdp = document.getElementById('text_for_send_sdp'); 11 let textToReceiveSdp = document.getElementById('text_for_receive_sdp'); 12 13 // --- prefix ----- 14 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || 15 navigator.mozGetUserMedia || navigator.msGetUserMedia; 16 RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection; 17 RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window.mozRTCSessionDescription; 18 19 // -------- websocket ---- 20 // please use node.js app 21 // 22 // or you can use chrome app (only work with Chrome) 23 // https://chrome.google.com/webstore/detail/simple-message-server/bihajhgkmpfnmbmdnobjcdhagncbkmmp 24 // 25 let wsUrl = 'wss://<< サーバーのドメイン >>/8000'; 26//記事ではws://でアクセスしていますが、エラーになるためwss://でアクセスしています。 27 let ws = new WebSocket(wsUrl); 28 ws.onopen = function(evt) { 29 console.log('ws open()'); 30 }; 31 32    ・ 33    ・ 34    ・

Nodeのコードについて

Nodeで動かすJavaScript本体です。
swcript.jsという名前にしました。
記事との違いはポート番号のみです。
node scriptで実行してもエラーはでません。
Nodeでサーバー起動中にwscat -c ws://localhost:8080をSSHで実行すると、エラー無く接続されます。

JavaScript

1"use strict"; 2 3let WebSocketServer = require('ws').Server; 4let port = 8080; 5let wsServer = new WebSocketServer({ port: port }); 6console.log('websocket server start. port=' + port); 7 8wsServer.on('connection', function(ws) { 9 console.log('-- websocket connected --'); 10 ws.on('message', function(message) { 11 wsServer.clients.forEach(function each(client) { 12 if (isSame(ws, client)) { 13 console.log('- skip sender -'); 14 } 15 else { 16 client.send(message); 17 } 18 }); 19 }); 20}); 21 22function isSame(ws1, ws2) { 23 // -- compare object -- 24 return (ws1 === ws2); 25}

Apacheのコードについて

8000番ポートで受けとって、localhostの8080番にプロキシで通してあります。
8000番も8080番もポートは開放しています。
以下はsites-availableのssl.virtualhost.confです。

conf

1<VirtualHost *:8000> 2 3 RewriteEngine On 4 RewriteCond %{QUERY_STRING} transport=websocket [NC] 5 RewriteRule /(.*) wss://localhost:8000/$1 [P,L] 6 ProxyPass /websocket ws://localhost:8080 7 ProxyPassReverse /websocket wss://localhost:8080 8 ServerName scraping.indelight.jp 9 10 ErrorLog ${APACHE_LOG_DIR}/scraping.error.log 11 CustomLog ${APACHE_LOG_DIR}/scraping.access.log combined 12 13 LogLevel warn 14 SSLEngine on 15 16 #SSLCertificateChainFile /etc/letsencrypt/live/<< ドメイン名 >>/chain.pe 17 18 <FilesMatch ".(cgi|html|php|py)$"> 19 SSLOptions +StdEnvVars 20 </FilesMatch> 21 <Directory /usr/lib/cgi-bin> 22 SSLOptions +StdEnvVars 23 </Directory> 24 Include /etc/letsencrypt/options-ssl-apache.conf 25SSLCertificateFile /etc/letsencrypt/live/<< ドメイン名 >>/fullchain.pem 26SSLCertificateKeyFile /etc/letsencrypt/live/<< ドメイン名 >>/privkey.pem 27 28 <Proxy *> 29 Require all granted 30 </Proxy> 31</VirtualHost> 32

以下はapache2.confの最後の方の設定です。

conf

1LoadModule proxy_module modules/mod_proxy.so 2 3LoadModule proxy_module libexec/apache2/mod_proxy.so 4LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so 5 6LoadModule ssl_module modules/mod_ssl.so 7SSLProxyEngine On 8SSLProxyCheckPeerCN off 9SSLProxyCheckPeerName off

エラー

WebSocket connection to 'wss://<< ドメイン名 >>/8000' failed: Error during WebSocket handshake: Unexpected response code: 404
配信されたHTMLのconsoleからの抜粋です。
どうやらwssの接続に失敗しているようです。

環境

OS : Ubuntu 18.04.4 LTS
Apache : Apache/2.4.29 (Ubuntu)
VPS : ConoHa


他にも様々な記事などを参考に構築を試みましたが、この例がNode側でエラーもなく全体としてエラーが少ないものでした。

足りない情報は追記いたします。
どなたか回答よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問