DNET_WebRTC

WebRTC

• 戻る
  • JavaScript
  • HTML5 JavaScript API

概要

• WebRTC : Web Real-Time Communications

• 目的

  • ブラウザ、モバイル、IoT向けRTPアプリ開発
  • 共通のプロトコルセットで通信できるようにする

  ※ RTP : Real-time Transport Protocol

• W3CおよびIETFで標準化が進行中

詳細

サポート

最近のブラウザは、ほぼサポートされている。

セキュリティ

• APIを呼び出すページは HTTPS通信である必要がある。
• localhost のみ HTTP通信での利用が許可

アクセス・モジュール

MediaStream

(別名 getUserMedia)

• マイクとカメラに対するストリーム
• MediaDevices.getUserMedia() メソッドでカメラにアクセス可能。

RTCPeerConnection

ブラウザ間の Audio/Video データストリーミング

RTCDataChannel

Audio/Video データストリーミング以外のデータ通信

サンプル

• [HTML5] カメラをJSで操作し写真を撮影する
  https://blog.katsubemakito.net/html5/qrcode-reader
  • Camera Test
    https://miku3.net/html5/camera/camera.html

参考

• WebRTC
  https://webrtc.org/

• WebRTC - Wikipedia
  https://ja.wikipedia.org/wiki/WebRTC

• WebRTC API - Web API | MDN
  https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API

• WebRTCについて学んでみた。 - Qiita
  https://qiita.com/mush/items/121e45fefed009b6ad5e

• Web でカメラを使おう
  WebRTC (getUserMedia) on WebView | 芳和システムデザイン
  https://houwa-js.co.jp/blog/2019/06/20190604/

補足：WebRTC は 2021 年 1 月に W3C 勧告（WebRTC 1.0）となり、 標準化は完了している。

---

Tags: 移行, WebRTC, RTP, getUserMedia, MediaStream, RTCPeerConnection, RTCDataChannel, HTTPS