| 更新: | 2018-06-25 |
|---|---|
| 作者: | @voluntas |
| バージョン: | 0.0.0 |
| URL: | https://voluntas.github.io/ |
この記事が良いと思ったらこの記事に Star を是非
WebRTC API を基礎から理解したい人向けの資料。
フルスクラッチで WebRTC SFU を開発している。DTLS や SRTP も暗号部分以外はすべて自前実装。
ただし JavaScript に関しては素人なので注意してほしい。
この Gist へのコメントではなく @voluntas まで Twitter にてリプライを飛ばして欲しい。
WebRTC API 最新に追従している資料が欲しいので書くことにした。
- WebRTC 1.0: Real-time Communication Between Browsers
- Media Capture and Streams
- Screen Capture
- Identifiers for WebRTC's Statistics API
この 4 つの資料をもとにブラウザごとの差異などについても書いていく。基本的にはブラウザの最新版に追従していく。
| Chrome: | 現在実装中 |
|---|---|
| Firefox: | 未実装だが独自対応 |
| Edge: | 対応済み |
| Safari: | 現在実装中らしい |
Chrome Extension が必須だったが、 Chrome Extension のポリシー変更を受けて Screen Capture API を実装する方針へ。
現時点での実装については 【備忘録】[getUserMedia] ChromeとElectron(とFirefox)でスクリーンキャプチャーおよびChromeとElectronで(システムまたはタブ)オーディオのキャプチャー - Qiita が詳しいのでこちらを参考にしてもらいたい。
Chrome が Screen Capture API を実装したタイミングでサンプルを載せていきたい。
特殊な実装で getUserMedia で video の部分に mediaSource: 'screen' や mediaSource: 'screen' を指定する方式になる。
// "screen" は全画面、 "window" はアプリ単位
const mediaSource = "screen";
const constraints = { video: { mediaSource: mediaSource } };
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
//
})
.catch(error => {
//
});チェックボックスで screen または window を選ばせて mediaSource に渡して呼ぶ。
Edge が Screen Capture API では先頭を走っている。 navigator.getDisplayMedia を実装している。
使い方は getUserMedia とほとんど変わりないので、迷うことはない。
const constraints = { video: true };
navigator.getDisplayMedia(constraints)
.then(stream => {
//
})
.catch(error => {
//
});