SkyWayの利用(その2)JavaScriptでの開発 – 株式会社インデペンデンスシステムズ横浜

前回の続きです。NTTコミュニケーションズ株式会社提供のリアルタイムコミュニケーションのためのプラットフォームであるSkyWayを使ってみます。前回は概要的な内容を書きました。今回は簡単なプログラムを作ってみました。今現在SkyWayではJavaScript、iOS、Androidの各SDKが提供されています。ここではJavaScriptのSDKを使ってみました。チュートリアルを見ながら簡単なストリーミングのプログラムを作成してみました。

主に以下のページを見ながら作業をしました。こちらも参照して下さい。
SkyWay JavaScript SDK チュートリアル

ここでの開発環境
OS：Windows10 Pro
Webカメラ：ELECOM UCAM-C0220FBNBK
Webサーバ：Apache(XAMPP)
ブラウザ：FireFox 70.0.1
（Google Chrome 78.0.3904.108でも動作しました。）

SkyWayに関する事前の準備
開発者登録
アプリケーション登録(APIキー発行)
登録したアプリケーションの利用可能ドメイン名（ここではlocalhost）の登録

作成したプログラムの内容とポイント
1台のPCでWebカメラをストリーミングするページとそのカメラの映像、音声を見るだけのページを作成しました。

ブラウザでのカメラの認識
まずは、ブラウザでカメラとマイクを認識する必要があります。以下で取得します。
navigator.mediaDevices.getUserMedia({video: true, audio: true})
以下のような確認画面が出ます。

ここではlocalhostを使用しているのでhttp://でこれが取得出来ました。上記のチュートリアルのページにも説明がありますが、localhost以外ではhttps://でないとこのカメラとマイクの許可の画面が表示されない場合が多いようです。そのため、まずはlocalhostで試すのがいいと思います。

カメラ側のページの表示

カメラを許可するとカメラの映像が表示されます。

リモート側の表示
カメラ側で以上の準備が出来ているとして、同じlocalhostでリモート側のページを表示します。接続すると以下のようにカメラの画像が表示されます。

1台のPCでの操作なのであまりP2Pには思えないですがとりあえず表示されました。

実際のプログラム
SkyWay SDKは以下を利用します。
https://cdn.webrtc.ecl.ntt.com/skyway-latest.js

接続にはPeerクラスを使用しています。このPeerクラスは、P2P接続を操作するためのクラスです。SkyWayを利用するために最初にインスタンス生成が必要で、生成の後は、openやcallのイベントハンドラで処理をしています。

カメラ側のプログラム(ページ)は以下です。

<html lang=ja>
<head>
<title>SkyWay Start01 ローカルカメラ</title>
<meta charset="UTF-8">
<style></style>
<script src="https://cdn.webrtc.ecl.ntt.com/skyway-latest.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
		let localStream = null;

       	function cameraInit() {
            
            navigator.mediaDevices.getUserMedia({video: true, audio: true})
    			.then(function (stream) {
        			// Success
        			$('#my-video').get(0).srcObject = stream;
        			$('#my-video').playsInline = true;
        			
        			localStream = stream;
        			
        			var peer = new Peer(
                		'myCamera01', {
                    		key: 'API-KEY',
                    		debug: 3
               		});
               		
               		peer.on('open', function(){
    					console.log('open');
					});
					
					peer.on('call', function(call){
						console.log('call');
						///alert('call');
						
						call.answer();
    					peer.call('myView01',localStream);
					});
        			
    			}).catch(function (error) {
        		
        			// Error
        			console.error('mediaDevice.getUserMedia() error:', error);
        			return;
    		});
		}

</script>
</head>

<body>
	<p><button type="button" onclick="cameraInit()">ローカルカメラ接続実行</button></p>
 	<p><video muted id="my-video" autoplay="1"></video></p>
</body>
</html>

ここではとにかく決め打ちで書いています。テスト的にはこの方が簡単と思いました。
自分のPeerのIDは’myCamera01’で、相手のPeerのIDは’myView01’です。Callが来たら、相手は必ず’myView01’という前提でローカルストリームを渡してコールしています。

ここではストリームは一方向なのでanswerとまたcallを使っています。双方向の場合はanswerでストリームを返すようです。必要な場合はこのMediaConnectionの詳細はSkyWayサイトのAPIのマニュアルを参照して下さい。

リモート側のプログラム(ページ)は以下です。

<html lang=ja>
<head>
<title>SkyWay Start01 リモートカメラへ接続</title>
<meta charset="UTF-8">
<style></style>
<script src="https://cdn.webrtc.ecl.ntt.com/skyway-latest.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
		
       	function cameraConnect() {
       		var peer = new Peer(
           		'myView01', {
              	key: 'API-KEY',
          		debug: 3
          		});
       	
       		peer.on('open', function() {
 				peer.call("myCamera01");
 			});
 			
 			peer.on('call', function(call){
 				console.log('call');
 				//alert('call');
 				call.answer();
    			setupCallEventHandlers(call);
			});
        }
        
        function setupCallEventHandlers(call){
        	
           	call.on('stream', function (stream) {
           		//alert('stream');
            	
               	var video = $('#remote-video').get(0);
               	video.srcObject = stream;
          
                $("#mutedoff").click(function () {
                	video.muted = false;
                });
            });
            
           	$("#conclose").click(function () {
          		call.close();
          	});
       	}
  
</script>
</head>

<body>
	<p><button type="button" onclick="cameraConnect()">リモートカメラ接続実行</button></p>
 	<p><video muted id="remote-video" autoplay="1"></video></p>
 	<p><button id="mutedoff">音声オン</button></p>
 	<p><button id="conclose">切断</button></p>
</body>
</html>

こちらも決め打ちで書いています。
自分のPeerのIDは’myView01’で、相手のPeerのIDは’myCamera01’です。callが来たら’stream’の準備をして相手側の映像を表示します。後は、音声オンと切断を用意しました。

単純な例ですが、これで表示が出来ました。

localhostではなくIPアドレスで利用する
ここまではhttp://localhostで利用しました。次は別のPCやスマホから見えるようにIPアドレスでカメラのページを表示しようとしました。

まずは、SkyWayのアプリケーション設定の利用可能ドメイン名にPCのLan環境のIPアドレスを登録しました。
次にlocalhostの時と同様にIPアドレスでカメラ側のページを表示しました。

しかし、カメラとマイクの許可が出ません。
ということで、XAMPPでSSLを有効にしました。（※ここではその手順は省略します。必要な場合は検索してみて下さい。）

以下のようにhttps://でアクセスしたところ、証明書関連の警告は無視して進めると、カメラとマイクの許可が出ました。（※以下の画像はクリックで単独で拡大表示します。）

スマホからこのIPアドレスでリモート側にアクセスしたところ、カメラの映像が見えました。
やはり、常にSSLの環境で開発した方がいいと思います。

まとめ的に
動作する環境が把握出来ればあとはSkyWayのSDKをどのように利用するかと、今回はJavaScriptなので他のWeb系とどのように連携していくかが課題かと思います。

今回はここまでです。次回はテキストデータの送受信を追加します。