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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2540閲覧

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

it_solution_lab

総合スコア71

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/02/15 02:36

編集2015/02/15 06:03

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>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

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

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

色々ありがとうございました。

投稿2015/02/15 08:38

it_solution_lab

総合スコア71

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

http://peerjs.com/examples

投稿2015/02/15 04:31

matsubokkuri

総合スコア744

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

it_solution_lab

2015/02/15 06:04

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

2015/02/15 06:08

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問