はじめに

昨今、スマートグラス業界を賑わせている「遠隔作業支援サービス」の技術要素である
「WebRTC(Web Real-Time Communication)」について、簡易なデモの実装を通じて、
WebRTCへの理解を深めたいと思います。

※こちらの記事は、「 WebRTC初心者向けの記事」になりますので、
記載内容の技術レベルは低めですが、何卒ご容赦いただけますと幸いです。

そもそもWebRTCとは？的な話は、こちらの記事をご参照ください。

対象読者

「WebRTC」に興味はあるが、そこまで深く理解していない方
「WebRTC」という言葉は知っているが、どのような技術かあまり詳しく知らない方

実装内容(簡易デモ)

今回は、PCとスマートグラスとの間でリアルタイムビデオ通話(っぽいもの？)を実装してみます。

上記デモを実現するためには、下記の機能を実装する必要があります。

1. 端末自体のカメラ映像を取得する機能
2. PeerJSサーバーを用いて、コネクションをはる機能(疎通確認)
3. 2.で確立したコネクションを元に、動画をストリーミング配信する機能

一つずつ、順を追って実装していきましょう。

Haste makes waste! (急がば回れ!)

1. 端末自身のカメラ画像を取得する。

端末自身のカメラ映像を取得するには、navigator.mediaDevices.getUserMedia()を使用します。

昔から知識がある人であれば、navigator.getUserMedia()の間違いじゃないか？
と思われる方もいっらしゃるかと思いますが、 MOZILLA のサイトを見てみると、、。

Navigator.getUserMedia - (非推奨)
この機能はWeb標準から削除されました。まだサポートしているブラウザがあるかもしれませんが、
ゆくゆくはなくなるものです。新旧にかかわらず、プロジェクトでの使用をやめてください。
この機能を使用するページ、Webアプリはいつ動かなくなってもおかしくありません。

Navigator.getUserMedia(Web標準)の廃止について

じゃあ、どうすれば良いの？
A. navigator.mediaDevices.getUserMedia() を使用します。

詳しくは、こちらの記事をご覧ください。

実際のソースコード

sample1.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>sample1</title>
</head>
<body>
    <video id="local_video" autoplay style = "width : 900px; height : 600px;">
</body>
    <script type="text/javascript">
      let localVideo = document.getElementById('local_video');

      // Start local video
      navigator.mediaDevices.getUserMedia({video : true, audio : false})
      .then(function (stream) {
        localVideo.srcObject = stream;
      }).catch(function (error){
        console.error('mediaDevices.getUserMedia() error:', error);
        return;
      });
    </script>
</html>

上記のサンプルコードを見ていきましょう。

※ 初心者が躓きそうなポイントをPickUpして解説していきます。

1. videoタグ

<video id="local_video" autoplay style...>

HTML5では、任意の動画フォーマットを文書に埋め込むためのタグが追加されました。
このタグを使用することで、ユーザーにプラグインをインストールしてもらうことなく、HTMLからシンプルに動画を扱えるようになります。

[autoplay属性]
autoplay属性を指定すると、ウェブページを読み込んだ時点で、動画が再生されます。

2. document.getElementById('id名')

指定されたidを持つ要素を返します。

上記のソースコードの場合、videoの要素を取得することができます。

※もし、与えられた「 id 」をもつ要素が存在しなかった場合は、「 null 」が返ってきます。

3. navigator.mediaDevices.getUserMedia()

MediaDevices.getUserMedia()メソッドは、カメラやスクリーンシェアリング、マイクのようなビデオやオーディオ入力装置の使用許可をユーザーに要求します。ユーザーが許可を出した場合、返却された「Promise」は結果として生成されたMediaStreamオブジェクトとして解決されます。

簡単に言うと、デバイスのカメラ、オーディオの使用許可をユーザーに要求し、
ユーザーがそれを承認すれば、デバイスのカメラ、オーディオ等にアクセスが可能になります。

4. srcObject

HTMLMediaElement.srcObjectは、HTMLMediaElementのプロパティです。
静的ファイルではなく、例えば、ローカルカメラの映像を表示したい時に、
リソースのオブジェクトをセットするためのプロパティです。
「TMLMediaElement.srcObject - メディアプロバイダーより抜粋」

もう一度、ソースコードを見てみましょう。

sample1.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>sample1</title>
</head>
<body>
    <!-- videoタグ使用 autoplay属性を指定しているので、ユーザーがリソースへのアクセスを許可すると自動的に再生される。 -->
    <video id="local_video" autoplay style = "width : 900px; height : 600px;">
</body>
    <script type="text/javascript">
      // video要素を取得し、変数に代入します。
      let localVideo = document.getElementById('local_video');

      // カメラ、オーディオ等のリソースへのアクセスの許可が下りれば、
      navigator.mediaDevices.getUserMedia({video : true, audio : false})
      .then(function (stream) {
　　　　 // videoタグの箇所へ、カメラの映像を挿入します。
        localVideo.srcObject = stream;
      }).catch(function (error){
        // もし許可されなかった場合、エラーの場合にはエラーログを表示します。
        console.error('mediaDevices.getUserMedia() error:', error);
        return;
      });
    </script>
</html>

実際に、実行してみると、、。

[許可前]

リソースにアクセスしても問題ないかどうかアラートが上がります。(Google Chrome)

[許可後]

ブラウザ閲覧中のPCカメラが起動し、映像がvideoタグ内にリアルタイムで配信されることが確認できました。

次は、PeerJSサーバーを用いてコネクションを確立する(疎通確認)を実装してみたいと思います。

続きは、
1. PeerJSを使ったリアルタイムビデオ通話のデモを実装してみた話(2)
2. PeerJSを使ったリアルタイムビデオ通話のデモを実装してみた話(3)
をご覧ください。

終わりに

実際に実装を進めながら、Qiitaに記事を書くと理解も深まりますね。
最後までお読みいただき、ありがとうございました。

【 PeerJS 】リアルタイムビデオ通話のデモ実装編(1) ～mediaDevices.getUserMedia()の使い方～