webRTC（二十三）：web远程android&android远程android的实现

晓果博客

已于 2023-03-21 23:22:17 修改

阅读量3k

点赞数 4

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

于 2020-05-12 14:11:24 首次发布

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

版权

本文介绍了如何使用WebRTC实现从Web浏览器远程控制Android设备以及Android设备间互相远程控制的功能。通过信令服务器进行通信，详细讲解了web端和Android端的实现，包括html、js、xml布局、SignalClient信令交互以及录屏Activity的设置。最终，通过代码打包生成APK，实现了完整的远程控制解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

web端远程
在这里插入图片描述
android端远程

信令服务器



'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=3;


//命令服务器
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)=>{
   
		logger.debug("message data "+socket.id+" "+room,data);
		socket.to(room).emit('message', room, socket.id, data)//房间内所有人,除自己外
	});
	
	//用户加入
	socket.on('join',(room)=>{
   
		logger.debug("join",",room = ", room,",socket.id = ", socket.id);
		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,socket.id);
			if(users>1){
   
				socket.to(room).emit('otherjoin',room,socket.id);
			}
		}else{
   
			socket.leave(room);
			socket.emit('full',room,socket.id);
		}
		
		//给本人回信息
		//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)=>{
   
		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,socket.id);
		socket.emit('leaved',room,socket.id);
		
		//给本人回信息
		//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>
			.preview{
     
				width: 375px;
				height: 640px;
				background-color: red;
			}
			#remotevideo {
     
				object-fit:fill;
				width: 100%;
				height: 100%;
			}
			#leave{
     
				margin-top: 20px;
				width: 100px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="preview">
				<video id="remotevideo" autoplay playsinline></video>
			</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/client.js"></script>
	</body>
</html>

web远程端js

'use strict'

var remoteVideo = document.querySelector('video#remotevideo');

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


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

var state = 'init';

var pc = null;

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

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

function getAnswer(desc){
   
	pc.setLocalDescription(desc);
	sendMessage(roomid,desc);
}

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

function getOffer(desc){
   
	pc.setLocalDescription(desc);
	sendMessage(roomid,desc)
}
function handleOfferError(err){
   
	console.error('Failed to get Offer!',err);
}

//接收远端流通道
function call(){
   
	if(state === 'joined_conn'){
   
		if(pc){
   
			var options = {
   
				offerToReceiveAudio:1,
				offerToReceiveVideo:1
			}
			pc.createOffer(options)
			  .then(getOffer)
			  .catch(handleOfferError);
		}
	}	
}

function conn(){
   
	//1 触发socke连接
	socket = io.connect();
	
	//2 加入房间后的回调
	socket.on('joined',(roomid,id)=>{
   
		
		state = 'joined';
		
		createPeerConnection();
		
		btnLeave.disabled =false;
		
		console.log("reveive joined message:state=",state);	
	});
	socket.on('otherjoin',(roomid,id)=>{
   
		
		if (state === 'joined_unbind') {
   
			createPeerConnection();
		}
		state = 'joined_conn';
		
		//媒体协商
		call();
		console.log("reveive otherjoin message:state=",state);	
	});
	socket.on('full',(roomid,id)=>{
   
		console.log('receive full message ', roomid, id);

		closePeerConnection();
		
		state = 'leaved';
		
		btnLeave.disabled = true;
		console.log("reveive full message:state=",state);
		alert("the room is full!");
	});
	
	socket.on('leaved',(roomid,id)=>{
   
		
		state = 'leaved';
		socket.disconnect();
		btnLeave.disabled = true;
		console.log("reveive leaved message:state=",state);
	});
	
	socket.on('bye',(roomid,id)=>{
   
		
		state = 'joined_unbind';
		closePeerConnection();
		console.log("reveive bye message:state=",state);	
	});
	socket.on('disconnect', (socket) => {
   
		console.log('receive disconnect message!', roomid);
		if(!(state === 'leaved')){
   
			closePeerConnection();
		}
		state = 'leaved';
	
	});
	socket.on('message',(roomid,id,data)=>{
   
		
		//媒体协商
		if(data){
   
			if(data.type === 'offer'){
   
				pc.setRemoteDescription(new RTCSessionDescription(data));
				pc.createAnswer()
				  .then(getAnswer)
				  .catch(handleAnswerError);
			}else if(data.type === 'answer'){
   
				console.log("reveive client message=====>",data);
				pc.setRemoteDescription(new RTCSessionDescription(data));
			}else if(data.type === 'candidate'){
   
				var candidate = new RTCIceCandidate({
   
					sdpMLineIndex:data.label,
					candidate:data.candidate
				});
				pc.addIceCandidate(candidate);
				
			}else{
   
				console.error('the message is invalid!',data)
			}
		}
		
		console.log("reveive client message",roomid,id,data);	
	});
	
	socket.emit('join',roomid);
	return;
}

function handleError(err){
   
	if(err){
   
		console.error("getUserMedia  error:",err);	
	}
}


function leave(){
   
	if(socket){
   
		socket.emit('leave',roomid);
	}
	
	//释放资源
	closePeerConnection();
		
	btnLeave.disabled = true;
}

//创建本地流媒体链接
function createPeerConnection(){
   
	//释放资源
	closePeerConnection();
	console.log('create RTCPeerConnection!');
	
	if(!pc){
   
		pc = new RTCPeerConnection(pcConfig);
		pc.onicecandidate = (e) =>{
   
			if(e.candidate){
   
				sendMessage(roomid,{
   
					type:'candidate',
					label:e.candidate.sdpMLineIndex,
					id:e.candidate.sdpMid,
					candidate:e.candidate.candidate
				});
			}
		}
		pc.ontrack = (e)=>{
   
			remoteVideo.srcObject = e.streams[0];
		}
	}

}

//关闭本地媒体流链接
function closePeerConnection(){
   
	console.log('close RTCPeerConnection!');
	if(pc){
   
		pc.close();
		pc = null;
	}
}

//启动连接

conn();

btnLeave.onclick = leave;

Android远程端xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <org.webrtc.SurfaceViewRenderer
        android:id="@+id/RemoteSurfaceView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />


    <TextView
        android:id="@+id/LogcatView"
        android:visibility="gone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|start"
        android:layout_margin="5dp"
        android:textColor="@android:color/black" />

</FrameLayout>

Android远程端SignalClient信令交互


import android.util.Log;

import com.example.webrtcdemo.R;
import com.example.webrtcdemo.manager.HTTPSCerUtils;
import com.example.webrtcdemo.utils.UIUtils;

import org.json.JSONObject;

import java.net.URISyntaxException;

import io.socket.client.IO;
import io.socket.client.Socket;
import io.socket.emitter.Emitter;
import okhttp3.OkHttpClient;

public class SignalClient {
   

    private static final String TAG = "SignalClient";

    private static SignalClient mInstance;
    private OnSignalEventListener mOnSignalEventListener;

    private Socket mSocket;
    private String mRoomName;
    private IO.Options opts;

    public interface OnSignalEventListener {
   
        void onConnected();

        void onConnecting();

        void onDisconnected();

        void onUserJoined(String roomName, String userID);

        void onUserLeaved(String roomName, String

最低0.47元/天解锁文章