HTML+JS简单使用WebRTC(前端篇) - ToB企服应用市场:ToB评测及商务社交产业平台

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100%;
}
.nav {
width: 100%;
height: 50px;
background-color: rgba(91, 99, 120, 0.8);
display: flex;
align-items: center;
justify-content: space-between;
}
.flag {
display: flex;
align-items: center;
}
.nav img {
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 30px;
margin-right: 10px;
}
.title {
/* margin-right: 100px; */
line-height: 50px;
color: white;
}
.nav a {
padding: 0 10px;
color: white;
text-decoration: none;
}
.page {
margin-right: 30px;
}
.container {
width: 1000px;
margin: 0 auto;
height: calc(100% - 50px);
display: flex;
justify-content: space-between;
}
.left {
width: 200px;
height: 100%;
}
.card {
background-color: rgba(224, 227, 233, 0.8);
border-radius: 10px;
padding: 30px;
}
.card img {
width: 140px;
height: 140px;
border-radius: 70px;
}
.card h3 {
text-align: center;
padding: 10px 0;
}
.card a {
display: block;
text-align: center;
color: gray;
text-decoration: none;
margin-bottom: 10px;
}
.conter {
display: flex;
justify-content: space-around;
padding: 5px;
}
.right {
width: 795px;
height: 100%;
background-color: rgba(224, 227, 233, 0.8);
border-radius: 10px;
padding: 20px;
overflow: auto;
}
.login_container {
width: 100%;
height: calc(100% - 50px);
display: flex;
justify-content: center;
align-items: center;
}
.login_dialog {
width: 500px;
height: 350px;
background-color: rgba(222, 220, 220, 0.8);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
table {
margin-bottom: 50px;
}
th {
font-size: 22px;
height: 90px;
}
td {
text-align: center;
height: 50px;
width: 100px;
}
#username,
#password,
#password2 {
height: 40px;
font-size: 18px;
text-indent: 10px;
border-radius: 8px;
border-color: #848688;
}
#submit {
width: 330px;
height: 40px;
background-color: orange;
color: white;
font-size: 18px;
border: none;
border-radius: 5px;
}
#submit:hover {
background-color: gray;
}
</style>
</head>
<body>
<div class="nav">
<div class="flag">
<div class="title">WebRTC</div>
</div>
<div class="page">
</div>
</div>
<div class="login_container">
<div class="login_dialog">
<table>
<tr>
<th colspan="2">登录</th>
</tr>
<tr>
<td class="t1">用户名</td>
<td><input type="text" id="username"></td>
</tr>
<tr>
<td class="t1">密码</td>
<td><input type="password" id="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交" id="submit" onclick="login()"></td>
</tr>
</table>
</div>
</div>
<script>
function login() {
// 1.参数校验
var username = jQuery("#username");
var password = jQuery("#password");
if (username.val().trim() == "") {
username.focus();
alert("请输入用户名!")
return false;
}
if (password.val().trim() == "") {
username.focus();
alert("请输入密码!");
return false;
}
// 2.将参数提交给后端
jQuery.ajax({
//注意你是不是前后端分离启动了，url要写对
url: "/user/login",
type: "POST",
data: {
"username": username.val().trim(),
"password": password.val().trim()
},
success: function (res) {
console.log(res);
// 3.将结果返回给用户
if (res.flag) {
// 跳转到主页
//注意你是不是前后端分离启动了，url要写对
location.href = "main.html?localUser=" + username.val().trim();
} else {
alert("登录失败，用户名或密码错误！");
}
}
});
}
</script>
</body>
</html>

复制代码

const queryString = window.location.search;
// 使用URLSearchParams API来解析查询字符串
const urlParams = new URLSearchParams(queryString);
// 获取名为 "localUser" 的参数值
const localUser = urlParams.get('localUser');
if(localUser==null){
location.href="login.html"
}

复制代码

callBtn.addEventListener("click", function () {
var callToUsername = inputUser.value;
if (callToUsername.length > 0) {
connectedUser = callToUsername;
// 创建一个offer，自己A存一份，发给对方B存一份
yourConn.createOffer().then( async function (offer){
await yourConn.setLocalDescription(offer)
await send({
type:"offer",
sdp:offer
})
console.log("发送offer")
}).catch(err=>{
console.log(err)
})
}
});

复制代码

var callToUsername = inputUser.value;

复制代码

/* 进入页面就连接至信令服务器 */
var conn = new WebSocket("ws://localhost:8080/video");

复制代码

/* 2、进入页面就连接至信令服务器 */
var conn = new WebSocket("ws://localhost:8080/video");
//监听onopen事件，在连接成功时调用
conn.onopen = function () {
console.log("Connected to the signaling server");
};
//监听onmessage事件，服务器发送消息过来会调用这个方法
conn.onmessage = function (msg) {
console.log("Got message", msg.data);
var data = JSON.parse(msg.data);
switch (data.type) {
case "offer":
handleOffer(data.sdp, data.from);
break;
case "answer":
handleAnswer(data.sdp);
break;
case "candidate":
handleCandidate(data.sdp);
break;
case "leave":
handleLeave();
break;
default:
break;
}
};
//连接发生错误的时候调用
conn.onerror = function (err) {
console.log("Got error", err);
};

复制代码

var inputUser = document.querySelector(".inputUser");
var callBtn = document.querySelector(".callBtn");
var hangUpBtn = document.querySelector(".hangUpBtn");
var localVideo = document.querySelector(".localVideo");
var remoteVideo = document.querySelector(".remoteVideo");
var yourConn;
var stream;
//获取PeerConnection
var PeerConnection = (window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.RTCPeerConnection || undefined);
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
//获取本地媒体
navigator.getUserMedia({ video: true, audio: true }, function (myStream) {
stream = myStream;
//将获取到的本地媒体流设置到页面展示
localVideo.srcObject = stream;
//需要一个给PeerConnection配置一个stun服务器，可以直接用google的，以便获取双方的网络信息
var configuration = {
"iceServers": [
{
"urls": "stun:stun.l.google.com:19302"
}
]
};
// 创建一个自己A 的连接
yourConn = new PeerConnection(configuration);
// 把自己A的视频流加入到自己A的连接中
yourConn.addStream(stream);
//监听对方B的视频流，成功连接对方后将会触发，将其加入到页面展示
yourConn.onaddstream = function (e) {
remoteVideo.srcObject = e.stream;
};
//为了方便测试，写了一个这个，监听连接信号状态的改变
yourConn.onsignalingstatechange = function () {
console.log('信号状态变为:', yourConn.signalingState);
}
/*当 RTCPeerConnection 通过 RTCPeerConnection.setLocalDescription() 方法更改本地描述之后，
该 RTCPeerConnection 会抛出 icecandidate 事件。
该事件的监听器需要将更改后的描述信息传送给远端 RTCPeerConnection，
以更新远端的备选源*/
yourConn.onicecandidate = function (event) {
if (event.candidate) {
send({
type: "candidate",
sdp: event.candidate,
});
}
};
}, function (error) {
//处理错误
console.log(error);
});
//与后端约定一下传送数据的格式
//我这里采用这种
/*
{
type:"",消息的类型
sdp:"",消息传输的sdp信息
name:"",发给谁
from:"" 谁发的
}
*/
//因此封装一个send函数：
function send(message) {
message.name = connectedUser
message.from = localUser
conn.send(JSON.stringify(message));
}

复制代码

//监听一下呼叫按钮，并且实现回调函数
callBtn.addEventListener("click", function () {
// 获取一下用户要发给谁
var callToUsername = inputUser.value;
//检查合法
if (callToUsername.length > 0) {
//合法就设置一下当前用户要连接对象，后面会用到
connectedUser = callToUsername;
// 创建一个offer，自己A存一份，发给对方B存一份
yourConn.createOffer().then(async function (offer) {
await yourConn.setLocalDescription(offer)
await send({
type: "offer",
sdp: offer
})
console.log("发送offer")
}).catch(err => {
console.log(err)
})
}
});

复制代码

//当对方B接送到A发来的offer时，调用这个函数
async function handleOffer(offer, from) {
//设置当前用户要连接的用户名，即用户B要与谁连接，前面是设置用户A要与谁连接
//这也是为什么我们与后端约定的JSon要有一个from属性
connectedUser = from;
//接收A传来的offer,B存一份
await yourConn.setRemoteDescription(new RTCSessionDescription(offer));
console.log("处理offer")
//回复一下A,即B发送一个answer给A
yourConn.createAnswer().then(async (answer)=>{
await yourConn.setLocalDescription(answer)
await send({
type: "answer",
sdp: answer
});
console.log("发送answer")
}).catch(err=>console.log(err))
}

复制代码

// 当A接收到B发来的answer时调用这个函数
async function handleAnswer(answer) {
console.log(answer)
console.log("处理answer")
//A本地存一份
console.log(yourConn.iceConnectionState);
await yourConn.setRemoteDescription(new RTCSessionDescription(answer)).catch(err=>console.log(err));
console.log(yourConn.iceConnectionState);
}

复制代码

yourConn.onicecandidate = function (event) {
if (event.candidate) {
send({
type: "candidate",
sdp: event.candidate,
});
}
};

复制代码

//监听onmessage事件，服务器发送消息过来会调用这个方法
conn.onmessage = function (msg) {
console.log("Got message", msg.data);
var data = JSON.parse(msg.data);
switch (data.type) {
case "offer":
handleOffer(data.sdp, data.from);
break;
case "answer":
handleAnswer(data.sdp);
break;
case "candidate":
handleCandidate(data.sdp);
break;
case "leave":
handleLeave();
break;
default:
break;
}
};

复制代码

//给对方发送一个挂断的信号，可以自己自定义！
hangUpBtn.addEventListener("click", function () {
send({
type: "leave"
});
handleLeave();
});

复制代码

//接收到挂断的信号调用这个函数来处理
function handleLeave() {
//取消当前的连接用户名
connectedUser = null;
//关闭对方的视频展示
remoteVideo.src = null;
//关闭PeerConnection
yourConn.close();
yourConn.onicecandidate = null;
//关闭自己的媒体流
yourConn.onaddstream = null;
}

复制代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebRTC</title> <style> *{ margin: 0 auto; padding: 0; } .container{ position: relative; height:550px; width: 400px; background-color: pink; border: 1px solid gray; } .remoteVideo{ width: 100%; height: 400px; background-color: rgb(58, 42, 165); } .localVideo{ position: absolute; height: 150px; width: 150px; margin: 0; top:10px; right: 10px; background-color: wheat; } .btnBox{ display: flex; align-items: center; width: 100%; height: 50px; margin-top: 20px; } .btn{ color: white; width: 100px; height: 50px; text-align: center; align-content: center; border-radius: 10px; } .btn:hover{ cursor:pointer; } .callBtn{ background-color: rgb(28, 68, 167); } .hangUpBtn{ background-color: red; } .inputUser{ font-size: 14px; height: 25px; } </style></head><body><div class="container"> <video class="localVideo" autoplay> </video> <video class="remoteVideo" autoplay></video> <div class="btnBox"> <input class="inputUser" type="text" placeholder="请输入呼叫的用户名"> <div class="callBtn btn">呼叫</div> <div class="hangUpBtn btn">挂断</div> </div></div> </body><script type="text/javascript"> /* 1、先获取login.html传来的参数 */ const queryString = window.location.search; // 使用URLSearchParams API来解析查询字符串 const urlParams = new URLSearchParams(queryString); // 获取名为 "localUser" 的参数值 const localUser = urlParams.get('localUser'); if (localUser == null) { location.href = "login.html" } /* 2、进入页面就连接至信令服务器 */
var conn = new WebSocket("ws://localhost:8080/video");
//监听onopen事件，在连接成功时调用
conn.onopen = function () {
console.log("Connected to the signaling server");
};
//监听onmessage事件，服务器发送消息过来会调用这个方法
conn.onmessage = function (msg) {
console.log("Got message", msg.data);
var data = JSON.parse(msg.data);
switch (data.type) {
case "offer":
handleOffer(data.sdp, data.from);
break;
case "answer":
handleAnswer(data.sdp);
break;
case "candidate":
handleCandidate(data.sdp);
break;
case "leave":
handleLeave();
break;
default:
break;
}
};
//连接发生错误的时候调用
conn.onerror = function (err) {
console.log("Got error", err);
}; //与后端约定一下传送数据的格式 //我这里采用这种 /* { type:"",消息的范例 sdp:"",消息传输的sdp信息 name:"",发给谁 from:"" 谁发的 } */ //因此封装一个send函数： function send(message) { message.name = connectedUser message.from = localUser conn.send(JSON.stringify(message)); } var inputUser = document.querySelector(".inputUser"); var callBtn = document.querySelector(".callBtn"); var hangUpBtn = document.querySelector(".hangUpBtn"); var localVideo = document.querySelector(".localVideo"); var remoteVideo = document.querySelector(".remoteVideo"); var yourConn; var stream; //获取PeerConnection var PeerConnection = (window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.RTCPeerConnection || undefined); navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); //获取本地媒体 navigator.getUserMedia({ video: true, audio: true }, function (myStream) { stream = myStream; //将获取到的本地媒体流设置到页面展示 localVideo.srcObject = stream; //需要一个给PeerConnection设置一个stun服务器，可以直接用google的，以便获取双方的网络信息 var configuration = { "iceServers": [ { "urls": "stun:stun.l.google.com:19302" } ] }; // 创建一个自己A 的连接 yourConn = new PeerConnection(configuration); // 把自己A的视频流加入到自己A的连接中 yourConn.addStream(stream); //监听对方B的视频流，乐成连接对方后将会触发，将其加入到页面展示 yourConn.onaddstream = function (e) { remoteVideo.srcObject = e.stream; }; //为了方便测试，写了一个这个，监听连接信号状态的改变 yourConn.onsignalingstatechange = function () { console.log('信号状态变为:', yourConn.signalingState); } /*当 RTCPeerConnection 通过 RTCPeerConnection.setLocalDescription() 方法更改本地形貌之后，该 RTCPeerConnection 会抛出 icecandidate 变乱。该变乱的监听器需要将更改后的形貌信息传送给远端 RTCPeerConnection，以更新远端的备选源*/ yourConn.onicecandidate = function (event) {
if (event.candidate) {
send({
type: "candidate",
sdp: event.candidate,
});
}
}; }, function (error) { //处理错误 console.log(error); }); //监听一下呼叫按钮，并且实现回调函数
callBtn.addEventListener("click", function () {
// 获取一下用户要发给谁
var callToUsername = inputUser.value;
//检查合法
if (callToUsername.length > 0) {
//合法就设置一下当前用户要连接对象，后面会用到
connectedUser = callToUsername;
// 创建一个offer，自己A存一份，发给对方B存一份
yourConn.createOffer().then(async function (offer) {
await yourConn.setLocalDescription(offer)
await send({
type: "offer",
sdp: offer
})
console.log("发送offer")
}).catch(err => {
console.log(err)
})
}
}); //当对方B接送到A发来的offer时，调用这个函数 async function handleOffer(offer, from) { //设置当前用户要连接的用户名，即用户B要与谁连接，前面是设置用户A要与谁连接 connectedUser = from; //吸收A传来的offer,B存一份 await yourConn.setRemoteDescription(new RTCSessionDescription(offer)); console.log("处理offer") //回复一下A,即B发送一个answer给A yourConn.createAnswer().then(async (answer) => { await yourConn.setLocalDescription(answer) await send({ type: "answer", sdp: answer }); console.log("发送answer") }).catch(err => console.log(err)) } // 当A吸收到B发来的answer时调用这个函数 async function handleAnswer(answer) { console.log(answer) console.log("处理answer") //A本地存一份 console.log(yourConn.iceConnectionState); await yourConn.setRemoteDescription(new RTCSessionDescription(answer)).catch(err => console.log(err)); console.log(yourConn.iceConnectionState); } //吸收到A发来的candidate，调用这个函数 async function handleCandidate(candidate) { await yourConn.addIceCandidate(new RTCIceCandidate(candidate)); } //给对方发送一个挂断的信号，可以自己自界说！ hangUpBtn.addEventListener("click", function () { send({ type: "leave" }); handleLeave(); }); //吸收到挂断的信号调用这个函数来处理 function handleLeave() { //取消当前的连接用户名 connectedUser = null; //关闭对方的视频展示 remoteVideo.src = null; //关闭PeerConnection yourConn.close(); yourConn.onicecandidate = null; //关闭自己的媒体流 yourConn.onaddstream = null; }</script></html>

复制代码