Myu: WebRTC　LAN用P2P

WebRTCをシグナリングサーバを使い、P2P通信を試してみた。Node.jsを使用。

Websocketの使い方に慣れてないため、苦労した。JSON.parseなど、エンコード関係が大変。

https://dangerous-animal141.hatenablog.com/entry/2013/03/27/002818

Herokuに、HTMLとNode.jsを置いて、どのローカルネットワークでも、使えるようにしてみた。ビデオスタート、通信開始などスムーズにいくように、サンプルに少し手を入れてみた。

StreamデータはLan内のP2Pなので、わりとスムーズに通信できている。

Chromeではうまくいったが、Safariでうまくいかない。そこで、WindowsでiOSのsafariをデバッグする方法があった（うまく動作させるまでけっこう手がかかりましたが）ので、デバッグしたところ、peer.addStreamが古いらしく、peer.addTrackにする必要があることが判明。修正したところ、うまく動作しました。

https://qiita.com/massie_g/items/e1ba90637acb060772bb

**************signaling server**************
  var WebSocketServer = require("ws").Server
var http = require("http")
var express = require("express")

const {TextEncoder, TextDecoder} = require("util")

var app = express()
var port = process.env.PORT || 5000
app.use(express.static(__dirname + "/"))
var server = http.createServer(app)
server.listen(port)
console.log("http server listening on %d", port)

var wss = new WebSocketServer({server: server})
console.log("websocket server created")

wss.on("connection", function(ws) {
  console.log("websocket connection open")
   ws.on('message', function incoming(msg,flag) {
      wss.clients.forEach( (client)=>{
           if (isSame(ws, client)) {
               // let decodeS=new TextDecoder().decode(JSON.stringify(msg.data));
                console.log('- skip sender -'+msg);
               
            } else {
                client.send(msg,{binary:flag.binary});
               
                console.log('msg='+msg);
            }
      });
  });

ws.on("close", function() {
    console.log("websocket connection close")
  })
})

.outlined-button {
            background-color: #2196f3;
            border-radius: 1px;
            border: none;
            color: #fff;
            font-size: 24px;
            font-weight: 600;
            line-height: 26px;
            margin-left: 1px;
            outline: none;
            padding: 0 1px;
            text-align: center;
        }
        
        .setumei {
             font-size: 1vw;
              margin-left: 0.1vw;
            outline: none;
            padding: 0 0.1vw;
        }
    </style>
</head>
<body>
    <table width="100%" hight="70%"  >
        <tr>
            <td >
               <p style="font-size:2vw,text-align:center" title="両者のカメラをOnにすると、いずれか一方から接続できます。(LocalNetwork P2P専用)"><B>Webrtc For LAN</B> ver0.7β </p>
            </td>
            <td>
                  <button onclick="startVideo()" class="outlined-button" id="startB" >ビデオOn</button>
                  <button onclick="stopVideo()" class="outlined-button" id="stopB" >ビデオOff</button>
                  <label id="msgL"></label>
                  <button type="button" onclick="connect()" class="outlined-button" id="connectB" >接続</button>
                  <button type="button" onclick="hangUp()" class="outlined-button" id="hangupB" >切断</button> 
                  <input type="checkbox" id="echo"   name="echo" value="echo"  checked><label for="echo" title="スピーカの音量を下げるとハウリング防止になります。話すとき以外はマイクをオフにするのもいい方法です。" id="echo2" >エコー除去</label>
                  <input type="checkbox" id="videoflg"   name="videoflg" value="videoflg"  checked><label for="videoflg" title="画像を送信するかしないか設定できます" id="echo2" >カメラ</label>
                  <input type="checkbox" id="audioflg"   name="audioflg" value="audioflg"  checked><label for="audioflg" title="音声を送信するかしないか設定できます" id="echo2" >マイク</label>
            </td>
        </tr>
        <tr>
            <td colspan="2" width="100%">
                <table  width="100%">
                    <tr>
                        <td >
                            <div>
                                 <input type="checkbox" id="sosinhyoji"   name="sosinhyoji" value="sosinhyoji"  checked>
                                送信音声表示:<canvas width="20" height="20" id="canvas" title="自分のMICの音声が入っているか状況が確認できます">
                                  level meter
                                </canvas>
                            </div>
                            <div>
                                 <video id="local-video" autoplay control class="video-box-local" muted ></video>
                            </div>
                            <div>
                                <input type="text" id="sendtxt" name="sendtxt" size="15"><input id="sendbtn" type="button" value="送信" title="左欄に入力したメッセージを送信">
                            </div>
                            <div>
                               <ｔextarea cols="17" rows="10" id="txta"></ｔextarea> ←ｔをtに変更必要
                            </div>
                          
                        </td>
                        
                        <td style="width:75%">
                            
                              <video id="remote-video" autoplay control class="video-box-remote" ></video>
                        </td>
                    </tr>
                   
                </table>
                
            
            </td>
        </tr>
    </table>

var startB=document.getElementById("startB");
      var stopB=document.getElementById("stopB");
      var msgL=document.getElementById("msgL");
      var connectB=document.getElementById("connectB");
      var hangupB=document.getElementById("hangupB");
      var echoB=document.getElementById("echo");
      var echoB2=document.getElementById("echo2");
      
      var obj2=document.getElementById('txta');
      var stbyflg=false;
      var sosinhyojiflg=true;
      
      const canvas = document.querySelector('#canvas');
      const drawContext = canvas.getContext('2d');
      
      startB.style.display="inline";
      stopB.style.display="none";
      connectB.style.display="none";
      hangupB.style.display="none";
      echoB.style.display="inline";
      echoB2.style.display="inline";

RTCPeerConnection = window.RTCPeerConnection;

// connect-server

let ws=new WebSocket('wss://*****.herokuapp.com:443');  //*****はプロジェクト名

ws.onopen = function(event) {
        // nop.
       console.log('ws open');
     
        hangupB.style.display="none";
       msgL.innerText="Video Onにして待機してください";
       msgL.textContent="Video Onにして待機してください";
     //  stbyflg=false;
     
      
         
    };

ws.onerror = function(error) {
        // nop.
        console.log('ws error');
       // connectB.style.display="inline";
         hangupB.style.display="none";
   
             msgL.innerText="エラー：サーバが見つかりません";
             msgL.textContent="エラー：サーバが見つかりません";
         
            
        
       // stbyflg=false;
    };

ws.onclose = function(event) {
        // nop.
        console.log('ws close:'+event);
       // connectB.style.display="inline";
       // hangupB.style.display="none";
       
         if (msgL.innerText=="接続済"||msgL.textContent=="接続済"){
             
         }else{
            msgL.innerText="切断されました。再読込してください。";
            msgL.textContent="切断されました。再読込してください。";
         }

// stbyflg=false;
    };

ws.onmessage = function(event) {
        console.log(' msg recv');
      var edata=event.data;
        edata=edata.toString().replace(/\r\n/g,'').replace(/\r/g,'').replace(/\n/g,'');
        let message = JSON.parse(edata);
      
        if (message.type === 'offer') {
            let offer = new window.RTCSessionDescription(message);
            setOffer(offer);
         
        }else  if (message.type === 'answer') {
            let answer = new window.RTCSessionDescription(message);
            setAnswer(answer);
         
        }else {
             let jusin=JSON.stringify(message);
             let stmp='';
             
             if (jusin=='"standby"'){
                  stbyflg=true;
                 if(startB.style.display=="inline"){
                     //  stmp='相手が待機しています。カメラOnにすると接続できます。';
                        msgL.innerText="相手が待機しています。カメラOnにすると接続できます。";
                        msgL.textContent="相手が待機しています。カメラOnにすると接続できます。";
                       
                 }else{
                      connectB.style.display="inline";
                  //    stmp='相手も待機しています。接続できます。';
                       ws.send(JSON.stringify('standby2'));
                       msgL.innerText="相手も待機しています。接続できます。";
                        msgL.textContent="相手も待機しています。接続できます。";
                 }
                 
                
             }else if(jusin=='"standby2"'  ){
                      connectB.style.display="inline";
                    //  stmp='相手も待機しています。接続できます。';
                    msgL.innerText="相手も待機しています。接続できます。";
                    msgL.textContent="相手も待機しています。接続できます。";

}else {
               
                   stmp="受:"+jusin;
             }
             obj2.value=obj2.value+stmp+'\r\n';
             obj2.scrollTop = obj2.scrollHeight;
        }
    };
    
     document.addEventListener('DOMContentLoaded',function(e){
         var objx=document.getElementById('sendtxt');
         document.getElementById('sendbtn').addEventListener('click',function(e){
            ws.send(JSON.stringify(objx.value));
            obj2.value=obj2.value+"送:"+objx.value+'\r\n';
            obj2.scrollTop = obj2.scrollHeight;
                        objx.value="";
        });
        
        var vckbox=document.getElementById('videoflg');
        vckbox.addEventListener('click',function(e){
            if (vckbox.checked) {
                 updateVideoEnabled(true);
            }else{
                 updateVideoEnabled(false);
            }
           
          });
        
        
        
        var ackbox=document.getElementById('audioflg');
        ackbox.addEventListener('click',function(e){
            if (ackbox.checked){
                updateAudioEnabled(true);
            }else{
                updateAudioEnabled(false);
            }
             
          });
        
        var sckbox=document.getElementById('sosinhyoji');
        sckbox.addEventListener('click',function(e){
            if (sckbox.checked){
                sosinhyojiflg=true;
            }else{
                sosinhyojiflg=false;
            }
             
          });
        
        
        
      });

navigator.mediaDevices.getUserMedia({ video:true, audio:nc})
        .then(function(stream) {
            localStream = stream;
            localVideo.srcObject = stream;
            localVideo.play();
            
            startB.style.display="none";
            stopB.style.display="inline";
            echoB.style.display="none";
            echoB2.style.display="none";
            ws.send(JSON.stringify("standby"));
            
             if( stbyflg    ){
                      connectB.style.display="inline";
                 }
                 
            msgL.innerText="相手の準備ができるまで待機しています";
            msgL.textContent="相手の準備ができるまで待機しています";
            
            //************canvas shori
           if (sosinhyojiflg) {
               
 
             drawLevel(stream)
              
           }
         
  
            
        }).catch(function(error) {
            console.error('mediaDevice.getUserMedia() error:', error);
            return;
        });
        
        
    }
    
    function drawLevel(stream){
                              const audioContext = new AudioContext();
  const sourceNode = audioContext.createMediaStreamSource(stream);
  const analyserNode = audioContext.createAnalyser();
  //analyserNode.fftSize = 2048;
  analyserNode.fftSize = 32;
  sourceNode.connect(analyserNode);

function draw() {
    const barWidth = canvas.width / analyserNode.fftSize;
    const array = new Uint8Array(analyserNode.fftSize);
    analyserNode.getByteTimeDomainData(array);
    drawContext.fillStyle = 'rgba(0, 0, 0, 1)';
    
    drawContext.fillRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < analyserNode.fftSize; ++i) {
      const value = array[i];
      const percent = value / 255;
      const height = canvas.height * percent;
      const offset = canvas.height - height;

drawContext.fillStyle = 'lime';
      drawContext.fillRect(i * barWidth, offset, barWidth, 2);
    }

requestAnimationFrame(draw);
  }

draw();
  
        
        
            
    }

function stopVideo() {
        if (localStream == null) {
            return;
        }
        for (let track of localStream.getTracks()) {
            track.stop();
        }
        localStream = null;

// kill local video.
        localVideo.pause();
        localVideo.srcObject = null;
        
        stopB.style.display="none";
        startB.style.display="inline";
        echoB.style.display="inline";
        echoB2.style.display="inline";
    }

function connect() {
        if (peerConnection) {
            console.log('already connecting.')
            msgL.innerText="";
            msgL.textContent="";
            return;
        }
        makeOffer();

msgL.innerText="接続中...しばらくお待ちください";
        msgL.textContent="接続中...しばらくおまちください";

}

function makeAnswer() {
        if (!peerConnection) {
            return;
        }
        peerConnection.createAnswer()
        .then(function(sessionDescription) {
            return peerConnection.setLocalDescription(sessionDescription);
        }).then(function() {
            console.log('5 6 7--setLocalDescription() succsess in promise');
            msgL.innerText="接続済";
            msgL.textContent="接続済";
            connectB.style.display="none";
            hangupB.style.display="inline";
             obj2.value="";

}).catch(function(error) {
            console.log(error);
        });
    }

function prepareNewConnection() {
        let pcConfig = {"iceServers":[]};
        let peer = new RTCPeerConnection(pcConfig);

if ('ontrack' in peer) {
            console.log('-- ontrack');
            peer.ontrack = function(event) {
                let stream = event.streams[0];
                remoteVideo.srcObject = stream;
                remoteVideo.play();
            };
        } else {
            console.log('-- onaddstream');
            peer.onaddstream = function(event) {
             // peer.ontrack = function(event) {
                let stream = event.stream;
                remoteVideo.srcObject = stream;
                remoteVideo.play();
            }
        }

peer.onicecandidate = function(event) {
            if (event.candidate) {
                //
            } else {
                sdpValue = peer.localDescription.sdp;
                // sending server.
                // オブジェクトをJSONの文字列に置き換え.
                let message = JSON.stringify(peer.localDescription);
                ws.send(message);
            }
        }

peer.oniceconnectionstatechange = function() {
            if (peer.iceConnectionState === 'disconnected') {
                hangUp();
            }
        };

peer.onremovestream = function(event) {
            // kill remote video.
            remoteVideo.pause();
            remoteVideo.srcObject = null;
        }

// localStreamの追加.
        if (localStream) {
            //peer.addStream(localStream); //deprecated
           // peer.addTrack(localStream);
           // --- 新しい MediaTrack単位の追加 ---
           let videoSender = peer.addTrack(localStream.getVideoTracks()[0], localStream);
           let audioSender = peer.addTrack(localStream.getAudioTracks()[0], localStream);
        }

return peer;
    }

function hangUp() {
        if (peerConnection) {
            peerConnection.close();
            peerConnection = null;
            // kill remote video.
            remoteVideo.pause();
            remoteVideo.srcObject = null;
            
            hangupB.style.display="none";
            connectB.style.display="inline";
           // stbyflg=true;
            
            msgL.innerText="チャットのみ可";
            msgL.textContent="チャットのみ可";

}
    }
    
    //****************
    const updateVideoEnabled = (enabled) => {
     if (localStream) {
      localStream.getVideoTracks()[0].enabled = enabled
      }
     }
    const updateAudioEnabled = (enabled) => {
     if (localStream) {
      localStream.getAudioTracks()[0].enabled = enabled
      }
     }
    
</script>
</body>
</html>

Myu

2021年9月26日日曜日

WebRTC　LAN用P2P

0 件のコメント:

コメントを投稿

ブログアーカイブ

2021年9月26日日曜日

WebRTC LAN用P2P

0 件のコメント:

コメントを投稿

WebRTC　LAN用P2P