代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="wcmailone@163.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.0, user-scalable=yes" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 用来防止别人在框架里调用自己的页面 -->
<meta http-equiv="Window-target" content="_top">
<title>C+hat</title>
<script type="text/javascript">
//画板尺寸调整
var newSize = 0;
function resizeCanvas(id) {
newSize = parseInt($("#" + id).val());
$("." + id).html(newSize);
console.log(id);
if (id == 'resizeX') {
$("#whiteBoard").css('width', parseInt(newSize + 8));
$("#draw").attr('width', newSize);
} else {
$("#whiteBoard").css('height', parseInt(newSize + 80));
$("#draw").attr('height', newSize);
}
}
</script>
<!-- 把地址栏前的图标换成自己的 -->
<link rel="Shortcut Icon" type="text/css" href="img/favicon.ico">
<link rel="Shortcut icon" href="img/favicon.ico" />
<link rel="Bookmark" href="img/favicon.ico">
<style>
body{width:100%;height:768px;}
</style>
<script type="text/javascript">
//自适应布局
function myscreen() {
var sWidth = document.body.clientWidth;
var sHeight = document.body.clientHeight;
var chatDiv = document.getElementById("onChatBox");
var LoginBox = document.getElementById('loginBox');
var statusLoginBox = LoginBox.style.display;
if (sWidth <= 768 || statusLoginBox != 'none') {
//alert(sHeight);
//alert(statusLoginBox);
document.getElementById('whiteBoard').style.display = 'none';
chatDiv.style.border = "none";
} else {
document.getElementById('whiteBoard').style.display = 'block';
chatDiv.style.border = "solid";
chatDiv.style.right = '110px';
chatDiv.style.bottom = '10px';
}
}
</script>
</head>
<body onresize="myscreen();" onload="reloadEmojis()">
<div id="toolBarSlider">well well welcome</div>
<ul id="toolBar">
<li><a class="disChat">收起聊天</a></li>
<li><a class="disDraw">收起画板</a></li>
<li><a id="fileshare">文件共享</a></li>
<li><a id="videotalk">视频聊天</a></li>
<li><a id="FullScreen">进入全屏</a></li>
<li id="logout_li" class="logout"><a id="logout" disabled="disabled">Exit</a>
</ul>
<!-- 登录模块 开始-->
<div id="loginBox">
<div id="title">实时在线教育平台</div>
<hr color="lightgray" style="position:absolute;width:1000px;left:50%;margin-left:-500px;">
<!-- <input id="n" autocomplete="off" placeholder="Begin with a wonderful nickname..."/>
<button id="login">login</button> -->
<input type="hidden" name="hideUname" id="hideUname" value="">
<div id="btnGroup">
<input id="n" autocomplete="off" placeholder="Begin with a wonderful ID" value="" />
<input type="button" value="join" id="login" />
</div>
</div>
<!-- 登录模块 结束 -->
<!-- 聊天室模块 开始 -->
<div id="chatRoom">
<audio id="myAudio4" src="media/4.wav" hidden="true" autostart="false"> </audio>
<audio id="myAudio3" src="media/3.wav" hidden="true" autostart="false"> </audio>
<audio id="myAudio2" src="media/2.wav" hidden="true" autostart="false"> </audio>
<audio id="myAudio1" src="media/1.wav" hidden="true" autostart="false"> </audio>
<div id="onChatBox">
<div id="chatNav">
<ul>
<li><a id="showUserlist">【Online】</a></li>
<!-- <li><a id="facetime" onclick="return confirm('确定视频 ?');">FaceTime</a></li> -->
<li><a id="switchBg">透明</a></li>
<li><a class="disChat">收起聊天</a></li>
</ul>
</div>
<ul id="userlist"></ul>
<ul id="messages"></ul>
<ul id="emojibox"></ul>
<div id="chatCtrl">
<button id="showEmoji"></button>
<input id="m" autocomplete="off" placeholder="双击在线列表的用户名，就可以私聊TA哟！" />
<button id="send" disabled="disabled" title="Enter可直接发送消息!"></button>
</div>
</div>
</div>
<!-- 聊天室模块 结束 -->
<!-- 画板模块 开始 -->
<div id="whiteBoard">
<!--oncontextmenu="return false"屏蔽快捷菜单-->
<h2 style="color: white">白板沙盒<span id="test">鼠标位置</span></h2>
<canvas id="draw" width="980" height="570" oncontextmenu="return false"></canvas>
<div id="drawOptionSlider">显示绘画设置</div>
<div id="drawOption"> <br>
<label for="drawPanColor">画 板:</label><input id="drawPanColor" type="color" value="#ffffff" /><br>
<label for="penColor">画 笔:</label><input id="penColor" type="color" value="#ff0000"></input>
<label for="penPixel">笔 线:</label><input type="number" id="penPixel" min="1" max="20" value="6"></input>
<br><br><br><br>
<label for="eraserSize">橡皮尺寸</label>
<hr />
<input type="range" id="eraserSize" min="1" max="100" value="30" step="2"></input>
<span id="sizenum" class="degree">30 px</span><br>
<!-- <label>笔触校准</label><hr/>
<input type="range" id="fixPenX" min="-300" max="500" value="10" step="2"></input>
<span id="fixX" class="degree">X:10 px</span>
<input type="range" id="fixPenY" min="-300" max="500" value="85" step="2" ></input>
<span id="fixY" class="degree">Y:85 px</span>
<br> <br> <br> -->
<label>画板缩放</label>
<hr />
<input type="range" id="resizeX" min="200" max="1900" value="980" step="10" onchange="resizeCanvas('resizeX')"></input>
<span id="resizeXnum" class="resizeX">X:980 px</span>
<input type="range" id="resizeY" min="570" max="1080" value="570" step="10" onchange="resizeCanvas('resizeY')"></input>
<span id="resizeYnum" class="resizeY">Y:570 px</span>
<br> <br> <br>
<a href="javascript:;" class="a-upload">
<input type="file" id="imgOne"/>本地图片
</a><br><br>
<input id="shootPic" type="button" value="一键截屏" />
<!-- <input id="freeShootPic" type="button" value="自由截屏" /> -->
<input id="shareCanvas" type="button" value="画布共享" />
<input id="cleanScreen" type="button" value="清空画布" />
</div>
<img id="imgPre" src="" style="display: block;" />
</div>
<!-- 画板模块 结束 -->
<!-- 视频模块 结束 -->
<div id="faceBoard">
<video id="myself" width=100 height=70 autoplay loop></video>
<video id="others" class="others" width=100 height=70 autoplay loop></video>
<canvas id="localVideo" width=100 height=70></canvas>
</div>
<!-- 视频模块 结束 -->
<!--<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>-->
<!-- <script src="http://code.jquery.com/jquery-1.11.1.js"></script>-->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/socket.io.js"></script>
<script type="text/javascript">
$(function() {
$('#n').focus();
//鼠标靠近画板左侧边缘处显示工具栏
$("body").mousemove(function(e) {
var moX = e.pageX;
var moY = e.pageY;
if (moY > 210) {
$("#toolBar").show(200);
$("#toolBar").removeClass('rollDown');
}
});
$("#toolBarSlider").mouseover(function(e) {
$("#toolBar").addClass('rollDown');
});
//或是点击slider
$("#toolBarSlider").click(function(e) {
$("#toolBar").addClass('rollDown');
$("#toolBarSlider").css('display', 'none');
// $("#toolBar").animate({'height':240},200);
// $("#toolBarSlider").animate({'height':0},200);
return false;
});
$("body").click(function(e) {
var ifLogin = $('#loginBox').css('display');
if (ifLogin != 'block') {
// $("#toolBar").animate({'height':0},200);
// $("#toolBarSlider").animate({'height':40},200);
$("#toolBar").removeClass('rollDown');
$("#toolBarSlider").css('display', 'block');
//$("#toolBarSlider").show(200);
}
});
})
</script>
<script type="text/javascript">
//加载聊天表情列表
function reloadEmojis() {
var emojiArr = [
{ 'src': 'img/face/01.jpeg', 'alt': '给你个眼神' },
{ 'src': 'img/face/02.jpg', 'alt': '别装了' },
{ 'src': 'img/face/03.png', 'alt': '想表达啥' },
{ 'src': 'img/face/04.jpeg', 'alt': '表哥救命' },
{ 'src': 'img/face/05.jpg', 'alt': '你是sb' },
{ 'src': 'img/face/06.jpeg', 'alt': '活不过今天' },
{ 'src': 'img/face/07.jpg', 'alt': '走，打死你' },
{ 'src': 'img/face/08.jpeg', 'alt': '握日' },
{ 'src': 'img/face/09.jpeg', 'alt': '你以为' },
]
for (var i = emojiArr.length - 1; i >= 0; i--) {
var emojiItem = '<li class="emojia"><img class="emoji" src="' + emojiArr[i].src + '" alt="' + emojiArr[i].alt + '"><span>' + emojiArr[i].alt + '</span></li>';
document.getElementById('emojibox').innerHTML += emojiItem;
}
}
// 全屏显示函数
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
//退出全屏函数
function exitFullscreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}
$(function() {
//进入全屏、退出全屏
$("#FullScreen").click(function() {
var curStatus = $(this).text();
if (curStatus == "进入全屏") {
$(this).text("退出全屏");
launchFullscreen(document.documentElement)
} else {
$(this).text("进入全屏");
exitFullscreen();
}
})
// 主页面鼠标右键、F5刷新事件控制
//禁止刷新
// $(window).bind('beforeunload',function(e){
// return false;
// });
$(document).keydown(function(event) {
var code = event.keyCode;
if (code == 116) {
alert("禁止刷新");
return false;
}
if (code == 13) {
//按下enter按钮，使用trigger模拟#send的click事件，发送消息
$("#send").trigger('click');
}
});
//事件冒泡处理 禁止右键 点击whiteboard区域终止于此，不再执行$("body").mousedown
$("body").mousedown(function(e) {
if (e.which == 3) {
alert("此页面仅画板部分允许触发右键！");
return false;
}
});
$("#draw,#messages").mousedown(function(e) {
return false;
});
$('#switchBg').click(function() {
if ($("#switchBg").text() == '透明') {
$("#onChatBox").css('background', 'transparent');
$("#chatRoom").css('background', 'transparent');
$("#switchBg").text("雅黑")
} else {
$("#onChatBox").css('background', 'black');
$("#chatRoom").css('background', 'black');
$("#switchBg").text("透明")
}
})
// 折叠聊天框
$('.disChat').click(function() {
if ($(this).text() == '收起聊天') {
$("#chatRoom").hide(300);
$(".disChat").text("展开聊天");
} else {
$("#chatRoom").show(300)
$(".disChat").text("收起聊天")
}
})
//折叠画板
$('.disDraw').click(function() {
if ($(this).text() == '收起画板') {
$("#whiteBoard").hide(300);
$(".disDraw").text("展开画板");
} else {
$("#whiteBoard").show(300)
$(".disDraw").text("收起画板")
}
})
//这个地址根据自己机器所在局域网的地址修改
//var baseURL="http://wcdemo.in.3322.org:17639";//公yun
//var baseURL="http://192.168.1.103:3001";//根据本地ip配置，可以在同一网络环境下进行访问
var baseURL = "http://127.0.0.1:3001"; //本机多浏览器窗口测试
//判断是否拥有摄像头支持
$('#videotalk').click(function() {
confirm(
"视频聊天",
"页面将会获取您的音视频多媒体设备,确认开启视频聊天吗？",
function(isConfirm) {
if (isConfirm) {
// if (navigator.getUserMedia) {
// //var videoURL=baseURL+"/video.html?"+$("#hideUname").val();
// var videoURL=baseURL+"/video.html?room";
// window.open(videoURL,"_blank","toolbar=no, location=yes, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=1366, height=768");
// }
// else{
// alert("getUserMedia not supported");
// return ;
// }
var videoURL = baseURL + "/video.html?video";
window.open(videoURL, "_blank", "toolbar=no, location=yes, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=1366, height=768");
} else {
alert(
"放弃视频",
"您已放弃视频会话",
function() {}, {
width: 300,
height: 230,
type: 'info',
confirmButtonText: 'OK'
}
)
}
}, {
width: 300,
height: 230,
type: 'question',
confirmButtonText: 'YES',
cancelButtonText: 'NO'
}
);
})
//新窗口打开文件发送
$('#fileshare').click(function() {
var fromU = $("#hideUname").val();
//var videoURL=baseURL+"/sendfile.html?"+fromU;
var videoURL = baseURL + "/sendfile.html?file";
//var videoURL=baseURL+"/sendfile.html";
window.open(videoURL, "_blank", "toolbar=no, location=yes, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=430, height=300");
});
});
</script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- 引入弹出层插件 -->
<link rel="stylesheet" href="lib/jquery-alert/BeAlert.css">
<script src="lib/jquery-alert/BeAlert.js"></script>
<script type="text/javascript" src="js/client.js"></script>
<script type="text/javascript" src="js/whiteBoard.js"></script>
<script type="text/javascript" src="js/wc_piczoomIn.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手