質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

通話アプリに長電話防止用のタイマーを設置したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 841

score 13

こんにちは。
現在、SkyWayのApiを借りて、webで通話するアプリを製作しています。
前々から長電話の癖がある自分は、「タイマーか何かで自動的に通話を切ってくれる機能があればよいのに」と思っていたので、カウントダウンタイマーの機能をつけようと試行錯誤し、実際にタイマーの数値が0になった時に通話が切れるアプリを作ることに成功しました。

しかし、一つだけ物足りない部分があるのです。
アプリのスクリーンショット

画像は今製作しているアプリをfirebaseのhost機能を使いサーバーにあげたものです。
右の100という数字がカウントダウンタイマーです。
この下のスタートというボタンを押すと、数字が1ずつ減っていくことが確認することが出来るのですが、通話相手の画面から見ると、100という数字から動くことはなく、100秒後に急に通話が途切れたように感じられます。

どのようにすれば、お互いの画面から数値の減少を確認できるようになるのでしょうか。
具体的な解決方法は自分で調べるよう努力しますので、解決までの道筋だけでも教えて頂ければ幸いです。

コードはこちらです。

<!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>
            <button href="#" class="pure-button pure-button-success" type="submit">End Call</button>
        </form>
        <button id="switch" class="pure-button pure-button-success">通話だけにする</button>
        <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>
<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>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#config-web-app -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyALGpb_1iJGK-DT3lOFLOkA7cbcQGErb1o",
    authDomain: "talk-application-81db0.firebaseapp.com",
    databaseURL: "https://talk-application-81db0.firebaseio.com",
    projectId: "talk-application-81db0",
    storageBucket: "",
    messagingSenderId: "75890277622",
    appId: "1:75890277622:web:98209fdbca0e3362"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>
'use strict';

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');
});

//切断処理
$('#end-call').click(function(){
    existingCall.close();
});

//着信処理
peer.on('call', function(call){
    call.answer(localStream);
    setupCallEventHandlers(call);
    $('#countDownWrap').css('display','block');
});

//通話中の接続要求を優先して、既存の接続は切断する(アプリの仕様次第)
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);
    });

    //切断されたら発火
    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();
    $('#switch').hide();
}

function setupEndCallUI(){
    $('#make-call').hide();
    $('#end-call').show();
    $('#switch').show();
}

//ビデオ部分を消す
$('#switch').click(function(){
    $('.pure-u-2-3').hide();
})


//タイマーの設定-----------------------------------

var setSecond = 100; //タイマーの秒数
var setPause = setSecond;//ストップ時の秒数を保存
var time=setSecond; //残り秒数を保存
var timerID; //setInterval用の変数

//残り秒数を表示させる関数
function textDisplay(){
    $('#countDown').text(time);
}

//カウントを1減らす関数
function countDown(){
    time--; 
    setPause = time;  //ストップ時に使用するために残り秒数を代入
    textDisplay();
}

//タイマーの停止用関数
function countStop(){
    clearInterval(timerID); 
}

//タイマースタートの関数
function timerStart(){
    countStop(); //カウントダウンの重複を防ぐため、今動いているタイマーをクリア
    timerID = setInterval(function(){
        if(time <= 0) {
            clearInterval(timerID);
            existingCall.close();
        } else {
            countDown();
        }
    }, 1000);
}

// ボタンの実行処理---------------------------------------
textDisplay();

//タイマースタート
$("#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();
    }
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

カウントダウンタイマーの作動のタイミングを「タイマースタートボタンを押した」ではなく「通話ボタンを押した」に変えれば良いのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/08 18:05

    解決しました!ありがとうございます。

    キャンセル

  • 2019/08/08 18:11

    解決されたようで何よりです

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る