Twilioブログ

テレワーク中の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ブラウザの開発者がおこなっています。

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

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「Twilio」のご紹介

Twilio(トゥイリオ)は電話やSMS、ビデオ、チャットなど世の中にあるさまざまなコミュニケーションチャネルを、WEB・モバイルアプリケーションと繋ぐクラウドコミュニケーションAPIです。

Programmable Video

TwilioではWebRTCを基盤としたアプリ開発用SDK「Programmable Video」を提供しています。

こちらを利用することで、ブラウザやアプリ上で使える高品質・高機能なリアルタイムビデオ機能を簡単に構築していただけます。またインフラ部分はあらかじめTwilioで用意しているため、ビデオ開発のみに注力していただけるのも大きな特徴です。

Programmable Videoでは、用途やニーズに合わせて、以下3つのプランから必要なものをお選びいただけます。

Group Room

最大50人までのグループ通話が可能です。またWebRTCだけではできない、オーディオとビデオの録音・録画ができます。

Peer to Peer

ブラウザ同士が直接やり取りを行います。最大10機まで接続可能です。

Video WebRTC Go

1対1のビデオアプリケーションを構築・稼働できる無料プランです。WebRTCをベースに構築できるため、ゼロから開発する手間を省くことができます。

録音・録画機能はご利用いただけませんが、気軽にProgrammable Videoを体験するのにおすすめのプランです。

Twilioのビデオ会議アプリ

またTwilioでは、上記のProgrammable Videoを活用したビデオ会議アプリをオープンソースにて公開しています。

「たった5分でビデオアプリケーションを構築・実行できる」という手軽さが魅力で、リモートワークが急速に普及した近年は特に需要が高まっています。また最近ではテキストや添付ファイルを送れるチャット機能も加わり、さらに使いやすくなりました。

Twilioのビデオ会議アプリケーションを、ぜひお客様のサービスにご活用してみてはいかがでしょうか?

オープンソースはこちら→Deploy your own video collaboration app in five minutes or less

まとめ

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

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

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

Twilio 本部
Twilio 本部

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

Twilioサインアップ-ブログフッターバナー

Share!!

この記事を読んだ人へのオススメ

  • お役立ち情報
  • イベント情報
  • 相談会申込
  • 導入事例