前回の続きです。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"> <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"> <button type="button" id="send">送信</button></p>
</body>
</html>
PeerのIDは固定でmyView01です。Peerを生成してopen時に相手（固定のIDのmyCamera01です）に接続しています。これでDataConnectionが取得出来ます。相手側からの接続時にデータ送受信の準備をしています。コールの部分は前回と同様にカメラ側のストリームを取得しています。
今回のデータ送信ですが、単純に画面からのテキストのやり取りですが、JavaScriptという意味ではWeb関係の他のシステムとの連携を考えればいろいろと応用が出来ると思います。
今回はここまでです。次回はRaspberry PiでもSkyWayを利用してみます。