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

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

ただいまの
回答率

87.58%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 715

score 32

お世話になります。

現在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で配信しています。
(文字数制限のため、全文載せられませんでした)

    ・
    ・
    ・

<script type="text/javascript">
 let localVideo = document.getElementById('local_video');
  let remoteVideo = document.getElementById('remote_video');
  let localStream = null;
  let peerConnection = null;
  let textForSendSdp = document.getElementById('text_for_send_sdp');
  let textToReceiveSdp = document.getElementById('text_for_receive_sdp');

  // --- prefix -----
  navigator.getUserMedia  = navigator.getUserMedia    || navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia || navigator.msGetUserMedia;
  RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
  RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window.mozRTCSessionDescription;

  // -------- websocket ----
  // please use node.js app
  //  
  // or you can use chrome app (only work with Chrome)
  //  https://chrome.google.com/webstore/detail/simple-message-server/bihajhgkmpfnmbmdnobjcdhagncbkmmp
  //
  let wsUrl = 'wss://<< サーバーのドメイン >>/8000';
//記事ではws://でアクセスしていますが、エラーになるためwss://でアクセスしています。
  let ws = new WebSocket(wsUrl);
  ws.onopen = function(evt) {
    console.log('ws open()');
  };

    ・
    ・
    ・

Nodeのコードについて

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

"use strict";

let WebSocketServer = require('ws').Server;
let port = 8080;
let wsServer = new WebSocketServer({ port: port });
console.log('websocket server start. port=' + port);

wsServer.on('connection', function(ws) {
  console.log('-- websocket connected --');
  ws.on('message', function(message) {
    wsServer.clients.forEach(function each(client) {
      if (isSame(ws, client)) {
        console.log('- skip sender -');
      }
      else {
        client.send(message);
      }
    });
  });
});

function isSame(ws1, ws2) {
  // -- compare object --
  return (ws1 === ws2);     
}

Apacheのコードについて

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

<VirtualHost *:8000>

  RewriteEngine On
  RewriteCond %{QUERY_STRING} transport=websocket    [NC]
  RewriteRule /(.*)           wss://localhost:8000/$1 [P,L]
    ProxyPass               /websocket ws://localhost:8080
    ProxyPassReverse        /websocket wss://localhost:8080
                ServerName scraping.indelight.jp

                ErrorLog ${APACHE_LOG_DIR}/scraping.error.log
                CustomLog ${APACHE_LOG_DIR}/scraping.access.log combined

                LogLevel warn
                SSLEngine on

                #SSLCertificateChainFile /etc/letsencrypt/live/<< ドメイン名 >>/chain.pe

                <FilesMatch "\.(cgi|html|php|py)$">
                         SSLOptions +StdEnvVars
                </FilesMatch>
                <Directory /usr/lib/cgi-bin>
                        SSLOptions +StdEnvVars
                </Directory>
                                        Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/<< ドメイン名 >>/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/<< ドメイン名 >>/privkey.pem

    <Proxy *>
        Require all granted
    </Proxy>
</VirtualHost>

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

LoadModule proxy_module modules/mod_proxy.so

LoadModule proxy_module libexec/apache2/mod_proxy.so
LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so

LoadModule ssl_module modules/mod_ssl.so
SSLProxyEngine On
SSLProxyCheckPeerCN off
SSLProxyCheckPeerName 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側でエラーもなく全体としてエラーが少ないものでした。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 87.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • Apacheに関する質問
  • VPSをシグナリングサーバにしてWebRTCを実現したい、シグナリングにはNodeJSを使用、WebSocketのエラー?