私はMFFとGHで働いています。 sipjs.comにアクセスすると、他のブラウザーがWebRTCの友達であるかどうかを確認できます-登録せずに2つのコピーで自分を賞賛できます（Webカメラを持っている場合）、メッセージまたはファイルを送信します。 そして、これらすべてを1ページで。 面白くない。 あるページにいるときと、別のページにいるときとではどうでしょうか。 デモには少し調整が必要です...
すべての仕組み（私の理解では）：
WebRTCは、2つのUserAgent（つまり、2つのブラウザー、以下UA）ポイントツーポイントの接続であり、1つのブラウザーでキャプチャされたWebカメラからの信号が高速ストリームによって別のブラウザーに送信されます。
接続を確立してNATのストッケードを突破するには、SIPおよびSTUNサーバーが必要です。 両方のUAがSIPサーバーに登録されている必要があります。 「1234@myfreefreefreeswitch.ru」のようなもの。
名前が「1234 @ ...」でパスワードが「111」のUAは、SIPサーバー「myfreefreefreeswitch.ru」で承認され、次のように述べています。UA「5678 @ ...」に連絡して音声を送信したい。 両方がネットワーク上にある場合、サーバーはそれらを接続します。
ブラウザはユーザーに次のように尋ねます：「彼らはマイクを求めています。それを与えますか？」。 Voice-IPの提供と取得。
sipjs.onsip.comをSIP / STUNサーバーとして使用して、 sipjs.comのデモ例に基づいて2つの異なるコンピューターからビデオチャットを確認できます。
Sipjs.onsip.comは事前登録を必要としません。 それは名前を持つカップルUAを提供しています
「alice.random string@sipjs.onsip.com」および
「bob。同じランダムstring@sipjs.onsip.com 。 」
実際には「ボブ」。 または「アリス」。 必要ありません。 任意の一意の名前で接続できます。 しかし、これは下品です。
デモのランダムな行は、ページが開かれたときにJSによって生成され、何らかの理由でdocument.cookieでサーバーに転送されます。 Cookieは、SIPプロトコルとは関係ありません。明らかに、Cookieは他の何か（たとえば、新しい好奇心の強いユーザーを登録するため）に必要です。
2台のコンピューターからビデオチャットをチェックするには、httpサーバーがオプションで、2つのhtmlページで十分です（1つは「ボブです、アリスに連絡します」、もう1つは「私はアリス、ボブに連絡します」）。 1つのスクリプト。
ページはほとんど同じです（1つのテンプレートに従って作成されます）。 それらを開く前に、両方のページの1行を等しく修正する必要があります!!!
これは重要です!!! var token = '42c3';
42c3は長い行（英語の文字と数字）に対して修正する必要があります。修正しないと、ボブとアリスは修正していない人と競合します。
さらに、ある時点で回線が古くなり、すべてが機能しなくなる可能性があります。 両方のページの新しい行と置き換えます。
注意：このデモはsipjs.comからのものであり、onsip.comは計画どおりに使用されていません。 彼らが気分を害さないことを願っています-私たちはそれらを普及させます。
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Alice-tv</title> <script> var domain = 'sipjs.onsip.com'; var token = '42c3'; var d123 = new Date(); d123.setTime(d123.getTime() + 1000*60*60); // expires in 1 hour document.cookie = ('onsipToken=' + token + ';' + 'expires=' + d123.toUTCString() + ';'); var fromName = 'Alice'; var toName = 'Bob'; var fromURI = fromName.toLowerCase() + '.' + token + '@' + domain; var toURI = toName.toLowerCase() + '.' + token + '@' + domain; </script> <script src="https://rawgit.com/onsip/SIP.js/0.7.5/dist/sip-0.7.5.js"></script> <script src="demo.js"></script> </head> <body> <div class="content"> <div class="demo-window"> <div class="left"> <h4> </h4> <h5> </h5> </div> <div class="demo-view"> <video id="video" muted="muted"></video> </div> <button id="video-button" class="right" type="button">video</button> <div class="clearfix"></div> <div id="content-message"> <div id="message-display"> <p class="message"><span class="message-from"></span> <span class="message-body placeholder">No messages yet</span></p> </div> <textarea id="message-input" class="message-input" placeholder="Enter your message here!"></textarea> <br> <button id="message-button" class="right" type="button">send message</button> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Bob-tv</title> <script> var domain = 'sipjs.onsip.com'; var token = '42c3'; var d123 = new Date(); d123.setTime(d123.getTime() + 1000*60*60); // expires in 1 hour document.cookie = ('onsipToken=' + token + ';' + 'expires=' + d123.toUTCString() + ';'); var fromName = 'Bob'; var toName = 'Alice'; var fromURI = fromName.toLowerCase() + '.' + token + '@' + domain; var toURI = toName.toLowerCase() + '.' + token + '@' + domain; </script> <script src="https://rawgit.com/onsip/SIP.js/0.7.5/dist/sip-0.7.5.js"></script> <script src="demo.js"></script> </head> <body> <div class="content"> <div class="demo-window"> <div class="left"> <h4> </h4> <h5> </h5> </div> <div class="demo-view"> <video id="video" muted="muted"></video> </div> <button id="video-button" class="right" type="button">video</button> <div class="clearfix"></div> <div id="content-message"> <div id="message-display"> <p class="message"><span class="message-from"></span> <span class="message-body placeholder">No messages yet</span></p> </div> <textarea id="message-input" class="message-input" placeholder="Enter your message here!"></textarea> <br> <button id="message-button" class="right" type="button">send message</button> </div> </div> </div> </body> </html>
スクリプトは音声を送信しません（コンピューターはテレビのように叫び始めません）。 オーディオを有効にするには、2つの場所でfalseをtrueに修正する必要があります。
96行目：var options = mediaOptions（ false 、true、remoteRender、null）;
116-117行目：session = makeCall（userAgent、target、
偽真
function createUA(callerURI, displayName) { var configuration = { traceSip: true, uri: callerURI, displayName: displayName }; var userAgent = new SIP.UA(configuration); return userAgent; } function setUpMessageInterface(userAgent, target, messageRenderId, messageInputId, buttonId) { var messageRender = document.getElementById(messageRenderId); var messageInput = document.getElementById(messageInputId); var button = document.getElementById(buttonId); function sendMessage() { var msg = messageInput.value; if (msg !== '') { messageInput.value = ''; userAgent.message(target, msg); } } var noMessages = true; userAgent.on('message', function (msg) { if (noMessages) { noMessages = false; if (messageRender.childElementCount > 0) messageRender.removeChild(messageRender.children[0]); } var msgTag = createMsgTag(msg.remoteIdentity.displayName, msg.body); messageRender.appendChild(msgTag); }); button.addEventListener('click', function () { sendMessage(); }); messageInput.onkeydown = (function(e) { if(e.keyCode == 13 && !e.shiftKey) { e.preventDefault(); sendMessage(); } }); } function createMsgTag(from, msgBody) { var msgTag = document.createElement('p'); msgTag.className = 'message'; var fromTag = document.createElement('span'); fromTag.appendChild(document.createTextNode(from + ':')); var msgBodyTag = document.createElement('span'); msgBodyTag.appendChild(document.createTextNode(' ' + msgBody)); msgTag.appendChild(fromTag); msgTag.appendChild(msgBodyTag); return msgTag; } function mediaOptions(audio, video, remoteRender, localRender) { return { media: { constraints: { audio: audio, video: video }, render: { remote: remoteRender, local: localRender } } }; } function makeCall(userAgent, target, audio, video, remoteRender, localRender) { var options = mediaOptions(audio, video, remoteRender, localRender); var session = userAgent.invite('sip:' + target, options); return session; } function setUpVideoInterface(userAgent, target, remoteRenderId, buttonId) { var onCall = false; var session; var remoteRender = document.getElementById(remoteRenderId); var button = document.getElementById(buttonId); userAgent.on('invite', function (incomingSession) { onCall = true; session = incomingSession; var options = mediaOptions(false, true, remoteRender, null); button.firstChild.nodeValue = 'hang up'; session.accept(options); session.on('bye', function () { onCall = false; button.firstChild.nodeValue = 'video'; session = null; }); }); button.addEventListener('click', function () { if (onCall) { onCall = false; button.firstChild.nodeValue = 'video'; session.bye(); session = null; } else { onCall = true; button.firstChild.nodeValue = 'hang up'; session = makeCall(userAgent, target, false, true, remoteRender, null); session.on('bye', function () { onCall = false; button.firstChild.nodeValue = 'video'; session = null; }); } }); } //**************************** (function () { if (SIP.WebRTC.isSupported()) { window.fromUA = createUA(fromURI, fromName); var registrationFailed = false; var failRegistration = function () { registrationFailed = true; failInterfaceSetup(); }; fromUA.on('registered', setupInterfaces); fromUA.on('registrationFailed', failRegistration); window.onunload = function () { fromUA.stop(); }; function setupInterfaces() { setUpVideoInterface(fromUA, toURI, 'video', 'video-button'); setUpMessageInterface(fromUA, toURI, 'message-display', 'message-input', 'message-button'); } function failInterfaceSetup() { alert('Max registration limit hit. The app is disabled.'); } } })();
これをサーバーにインストールし、jinja2に精通している人向け
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>{{fromName}}-tv</title> <script> var domain = 'sipjs.onsip.com'; var token = '{{token}}'; var d123 = new Date(); d123.setTime(d123.getTime() + 1000*60*60); // expires in 1 hour document.cookie = ('onsipToken=' + token + ';' + 'expires=' + d123.toUTCString() + ';'); var fromName = '{{fromName}}'; var toName = '{{toName}}'; var fromURI = fromName.toLowerCase() + '.' + token + '@' + domain; var toURI = toName.toLowerCase() + '.' + token + '@' + domain; </script> <script src="https://rawgit.com/onsip/SIP.js/0.7.5/dist/sip-0.7.5.js"></script> <script src="{{request.static_url('mydoctor:static/demo.js')}}"></script> </head> <body> <div class="content"> <div class="demo-window"> <div class="left"> <h4>{{title}}</h4> <h5>{{comment}}</h5> </div> <div class="demo-view"> <video id="video" muted="muted"></video> </div> <button id="video-button" class="right" type="button">video</button> <div class="clearfix"></div> <div id="content-message"> <div id="message-display"> <p class="message"><span class="message-from"></span> <span class="message-body placeholder">No messages yet</span></p> </div> <textarea id="message-input" class="message-input" placeholder="Enter your message here!"></textarea> <br> <button id="message-button" class="right" type="button">send message</button> </div> </div> </div> </body> </html>
_token = uuid.uuid4().hex ... { 'title': ' ', 'comment': ' ', 'fromName':'Alice', 'toName':'Bob', 'token': _token } ... { 'title': ' ', 'comment': ' ', 'fromName':'Bob', 'toName':'Alice', 'token': _token }
アリスとボブの一意の名前拡張子は、起動時にサーバーを作成します。
SIPサーバーをインストールしようとしました。 FreeSWITCHを選択し、1日の設定を把握しましたが、設定できませんでした。音声が5（5）秒の遅延で到着し、ビデオはFSログにビデオ形式がサポートされていないという奇妙な記録でハングしました。
テキストとファイルは正常に送信されました。 FSは（ビデオ会議をセットアップするため、または他の目的のために）FS自体をすべて通過させようとしたようです。
SIP / STUNの専門家が笑って、不適格な点をマイナスして、どのSIP / STUNを選択し、どのように設定するかを説明してほしい。