暗号化してセキュアに画面共有する - エンドーツーエンド暗号化/Piping Server経由
デモ動画
https://youtu.be/BPjEtkVSa0E
アプリケーション
https://gh-card.dev/repos/nwtgck/piping-screen-share-web.svg https://github.com/nwtgck/piping-screen-share-web
なんのために作ったか
セキュアに手軽に画面共有をしたいから。
目指したことの詳細
以下のようなこと目指して開発した。
Webブラウザで動き、多くのデバイスで利用できる
実装が公開され、利用者が安心できる状況
経由するPiping Serverを手軽に変更できる
経由するサーバーが変更できるメリットは、
自分が立てているPiping Serverを使ったり
(エンドツーエンド暗号化していても、強力はマシンで解読されたり、暗号化アルゴリズムの危殆化、IPアドレスなどの必然的に渡る情報を避けたり、色々よりセキュアにする保険になると思う。) 技術的なこと
サーバーは鍵がわからないため、サーバーもどんなデータが転送されているは知れない
500msごとので動画blobが得られる
コードを少し変更すれば任意のMediaStreamをストリームできるため、インカメラなど使ってテレビ電話・テレビ会議的なことにもできるはず そのときは、音は別で送ることになりそう。<video muted>しないとJS側でplay()できないと思う
動画再生はダブルバッファのようなことを行なっている
常に2つのBlob URLが<video src="...">にロードされていて、切り替えている
ちらつきを起こさないようにするため
HTTPのリクエストだけで通信される。(fetch()で通信される)
上記の動画blobを暗号化後チャンクのようにして転送している
誕生経緯
Piping Chunkの転送手法をベースにしない理由
1台のPCで画面共有の動作確認したい人向けの注意点
ブラウザの一つを普通に開いて、もうひとつはシークレットブラウズなどにすると良い。
エラーするわけではなく、後発のHTTPリクエストが先発のリクエストの終了を待ちます。
違うタブでのリクエストも待つ対象になってしまうので、シークレットブラウズなどを使うのが良い。
ブラウザの対応状況
ブラウザでの画面共有はたぶん新しめのWebの技術。
現在のSafariはnavigator.mediaDevices.getDisplayMedia()に対応していないため、画面共有はできない。