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

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

ただいまの
回答率

88.03%

webrtcでの簡易ビデオチャットについて

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,919
WebRTCを利用して簡易ビデオチャットを構成したいが
参考にしているサイトのソースを手直ししながら色々試しているが、素人のため、記述がそもそもよくわからない

やりたいことは、下記のとおりです。

自分のIDを取得し、サーバーのDBにIDを記録する。
相手のID情報をDBに検索にいき、値がなければ、繰り返し
DBを参照しにいって、見つかったら繰り返しを抜け、接続のフロー
見つからないとき、中断ボタンなどを押すと、接続自体をやめる

ビデオチャットの終わりは、切断ボタンを押したらカメラを停止し、同時にDB上の自分のIDを消す。

DBへの接続などは、他のソースで実現しているが、

自分の取得したIDを変数に代入する
(このあとサーバーにPOST)
この相手のID取得を繰り返す
値が得られたら次のフロー
繰り返し中に割り込みで中断すると繰り返しを抜け、中止

という動きと、

なぜか切断ボタンを押してもカメラが終了しない

などscript の記述の順番も含め、
もろもろよくわかっておりません。

どなたかお助けを・・・



<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>PeerJS sample</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.min.js"></script>

<script>

    var key = "key";
    var myid = "myid";
    var toid = "toid";
    var myvideoid;
    var tovideoid;

    document.getElementById("key").innerHTML = key;
    document.getElementById("my_id").innerHTML = myid;
    document.getElementById("to_id").innerHTML = toid;
    document.getElementById("my_videoid").innerHTML = myvideoid;
    document.getElementById("to_videoid").innerHTML = tovideoid;


functioin disconnect() {
    localMediaStream.stop();
}
</script>


  <script>
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

  var myStream;
  var peer = new Peer({key: 'xxxxxxxxxx'});
//ここは peerの取得した ID固定値が入ります。




 function connect() {


    //相手のIDを手入力で入力された情報を取得する部分
    //ここをDBから相手のIDを取得するように変え変数に代入する

      var setOthersStream = function(stream){
        $('#others-video').prop('src', URL.createObjectURL(stream));
      };

      var setMyStream = function(stream){
        myStream = stream;
        $('#video').prop('src', URL.createObjectURL(stream));
      };

//ここで自分のIDを取得?
//サーバーのDBに自分IDを登録したい
      peer.on('open', function(id){
        $('#peer-id').text(id);
      });

//callボタンが押されたときに呼び出される?
//
      peer.on('call', function(call){
        call.answer(myStream);
        call.on('stream', setOthersStream);
      });


//ここはいつ?
      $(function(){
        navigator.getUserMedia({audio: true, video: true}, setMyStream, function(){});

        $('#call').on('click', function(){
          var call = peer.call($('#others-peer-id').val(), myStream);
          call.on('stream', setOthersStream);
        });
      });

      peer.on('error', function(e){
        console.log(e.message);
      });
}

  </script>
</head>

<body>

  <input type="button" name="connect" value="接続" onclick="connect()">
  <input type="button" name="disconnect" value="切断" onclick="disconnect()">



  <p>あなたのID : <span id="peer-id"></span></p>
  <div id="dial">
    <input type="text" id="others-peer-id" placeholder="相手のIDを入力" /><button id="call">コール</button>
  </div>

  <video id="video" autoplay muted></video>
  <video id="others-video" autoplay></video>

<table border="1">
    <tr>
        <td>key</td>
        <td><div class="key"></div></td>
    </tr>

    <tr>
        <td>myid</td>
         <td><span id="my_id"></span></td>
    </tr>
    <tr>
        <td>toid</td>
        <td><span id="to_id"></span></td>
    </tr>
    <tr>
        <td>myvideoid</td>
        <td><span id="my_videoid"></span></td>
    </tr>
    <tr>
        <td>tovideoid</td>
        <td><span id="to_videoid"></span></td>
    </tr>
</table>

</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

0

Peer JSのコードが参考になると思います。これをベースに、接続先IDのマッチング部分を追記するのが一番速いかと思います。

http://peerjs.com/examples

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/02/15 15:04

    コメントありがとうございます。
    コードが表示されていませんでした。
    上記サイトのサンプルを加工していじっている結果、
    よくわからない、のです

    キャンセル

  • 2015/02/15 15:08

    console.info('test');
    とか入れて、いつ呼ばれるか探ったりしてみましょう。

    キャンセル

check解決した方法

-2

ソースを一度に見ないで、
必要なところを順に組み込んだりして、
進めていき、なんとか希望の動きは出来ました。

カメラの停止が localMediaStream.stop();ではとまらないのですが
これは別のし

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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