JavaScriptでWebRTCやるための基礎知識 - console.lealog(); 春なので書きました。 言うなれば、これの2019年度版です。 はじめに 最低限のJavaScriptでWebRTCを扱うにあたり、どういうクラスがあって、どういうAPIを、どう使うのかについての記事です。 いわゆるフロントエンドのエンジニアがWebRTCを使ったサービスを作るなどの場合は、だいたい何かしらのSDKを使うと思います。 その場合はそのSDKのDocsを読めばそれで十分で、その先の仕組みを知る必要はないかなーと思います。 ただし、 SDKの中で何が行われてるか知っておきたい WebRTCのSDKを作る側である みたいな場合は、一読の価値ありかもです。 ようするに、弊社の新入社員のような人材のための記事です！ 基本的なWebRTCの仕組みみたいなパートはざっくり軽めにして、JavaScri

またも、まったく目新しいトピックではないです。 個人でメンテしてるWebRTCのモジュールに機能を追加するときに思い出したしせっかくなのでメモ。 方法は2つ SDPによる`b=AS`/`b=TIAS`の指定 `RTCRtpSender`の`getParameters()` + `setParameters()` 短いWebRTCの歴史の中でも、前者は割と昔から使えて、後者は割と新しいめのAPIを使うとできる。 TPOにあわせて選べばよくて、どちらかだけ使え！というものではないです。 SDPによる指定 いわゆるSDP mungingといって、SDPを手動で書き換える必要がある。 普通にブラウザやらが提供するAPIを触ってるだけならそんな機会は不要なはずですが、こればっかりはAPIが用意されてないのでやるしかない。 RFC 3556 - Session Description Protocol

やってやれないことはなかったです。 ぱっと思いついた2通りのアプローチで実装してみたので、その学びをメモっておきます。 ただ、個人的には別にいらない機能かな・・。 バーチャル背景とは バーチャル背景 – Zoom ヘルプセンター たとえばWeb会議のZoom（のデスクトップクライアント）で使える機能で、汚部屋や背景をさくっと隠せて便利！というもの。 JavaScriptでもこういうことやりたいなーと思ったときに、どういうアプローチがあって、どういう仕上がりになるか？をやってみた話です。 案1: クロマキー合成 クロマキー - Wikipedia TVでおなじみ（ガチャピンが消えてたやつ）の手法。 グリーンバックとかブルーバックとか、とにかくベタ塗りの背景の前に立って撮る。 そして撮ったデータのピクセルの色を判定し、そのベタ塗りの色なら透過にして、背景と合成する。 実装 コードもシンプルで、

`navigator.mediaDevices.getUserMedia()`することで手に入る`MediaStream`を、それ以外の手段でどうやって自作するかという話です。 どんな形であれ思いついたのをメモっておきます。 captureStream() Media Capture from DOM Elements `HTMLMediaElement`つまり`audio`と`video`要素から取れる。 // videoでも同じ const $audio = document.createElement('audio'); const stream = $audio.captureStream(); あと同じ名前のメソッドが、`HTMLCanvasElement`つまり`canvas`要素からも取れる。 // videoでも同じ const $canvas = document.cre