mirror of
https://github.com/Ylianst/MeshCentral.git
synced 2024-12-26 23:25:53 -05:00
1 line
20 KiB
Handlebars
1 line
20 KiB
Handlebars
<!doctypehtml><html style=height:100%><title>{{{title}}} - Messenger</title><meta http-equiv=X-UA-Compatible content="IE=edge"><meta content="text/html;charset=utf-8"http-equiv=Content-Type><meta name=format-detection content="telephone=no"><link type=text/css href=styles/style.css media=screen rel=stylesheet title=CSS><link type=text/css href=styles/messenger.css media=screen rel=stylesheet title=CSS><script src=scripts/common-0.0.1.js></script><script src=scripts/filesaver.js></script><body style=font-family:Arial,Helvetica,sans-serif><div id=xtop style="position:absolute;left:0;right:0;top:0;height:38px;background-color:#036;color:#c8c8c8;box-shadow:3px 3px 10px gray"><div style=position:absolute;background-color:#036;right:0;height:38px><div id=notifyButton class="icon13 topButton"style=margin-right:4px;display:none title=ブラウザ通知を有効にする onclick=enableNotificationsButtonClick()></div><div id=fileButton class="icon4 topButton"title=ファイルを共有する style=display:none onclick=fileButtonClick()></div><div id=camButton class="icon2 topButton"title=カメラとマイクを有効にする style=display:none onclick=camButtonClick()></div><div id=micButton class="icon6 topButton"title=マイクを有効にする style=display:none onclick=micButtonClick()></div><div id=hangupButton class="icon11 topRedButton"title=電話を切る style=display:none onclick=hangUpButtonClick(1)></div></div><div style=padding-top:9px;padding-left:6px;font-size:20px;display:inline-block><b><span id=xtitle>MeshMessenger</span></b></div></div><div id=xmiddle style=position:absolute;left:0;right:0;top:38px;bottom:30px><div style=position:absolute;left:0;right:0;top:0;bottom:0;overflow-y:scroll><div id=xmsg style=position:absolute;left:0;right:0;bottom:0;padding:5px></div></div></div><div id=xbottom style=position:absolute;left:0;right:0;bottom:0;height:30px;background-color:#036><div style=position:absolute;left:5px;right:215px;bottom:4px;top:4px;background-color:#f0f8ff><input id=xouttext style="width:calc(100% - 5px)"onfocus=onUserInputFocus(1) onblur=onUserInputFocus(0)></div><input type=button id=sendButton value=送る style=position:absolute;right:110px;width:100px;top:4px onclick=xsend(event)> <input type=button id=clearButton value=クリア style=position:absolute;right:5px;width:100px;top:4px onclick=displayClear()></div><div id=remoteVideo style="position:absolute;right:24px;top:45px;width:320px;height:calc(240px + 30px);background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none"><div style=position:absolute;right:0;left:0;top:2.5px;text-align:center>リモート</div><video id=remoteVideoCanvas autoplay style="position:absolute;top:20px;left:0;width:100%;height:calc(100% - 30px);background-color:#000"></video></div><div id=localVideo style="position:absolute;right:24px;top:320px;width:160px;height:calc(120px + 30px);background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none"><div style=position:absolute;right:0;left:0;top:2.5px;text-align:center>地元</div><video id=localVideoCanvas autoplay muted style="position:absolute;top:20px;left:0;width:100%;height:calc(100% - 30px);background-color:#000"></video></div><input id=uploadFileInput type=file multiple style=display:none><script onunload=onUnLoad()>var userInputFocus=0,args=parseUriArgs(),socket=null,state=0,random=Math.random(),webrtcSessions={},webchannel=null,localStream=null,remoteStream=null,multiWebRtc=!0,userMediaSupport=0,notification=null;getUserMediaSupport(function(e){userMediaSupport=e});var webrtcconfiguration="{{{webrtconfig}}}";if(""==webrtcconfiguration)webrtcconfiguration=null;else try{webrtcconfiguration=JSON.parse(decodeURIComponent(webrtcconfiguration))}catch(e){console.log('Invalid WebRTC config: "'+webrtcconfiguration+'".'),webrtcconfiguration=null}var fileUploads=[],fileDownloads={},currentFileUpload=null,currentFileDownload=null;function onUserInputFocus(e){userInputFocus=e}function displayClear(){QH("xmsg",""),cancelAllFileTransfers(),fileUploads=[],fileDownloads={}}function getUserMediaSupport(i){try{navigator.mediaDevices.enumerateDevices().then(function(e){try{var t=0,n=0;e.forEach(function(e){"audioinput"===e.kind&&(t=1),"videoinput"===e.kind&&(n=1)}),0==t&&i(0),i(t+n)}catch(e){}})}catch(e){}}function displayControl(e){QA("xmsg",'<div style="clear:both"><div style="color:gray;float:left;margin-bottom:2px">'+e+"</div><div></div></div>"),Q("xmsg").scrollTop=Q("xmsg").scrollHeight}function displayLocalVideo(e){QV("localVideo",e),adjustVideoWindows()}function displayRemoteVideo(e){QV("remoteVideo",e),adjustVideoWindows()}function adjustVideoWindows(){var e="none"!=QS("remoteVideo").display;QS("localVideo").top=e?"320px":"45px"}function displayRemote(e){QA("xmsg",'<div style="clear:both"><div class="remoteBubble">'+e+"</div><div></div></div>"),Q("xmsg").scrollTop=Q("xmsg").scrollHeight,Notification&&QV("notifyButton","granted"!=Notification.permission),Notification&&"granted"==Notification.permission&&(null!=notification&&(notification.close(),notification=null),notification=args.title?new Notification("MeshMessenger - "+args.title,{body:e}):new Notification("MeshMessenger",{body:e}))}function xsend(e){null!=notification&&(notification.close(),notification=null),Notification&&QV("notifyButton","granted"!=Notification.permission);var t=Q("xouttext").value;0<t.length&&(Q("xouttext").value="",QA("xmsg",'<div style="clear:both"><div class="localBubble">'+t+"</div><div></div></div>"),Q("xmsg").scrollTop=Q("xmsg").scrollHeight,send({action:"chat",msg:t}))}function haltEvent(e){return e.preventDefault&&e.preventDefault(),e.stopPropagation&&e.stopPropagation(),!1}function parseUriArgs(){var e,t={},n=window.document.location.href.split(/[\?&|\=]/);for(i in n.splice(0,1),n)switch(i%2){case 0:e=decodeURIComponent(n[i]);break;case 1:t[e]=decodeURIComponent(n[i]);var i=parseInt(t[e]);i==t[e]&&(t[e]=i)}return t}function updateControls(){QE("sendButton",2==state),QE("clearButton",2==state),QE("xouttext",2==state),QV("fileButton",2==state),QV("camButton",webchannel&&webchannel.ok&&!localStream&&2==userMediaSupport),QV("micButton",webchannel&&webchannel.ok&&!localStream&&0<userMediaSupport),QV("hangupButton",webchannel&&webchannel.ok&&localStream)}function startWebRTC(t,e){if(null!=webrtcSessions[0]&&0==multiWebRtc)return webrtcSessions[0];var n=null;return"undefined"!=typeof RTCPeerConnection?n=new RTCPeerConnection(webrtcconfiguration):"undefined"!=typeof webkitRTCPeerConnection&&(n=new webkitRTCPeerConnection(webrtcconfiguration)),null==n?null:(n.id=t,n.onicecandidate=function(e){try{null!=e.candidate&&sendws({action:"webRtcIce",ice:e.candidate,id:this.id})}catch(e){}},n.oniceconnectionstatechange=function(){n&&"failed"==n.iceConnectionState&&(n.close(),webrtcSessions[n.id]&&delete webrtcSessions[n.id])},n.ondatachannel=function(e){(webchannel=e.channel).onmessage=function(e){processMessage(e.data,2)},webchannel.onopen=function(){webchannel.ok=!0,updateControls(),sendws({action:"rtcSwitch",v:0})},webchannel.onclose=function(e){webchannel&&webchannel.ok?disconnect():hangUpButtonClick(0)}},n.onnegotiationneeded=function(e){null==n.holdTimer&&(n.holdTimer=setTimeout(function(){n.holdTimer=null,n.createOffer(function(e){n.setLocalDescription(e,function(){sendws({action:"webRtcSdp",sdp:e,id:t})},function(){hangUpButtonClick(t)})},function(){hangUpButtonClick(t)})},20))},n.ontrack=function(e){var t=Q("remoteVideoCanvas");t.srcObject=remoteStream=e.streams[0],t.onloadedmetadata=function(e){t.play()},displayRemoteVideo(!0)},1==e&&((webchannel=n.createDataChannel("DataChannel",{})).onmessage=function(e){processMessage(e.data,2)},webchannel.onopen=function(){webchannel.ok=!0,updateControls(),sendws({action:"rtcSwitch",v:0})},webchannel.onclose=function(e){webchannel&&webchannel.ok?disconnect():hangUpButtonClick(0)}),webrtcSessions[t]=n)}function webRtcHandleOffer(i,e){var t=webrtcSessions[i];t&&t.setRemoteDescription(new RTCSessionDescription(e),function(){"offer"==e.type&&t.createAnswer(function(n){t.setLocalDescription(n,function(e,t){try{sendws({action:"webRtcSdp",sdp:n,id:i})}catch(e){}},function(){hangUpButtonClick(i)})},function(){hangUpButtonClick(i)})},function(){hangUpButtonClick(i)})}function performWebRtcSwitch(){webchannel&&webchannel.ok&&(sendws({action:"rtcSwitch",v:1}),webchannel.xoutBuffer=[])}function disconnect(){0<state&&displayControl("接続が閉じられました。"),1<state&&setTimeout(start,500),cancelAllFileTransfers(),hangUpButtonClick(0,!0),hangUpButtonClick(1,!0),hangUpButtonClick(2,!0),null!=socket&&(socket.close(),socket=null),updateControls(),state=0}function send(e){if(2==state)if("object"==typeof e&&(e=JSON.stringify(e)),webchannel&&webchannel.ok)null!=webchannel.xoutBuffer?webchannel.xoutBuffer.push(e):webchannel.send(e);else if(null!=socket)try{socket.send(e)}catch(e){}}function sendws(e){2==state&&("object"==typeof e&&(e=JSON.stringify(e)),null!=socket&&socket.send(e))}function webRtcIdSwitch(e){return 0==e?0:3-e}function processMessage(t,e){if("string"==typeof t){try{t=JSON.parse(t)}catch(e){return void console.log("Unable to parse",t)}switch(t.action){case"chat":displayRemote(t.msg);break;case"random":random>t.random&&startWebRTC(0,!0);break;case"webRtcSdp":webrtcSessions[webRtcIdSwitch(t.id)]||startWebRTC(webRtcIdSwitch(t.id),!1),webRtcHandleOffer(webRtcIdSwitch(t.id),t.sdp);break;case"webRtcIce":var n=webrtcSessions[webRtcIdSwitch(t.id)];if(n)try{n.addIceCandidate(new RTCIceCandidate(t.ice))}catch(e){}break;case"videoStop":hangUpButtonClick(webRtcIdSwitch(t.id),!0);break;case"rtcSwitch":switch(t.v){case 0:performWebRtcSwitch();break;case 1:sendws({action:"rtcSwitch",v:2});break;case 2:for(var i in webchannel.xoutBuffer)webchannel.send(webchannel.xoutBuffer[i]);delete webchannel.xoutBuffer;break;default:console.log("Unknown rtcSwitch value: "+t.action)}break;case"file":startFileDownload(t);break;case"fileUploadCancel":cancelFileTransfer(t.id);break;case"fileUploadStart":fileDownloads[t.id]&&((currentFileDownload=fileDownloads[t.id]).data="",changeFileInfo(t.id,2,0),continueFileDownload(t),send({action:"fileUploadAck",id:t.id}));break;case"fileUploadEnd":currentFileDownload&¤tFileDownload.id==t.id&&(changeFileInfo(t.id,3,200),currentFileDownload.done=1,currentFileDownload=null,send({action:"fileUploadAck",id:t.id})),currentFileDownload=null;break;case"fileUploadAck":continueFileUpload();break;case"fileData":currentFileDownload&¤tFileDownload.id==t.id&&(currentFileDownload.data+=t.data,changeFileInfo(t.id,2,200*currentFileDownload.data.length/currentFileDownload.size),send({action:"fileUploadAck",id:t.id}));break;default:console.log("Unhandled object data",t)}}else console.log("Unhandled data",typeof t,t)}function fileButtonClick(){var e=Q("uploadFileInput");1!=e.getAttribute("eventset")&&(e.setAttribute("eventset","1"),e.addEventListener("change",fileSelect,!1)),e.value=null,e.click()}function fileSelect(){if(2==state){var e=Q("uploadFileInput");if(10<e.files.length)displayControl("同時にアップロードできるファイルの上限は10です。");else for(var t=0;t<e.files.length;t++)if(0<e.files[t].size){var n=new FileReader;n.onload=function(e){this.xfile.data=e.target.result,startFileUpload(this.xfile)},n.xfile=e.files[t],n.readAsBinaryString(e.files[t])}}}function fileDrop(e){if(haltEvent(e),2==state&&null!=e.dataTransfer)if(10<e.dataTransfer.files.length)displayControl("同時にアップロードできるファイルの上限は10です。");else for(var t=0;t<e.dataTransfer.files.length;t++)if(0<e.dataTransfer.files[t].size){var n=new FileReader;n.onload=function(e){this.xfile.data=e.target.result,startFileUpload(this.xfile)},n.xfile=e.dataTransfer.files[t],n.readAsBinaryString(e.dataTransfer.files[t])}}function startFileUpload(e){2==state&&(e.id=Math.random(),fileUploads.push(e),QA("xmsg",'<div style="clear:both"></div><div id="FILEUP-'+e.id+'" class="localBubble" style="width:240px;cursor:pointer" onclick="cancelFileTransfer(\''+e.id+'\')"><div id="FILEUP-ICON-'+e.id+'" class="fileicon" style="float:left;width:32px;height:32px"></div><div><div id="FILEUP-NAME-'+e.id+'" style="height:16px;overflow:hidden;white-space:nowrap;" title="'+e.name+'">'+e.name+'</div><div style="width:200px;background-color:lightgray;margin-left:32px;border-radius:3px;margin-top:3px;height:11px"><div id="FILEUP-PROGRESS-'+e.id+'" style="width:0px;background-color:green;border-radius:3px;height:11px"> </div></div></div></div>'),Q("xmsg").scrollTop=Q("xmsg").scrollHeight,send({action:"file",size:e.size,id:e.id,type:e.type,name:e.name}),null==currentFileUpload&&continueFileUpload())}function startFileDownload(e){2==state&&(fileDownloads[e.id]=e,QA("xmsg",'<div style="clear:both"></div><div id="FILEUP-'+e.id+'" class="remoteBubble" style="width:240px;cursor:pointer" onclick="saveFileTransfer(\''+e.id+'\')"><div id="FILEUP-ICON-'+e.id+'" class="fileicon" style="float:left;width:32px;height:32px"></div><div><div id="FILEUP-NAME-'+e.id+'" style="height:16px;overflow:hidden;white-space:nowrap;" title="'+e.name+'">'+e.name+'</div><div style="width:200px;background-color:lightgray;margin-left:32px;border-radius:3px;margin-top:3px;height:11px"><div id="FILEUP-PROGRESS-'+e.id+'" style="width:0px;background-color:green;border-radius:3px;height:11px"> </div></div></div></div>'),Q("xmsg").scrollTop=Q("xmsg").scrollHeight)}function changeFileInfo(e,t,n,i){t&&(Q("FILEUP-ICON-"+e).classList.remove("fileicon"),Q("FILEUP-ICON-"+e).classList.remove("fileiconx"),Q("FILEUP-ICON-"+e).classList.remove("fileicontransfer"),Q("FILEUP-ICON-"+e).classList.remove("fileicondone"),Q("FILEUP-ICON-"+e).classList.add(["fileicon","fileiconx","fileicontransfer","fileicondone"][t])),n&&(QS("FILEUP-PROGRESS-"+e).width=n+"px"),i&&(QS("FILEUP-PROGRESS-"+e)["background-color"]=i)}function data2blob(e){for(var t=new Array(e.length),n=0;n<e.length;n++)t[n]=e.charCodeAt(n);return new Blob([new Uint8Array(t)])}function saveFileTransfer(e){var t=fileDownloads[e];t&&1==t.done&&saveAs(data2blob(t.data),t.name)}function cancelFileTransfer(e){null!=currentFileUpload&¤tFileUpload.id==e&&(currentFileUpload=null),null!=currentFileDownload&¤tFileDownload.id==e&&(currentFileDownload=null);var t=!1;if(fileDownloads[e]&&1!=fileDownloads[e].done)delete fileDownloads[e],t=!0;else for(var n in fileUploads)if(fileUploads[n].id==e){send({action:"fileUploadCancel",id:e}),fileUploads.splice(n,1),t=!0;break}t&&changeFileInfo(e,1,200,"gray")}function cancelAllFileTransfers(){for(var e in fileDownloads)cancelFileTransfer(fileDownloads[e].id);for(var e in fileUploads)cancelFileTransfer(fileUploads[e].id)}function continueFileUpload(){if(null==currentFileUpload){if(0==fileUploads.length)return;(currentFileUpload=fileUploads[0]).ptr=0,send({action:"fileUploadStart",size:currentFileUpload.size,id:currentFileUpload.id,type:currentFileUpload.type,name:currentFileUpload.name})}else if(currentFileUpload.size<=currentFileUpload.ptr)send({action:"fileUploadEnd",size:currentFileUpload.size,id:currentFileUpload.id,type:currentFileUpload.type,name:currentFileUpload.name}),changeFileInfo(currentFileUpload.id,3,200),fileUploads.splice(0,1),currentFileUpload=null,continueFileUpload();else{var e=Math.min(4e3,currentFileUpload.data.length-currentFileUpload.ptr),t=currentFileUpload.data.substring(currentFileUpload.ptr,currentFileUpload.ptr+e);send({action:"fileData",id:currentFileUpload.id,data:t}),currentFileUpload.ptr+=e,changeFileInfo(currentFileUpload.id,0,200*currentFileUpload.ptr/currentFileUpload.size)}}function continueFileDownload(e){send({action:"fileUploadAck",id:e.id})}function enableNotificationsButtonClick(){return Notification&&Notification.requestPermission().then(function(e){QV("notifyButton","granted"!=e)}),!1}function camButtonClick(){null==localStream&&startLocalStream({video:!0,audio:!0})}function micButtonClick(){null==localStream&&startLocalStream({video:!1,audio:!0})}function hangUpButtonClick(e,t){var n=Q("localVideoCanvas"),i=Q("remoteVideoCanvas"),o=webrtcSessions[1==multiWebRtc?e:0];if(0==e&&null!=webchannel){try{webchannel.close()}catch(e){}webchannel=null}if(o){if(1!=multiWebRtc&&0!=e||(o.ontrack=null,o.onremovetrack=null,o.onremovestream=null,o.onnicecandidate=null,o.oniceconnectionstatechange=null,o.onsignalingstatechange=null,o.onicegatheringstatechange=null,o.onnotificationneeded=null),1==e&&localStream){var a=localStream.getTracks();for(var l in a)a[l].stop();localStream=null}if(2==e&&remoteStream){a=remoteStream.getTracks();for(var l in a)a[l].stop();remoteStream=null}1!=multiWebRtc&&0!=e||(o.close(),delete webrtcSessions[e])}1==e?(n.removeAttribute("src"),n.removeAttribute("srcObject"),null!=localStream&&(localStream=null),displayLocalVideo(!1)):2==e&&(i.removeAttribute("src"),i.removeAttribute("srcObject"),displayRemoteVideo(!1)),1!=t&&send({action:"videoStop",id:e}),updateControls()}function startLocalStream(a){var l=1==multiWebRtc?1:0;null==localStream&&(1==multiWebRtc&&null!=webrtcSessions[1]||navigator.mediaDevices.getUserMedia&&(localStream=1,updateControls(),navigator.mediaDevices.getUserMedia(a).then(function(e){var t=(localStream=e).getTracks(),n=startWebRTC(l);if(1==a.video){var i=Q("localVideoCanvas");i.srcObject=e,i.onloadedmetadata=function(e){i.play()},displayLocalVideo(!0)}for(var o in t)n.addTrack(t[o],localStream)},function(e){displayControl(e.message+"."),hangUpButtonClick(1)})))}function start(){if(updateControls(),"string"==typeof args.id&&0<args.id.length){var e=window.location.protocol.replace("http","ws")+"//"+window.location.host+window.location.pathname.substring(0,window.location.pathname.lastIndexOf("/"))+"/meshrelay.ashx?id="+args.id;null!=args.auth&&""!=args.auth&&(e+="&auth="+args.auth),(socket=new WebSocket(e)).onopen=function(){state=1,displayControl("他のユーザーを待っています...")},socket.onerror=function(e){},socket.onclose=function(){disconnect()},socket.onmessage=function(e){if(state<2&&"string"==typeof e.data&&("c"==e.data||"cr"==e.data))return hangUpButtonClick(0,!0),hangUpButtonClick(1,!0),hangUpButtonClick(2,!0),displayControl("接続済み。"),state=2,updateControls(),void sendws({action:"random",random:random});2==state&&processMessage(e.data,1)}}else displayControl("エラー：接続キーが指定されていません。")}function onUnLoad(){for(var e=0;e<3;e++)webrtcSessions[e]&&(webrtcSessions[e].close(),delete webrtcSessions[e]);if(null!=webchannel){try{webchannel.close()}catch(e){}webchannel=null}if(null!=socket){try{socket.close()}catch(e){}socket=null}}args.title&&(QH("xtitle",args.title.split(" ").join(" ")),document.title=document.title+" - "+args.title),Notification&&QV("notifyButton","granted"!=Notification.permission),document.addEventListener("dragover",haltEvent,!1),document.addEventListener("dragleave",haltEvent,!1),document.addEventListener("drop",fileDrop,!1),document.onclick=function(e){Notification&&QV("notifyButton","granted"!=Notification.permission),null!=notification&&(notification.close(),notification=null)},document.onkeyup=function(e){if(Notification&&QV("notifyButton","granted"!=Notification.permission),null!=notification&&(notification.close(),notification=null),2==state&&8==e.keyCode&&0==userInputFocus){var t=Q("xouttext").value;0<t.length&&(Q("xouttext").value=t.substring(0,t.length-1))}if(0==userInputFocus)return haltEvent(e),!1},document.onkeypress=function(e){if(Notification&&QV("notifyButton","granted"!=Notification.permission),null!=notification&&(notification.close(),notification=null),2==state&&(13==e.keyCode?xsend(e):0==userInputFocus&&1==e.key.length&&(Q("xouttext").value=Q("xouttext").value+e.key)),0==userInputFocus)return haltEvent(e),!1},FileReader.prototype.readAsBinaryString||(FileReader.prototype.readAsBinaryString=function(e){var i="",o=this,a=new FileReader;a.onload=function(e){for(var t=new Uint8Array(a.result),n=0;n<t.byteLength;n++)i+=String.fromCharCode(t[n]);o.onload({target:{result:i}})},a.readAsArrayBuffer(e)}),start()</script> |