WebRTC API コトハジメ

webrtc_api.rst

WebRTC API コトハジメ

更新

2018-06-25

作者

@voluntas

バージョン

0.0.0

URL

https://voluntas.github.io/

この記事が良いと思ったらこの記事に Star を是非

概要

WebRTC API を基礎から理解したい人向けの資料。

著者

フルスクラッチで WebRTC SFU を開発している。DTLS や SRTP も暗号部分以外はすべて自前実装。

ただし JavaScript に関しては素人なので注意してほしい。

著者が書いた資料の一部

• WebRTC スタックコトハジメ
• WebRTC の未来
• 詳解 WebRTC
• 仕事で WebRTC

間違いや質問について

この 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 つの資料をもとにブラウザごとの差異などについても書いていく。基本的にはブラウザの最新版に追従していく。

WebRTC 1.0: Real-time Communication Between Browsers

Media Capture and Streams

Screen Capture

Chrome

現在実装中

Firefox

未実装だが独自対応

Edge

対応済み

Safari

現在実装中らしい

Chrome

Chrome Extension が必須だったが、 Chrome Extension のポリシー変更を受けて Screen Capture API を実装する方針へ。

現時点での実装については 【備忘録】[getUserMedia] ChromeとElectron(とFirefox)でスクリーンキャプチャーおよびChromeとElectronで(システムまたはタブ)オーディオのキャプチャー - Qiita が詳しいのでこちらを参考にしてもらいたい。

Chrome が Screen Capture API を実装したタイミングでサンプルを載せていきたい。

Firefox

特殊な実装で 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 に渡して呼ぶ。

資料

• Screen capture in Firefox – Twilio Cloud Communications Blog
• Firefox で画面共有 - Qiita

Edge

Edge が Screen Capture API では先頭を走っている。 navigator.getDisplayMedia を実装している。

使い方は getUserMedia とほとんど変わりないので、迷うことはない。

const constraints = { video: true };
navigator.getDisplayMedia(constraints)
.then(stream => {
    //
})
.catch(error => {
    //
});

資料

• Bringing Screen Capture to Microsoft Edge with the Media Capture API - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog