|
@@ -1,104 +0,0 @@
|
|
|
-<!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>car</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;
|
|
|
|
|
- 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>
|
|
|