更新例子

Signed-off-by: caner <5658514@qq.com>

package.json

@@ -8,10 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "nipplejs": "^0.9.0",
     "socket.io-client": "^4.4.1",
-    "vue": "^2.6.11",
-    "vue-amap": "^0.5.10"
+    "vue": "^2.6.11"
   },
   "devDependencies": {
     "@vue/cli-service": "~4.5.0",

src/page/index.vue

@@ -1,23 +1,21 @@
 <template>
   <div class="box">
-    <video id="v2" autoplay playsinline></video>
+    <video id="v2" autoplay playsinline muted></video>
   </div>
 </template>
 <script>
-import webRTC from "@/utils/RTC";
 const { io } = require("socket.io-client");
 export default {
   data() {
     return {
       socket: null,
       HOST: "wss://car.caner.top",
-      remoteVideo: null,
+      Peer: null,
     };
   },
   methods: {
-    // 初始化
     intSoketRtc(host) {
-      // 初始化socket
+      // int socket
       this.socket = io(host, {
         // autoConnect: false,
         auth: {
@@ -26,79 +24,53 @@ export default {
         },
         transports: ["websocket"],
       });
-      // 监听socket
+
+      // socket
       this.socket.on("connect", () => {
-        this.connect();
-      });
-      this.socket.on("leaved", () => {
-        console.log("车端离开");
-      });
-      this.socket.on("joined", () => {
-        // 请求开始RTC
-        this.socket.emit("msg", {
-          type: "startRTC",
+        this.Peer = new RTCPeerConnection({
+          bundlePolicy: "max-bundle"
         });
-      });
-      this.socket.on("msg", (data) => {
-        this.msg(data);
-      });
-      this.socket.on("connect_error", (err) => {
-        console.log("连接失败", err);
-      });
-    },
 
-    // 连接
-    async connect() {
-      console.log("连接成功", this.socket.auth);
-
-      try {
-        // 初始化RTC
-        webRTC.init();
-        // 数据通道
-        const channel = webRTC.RTC.createDataChannel("test");
-        channel.onopen = () => {
-          console.log("数据通道打开");
+        // listen state
+        this.Peer.onicegatheringstatechange  = () => {
+          console.log("GatheringState: ", this.Peer.iceGatheringState);
+          if (this.Peer.iceGatheringState === "complete") {
+            const answer = this.Peer.localDescription;
+            this.socket.emit("msg", answer);
+          }
         };
-        channel.onmessage = (event) => {
-          console.log("数据通道信息", event.data);
+
+        // listen track
+        this.Peer.ontrack = (evt) => {
+          console.log("track", evt.streams[0]);
+          const video = document.getElementById("v2");
+          video.srcObject = evt.streams[0];
         };
 
-        // 监听ICE|发送
-        webRTC.onicecandidate((event) => {
-          if (event.candidate) {
-            this.socket.emit("msg", {
-              type: "candidate",
-              candidate: event.candidate,
-            });
-          }
-        });
+        console.log("connected");
+      });
 
-        // 监听ICE状态
-        webRTC.oniceconnectionstatechange(async () => {
-          console.log("state: ", webRTC.RTC.iceConnectionState);
-        });
-      } catch (error) {
-        console.log(error);
-      }
-    },
+      this.socket.on("msg", async (data) => {
+        console.log(data);
+        if (data.type == "offer") {
+          await this.Peer.setRemoteDescription(data);
+          const answer = await this.Peer.createAnswer();
+          await this.Peer.setLocalDescription(answer);
+        }
+      });
 
-    // 通信
-    async msg(data) {
-      if (data.type === "offer") {
-        // 设置本地应答
-        webRTC.setRemoteDescription(data.offer);
-        // 返回应答
-        const answer = await webRTC.createAnswer();
-        webRTC.setLocalDescription(answer);
-        // 发送anwser
-        this.socket.emit("msg", {
-          type: "answer",
-          answer: answer,
-        });
-      } else if (data.type === "candidate") {
-        // 添加ICE
-        webRTC.addIceCandidate(data.candidate);
-      }
+      this.socket.on("joined", async (user) => {
+        console.log(`${user.name}_${user.ip}_joined_${user.roomID}`);
+        this.socket.emit("msg", { type: "startRTC" });
+      });
+
+      this.socket.on("leaved", (user) => {
+        console.log(`${user.name}_${user.ip}_leaved_${user.roomID}`);
+      });
+
+      this.socket.on("connect_error", (err) => {
+        console.log("connect_error", err);
+      });
     },
   },
   mounted() {
@@ -107,43 +79,12 @@ export default {
 };
 </script>
 <style scoped>
-.box {
-  width: 100vw;
-  height: 100vh;
-  position: relative;
-  overflow: hidden;
-}
-.ctrl,
-.battery,
-.signal {
-  position: fixed;
-  overflow: hidden;
-  z-index: 99;
-}
-.ctrl {
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-}
-.battery {
-  top: 5px;
-  right: 5px;
-}
-.signal {
-  right: 50px;
-  top: 3px;
-}
 video {
-  width: 100vw;
-  height: 100vh;
+  width: 500px;
+  height: 500px;
   background: none;
   object-fit: fill;
-}
-.audio {
-  position: fixed;
-  top: 3px;
-  right: 90px;
-  z-index: 99;
+  border: solid 1px red;
+  margin: 0 auto;
 }
 </style>