HTML5 Archives - The Open Web

WebRTCと描画のヘルプ

お勧め環境

開発環境：Windows 8・10 + Chrome
注意：必ず最新のブラウザを使うことです。
対応ブラウザ：通常ChromeのほかにFirefoxにも対応しています。FirefoxはChromeと互換性がよいですが、小さな違いで問題が発生するとか性能が減ることはあります。
IE: Internet Explorerはできるだけ避けるべきです。
他のブラウザ：Edgeは互換性がIEよりよいですが、できれば、ChromeかFirefoxが望ましいです。特にWebRTCではなくORTCを使っていることに要注意。
OS：通常はほかのOSを使っても問題ありませんが、ハードに関連するバグがまれに発生します。

プラグインと拡張

Internet Explorer(IE):

WebRTCに対応していませんが、WebRTCをIEで使えるためのプラグインはあります：
Temasys

Chromeで画面共有：

このドキュメントを書いた時点でChromeは画面のデータ取得を拡張なしで出来ません。
独自で拡張開発するか、以下の拡張を使って画面のStreamを取得する方法があります。

httpでhttps必須関数の使い方

秘密データがばれる可能性のある関数は段々暗号化が必須になってきています。
使うための一番いい対策はもちろんウェブサイトをhttps対応にすることです。

詳細は以下：

しかし、まだ対応していない場合は以下の対策があります：

古いブラウザを使う

脆弱性と不便さのため、この手段は普段おすすめできません。使う場合は限られた安全の環境（ローカル、特定サイト）で使うべきです。
情報は以下に書いてありますが、昔と比べて問題が増えて、難しいところが色々あります。

アプリ履歴ページから関数の制御が入った前のインストールファイルを見つける必要があります。

Chromeはバージョン47から、Chromiumはバージョン46からgetUserMediaのhttpsのみ対応が入っています。
Chromiumインストール版より携帯（portable）のほうが無難（自動更新がない）。
Chromium(Portable)の場合は以下のリンクのバージョン45。
Chromium(インストール)の場合はCommit numberでまとまっているが、それからバージョン情報が見つけにくい。重要バージョンは45以下(Commit number < 31****)です。

上記のFirefoxのhttps対応は2015年04月に投稿されたため、その前に公開された35.0が無難と思いますが、Firefoxは2017/08/09の時点でまだhttpでgetUserMedia
が使えます。
古いブラウザにはwebRTCとgetUserMediaのバグと仕様変更が色々あって、ソースによって動かない可能性があります。

インストールファイル

ソース

フラグで許可

Chromium: –allow-running-insecure-content
以下のフラグも似ている関数で使えます。使い方は以下のコマンドライン情報をご覧ください：
–unsafely-treat-insecure-origin-as-secure
–use-fake-device-for-media-stream
–use-fake-ui-for-media-stream

Chromium:
https://peter.sh/experiments/chromium-command-line-switches/
Firefox:
https://developer.mozilla.org/en-US/docs/Mozilla/Command_Line_Options?redirectlocale=en-US&redirectslug=Command_Line_Options
about:config

設定で例外許可

現在（2017/08/09）のところでChromeはフラグで対応、FirefoxはgetUserMediaの場合まだ問題ないようですが、将来変わる可能性があります。

異なるブラウザを使う

Firefoxは現在（2017/08/09）の時点で使えます。
長い間Chromeはhttpsのみの関数はFirefoxでhttpも可能です。
これは将来変わる可能性があります。

他

Firefoxで「Secure Connection Failed」問題は以下の対策があります：
about:config
security.tls.insecure_fallback_hosts = 「www.domain.com」
https://superuser.com/questions/826232/how-to-bypass-the-secure-connection-failed-warning-in-firefox-33

マイク・カメラの許可

機密情報がばれる可能性があるため、「許可必須の関数」をご覧ください。
機器の中の音声・映像のアクセスをそれぞれ許可する仕組みです。音声・映像を同時に別・同じの機器から取得するのが両方可能です。
環境によって関数の設定と許可された機器の状況が一致しないとエラーが発生します。問題が発生する際、必ずに設定と許可状況を両方確認することです。
ブラウザによって（Chromeで確認したことあります）、既定機器が入っています。これは取得としてあんまり役に立ちませんが、機器を持っていないが、許可だけはしたい場合、エラーを状況によって防げます。
ソフトの影響（音声管理ソフト）でも許可可能の選択しが変わる場合があります。

WebRTCの問題

a) 接続できないネットワークが接続されていることを確認。
相手が接続されていることを確認。
マイク・ウェブカメラが正しく差し込まれていてURLバーの隣で許可されていることを確認。
「WebRTCのポート」で明記されているポートを許可。
ルータのSIP ALGを無効にする

マイク・カメラの問題

複数機能ある機器の音声取得失敗ブラウザによって（よくFirefoxで発生しました）、機器の音声を取得できない。例えば、ウェブカメラに映像・音声の両方の機能が入っているが、音声取得ができない。この場合、ソースコードによって完全に動かなくなる可能性があります。別々の機器を使うことで解消できます。
対応していないブラウザgetUserMedia対応のブラウザを使っているかを確認してください：http://caniuse.com/#search=getusermedia
ブラウザの更新をしてください。
機器が入っていない差し込まれていない可能性があります。機器がちゃんと入っていることを確認してください。
環境は機器に対応していないほかのウェブサイトで機器が使えるかを確認してください。
上記が失敗したら、他のブラウザとOS内で使えるかを確認してください。
OS上でも動けない場合はドライバーの再インストールと機器メーカと確認してください。

許可必須の関数

秘密情報をばらす可能性のある関数は仕様上許可がよく必要です。
許可は主に、実行時の表示、アプリ内のフラグ、設定ファイルのいずれかによって制御されます。
一番簡単の方法は「実行時の表示」です。必要の関数が実行されると、ポップアップが表示されるはずです。選択すれば、そのセッションでずっとその関数が使えるはずです。httpsの場合、更新しても選択しを覚えてくれることが多いです。

カメラ環境

カメラを使う際、映像をきれいに映すには以下を推薦します：

光をつける。光がないと、画質があらくなり、鋭い感覚がなくなります。特に画像認識の場合に問題が発生しやすい。

マイク環境

マイクを使う際、音声をきれいにながすには以下を推薦します：

マイクの音声を近くで出力しない。マイクの音声が近くで出力すると、またマイクがその音声を取得して、ハウリング現象が起こります。

WebGL対応

Canvas（画像描画の機能）のあるページはよくWebGLを使っています。3次元描画がある場合はなおさらです。
うまく動作するよう、速度を下げないよう、WebGLを有効にすべき。

Chrome: chrome://flags/　既定で有効ですが、各WebGLフラグを確認すべき。
Firefox: about:config のwebgl.disabled = false + about:support WebGL renderingに詳細が正しいこと。

WebRTC問題の報告用ツール

WebRTC問題の報告

WebRTCの問題を報告する際、追加すべき情報は以下の通り。
できるだけ明確に書くようにすると問題を把握しやすくなります。

OS(バージョンも含めて)
ブラウザ(バージョンも含めて)
ウェブカメラ（映像の元）
マイク（音声の元）
ネットワーク速度
ネットワーク構造
TCPとUDPの許可・ブロックされているポート
ICE Candidatesのログ（あれば）

WebRTCのポート

WebRTCは以下のポートを使います。

シグナリング：80か443
STUN/TURN：(既定)3478、(Google STUN)19305か19307、(TLS)5349、(HTTP)80か443
P2P: 0~65535(よく50000以上)

タグ: HTML5

WebRTC、ウェブカメラ、getUserMediaのヘルプ