webrtc共享桌面demo

欢迎关注公众号：冒泡的肥皂

桌面共享(基于前面的视频分享)将getUserMedia替换成getDisplayMedia就可以了。

前端参考:

github上不去了，这里放到百度网盘里面

链接：pan.baidu.com/s/1embYDgWY…

提取码：0ys3

下面demo是参考上面修改来的，改造后添加了自己搭建的信令服务器(websocket)进行sdp、ice candidate交互

js websocket交互

//测试demo 用户是写死的
var userCode="u001";//当前用户
var acceptUsr="u002";//推送用户
//wss带证书的，ws不带证书
var ws = new WebSocket("wss://******/ws");
  
ws.onopen = function(){    
    setInterval("heart()",1000*3);//心跳
    sendMsg("1");//绑定
    //ws.send(localStream);
  };

ws.onmessage = function(evt){
  console.log(evt.data);
    if("pong"==evt.data){
       return; 
    }
  
  const event = JSON.parse(evt.data);

  switch (event['cmd']) {
    case "answer":
         const desc_pc2 = JSON.parse(event.msg);
         pc1.setRemoteDescription(desc_pc2);
      //接收ice
     case "candidate":
         console.log("candidate:")
         console.log(JSON.parse(event.msg));
         pc1.addIceCandidate(JSON.parse(event.msg));
  }
}

 ws.onerror = function(evt){
      console.log("WebSocketError!");
};

//数据发送 数据结构可以根据实际情况自定义
function sendMsg(cmd,acceptUsr,msg){
         var bindMsg = {};
           bindMsg.cmd=cmd;//指令类型
           bindMsg.fromUser=userCode;
           bindMsg.acceptUsr=acceptUsr;
           bindMsg.msg=msg;
           ws.send(JSON.stringify(bindMsg));
};

function heart(){
    console.log("ping...");
    ws.send("ping");
}

服务端基于NETTY完成数据转发

//简单的消息体
public class Message implements Serializable{
    private static final long serialVersionUID = 1L;
    private String cmd;//指令：1-绑定
    private String fromUser;
    private String acceptUsr;
    private String msg;//信息
}

/**   
 * 用户绑定链接     
 */ 
private static Map<ChartUser, Channel> userChannel = new ConcurrentHashMap <ChartUser, Channel>();

//消息转发 可以自己用设计模式把if判断去掉
if("offer".equals(message.getCmd())||
   "answer".equals(message.getCmd())||
   "candidate".equals(message.getCmd())){
   Channel channel=ChannelManager.getChannelByCode(message.getAcceptUsr());
   if(null!=channel) {
      channel.writeAndFlush(new TextWebSocketFrame(mapper.writeValueAsString(message)));
    }else {
          logger.info("------对方用户：{}未登录",message.getAcceptUsr());
     }
    }

效果图：

发起共享的

接收共享的