<html>
<head>
<title>main</title>
<link rel = "stylesheet" href = "https://cdn
.bootcdn
.net/ajax/libs/twitter-bootstrap/3
.4
.1/css/bootstrap-theme
.min
.css"/>
</head>
<style>
body {
background: #eee;
padding: 5% 0;
}
video {
background: black;
border: 1px solid gray;
}
.call-page {
position: relative;
display: block;
margin: 0 au
to;
width: 500px;
height: 500px;
}
#localVideo {
width: 150px;
height: 150px;
position: absolute;
top: 15px;
right: 15px;
}
#remoteVideo {
width: 500px;
height: 500px;
}
</style>
<body>
<div id = "callPage" class = "call-page">
<video id = "localVideo" au
toplay></video>
<video id = "remoteVideo" au
toplay></video>
<div class = "row
text-center">
<div class = "col-md-12">
<input id = "call
ToUsernameInput" type = "
text"
placeholder = "username
to call" />
<but
ton id = "callBtn" class = "btn-success btn">Call</but
ton>
<but
ton id = "hangUpBtn" class = "btn-danger btn">Hang Up</but
ton>
</div>
</div>
</div>
<script type="
text/javascript">
//our username
var connectedUser;
//connecting
to our signaling server
var conn = new WebSocket("ws://localhost:9999/video");
conn
.onopen = function () {
console
.log("Connected
to the signaling server");
};
//when we got a
message from a signaling server
conn
.on
message = function (msg) {
console
.log("Got
message", msg
.data);
var data = JSON
.parse(msg
.data);
switch(data
.type) {
case "login":
handleLogin(data
.success);
break;
//when
somebody wants
to call us
case "offer":
handleOffer(data
.offer, data
.name);
break;
case "answer":
handleAnswer(data
.answer);
break;
//when a remote peer
sends an ice candidate
to us
case "candidate":
handleCandidate(data
.candidate);
break;
case "leave":
handleLeave();
break;
default:
break;
}
};
conn
.onerror = function (err) {
console
.log("Got error", err);
};
//alias for
sending JSON encoded
messages
function
send(
message) {
//attach the other peer username
to our
messages
if (connectedUser) {
message.name = connectedUser;
}
conn
.send(JSON
.stringify(
message));
}
//******
//UI selec
tors block
//******
var callPage = document
.querySelec
tor("#callPage");
var call
ToUsernameInput = document
.querySelec
tor("#call
ToUsernameInput");
var callBtn = document
.querySelec
tor("#callBtn");
var hangUpBtn = document
.querySelec
tor("#hangUpBtn");
var localVideo = document
.querySelec
tor("#localVideo");
var remoteVideo = document
.querySelec
tor("#remoteVideo");
var yourConn;
var stream;
// callPage
.style
.display = "none";
var PeerConnection = (window
.webkitRTCPeerConnection || window
.mozRTCPeerConnection || window
.RTCPeerConnection || undefined);
var RTCSessionDescription = (window
.webkitRTCSessionDescription || window
.mozRTCSessionDescription || window
.RTCSessionDescription || undefined);
naviga
tor
.getUserMedia = (naviga
tor
.getUserMedia ||
naviga
tor
.webkitGetUserMedia ||
naviga
tor
.mozGetUserMedia ||
naviga
tor
.msGetUserMedia);
//**********************
//Starting a peer connection
//**********************
//getting local video stream
naviga
tor
.getUserMedia({ video: true, audio: true }, function (myStream) {
stream = myStream;
//displaying local video stream on the page
localVideo
.srcObject = stream;
//using Google public stun server
var configuration = {
"iceServers": []
};
yourConn = new PeerConnection(configuration);
// setup stream listening
yourConn
.addStream(stream);
//when a remote user adds stream
to the peer connection, we display it
yourConn
.onaddstream = function (e) {
remoteVideo
.srcObject = e
.stream;
};
// Setup ice handling
yourConn
.onicecandidate = function (event) {
if (event
.candidate) {
send({
type: "candidate",
candidate: event
.candidate
});
}
};
}, function (error) {
console
.log(error);
});
//initiating a call
callBtn
.addEventListener("click", function () {
var call
ToUsername = call
ToUsernameInput
.value;
if (call
ToUsername
.length > 0) {
connectedUser = call
ToUsername;
// create an offer
yourConn
.createOffer(function (offer) {
send({
type: "offer",
offer: offer
});
yourConn
.setLocalDescription(offer);
}, function (error) {
alert("Error when creating an offer");
});
}
});
//when
somebody sends us an offer
function handleOffer(offer, name) {
connectedUser = name;
yourConn
.setRemoteDescription(new RTCSessionDescription(offer));
//create an answer
to an offer
yourConn
.createAnswer(function (answer) {
yourConn
.setLocalDescription(answer);
send({
type: "answer",
answer: answer
});
}, function (error) {
alert("Error when creating an answer");
});
}
//when we got an answer from a remote user
function handleAnswer(answer) {
yourConn
.setRemoteDescription(new RTCSessionDescription(answer));
}
//when we got an ice candidate from a remote user
function handleCandidate(candidate) {
yourConn
.addIceCandidate(new RTCIceCandidate(candidate));
}
//hang up
hangUpBtn
.addEventListener("click", function () {
send({
type: "leave"
});
handleLeave();
});
function handleLeave() {
connectedUser = null;
remoteVideo
.src = null;
yourConn
.close();
yourConn
.onicecandidate = null;
yourConn
.onaddstream = null;
}
</script>
</body>
</html>
转vue
本文介绍了一个关于使用netsend命令的具体例子。通过发送消息到指定名称的用户，展示了如何利用该命令进行简单的网络消息传递。对于希望了解或使用netsend命令的读者来说，本文提供了一个易于理解的应用场景。
扫一扫
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
