株式会社インデペンデンスシステムズ横浜

システム開発エンジニアの西田五郎が運営しております。Raspberry Pi や Arduino その他新規開発案件のご依頼をお待ちしております。

SkyWay

SkyWayの利用(その3)JavaScriptでの開発2

投稿日:2019年12月2日 更新日:

前回の続きです。NTTコミュニケーションズ株式会社提供のリアルタイムコミュニケーションのためのプラットフォームであるSkyWayを使ってみます。前回はJavaScriptで簡単なプログラムを作ってみました。今回も同じようなプログラムですが、双方向でのテキストデータのやり取りを追加しました。

主に以下のページを見ながら作業をしました。こちらも参照して下さい。
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)の登録

作成したプログラムの内容とポイント
前回ではローカルカメラ側とリモート側に分けてリモート側から接続(コール)してカメラの映像と音声を取得するというプログラムでした。

それに双方向でテキストデータのやり取りが出来る機能を追加しました。双方のページで以下のようなやり取りが出来ます。

カメラ側

リモート側

データの送受信にはSkyWay APIのDataConnectionクラスを利用します。以下カメラ側、リモート側のソース(ページ)です。

カメラ側

<html lang=ja>
<head>
<title>SkyWay Start02 ローカルカメラ</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('connection', function (dataConnection) {
                		
                		//alert('con');
                		
                		dataConn = peer.connect(dataConnection.peer);
                		peer.call(dataConnection.peer, localStream);
                	
                		dataConn.on('data', function(message){
                			$('#response').text(message);
                		});

                		$('#send').click(function () {
                    		var message = $('#message').val();
                    		dataConn.send(message);
                		});
                		
                		//alert('coned');
            		});
        			
    			}).catch(function (error) {
        		
        			// Error
        			console.error('mediaDevice.getUserMedia() error:', error);
        			return;
    		});
		}
		
</script>
</head>
<body>
	<h3>SkyWay ストリーミングとテキストデータ(カメラ側)</h3>
	<hr>
	<p><button type="button" onclick="cameraInit()">ローカルカメラ接続実行</button></p>
 	<p><video muted id="my-video" autoplay="1"></video></p>
 	
 	<p><div id="response">受信データ</div></p>
 	<p><input type="text" placeholder="メッセージ" id="message">&nbsp;<button type="button" id="send">送信</button></p>
</body>
</html>

PeerのIDは固定でmyCamera01です。相手からの接続時(peer.on(‘connection’ からの部分)にDataConnectionを取得します。そして、こちらからも接続して同時にコールでストリームを渡しています。その後にデータ送受信の準備をしています。

リモート側

<html lang=ja>
<head>
<title>SkyWay Start02 リモートカメラへ接続</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
          		});
          		
          	var dataConn;
       	
       		peer.on('open', function() {
 				peer.connect("myCamera01");
 			});
 			
 			peer.on('connection', function (connection) {
            	dataConn = connection;
            	dataConn.on("data", onRecvMessage);
            	
            	$("#send").click(function () {
               		var message = $("#message").val();
                   	dataConn.send(message);
               	});
            });
 			
 			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();
          	});
       	}
       	
       	function onRecvMessage(data) {
       		$("#response").text(data);
		}
  
</script>
</head>

<body>
	<h3>SkyWay ストリーミングとテキストデータ(リモート側)</h3>
	<hr>
	<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>
 	<p><div id="response">受信テキスト</div></p>
 	<p><input type="text" placeholder="メッセージ" id="message">&nbsp;<button type="button" id="send">送信</button></p>
</body>
</html>

PeerのIDは固定でmyView01です。Peerを生成してopen時に相手(固定のIDのmyCamera01です)に接続しています。これでDataConnectionが取得出来ます。相手側からの接続時にデータ送受信の準備をしています。コールの部分は前回と同様にカメラ側のストリームを取得しています。

今回のデータ送信ですが、単純に画面からのテキストのやり取りですが、JavaScriptという意味ではWeb関係の他のシステムとの連携を考えればいろいろと応用が出来ると思います。

今回はここまでです。次回はRaspberry PiでもSkyWayを利用してみます。

AdSense

AdSense

-SkyWay

執筆者:

関連記事

SkyWayでRaspberry Piの遠隔操作(その2)SkyWayからの操作

前回の続きです。全体的にはSkyWayを利用してRaspberry Piの遠隔操作をしてみようという内容です。 前回はRaspberry Pi側でのブラウザ(JavaScript)からMQTT ove …

SkyWayの利用(その2)JavaScriptでの開発

前回の続きです。NTTコミュニケーションズ株式会社提供のリアルタイムコミュニケーションのためのプラットフォームであるSkyWayを使ってみます。前回は概要的な内容を書きました。今回は簡単なプログラムを …

SkyWayの利用(その1)概要と動作確認

ここでのSkyWayとはNTTコミュニケーションズ株式会社提供のリアルタイムコミュニケーションのためのプラットフォームのことです。ベースになっている技術要素がWebRTC(Web Real-Time …

SkyWayの利用(その4)Raspberry Piでの利用

前回の続きです。NTTコミュニケーションズ株式会社提供のリアルタイムコミュニケーションのためのプラットフォームであるSkyWayを使ってみます。前回はJavaScriptでカメラとマイクのストリーミン …

感染症対策のためのIoT技術(その4)WebRTCを利用したリモート関連システム

感染症対策のためのIoT技術について書いています。今回はWebRTC(Web Real-Time Communication)を利用したリモート関連システムについてです。リモート関連システムとは具体的 …