編集履歴

質問編集履歴

コード全文の記載

2019/08/11 08:43

投稿

yuhei_seguchi

スコア13

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -71,3 +71,583 @@
 自分は、'A'という文字列だけ取得したいのですが、中々上手くいきません。
 解決策がわかる方がいらしたら、教えていただけると嬉しいです。
+### コード全文
+タイマー機能付きのweb通話アプリを作っています。
+```html
+<!DOCTYPE html>
+<html>
+<head lang="ja">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>SkyWay JS SDK Tutorial</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="pure-g">
+    <!-- Video area -->
+    <div class="pure-u-2-3" id="video-container">
+        <video id="their-video" autoplay></video>
+        <video id="my-video" muted="true" autoplay></video>
+    </div>
+    <!-- Steps -->
+    <div class="pure-u-1-3">
+        <h2>SkyWay Video Chat</h2>
+        <p>Your id: <span style="color: rgb(28, 184, 65);" id="my-id">...</span></p>
+        <p>Share this id with others so they can call you.</p>
+        <h3>Make a call</h3>
+        <form id="make-call" class="pure-form">
+            <input type="text" placeholder="Call user id..." id="callto-id">
+            <button href="#" class="pure-button pure-button-success" type="submit">Call</button>
+        </form>
+        <form id="end-call" class="pure-form">
+            <p>Currently in call with <span id="their-id"></span></p>//ここのspanタグ内のテキストを取得したい
+            <button href="#" class="pure-button pure-button-success" type="submit">End Call</button>
+        </form>
+        <div id="countDownWrap">
+            <div id="countDown"></div>
+            <ul>
+                <li id="startBtn"><img src="./img/btn_start.png" alt="スタート"></li>
+                <li id="stopBtn"><img src="./img/btn_stop.png" alt="ストップ"></li>
+                <li id="resetBtn"><img src="./img/btn_reset.png" alt="リセット"></li>
+            </ul>
+            <div id="controll">
+                <p>秒数変更<input type="text" id="setSecond"><img src="./img/btn_save.png" id="changeSecond"></p>
+                <p id="error"></p>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- The core Firebase JS SDK is always required and must be listed first -->
+<script type="text/javascript" src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
+<script type="text/javascript" src="https://www.gstatic.com/firebasejs/6.2.4/firebase-firestore.js"></script>
+<script type="text/javascript" src="./config.js"></script>
+<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+<script type="text/javascript" src="https://cdn.webrtc.ecl.ntt.com/skyway-latest.js"></script>
+<script type="text/javascript" src="script.js"></script>
+<!-- TODO: Add SDKs for Firebase products that you want to use
+     https://firebase.google.com/docs/web/setup#config-web-app -->
+```
+```javascript
+'use strict';
+var db = firebase.firestore();
+db.settings({
+  timestampsInSnapshots: true
+});
+let localStream = null;
+let peer = null;
+let existingCall = null;
+// カメラ映像、マイク音声の取得
+navigator.mediaDevices.getUserMedia({video: true, audio: true})
+    .then(function (stream) {
+        // Success
+        $('#my-video').get(0).srcObject = stream;
+        localStream = stream;
+    }).catch(function (error) {
+        // Error
+        console.error('mediaDevice.getUserMedia() error:', error);
+        return;
+    });
+// Peerオブジェクトの作成
+peer = new Peer({
+    key: '16c0bb93-5ea4-4114-bb5d-af179d53765f',
+    debug: 1
+});
+//openイベント
+peer.on('open', function(){
+    $('#my-id').text(peer.id);
+});
+//errorイベント
+peer.on('error', function(err){
+    alert(err.message);
+});
+//closeイベント
+peer.on('close', function(){
+});
+//disconnectedイベント
+peer.on('disconnected', function(){
+});
+//発信処理
+$('#make-call').submit(function(e){
+    e.preventDefault();
+    const call = peer.call($('#callto-id').val(), localStream);
+    setupCallEventHandlers(call);
+    $('#countDownWrap').css('display','block');
+    $('#countDown__answer').css('display','none');
+});
+//切断処理
+$('#end-call').click(function(){
+    existingCall.close();
+});
+//着信処理
+peer.on('call', function(call){
+    call.answer(localStream);
+    setupCallEventHandlers(call);
+    $('#countDownWrap').css('display','block');
+    $('#countDown__call').css('display','none');
+    $('#startBtn').css('display','none');
+    $('#stopBtn').css('display','none');
+    $('#resetBtn').css('display','none');
+    $('#controll').css('display','none');
+});
+//通話中の接続要求を優先して、既存の接続は切断する(アプリの仕様次第)
+function setupCallEventHandlers(call){
+    if (existingCall) {
+        existingCall.close();
+    };
+    // existingCallを保持
+    existingCall = call;
+    // 相手のカメラ映像・マイク音声を受信した際に発火
+    // 取得したStreamオブジェクトをvideo要素にセットする
+    call.on('stream', function(stream){
+        addVideo(call,stream);
+        setupEndCallUI();
+        $('#their-id').text(call.remoteId);
+        //相手方のID名のドキュメント作成
+        var newTimer = db.collection("users").doc(call.remoteId);
+        newTimer.set({
+            time: time
+        })
+    });
+    //切断されたら発火
+    call.on('close', function(){
+        removeVideo(call.remoteId);
+        setupMakeCallUI();
+    });
+}
+//UIのセットアップ
+function addVideo(call,stream){
+    $('#their-video').get(0).srcObject = stream;
+}
+function removeVideo(peerId){
+    $('#their-video').get(0).srcObject = undefined;
+}
+function setupMakeCallUI(){
+    $('#make-call').show();
+    $('#end-call').hide();
+}
+function setupEndCallUI(){
+    $('#make-call').hide();
+    $('#end-call').show();
+}
+//firestoreのfunction
+function takeTimer() {
+    newTimer.get().then(function(doc) {
+        if(doc.exists){
+            let result = '';
+            let data = doc.data();
+            result = data.time;
+            return result;
+            // $('#countDown').text(result);
+            console.log(result);
+        } else {
+            console.log("No such a document!");
+        }
+    }).catch(function(error) {
+        console.log("Error getting document:", error);
+    })
+}
+//タイマーの設定-----------------------------------
+var setSecond = 100; //タイマーの秒数
+var setPause = setSecond;//ストップ時の秒数を保存
+var time=setSecond; //残り秒数を保存
+var timerID; //setInterval用の変数
+//残り秒数を表示させる関数
+function textDisplay(){
+    $('#countDown').text(time);
+}
+//カウントを1減らす関数
+function countDown(){
+    time--;
+    // setTimer();
+    // takeTimer();
+    // $('#countDown__answer').text(result);
+    setPause = time;  //ストップ時に使用するために残り秒数を代入
+    textDisplay();
+}
+//タイマーの停止用関数
+function countStop(){
+    clearInterval(timerID);
+}
+//タイマースタートの関数
+function timerStart(){
+    countStop(); //カウントダウンの重複を防ぐため、今動いているタイマーをクリア
+    timerID = setInterval(function(){
+        if(time <= 0) {
+            clearInterval(timerID);
+            existingCall.close();
+        } else {
+            countDown();
+        }
+    }, 1000);
+}
+// ボタンの実行処理---------------------------------------
+textDisplay();
+// setTimer();
+// takeTimer();
+//タイマースタート
+$("#startBtn").click(function(){
+    time= setPause;//途中からでも開始出来る
+    textDisplay();
+    timerStart();
+});
+//タイマー停止
+$("#stopBtn").click(function(){
+    countStop();
+});
+//タイマー初期化
+$("#resetBtn").click(function(){
+    countStop();
+    time = setPause = setSecond; //初期値に初期化
+    textDisplay();
+});
+//秒数変更機能
+$("#changeSecond").click(function(){
+    var seveSecond = $("#setSecond").val();
+    if(seveSecond.match( /[^0-9]+/ )){ //^は否定の文字クラス
+       $("#error").text("※半角数字で入力してください")
+    } else if(seveSecond=='') {
+       $("#error").text("※値を入力してください")
+    } else {
+       $("#error").text("")
+       setSecond = seveSecond;
+       countStop();
+       time = setPause = setSecond;
+       textDisplay();
+    }
+});
+var h = document.getElementById('their-id');
+console.log(h.innerHTML);//タグ内のテキストを取り出そうとしています。
+```