记录2021Amazon春季马拉松利用WebRTC技术实现的多端白板

let PeerConnection = window.RTCPeerConnection || window.mozRTCPeeerConnection || window.webkitRTCPeerConnection

let peer = new PeerConnection(iceServers)

iceServers: [
	{url:"stun:stun.l.google.com:19302"} //谷歌的公众服务
	{url:"turn:***", 
  			username:***,//用户名 
 				credential:***//密码}
]

//发送数据hello
channel.send(JSON.stringify('hello'))

//监听channel的状态
peer.ondatachannel = (event) =>{
	var channel = event.chanel
	channel.binaryType = 'arraybuffer'
	
	channel.onopen = (event) => {
		//连接成功
		console.log('channel onopen')
	}
	
	chnnel.onclose = function(event){
		//连接关闭
		console.log('channel onclose')
	}
	
	channel.onmessage = (event) => {
		//收到消息
		let data = JSON.parse(event.data)
		console.log('channel onmessage',data)
	}
}

// html
// 引入 <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
// 连接3000端口
var socket = io('ws://localhost:3000/‘)


// server.js 用来部署服务器
// 监听连接
// io是服务器端的，socket是客户端的
io.on('connection', socket => { ... })


// 监听关闭
io.on('disconnect', socket => {})

// A 向 B 的p2p
// html


// A
// user 是全局变量，存在sessionStorage中， 创建时候获取
var user = window.sessionStorage.user || ''

// 发给服务器改socket的名称A
socket.emit('createUser', 'A')

// 处理兼容性
let PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection
var peer = new PeerConnection()

// 创建A端的offer
peer.createOffer()
    .then(offer => {
        // 设置A端的本地描述
        peer.setLocalDescription(offer, () => {
       
        // socket发送offer和房间
        socket.emit('offer', {offer: offer, user: 'B'})
        })
    })

// 监听本地的ice变化，有则发送个B
peer.onicecandidate = (event) => {
    if (event.candidate) {
    ![](https://user-gold-cdn.xitu.io/2019/6/3/16b1b606f637e98e?w=1829&h=1005&f=gif&s=4145004)

        // B  
        // user 是全局变量，存在sessionStorage中， 创建时候获取
        var user = window.sessionStorage.user || ''

        // 发给服务器socket的名称
        socket.emit('createUser', 'A')
        let PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection
        
        var peer = new PeerConnection()

        // 接受服务器端发过来的offer辨识的数据
        socket.on('offer', date => {
        
            // 设置B端的远程offer 描述
            peer.setRemoteDescription(data.offer, () => {
        
            // 创建B的Answer
            peer.createAnswer()
                .then(answer => {
                // 设置B端的本地描述
                peer.setLocalDescription(answer, () => {
                    socket.emit('answer', {answer: answer, user: 'A'})
                 })
            })
        })
    })
    socket.on('ice', data => {
        // 设置B ICE
        peer.addIceCandidate(data.candidate);
    })

    socket.emit('createUser', 'B')


    // server.js
    // 用于接受客户端的用户名对应的服务器
    const sockets = {}
    
    // 保存user
    const users = {}
    io.on('connection', data => {
        // 创建账户
        socket.on('createUser', data => {
        let user = new User(data)
        users[data] = user
        sockets[data] = socket})

    socket.on('offer', data => {
        // 通过B的socket的id只发送给B
        socket.to(sockets[data.user].id).emit('offer', data)})
    
    socket.on('answer', data => {
        // 通过B的socket的id只发送给A
        socket.to(sockets[data.user].id).emit('answer', data)})
    
        socket.on('ice', data => {
            // ice发送给B
        socket.to(sockets[data.user].id).emit('ice', data)})
})

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');

// 定义画布的宽高：将canvas与屏幕宽高设置为一致
wh()
//---------工具函数
function wh(){
    let pageWidth = document.documentElement.clientWidth;
    let pageHieght = document.documentElement.clientHeight;
    canvas.width = pageWidth;
    canvas.height = pageHieght;
}

// 特性检测
// 通过检测是否有document.body.ontouchstart来判断是否支持触屏设备
if(document.body.ontouchstart !== undefined) {
    // 触屏设备
}else{
    // 非触屏设备
}

// 两点之间连线的工具函数
function drawLine(xStart,yStart,xEnd,yEnd){
    // 开始绘制路径
    ctx.beginPath();
    // 线宽
    ctx.lineWidth = 2;
    // 起始位置
    ctx.moveTo(xStart,yStart);
    // 停止位置
    ctx.lineTo(xEnd, yEnd);
    // 描绘线路
    ctx.stroke();
    // 结束绘制
    ctx.closePath();
}

//画板控制开关
let painting = false;
//第一个点坐标
let startPoint = {x: undefined, y: undefined};
// 橡皮擦开关
let EraserEnabled = false;

    // 非触屏设备
    // 鼠标点击事件(onmousedown)
    canvas.onmousedown = function(e){
        let x = e.offsetX;
        let y = e.offsetY;
        painting = true;
        if (EraserEnabled) {
            // 有橡皮擦的操作
        }
        startPoint = {x : y,y : y};
    };

    // 鼠标滑动事件(onmousemove)
    canvas.onmousemove = function(e){
        let x = e.offsetX;
        let y = e.offsetY;
        let newPoint = {x : x,y: y};
        if(painting){
            if(EraserEnabled){
                // 有橡皮擦的操作
            }else{
                drawLine(startPoint.x,startPoint.y,newPoint.x,newPoint.y);
            }
            startPoint = newPoint;
        };
    };
    // 鼠标松开事件(onmouseup)
    canvas.onmouseup = function(){
        painting = flase;
    };

 // 触屏设备
    // 初始接触事件
    canvas.ontouchstart = function(e){
        let x = e.touches[0].clientX;
        let y = e.touches[0].clientY;
        painting = true;
        if(EraserEnabled){
            //橡皮擦操作
        }
        startPoint = {x:x,y:y};
    }
    // 接触移动事件
    canvas.ontouchmove = function(e){
        let x = e.touches[0].clientX;
        let y = e.touches[0].clientY;
        let newPoint = {x:x, y:y};
        if(painting){
            if(EraserEnabled){
                // 橡皮擦操作
            } else{
                drawLine(startPoint.x,startPoint.y,newPoint.x.newPoint.y);
            }
            startPoint = newPoint;
        };
    };
    // 接触停止事件
    canvas.ontouchend = function(){
        painting = false;
    };

if(EraserEnabled){
            //橡皮擦操作
            ctx.clearRect(x-15, y-15, 30,30);
        }