webRTC（二十四）：web远程多台android的实现

最新推荐文章于 2024-08-23 08:06:56 发布

晓果博客

最新推荐文章于 2024-08-23 08:06:56 发布

阅读量2.6k

点赞数

分类专栏： webRTC 文章标签： webrtc

本文链接：https://blog.csdn.net/huangxiaoguo1/article/details/104420348

版权

本文介绍了如何使用WebRTC技术实现web端远程控制多台Android设备。通过信令服务器进行通信，详细讲解了web端HTML、JS以及Android端的信令交互，并提供了ScreenService类和Android录屏处理的实现细节。此外，还给出了web测试地址以供实际操作。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述

信令服务器



'use strict'

var http = require('http');
var https = require('https');
var fs = require('fs');

var express= require('express');

var serveIndex=require('serve-index');

//处理一对一通信（3）
var USERCOUNT=10;


//命令服务器
var socketIo =require('socket.io');
var log4js = require('log4js');

log4js.configure({
   
	appenders:{
   
		file:{
   
			type:'file',
			filename:'app.log',
			layout:{
   
				type:'pattern',
				pattern:'%r %p - %m',
			}
		}
	},
	categories:{
   
		default:{
   
			appenders:['file'],
			level:'debug'
		}
	}
});
var logger = log4js.getLogger();



var app=express();
app.use(serveIndex('./public'));
app.use(express.static('./public'));

//http  server
var http_server=http.createServer(app);

//-----------------------------------------------------------------------//

var options={
   
	key:fs.readFileSync('./cert/3435783_huangxiaoguo.club.key'),
	cert:fs.readFileSync('./cert/3435783_huangxiaoguo.club.pem')
}

//https server
var https_server=https.createServer(options,app);

//命令服务器绑定https
var io = socketIo.listen(https_server);


io.sockets.on('connection',(socket)=>{
   
	logger.debug("connection");
	
	//转发信息
	socket.on('message', (room, data,userId)=>{
   
		logger.debug("message data "+room+",userId: "+userId,data);
		socket.to(room).emit('message', room, userId, data)//房间内所有人,除自己外
	});
	
	//android端回应web加入
	socket.on('webjoinback', (room,userId)=>{
   
		logger.debug("webjoinback data "+room+",userId: "+userId);
		socket.to(room).emit('webjoinback', room, userId)//房间内所有人,除自己外
	});
	
	//用户加入
	socket.on('join',(room,userId)=>{
   
		logger.debug("join",",room = ", room,",userId = ", userId);
		socket.join(room);
		var myRoom = io.sockets.adapter.rooms[room];
		var users =(myRoom)?Object.keys(myRoom.sockets).length:0;
		logger.debug('the number of user in room is:'+users)
		
		//处理一对一通信
		if (users<USERCOUNT) {
   
			//给本人回信息
			socket.emit('joined',room,userId);
			if(users>1){
   
				socket.to(room).emit('otherjoin',room,userId);
			}
		}else{
   
			socket.leave(room);
			socket.emit('full',room,userId);
		}
		
		//给本人回信息
		//socket.emit('joined',room,socket.id);
		//给房间除自己以外所有人回
		// socket.to(room).emit('joined',room,socket.id);
		//给房间所有人回
		// io.in(room).emit('joined',room,socket.id);
		//除自己所有站点回
		// socket.broadcast.emit('joined',room,socket.id)
	});

	//用户离开
	socket.on('leave',(room,userId)=>{
   
		var myRoom = io.sockets.adapter.rooms[room];
		var users =(myRoom)?Object.keys(myRoom.sockets).length:0;
		//users-1
		logger.debug('the number of user in room is:'+(users-1));
		
		socket.to(room).emit('bye',room,userId);
		socket.emit('leaved',room,userId);
		
		//给本人回信息
		//socket.emit('leaved',room,socket.id);
		//给房间除自己以外所有人回
		//socket.to(room).emit('leaved',room,socket.id)
		//给房间所有人回
		//io.in(room).emit('leaved',room,socket.id);
		//除自己所有站点回
		//socket.broadcast.emit('leaved',room,socket.id)
	});
});

https_server.listen(443, '0.0.0.0');
http_server.listen(80,'0.0.0.0');

web端html

<html>
	<head>
		<title>WebRTC PeerConnection</title>
		<style>
			.video-box{
    
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}
			.preview{
    
				width: 375px;
				height: 640px;
				margin-left: 20px;
				margin-bottom: 20px;
				background-color: red;
			}
			#remotevideo,
			#remotevideo1{
    
				object-fit:fill;
				width: 100%;
				height: 100%;
			}
			#leave{
    
				margin-top: 20px;
				width: 100px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="video-box" id="videobox">
				<!--<div class="preview">-->
				<!--	<video  id="remotevideo" autoplay playsinline></video>-->
				<!--</div>-->
				<!--<div class="preview">-->
				<!--	<video  id="remotevideo1" autoplay playsinline></video>-->
				<!--</div>-->
			</div>
			<div>
				<button id="leave" disabled>Leave</button>
			</div>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
		<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
		<script src="./js/moreClient1.js"></script>
	</body>
</html>

web端js

'use strict'

// var remoteVideo = document.querySelector('video#remotevideo');
// var remoteVideo1 = document.querySelector('video#remotevideo1');
var videobox = document.querySelector('div#videobox');

var btnLeave = document.querySelector('button#leave');


var roomid = '989898';
var userid = '00001'
var socket =null;

var state = 'init';

var pcMaps = {
   };

var pcConfig={
   
		'iceServers':[{
   
			'urls':'turn:***.**.***.**:3478',
			'credential':'*****',
			'username':'******'
		}]
	}

function addVideo(userId){
   
	for (var i = 0; i < videobox.children.length; i++){
   
		if(videobox.children[i].id===userId){
   
			return;
		}
	}
	var div=document.createElement("div");
		div.className="preview"
		div.id=userId;

	var video=document.createElement("video");
		video.id="remotevideo"
		video.autoplay="true";
		div.appendChild(video);
	videobox.appendChild(div);
}

function sendMessage(roomid,data,userId){
   
	if(socket){
   
		socket.emit('message',roomid,data,userId);
	}
}

function handleAnswerError(err){
   
	console.error('Failed to get Answer!',err);
}

function handleOfferError(err){
   
	console.error('Failed to get Offer!',err);
}

//接收远端流通道
function call(id){
   

	if(pcMaps[id]){
   
		var options = {
   
			offerToReceiveAudio:1,
			offerToReceiveVideo:1
		}
		pcMaps[id].createOffer(options)
		  .then((desc)=>{
   
		  	 pcMaps[id].setLocalDescription(desc);
			 sendMessage(roomid,desc,id)
		  })
		  .catch(handleOfferError);
	}
		
}

function conn(){
   
	//1 触发socke连接
	socket = io.connect();
	
	//2 加入房间后的回调
	socket.on('joined',(roomid,id)=>{
   
		//这里的id是本人的userId（注意）
		state = 'joined';
		
		btnLeave.disabled =false;
		
		console.log("reveive joined message:state=",id);	
	});
	
	socket.on('webjoinback',(roomid,id)=>{
   
		
		state = 'joined';
		
		createPeerConnection(id);
		
		btnLeave.disabled =false;
		
		console.log("reveive joined message:state=",id);	
	});

	socket.on('otherjoin',(roomid,id)=>{
   
		
		createPeerConnection(id);
	
		state = 'joined_conn';
		
		//媒体协商
		call(id);
		console.log("reveive otherjoin message:state=",id);	
	});
	socket.on('full',(roomid,id)=>{
   
		console.log('receive full message ', roomid, id);

		closePeerConnection(id);
		
		state = 'leaved';
		
		btnLeave.disabled = true;
		console.log("reveive full message:state=",id);
		alert("the room is full!");
	});
	
	socket.on('leaved',(roomid,id)=>{
   
		
		state = 'leaved';
		socket.disconnect();
		btnLeave.disabled = true;
		console.log("reveive leaved message:state=",id);
	});
	
	socket.on('bye',(roomid,id)=>{
   
		
		state = 'joined_unbind';
		closePeerConnection(id);
		console.log("reveive bye message:state=",id);	
	});
	socket.on('disconnect', (socket) => {
   
		console.log('receive disconnect message!');
		if(!(state === 'leaved')){
   
			// closePeerConnection();
		}
		state = 'leaved';
	
	});
	socket.on('message'