Q&A
node.js勉強中です。
https://qiita.com/kotazuck/items/7ad1672c71aa38d6af6d
にて勉強させていただきながら提示のシステム一式をGithubよりお借りしました。
https://github.com/kotazuck/webrtc-test
ひとまずこれを同一LAN内の２台のPCで試そうとしているのですがうまくいきません。
まず単体のPC内では配信側・受信側ともうまくいきます。ただデベロッパツールにて受信側が
A cookie associated with a cross-site resource at http://localhost/ was set without the SameSite attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
と怒られますので本当はlocalhostという記述じゃいけないよ的なことを言われているのかなと推測しています。
本題です。
親PCでnodeのserver.js起動後、ほかPCよりhttp://親ipアドレス:ポート でアクセスするのですが、この時点でioSocketにコネクトできていないようなのです。watch.jsにて
const socket = require('socket.io-client')('http://localhost:55555')
を
const socket = require('socket.io-client')('http://親ipアドレス:55555')
かなとも思ったのですが変化はありません。
続けて「見る側」のページ遷移しても当然ながら画面が送られてはきません。
Failed to load resource: net::ERR_CONNECTION_REFUSED
polling-xhr.js:265 GET http://localhost:55555/socket.io/?EIO=3&transport=polling&t=NHdOFIW net::ERR_CONNECTION_REFUSED
とデベロッパーツール。
基本を飛ばして勉強しているようでそれの解を求めるのは気が引けますが、どの部分を修正すればよいか教えてください。
よろしくお願いします。
【追記】
miyabi-sun様、質問と違うところまで詳しくありがとうございます。興味がありますのでさらに調べてみようと思います。
本題のほうですが、見落としがありました。
なおご指摘の通り、親（配信側）も子（受信側）も受信・送信ともにポートを開放しましたが変化なしでした。というより、最初に以下のようなエラーが吐かれていたことに気が付きました。トップにアクセスした段階でデベロッパツールより
Uncaught (in promise) TypeError: Cannot read property 'getDisplayMedia' of undefined
at eval (live.js:16)
at eval (live.js:66)
at Object../src/js/live.js (live.js:660)
at webpack_require (live.js:20)
at live.js:84
at live.js:87
GET http://localhost:55555/socket.io/?EIO=3&transport=polling&t=NHi3rgz net::ERR_CONNECTION_REFUSED
以下一定時間ごとにGET以下が繰り返し
getDisplayMediaが読めていないことはわかりますが、同一PC内では起こりません。
解決法をご教示いただけますと幸いです。
回答1件
0
親PCでnodeのserver.js起動後、ほかPCよりhttp://親ipアドレス:ポート でアクセスするのですが、この時点でioSocketにコネクトできていないようなのです。
これはOSにデフォルトで引っ付いているファイアーウォール(ソフトウェア)のせいだと思うよ
本当はlocalhostという記述じゃいけないよ的なことを言われているのかなと推測しています。
ぜんぜん違うよ！
エラー文をDeepLの翻訳機にまるっと投げ込むとこんな感じの結果になるよ
http://localhost/ のクロスサイト リソースに関連付けられたクッキーが SameSite 属性なしで設定されていました。現在、Chrome は SameSite=None と Secure を設定した場合にのみクロスサイト リクエストのクッキーを配信するようになったため、このクッキーはブロックされています。開発者ツールの「アプリケーション」>「ストレージ」>「クッキー」でクッキーを確認でき、詳細は https://www.chromestatus.com/feature/5088147346030592 および https://www.chromestatus.com/feature/5633521622188032 を参照してください。
これはクッキーのセキュリティに関する話だから、
多分今回の質問とは無関係だよ。
クッキーはサービスへのログインに使うのが主な用途。
WebサーバーってのはHTTPリクエストを待ち受けてHTMLファイルを返すのが主な仕事。
勿論画像ファイル、CSS、JSファイルもリクエストに応じて投げ返すものなんだけどね。
そして1リクエスト1レスポンス完結なんだ。
じゃあ会員制サイトを開設したいってなったらログイン認証画面で1枚ペラのHTML返して後はしらね。
画面遷移したらまたログイン認証画面が必要になるやん……そんなサービス超不便だよね。
そこでブラウザに文字列を保存させる「クッキー」という機能を利用するんだよ。
認証画面で入力させたIDとパスワードで認証して、認証OKになると、
ブラウザに一時的に生成した文字列(トークン)をクッキーとして持たせて保管する。
Webサーバはブラウザがトークンを所持している限り、ログイン中のユーザーとして扱うよう挙動を変更させる。
こんな風にして会員制のサービスは動作しているよ。
でも、あなたがクレジットカードや銀行のWebサイトを利用して
払い出されたクッキーを悪意のエンジニアに盗まれて架空請求等に使われると困るよね？
だからクッキーは便利な反面、悪用されると困るからセキュリティ的な面でシビアにできているんだ。
SameSite=Noneはその辺のセキュリティ的な話で怒ってるってわけ。
興味が出てきたら調べてみてね。
TypeError: Cannot read property 'getDisplayMedia' of undefined
これはJavaScript系あるある。
JavaScriptはオブジェクト指向プログラミング言語です。
基本的にどの値はオブジェクトとして扱えるので
A.Bという風にドットを使ってプロパティにアクセス出来ます。
しかし、JavaScriptはプロパティの所有が許されていない値が存在し、
それに対するプロパティへのアクセスを試みただけでエラーで落ちてしまいます。
null値undefined値
ではもう一度エラー文を読んでみると、
undefinedに対してgetDisplayMediaプロパティを閲覧した事が原因と記述されているのがわかります。
問題はgetDisplayMediaプロパティではなく、
何故undefinedになってしまうのか？に着目するようにしましょう。
デバッグをしてみましょう。
JavaScriptやNode.jsにはconsole.logというメソッドがあり、
これは複数の引数に対応しています。
それを利用していろんな箇所にデバッグプリントを仕込んでみましょう。
js
1console.log(1, "start."); 2 3const name = "taro"; 4 5console.log(2, name); 6 7(undefined).name; // ここでundefinedに対してのプロパティアクセスを行いエラーを出す 8 9console.log(3, "finish.");
この場合2までは実行されるのがわかります。
こんな風にデバッグプリントを仕込む事で
「ここまでは動く」とか「この値が変でそれ以降の動作がおかしくなってしまう」と理解できるようになります。
まずは頑張ってエラーが出る前後の値を洗い出してみましょう。
投稿2020/09/07 08:39
編集2020/09/08 05:26
総合スコア21158
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/08 04:59
2020/09/08 06:22
2020/09/08 06:53 編集
2020/09/08 07:03