局域网视频聊天

最新推荐文章于 2024-09-13 15:56:44 发布

dgiij

最新推荐文章于 2024-09-13 15:56:44 发布

阅读量632

点赞数 8

文章标签：音视频前端 javascript webrtc

本文链接：https://blog.csdn.net/dgiij/article/details/142099886

版权

WebRTC (Web Real-Time Communications) 允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流/音频流或者其他任意数据的传输。MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。
这样可以不借助服务器，局域网两终端通过浏览器即可实现视频聊天。
即便WebRTC已经提供了完善的接口调用，但是使用起来还是稍嫌复杂。推荐一个轮子peerjs来简化操作，实现我们的局域网视频聊天的小小愿望。
此例子中，服务器主要作用是客户端peerid存放查询，方便用户彼此呼叫。

const express = require("express");
const app = express();

var clients=[];

app.use("/", express.static("client"));

app.post('/register',express.json(), (req,res)=>{
	console.log(req.body)
	let client=clients.find(item=>(item.uid===req.body.uid));
	if (client==undefined) { clients.push({uid:req.body.uid,pid:req.body.pid}); }
	else { client.pid=req.body.pid; }
	console.log(clients);
	res.json({"code":200});
})

app.post('/inq',express.json(), (req,res)=>{
	let client=clients.find(item=>(item.uid===req.body.objid))
	res.json({"answerid":client.pid});
})

app.listen(8080);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>video chat</title>
	<style>
		.video-box {
			position: relative;
			width: 800px;
			height: 400px;
		}
		#remote-video {
			width: 100%;
			height: 100%;
			display: block;
			object-fit: cover;
			border: 1px solid #eee;
			background-color: #F2F6FC;
		}
		#local-video {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 240px;
			height: 120px;
			object-fit: cover;
			border: 1px solid #eee;
			background-color: #EBEEF5;
		}
	</style>
</head>
<body>
<input id="objid"></input>
<button onclick="startLive()">video chat</button>
<div class="video-box">
	<video id="remote-video"></video>
	<video id="local-video" muted></video>
</div>

<script src="./peerjs.min.js"></script>
<script src="./axios.min.js"></script>
<script>
		
const queryParams = new URLSearchParams(location.search);
const target = queryParams.get('uid'); 

const localVideo = document.querySelector('#local-video');
const remoteVideo = document.querySelector('#remote-video');

localVideo.onloadeddata = () => { localVideo.play(); }
remoteVideo.onloadeddata = () => { remoteVideo.play(); }

var peer = new Peer();
peer.on('open', function(id) {
	console.log('My peer ID is: ' + id);
	axios.post("/register",{uid:target,pid:id})
	});

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

peer.on('call', function(call) {
	getUserMedia(
		{video: true, audio: true}, 
		function(stream) {
			localVideo.srcObject = stream;
			call.answer(stream);
			call.on('stream', function(remoteStream) { remoteVideo.srcObject = remoteStream; });
		}, 
		function(err) { console.log('Failed to get local stream' ,err); }
		);
	});

function startLive () {
	axios.post("/inq",{objid:document.querySelector('#objid').value}).then(res=>{
	getUserMedia(
		{video: true, audio: true}, 
		function(stream) {
			localVideo.srcObject = stream;
			var call = peer.call(res.data.answerid, stream);
			call.on('stream', function(remoteStream) { remoteVideo.srcObject = remoteStream; });
			}, 
		function(err) { console.log('Failed to get local stream' ,err); }
		);
	})
	}
</script>
</body>
</html>

服务端启动后，浏览器地址栏输入 http://[hostname]:8080/peerjs.html&uid=【你的昵称】即可，大家都进入页面后，你可以页面输入框里输入对方的uid，点击video chat按钮即可与对方视频聊天，是不是很简单？
demo写得很简单，大家可以访问下peerjs网站，了解更多api方法。