tunnelcar
/
control


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试</title>
    <script src="./socket.io.min.js"></script>
    <style>
        video {
            width: 500px;
            height: 400px;
            background: none;
            object-fit: fill;
            border: solid 1px red;
        }
    </style>
</head>

<body>
    <div>
        <video id="v2" autoplay playsinline></video>
    </div>
    <!-- webrtc -->
    <script>
        let RTC = null
        const socket = io({
            auth: {
                roomID: "feiCar",
                name: "ctrl",
            },
            transports: ["websocket"],
        });
        socket.on("connect", async () => {
            const PeerConnection =
                window.RTCPeerConnection ||
                window.mozRTCPeerConnection ||
                window.webkitRTCPeerConnection;
            RTC = new PeerConnection();

            RTC.ontrack = (event) => {
                const remoteVideo = document.getElementById("v2");
                remoteVideo.srcObject = event.streams[0];
                console.log("远程流|dom", event, remoteVideo);

            };
            // 监听ICE|发送
            RTC.onicecandidate = (event) => {
                if (event.candidate) {
                    socket.emit("msg", {
                        type: "candidate",
                        candidate: event.candidate,
                    });
                    console.log("己方ICE", event.candidate);
                }
            };
            // 监听ICE状态
            RTC.oniceconnectionstatechange = () => {
                console.log("ICE状态", RTC.iceConnectionState);
            };
            console.log("连接成功监听webrtc");
        });
        //   发送offer及anwser
        socket.on("msg", async (data) => {
            console.log("用户信息", data);
            if (data.type === 'offer') {
                // 设置本地应答
                RTC.setRemoteDescription(data.offer);
                // 返回应答
                const answer = await RTC.createAnswer();
                RTC.setLocalDescription(answer);
                // 发送anwser
                socket.emit("msg", {
                    type: "answer",
                    answer: answer,
                });
            } else if (data.type === 'candidate') {
                // 添加ICE
                RTC.addIceCandidate(data.candidate);
            }
        });
        //   监听加入
        socket.on('joined', user => {
            console.log(`${user.name}加入${user.roomID}房间`)
            // 向其它用户发送开始webrtc
            socket.emit('msg', {
                type: 'startRTC'
            })
        })
        // 监听离开
        socket.on('leaved', user => {
            console.log(`${user.name}离开${user.roomID}房间`)
            RTC.close()
        })
        //   断开连接
        socket.on("connect_error", (err) => {
            console.log("连接错误", err);
            if (RTC) RTC.close()
        });
    </script>
</body>

</html>