ブログ

テレワーク中のWEB会議が簡単に! WebRTCの「画面共有」機能をおさらい

公開日:2021.12.27

更新日:2024.05.21

KDDIウェブコミュニケーションズ

テレワーク中のWEB会議が簡単に! WebRTCの「画面共有」機能をおさらい

リモートワークやテレワークの導入が進み、ビデオ通話をつないで行うWeb会議・テレビ会議が広く利用されるようになった昨今。

かつてオフラインの打ち合わせで行われていた「資料を大きなモニターに映してメンバーで見ながら話す」といった動きは、自分のパソコン画面を相手に配信する画面共有機能によって代用されています。

この記事では、多くのWeb会議システムの基盤となっているWebRTCの画面共有機能についてご紹介します。

WebRTCとは?

WebRTCとは?

WebRTC(Web Real-Time Communication)は、音声やビデオ、データなどをWebブラウザ間でリアルタイムにやりとりするための通信技術です。

対応しているWebブラウザがあれば誰でも利用できる点から導入のハードルが低く、近年ではWeb会議システムのほかにも、ライブストリーミング・動画配信サービスなどで活用される場面が増えてきています。

詳しくはこちらの「WebRTCとは?リモートワークに役立つブラウザ技術を詳しく解説」の記事をご参照ください。

WebRTCの仕組み

WebRTCはP2P(Peer to Peer)方式という技術を活用することで、Webブラウザを利用して端末同士が直接接続・通信を行なっています。

P2Pは多くのWebシステムとは違い、データの送信側と受信側がクライアントやサーバーに分かれるような役割を持ちません。すべてのクライアントが、対等な立場で通信相手と直接やりとり行いまます。

詳しくはこちらの「初心者必見!よくわかるWebRTCの仕組み」の記事をご参照ください。

WebRTCで使用されているプロトコル

プロトコルはコンピューター同士で通信を行う際の規格のことを言います。通信確立の手段や順番、データの送り方などが定められているものです。

別のパソコンにデータを運ぶ上位プロトコルには「TCP」と「UDP」があり、両者の違いは以下のようになります。

TCP

TCPはセッションの確立からデータの送信開始、接続終了まで、すべてのやり取りを逐一「送りました」「受け取りました」と確認しあいながら行う通信です。

受信する側がパケットをチェックし、順不同に送られてきたデータを順番通り(=元のデータと同じ形)に組み立て直すという特徴もあります。

相手を確認してからデータを送受信することで、速さよりも完全性を重視した、信頼性の高い通信を実現しています。

UDP

一方UDPは、TCPのようにパケットのチェックはしません。受信されたかどうかの確認はせず、送信する側から相手へ一方的にデータを送り続けます。

速さとリアルタイム性を重視しているため、受信する側はそのとき受け取れたデータをその場で処理します。完全なデータでなくとも伝わればよい、という通信に向いており、主に音声や動画のストリーミング・IP電話で用いられています。

WebRTCもこのUDPプロトコルを採用しています。UDPプロトコルを使うことで、遅延が発生しにくくなるのです。

WebRTCの画面共有機能に関わるAPI

WebRTCの画面共有機能に関わるAPI

WebRTCはさまざまなAPIとプロトコルで構成されており、これらが連携することで音声・ビデオ通話やファイル送信、画面共有などのマルチメディア機能を可能にしています。

利用者のブラウザ画面やデスクトップ画面をリアルタイムで配信できる画面共有機能は、WebRTCの基本的なAPIである「getUserMedia()」や「getDisPlayMedia()」によって実現されています。

getUserMedia()

映像や音声のトラックを持つMediaStreamを生成するため、Webカメラやマイクなどのメディア入力を使用する許可をユーザーに求めるメソッドです。

getDisPlayMedia()

ディスプレイに表示されているコンテンツやその一部のウィンドウなどをキャプチャするため、アクセス許可を選択・付与するように求めるメソッドです。

なおWebRTCとして準備されているのは一連のAPIだけです。実装については、各Webブラウザの開発者が行っています。

ブラウザ上で利用できる高機能ビデオ通話を簡単に実装可能
ビデオプラットフォーム「Vonage Video」

画面共有機能に対応しているブラウザ

WebRTCの画面共有機能は2015年頃から開発が開始され、その内容については「Screen Capture」と呼ばれる仕様書にまとめられています。

「getUserMedia()」や「getDisPlayMedia()」と互換性を持っているブラウザとしては、主に以下のものが挙げられます。

  • Chrome 72以降
  • Edge 79以降
  • Firefox 66以降
  • Opera 60以降
  • Safari 13以降

ちなみに対応しているのは主にデスクトップのブラウザです。Android版のChromeやFirefox、iOS上のSafariなど、モバイルのブラウザはサポート非対象となっているため注意しましょう。

画面共有機能を自社アプリで利用するには?

画面共有機能を自社アプリで利用するには?

WebRTCを利用した画面共有機能を利用するには、通信にあたって、クライアント同士が互いのIPアドレスやポート番号などの接続情報を共有していなくてはなりません。WebRTC自体はこの機能を持たないため、実際にはシグナリングサーバーと呼ばれるサーバーを別途用意します。

また複数の拠点間で接続する場合、NATやFirewallを越えるためにSTUNやTURNと呼ばれるサーバーも必要になります。

開発者がこれらの環境をすべて実装するのは困難です。そのため近年はWebRTCの開発者向けプラットフォームと呼ばれるサービスが登場し、WebRTCと組み合わせて利用するサーバーや開発用のSDKが提供されています。

コミュニケーションAPIサービス
「Vonage」のご紹介

vonagepoe_primary

Vonageは、電話やSMS・ビデオ・チャット・SNSなど、さまざまなコミュニケーションチャネルをWeb・モバイルアプリケーションやビジネスへ組み込めるクラウドAPIサービスです。自動電話発信や電話転送、対話型IVR、自動SMS通知や二要素認証など、多岐にわたるサービスを実現できます。

コミュニケーションに関わる機能を自社で1から開発するのには多大な工数がかかります。通信の暗号化といったセキュリティ対策など考慮せねばならない点も多く、そのために実装を諦めてしまう企業も少なくありません。

しかしVonage APIと連携すれば、それらの工数をすべてVonage側が担ってくれます。お客様側でのインフラ開発はもちろん、ネットワークの構築・維持コストも必要ありません。ただ数行のコードを書き加えるだけで、自社サービスをマルチチャネル化できるのです。

Vonage Video API

「Vonage Video API」は、ブラウザ上でもアプリ上でも利用できる高機能ビデオ通話を簡単に実装できるAPIです。画面共有や画面録画といった基本的な機能にとどまらず、リアルタイム文字起こし、大規模ライブ配信など多彩なオプションを提供しています。フルカスタマイズからローコード/ノーコードでの実装まで、幅広いニーズに対応可能です。

市販のビデオアプリケーションで通話を行う場合、互いに同じアプリケーションをインストールしていることが前提となります。しかし Vonage Video APIならWebサイトにビデオ機能を組み込めるうえ、それがブラウザ上で動作するため、誰とでも前準備なしでビデオ通話が行えるのです。

まとめ

WebRTCの画面共有機能は主要なブラウザでサポートされており、簡単に利用できる状態に整えられています。 

しかし実際に実装するとなると、WebRTCと組み合わせて利用するサーバーも準備しなければなりません。その分、導入ハードルが高くなっています。 

近年ではWeb会議システムのサービスだけでなく、開発者用のプラットフォームなども登場してきています。ぜひ自社に合った導入の方法を探してみてくださいね。 

執筆者情報

KDDIウェブコミュニケーションズ
KDDIウェブコミュニケーションズ
KDDIウェブコミュニケーションズは、常に「開発者目線」を大切にしており、ブログ記事がお役に立てれば幸いでございます。


「テレワーク」の最新記事 Related post