• webrtc-m79-测试peerconnectionserver的webclient-p2p-demo

    1 背景

    webrtc的代码中有peerconnectionclient和peerconnectionserver的例子，但是没有对应的web端的例子，这里简单的写了一个测试例子，具体如下：

    2 具体操作

    2.1 操作流程

    2.2 测试效果

    使用webclient与peerconnectionclient的测试效果如下：

    3 前端代码

    1. <html>
    2. <head>
    3.     <title>webclient p2p demotitle>
    4.     <meta charset="utf-8">
    5.     <style>
    6.         .left_part {
    7.             width: 50%;
    8.             float: left;
    9.         }
    10.         .right_part {
    11.             width: 50%;
    12.             float: right;
    13.             overflow-y: scroll;
    14.         }
    15.     style>
    16.  
    17.     <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
    18. head>
    19.  
    20. <body>
    21.     <div class="right_part" id="left_part_container">
    22.         <div>
    23.             SignalServer:
    24.             <input type="text" id="signal_url" value="127.0.0.1:8888">
    25.             <button id="btn_sign_in">登入button>
    26.             <button id="btn_sign_out">登出button><br>
    27.  
    28.             <input type="text" id="selected_peerid_for_p2p" disabled value="不允许修改的文本">
    29.             <button id="btn_start_p2p" disabled>start_p2pbutton>
    30.         div>
    31.         <br>
    32.  
    33.         <table id="PeersTable">
    34.             <thead>
    35.                 <tr>
    36.                     <th>Nameth>
    37.                     <th>PeerIdth>
    38.                     <th>Statusth>
    39.                 tr>
    40.             thead>
    41.         table>
    42.     div>
    43.  
    44.     <div class="left_part" id="left_part_container">
    45.         <video controls autoplay id="rtc_video_play" height="500" style="width:100%">video>
    46.     div>
    47.  
    48.     <script type="text/javascript">
    49.         var myselfPeerId = -1;
    50.         var pc = new RTCPeerConnection({ "offerExtmapAllowMixed": false });
    51.         var datachannel = null;
    52.         var stream = new MediaStream();
    53.  
    54.         async function initPC() {
    55.             pc.addTransceiver("audio", {direction: "recvonly"});
    56.             pc.addTransceiver("video", {direction: "recvonly"});
    57.  
    58.             pc.onconnectionstatechange = function(event){
    59.                 console.log("connection state change: ", pc.connectionState);
    60.             };
    61.             
    62.             pc.onicecandidate = async (ev) => {
    63.                 console.log('=======>' + JSON.stringify(ev.candidate));        
    64.             };
    65.  
    66.             pc.ontrack = function(event) {
    67.                 stream.addTrack(event.track);                         
    68.             };
    69.             
    70.             datachannel = pc.createDataChannel('chat');
    71.  
    72.             datachannel.onopen = function(event) {
    73.                 console.log("datachannel onopen: ", event.data);
    74.             }
    75.  
    76.             datachannel.onmessage = function(event) {
    77.               console.log("receive message: ", event.data);
    78.             }
    79.  
    80.             datachannel.onerror = function(event) {
    81.               console.log("datachannel error: ", event.data);
    82.             }
    83.  
    84.             datachannel.onclose = function(event) {
    85.               console.log("datachannel close: ");
    86.             }                    
    87.         }
    88.  
    89.  
    90.         async function startP2P(signal_url) {
    91.             initPC();
    92.  
    93.             var offer = await pc.createOffer();
    94.             await pc.setLocalDescription(offer);
    95.  
    96.             let sendOfferPromise = await fetch(signal_url, {
    97.                 "method": "POST",
    98.                 "body": JSON.stringify(offer)
    99.             });
    100.  
    101.             if (sendOfferPromise.ok) {
    102.                 console.log("send offer: " + JSON.stringify(offer));                         
    103.             } else {
    104.                 alert("HTTP-Error: " + sendOfferPromise.status);
    105.             }               
    106.         }   
    107.  
    108.         async function nfyFromSignal(nfyPromise) {
    109.             let nfyString = await nfyPromise.text();
    110.             if (nfyString.includes("answer")) {
    111.                 console.log("receive answer: " + nfyString);
    112.                 pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(nfyString)));
    113.             } else if (nfyString.includes("candidate")) {
    114.                 console.log("receive candidate: " + nfyString);
    115.                 pc.addIceCandidate(new RTCIceCandidate(JSON.parse(nfyString)));
    116.             } else {
    117.                 let peersString = nfyString;
    118.                 // console.log("rsp: ", peersString)
    119.                 let peersChunk = peersString.split("\n");
    120.                 for (let i=0; ilength && peersChunk[i].length>0; ++i) {
    121.                   const peerColumns = peersChunk[i].split(",");
    122.                   // console.log("index: " + i + ", data: " + peerColumns)
    123.  
    124.                   // for example: kevin@home-pc,36,1
    125.                   // peerColumns[0]: peer_name
    126.                   // peerColumns[1]: peer_id
    127.                   // peerColumns[2]: peer_status
    128.                   // table's column index starts from 1, not 0
    129.                   const row_find_peer_id = $("#PeersTable tr:has(td:nth-child(2):contains('" + peerColumns[1] + "'))");
    130.                   if (row_find_peer_id.length > 0) {
    131.                     console.log("peerid:" + peerColumns[1] + ", status change from " + row_find_peer_id.find('td:nth-child(3)').text() + " to " + peerColumns[2]);
    132.                     row_find_peer_id.find('td:nth-child(3)').text(peerColumns[2]);
    133.                     continue;
    134.                   }
    135.  
    136.                   const row_find_peer_name = $("#PeersTable tr:has(td:nth-child(1):contains('" + peerColumns[0] + "'))");
    137.                   if (row_find_peer_name.length > 0) {
    138.                     console.log("peerid:" + peerColumns[1] + ", status change from " + row_find_peer_name.find('td:nth-child(3)').text() + " to " + peerColumns[2]);
    139.                     row_find_peer_name.find('td:nth-child(2)').text(peerColumns[1]);
    140.                     row_find_peer_name.find('td:nth-child(3)').text(peerColumns[2]);
    141.                     continue;
    142.                   }                  
    143.  
    144.                   const row_peer = $("");
    145.                   row_peer.append($("").text(peerColumns[0]));
    146.                   row_peer.append($("").text(peerColumns[1]));
    147.                   row_peer.append($("").text(peerColumns[2]));
    148.                   $("#PeersTable").append(row_peer);
    149.                 }                
    150.             }
    151.         }
    152.  
    153.         async function pendingWait(myself_peerid) {
    154.             const signal_url = document.getElementById("signal_url").value;
    155.             while (true) {
    156.                 let v = await fetch(`http://${signal_url}/wait?peer_id=${myself_peerid}`);
    157.                 nfyFromSignal(v);
    158.             }
    159.         }
    160.  
    161.         $('#btn_sign_in').on('click', async () => {
    162.             const signal_url = document.getElementById("signal_url").value;
    163.             let signinResultPromise = await fetch(`http://${signal_url}/sign_in`);
    164.             if (signinResultPromise.ok) {
    165.                 myselfPeerId = parseInt(signinResultPromise.headers.get("Pragma"));
    166.                 console.log("my peerid is: " + myselfPeerId);
    167.                 nfyFromSignal(signinResultPromise);
    168.                 pendingWait(myselfPeerId);               
    169.             } else {
    170.                 alert("HTTP-Error: " + signinResultPromise.status);
    171.             }
    172.         })        
    173.  
    174.         $('#btn_sign_out').on('click', async () => {
    175.             $("#PeersTable tbody").empty();
    176.             const signal_url = document.getElementById("signal_url").value;
    177.             let signoutResultPromise = await fetch(`http://${signal_url}/sign_out?peer_id=${myselfPeerId}`);
    178.             if (signoutResultPromise.ok) {
    179.                 console.log("sign_out: " + myselfPeerId + " successful");       
    180.             } else {
    181.                 alert("HTTP-Error: " + signoutResultPromise.status);
    182.             }
    183.         })
    184.  
    185.         $('#PeersTable').on('click', 'tr', function() {
    186.             const row_selected = $(this);
    187.             const row_selected_peer_id = parseInt(row_selected.find('td:nth-child(2)').text());
    188.             
    189.             if (row_selected_peer_id === myselfPeerId) {
    190.                 console.log("You should not choose yourself [" + myselfPeerId + "] to start p2p");
    191.                 $("#btn_start_p2p").prop("disabled", true);
    192.                 return;
    193.             }
    194.  
    195.             const row_selected_peer_id_status = parseInt(row_selected.find('td:nth-child(3)').text());
    196.             if (row_selected_peer_id_status === 1) {
    197.                 console.log("selected peerid: " + row_selected_peer_id);
    198.                 $('#selected_peerid_for_p2p').val(row_selected_peer_id);
    199.                 $("#btn_start_p2p").prop("disabled", false);                
    200.             } else {
    201.                 console.log("The peer [" + row_selected_peer_id + "] you choose is offline");
    202.                 $("#btn_start_p2p").prop("disabled", true);
    203.             }
    204.         })
    205.  
    206.         $('#btn_start_p2p').on('click', async () => {
    207.             const signal_url = document.getElementById("signal_url").value;
    208.             const remote_peer_id = $('#selected_peerid_for_p2p').val();
    209.             const sendmsg_url = `http://${signal_url}/message?peer_id=${myselfPeerId}&to=${remote_peer_id}`;
    210.             console.log("sendmsg url: " + sendmsg_url);
    211.  
    212.             // $('#rtc_video_play').show();
    213.             // $('#rtc_video_play').prop('muted', false);
    214.             $('#rtc_video_play').prop('srcObject', stream);
    215.  
    216.             console.log("Start P2P from [" + myselfPeerId + "] to [" + remote_peer_id + "]");
    217.             startP2P(sendmsg_url);
    218.         })
    219.  
    220.     script>
    221. body>
    222. html>

  • 相关阅读:
    R语言时间序列数据算术运算：使用diff函数计算时间序列数据的逐次差分、使用时间序列之间的除法计算相对变化率（乘以100获得百分比）
    Linux | 信号
    11 个最值得推荐的 Windows 数据恢复软件
    西门子S7-1500作为智能设备共享功能
    IP地址的分类，五分类编制CIDR以及子网的划分和子网掩码
    前端高频面试问题
    报式套接字通讯实例
    c++之类与对象
    C语言源代码系列-管理系统之学生选修课程系统
    【frp】cron定时检查zfrpc.service是否启动成功
  • 原文地址：https://blog.csdn.net/hclbeloved/article/details/132810159