<meta charset="utf-8">
<html>
<head>
<title>title</title>
<style type="text/css">
#msg-box{
float: left;
height: 300px;
width: 800px;
border: 1px solid #000;
overflow-y: scroll
}
#user-box{
float: left;
height: 300px;
width: 100px;
border: 1px solid #000;
overflow-y: scroll
}
.mark{
cursor: pointer
}
.mark:hover{
color: blue
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<center>
<video id="video" width="100" height="100" autoplay></video>
<input type="button" value="开启摄像头" onclick="aa()">
</center>
<div style="width:100%">
<div id="msg-box"></div>
<div id="user-box"></div>
</div>
<div style="clear:both">
<textarea id="msg" cols="30" rows="4"></textarea>
<br />
<input type="button" value="发送消息" id="send" />
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var nickname;
var socket;
var room = '<?= $_GET['room']?>';
nickname = window.prompt('请输入您的昵称：');
if (!nickname) {
alert('不能为空');
location.reload();
} else {
socket = new WebSocket('ws://127.0.0.1:9795');
// console.log(socket);
socket.onopen = function (Event) {
var data = {
act: 'login',
nickname: nickname,
room: room
};
socket.send(JSON.stringify(data));
};
$('#send').click(function () {
var con = $('#msg').val();
var preg = /^@(.*)[\r\n]/;
if (preg.test(con)) {
var match = con.match(preg);
var content = con.match(/^@.*[\r\n]([\s\S]*)/);
var data = {
act: '@',
from: nickname,
to: match[1],
con: content[1],
room: room
};
} else {
var data = {
act: 'msg',
nickname: nickname,
con: con,
room: room
};
}
$('#msg').val('').focus();
socket.send(JSON.stringify(data));
});
socket.onmessage = function (Event) {
var data = JSON.parse(Event.data);
console.log(data);
if (data.msg_type == 'login' || data.msg_type == 'logout') {
var html = '<p>通知：' + data.msg + '</p>';
}else if(data.msg_type == '@me'){
if(data.from == nickname){
var html = '<p>你对【' + data.to + '】说：' + data.msg + '</p>';
}else{
var html = '<p>【' + data.from + '】对你说：' + data.msg + '</p>';
}
} else {
var html = '<p>' + data.nickname + '：' + data.msg + '</p>';
}
updateUsers(data.users);
$('#msg-box').append(html);
$('#msg-box').scrollTop($('#msg-box')[0].scrollHeight);
};
}
function updateUsers(users) {
$('#user-box').empty();
$.each(users, function () {
$('#user-box').append('<p class="mark">' + this + '</p>');
});
}
$(document).on('click', '.mark', function () {
var name = $(this).text();
var value = "@" + name + "\r\n";
$('#msg').val(value).focus();
});
function aa(){
var promisifiedOldGUM = function(constraints) {
/ // Be the first to get getUserMedia, if exists
var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
// some browsers just don't implement it - return a promise not rejected with an error keep Consistent interface
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser-getUserMedia is not implemented in this browser'));
}
// Otherwise, the call wraps in an old navigator. getusermedia promise
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
// old browsers may not implement mediadevices at all, so we set an empty object first
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// Some browsers partially implement mediadevices. We can't just specify an object
// getUserMedia as it will override the existing properties. .
// Here, we're missing out on adding the getUserMedia property.
.if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = promisifiedOldGUM; }
//
Prefer camera resolution nearest to 1280x720.var
constraints = {
audio: true,
video: {
width: 1280,
height: 720
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});
}
</script>
</body>
</html>
<html>
<head>
<title>title</title>
<style type="text/css">
#msg-box{
float: left;
height: 300px;
width: 800px;
border: 1px solid #000;
overflow-y: scroll
}
#user-box{
float: left;
height: 300px;
width: 100px;
border: 1px solid #000;
overflow-y: scroll
}
.mark{
cursor: pointer
}
.mark:hover{
color: blue
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<center>
<video id="video" width="100" height="100" autoplay></video>
<input type="button" value="开启摄像头" onclick="aa()">
</center>
<div style="width:100%">
<div id="msg-box"></div>
<div id="user-box"></div>
</div>
<div style="clear:both">
<textarea id="msg" cols="30" rows="4"></textarea>
<br />
<input type="button" value="发送消息" id="send" />
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var nickname;
var socket;
var room = '<?= $_GET['room']?>';
nickname = window.prompt('请输入您的昵称：');
if (!nickname) {
alert('不能为空');
location.reload();
} else {
socket = new WebSocket('ws://127.0.0.1:9795');
// console.log(socket);
socket.onopen = function (Event) {
var data = {
act: 'login',
nickname: nickname,
room: room
};
socket.send(JSON.stringify(data));
};
$('#send').click(function () {
var con = $('#msg').val();
var preg = /^@(.*)[\r\n]/;
if (preg.test(con)) {
var match = con.match(preg);
var content = con.match(/^@.*[\r\n]([\s\S]*)/);
var data = {
act: '@',
from: nickname,
to: match[1],
con: content[1],
room: room
};
} else {
var data = {
act: 'msg',
nickname: nickname,
con: con,
room: room
};
}
$('#msg').val('').focus();
socket.send(JSON.stringify(data));
});
socket.onmessage = function (Event) {
var data = JSON.parse(Event.data);
console.log(data);
if (data.msg_type == 'login' || data.msg_type == 'logout') {
var html = '<p>通知：' + data.msg + '</p>';
}else if(data.msg_type == '@me'){
if(data.from == nickname){
var html = '<p>你对【' + data.to + '】说：' + data.msg + '</p>';
}else{
var html = '<p>【' + data.from + '】对你说：' + data.msg + '</p>';
}
} else {
var html = '<p>' + data.nickname + '：' + data.msg + '</p>';
}
updateUsers(data.users);
$('#msg-box').append(html);
$('#msg-box').scrollTop($('#msg-box')[0].scrollHeight);
};
}
function updateUsers(users) {
$('#user-box').empty();
$.each(users, function () {
$('#user-box').append('<p class="mark">' + this + '</p>');
});
}
$(document).on('click', '.mark', function () {
var name = $(this).text();
var value = "@" + name + "\r\n";
$('#msg').val(value).focus();
});
function aa(){
var promisifiedOldGUM = function(constraints) {
/ // Be the first to get getUserMedia, if exists
var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
// some browsers just don't implement it - return a promise not rejected with an error keep Consistent interface
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser-getUserMedia is not implemented in this browser'));
}
// Otherwise, the call wraps in an old navigator. getusermedia promise
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
// old browsers may not implement mediadevices at all, so we set an empty object first
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// Some browsers partially implement mediadevices. We can't just specify an object
// getUserMedia as it will override the existing properties. .
// Here, we're missing out on adding the getUserMedia property.
.if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = promisifiedOldGUM; }
//
Prefer camera resolution nearest to 1280x720.var
constraints = {
audio: true,
video: {
width: 1280,
height: 720
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});
}
</script>
</body>
</html>