Myu

2021年9月26日日曜日

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>

2021年9月20日月曜日

ランサムウエア対策としてのバックアップ

先日、職場にランサムウエアに対応するためにバックアップ方法を見直すように指示がきていた。いろいろな、システム障害への対策としてバックアップは、大切ですが、ランサムウエアは、ネットワーク上のバックアップも狙われるので、工夫が必要なようです。ネットでは、写真等は光学メディアに保存したほうがいいとか。NASではきびしいので、Linuxサーバーをバックアップ用として、Cronなど使って、rsync --link-destで重要なファイルのみ、とりにいけば、なんとかなりそうな気もするが。年々、セキュリティ対策がややこしくなっている。

2021年9月15日水曜日

急発進とマニュアル車

https://gendai.ismedia.jp/articles/-/76368?page=3

ヨーロッパはマニュアル車が主流のようだ。

このところ、また急発進事故がマスコミでよく報道される。

オートマ車というのは、フールプルーフとかフェイルセーフという考え方からすると、どうなんだろうと思うことがあります。

フールプルーフとは、機器の設計などについての考え方の一つで、利用者が操作や取り扱い方を誤っても危険が生じない、あるいは、そもそも誤った操作や危険な使い方ができないような構造や仕掛けを設計段階で組み込むこと。また、そのような仕組みや構造。

フェイルセーフとは、機器やシステムの設計などについての考え方の一つで、部品の故障や破損、操作ミス、誤作動などが発生した際に、なるべく安全な状態に移行するような仕組みにしておくこと。

2021年8月19日木曜日

リアカメラ補修

　リアカメラの取付金具も錆てボロボロになり、うまく固定できなくなってしまった。そこで、0.5ｍｍ厚アルミ板を加工して、右側のねじをはずして、ナンバープレートの裏にはさみこむ形にしてみた。6.5mm穴をあけ、ナンバープレートのねじを通した。アルミの上部に小さい穴をあけ、そこにリアカメラを取り付けた。

　うまく固定することができた。ただ、途中、ナンバープレートの右側のねじをはずすとき、ねじを折ってしまった。おれた部分が上に出ていれば、なんとかねじることもできるのだけど、ほとんど出ていない。どうしたものかと、しばらく悩みましたが、結局、折れたねじの部分に、5.5mm穴のドリルで穴をあけ、そのあと、強引に6mmのねじをねじ込んだら、うまくいった。

　念のため、アルミ板は透明テープでコーティングしてみた。（ナンバープレートもアルミだけれど、純粋のアルミでないらしい？ので、電蝕が心配で）

　ねじもステンレスねじに変えてみたのだけど、よく考えたらこちらも電蝕の可能性があるかと思い、鉄のねじにもどした。

2021年8月14日土曜日

鳥海山に久しぶりに登ってみた

先日、8/7（土）は、めずらしく雲がなかったので、鳥海山に登ってみた。鉾立から、秋田・山形両県がよく見えた。ただ、フェーン現象で暑かったので、無理せず、６合目あたりで引き返してきた。半分以上？は、県外ナンバーといった感じでした。

テスターについて

　格安デジタルテスターを昨年購入したが、最近になってDC電圧が全然関係ない値を示すことにきづいた。交換を申し出たが、どうやら中国製の半年保証のものらしく、交換してもらえなかった。仕方なく、少し高い（といっても２千円ちょっとなので十分安いですが）ものにしてみた。AstroAI　DM130Bという機種。この値段で、静電容量まで測定できるという。ちょっとしたDIYで使うには十分なテスターだ。あとは、故障しないことを願うだけですが。

2021年8月11日水曜日

ブースター接種に疑問? イギリス・ワクチン開発者

　オックスフォード大学　ポラード教授によると、ヒトの免疫システムは、何十年もワクチン接種を記憶するとのこと。免疫は弱まっても完全に消えることはないらしい。重症化する人への治療の進歩に焦点をしぼったほうがいいとのこと。

登録: 投稿 (Atom)