概述
没有使用传统的webrtc从0开始搭建逻辑，从众多框架中选择PeerJS实现快速通信搭建
采用peerjs实现单点通信，基础搭建demo演示
从目前测试情况来看还是挺顺利的，移动端授权摄像头，但是没有显示视频流
文件清单
peer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PeerJS Video Chat Demo</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #121212; /* Dark background for better video contrast */
}
.video-chat-container {
position: relative;
width: 100%;
/* max-width: 800px; */
height: 100vh;
box-sizing: border-box;
}
.videos {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#localVideo, #remoteVideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
#localVideo.small {
width: 25%;
height: 20%;
/* bottom: 10px;
right: 10px; */
transform: translate(260%, 20%);
opacity: 0.85;
}
.call-button {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #1E88E5; /* Blue color */
border: none;
cursor: pointer;
outline: none;
font-size: 18px;
color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="video-chat-container">
<div class="videos">
<video id="localVideo" class="small" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
</div>
<button id="callButton" class="call-button">Call</button>
</div>
<!-- 官方文档介绍 https://peerjs.com/ -->
<script src="./js/peerjs.min.js"></script>
<script src="./js/peer_app.js"></script>
</body>
<script type="text/javascript">
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
// Switch between the main and small video on click
document.querySelector('.videos').addEventListener('click', () => {
if (localVideo.classList.contains('small')) {
localVideo.classList.remove('small');
remoteVideo.classList.add('small');
} else {
localVideo.classList.add('small');
remoteVideo.classList.remove('small');
}
});
</script>
</html>peer_app.js
// 初始化Peer对象
const peer = new Peer();
// 创建peer对象可以指定对应的 初始化信息
/**
// 定制化配置
// https://peerjs.com/docs/#api
const myPeerId = 'custom-peer-id'; // 你可以根据需要设置这个值
const peer = new Peer(myPeerId, {
host: 'your-peerjs-server', // 如果你有自己的PeerJS服务器，请填写你的服务器地址
port: 9000, // PeerJS服务器端口，默认为9000
path: '/myapp', // 自定义路径，默认为 '/'
secure: true // 是否使用 HTTPS，默认为 false
});
**/
let localStream;
let remoteStream;
// 获取本地媒体流
async function getLocalMedia() {
try {
localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
document.getElementById('localVideo').srcObject = localStream;
} catch (err) {
console.error("Error accessing media devices.", err);
}
}
// 当Peer对象准备好时调用
peer.on('open', async (id) => {
console.log('My peer ID is:', id);
await getLocalMedia();
});
// 处理来电
peer.on('call', async (call) => {
call.answer(localStream); // 回答来电并发送本地流
call.on('stream', (remoteStream) => {
document.getElementById('remoteVideo').srcObject = remoteStream;
});
});
// 拨打呼叫
document.getElementById('callButton').onclick = async () => {
const peerId = prompt('Enter the peer ID you wish to call:');
if (!peerId) return;
const call = peer.call(peerId, localStream);
call.on('stream', (remoteStream) => {
document.getElementById('remoteVideo').srcObject = remoteStream;
});
call.on('close', () => {
document.getElementById('remoteVideo').srcObject = null;
});
};peerjs.min.js(官网类库)
<script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>额外配置
rtc.wz1314.com
SSL 证书
服务器(内网穿透)
待办列表
搭建基础页面demo
完成PC端测试
测试移动端视频流测试
测试双端单点通信正常
调整通信页面交互UI