feat: web rtc 前端

lebornjose · Nov 19, 2024 · 12f0081 · 12f0081
1 parent 88edb98
commit 12f0081
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -9,5 +9,6 @@
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
+    <script src="/public/js/video-view.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@webav/av-cliper": "^0.14.4",
     "@webav/av-recorder": "^0.16.0",
     "ant-design-vue": "4.0.0-rc.6",
+    "socket.io-client": "^4.8.1",
     "vue": "^3.3.4"
   },
   "devDependencies": {

diff --git a/public/js/video-view.js b/public/js/video-view.js
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -27,6 +27,7 @@ import Canvas2Mp4 from '../view/canvas_to2_mp4.vue'
 import GreenScreen from '../view/webAv/greenScreen.vue'
 import CanvasRecord from '../view/canvasToMp4/canvas_record.vue'
 import WebRtc from '../view/webRtc/index.vue'
+import Room from '../view/webRtc/Room.vue'
 const routes = [
     {
         path: '/',
@@ -166,6 +167,11 @@ const routes = [
       path: '/web_rtc',
       name: 'webRtc',
       component: WebRtc
+    },
+    {
+      path: '/webrtc_room',
+      name: 'room',
+      component: Room
     }
 ]
 

diff --git a/src/utils/socket.js b/src/utils/socket.js
@@ -0,0 +1,4 @@
+import io from 'socket.io-client';
+const host = 'localhost:3000';
+const socket = io.connect(host);
+export default socket;
diff --git a/src/view/webRtc/Room.vue b/src/view/webRtc/Room.vue
@@ -27,24 +27,27 @@
                     发起视频
                 </el-button>
             </div>
-            <div v-else>
-                <h1>当前域名的浏览器不支持WebRTC！</h1>
-            </div>
-        </div>    
+        </div>   
+        <div v-else>
+            <h1>当前域名的浏览器不支持WebRTC！</h1>
+        </div> 
     </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
-
+import socket from '../../utils/socket'
+import { onMounted, ref, reactive } from 'vue'
 
-const canSupportVideo = ref(false)
-const showFormArea = ref(false)
 
+const sockId = ref('') // 客户端id
+const localStream = ref(null) // 本地视频流
+const canSupportVideo = ref(false) // 是否支持视频
+const showFormArea = ref(true) // 是否显示表单
 const roomUsers = ref([]) // 房间在线用户
+const canClickBtn = ref(true) // 是否可以点击按钮
+const peer = ref(null) // peer
 
-const canClickBtn = ref(true)
-
+// 房间信息
 const roomForm = reactive({
     roomId: '',
     nickname: ''
@@ -78,8 +81,151 @@ const canSupportWebRTC = () => {
     getDevices();
     return true;
 }
+const createLocalVideoStream = async () => {
+    const constraints = { audio: true, video: true };
+    const localStream = await navigator.mediaDevices.getUserMedia(constraints);
+    return localStream;
+}
+const initPeerListen = () => {
+    peer.value.onicecandidate = (event) => {
+        if (event.candidate) { 
+            socket.emit('addIceCandidate', { candidate: event.candidate, user: user.value }); 
+        }
+    };
+    peer.value.onaddstream = (event) => {
+        // 拿到对方的视频流
+        document.querySelector('#echat-remote-1').srcObject = event.stream;
+    };
+    this.peer.onclose = () => {};
+}
+const initSocketEvents = () => {
+    // 离开页面
+    window.onbeforeunload = () => {
+        socket.emit('userLeave', {
+            userName: this.roomForm.userName,
+            sockId: this.sockId,
+            roomId: this.roomForm.roomId,
+        });
+    };
+    // 连接成功
+    socket.on('connectionSuccess', (sockId) => {
+        sockId.value = sockId;
+        console.log('connectionSuccess client sockId:', sockId);
+    });
+    // 检查房间成功
+    socket.on('checkRoomSuccess', (exsitRoomUsers) => {
+        debugger
+        this.canClickBtn = true;
+        if (exsitRoomUsers && exsitRoomUsers.length > 1) {
+          this.$message.info('当前房间人数已满~请换个房间id');
+        } else {
+          showFormArea.value = false;
+          roomUsers.value = [
+            {
+              userName: roomForm.userName + '(我)',
+              sockId: sockId.value,
+              roomId: roomForm.roomId,
+
+            }
+          ];
+        }
+    });
+    // 加入房间成功
+    socket.on('joinRoomSuccess', (roomUsers) => {
+        console.log('joinRoomSuccess client user:', roomUsers);
+        const otherUser = roomUsers.find(item => item.sockId !== this.sockId);
+        if (!otherUser) return false;
+        this.$message.success(`${otherUser.userName}加入了房间`);
+        roomUsers.value = [otherUser, {
+          userName: roomForm.userName + '(我)',
+          sockId: sockId.value,
+          roomId: roomForm.roomId,
+        }];
+    });
+    // 用户离开
+    socket.on('userLeave', (roomUsers) => {
+        console.log('userLeave client user:', roomUsers);
+        if (!roomUsers.value.length) {
+          showFormArea.value = true;
+          sockId.value = '';
+        }
+        const serverSockIdArr = roomUsers.map(item => item.sockId);
+        roomUsers.value.forEach(item => {
+          if (serverSockIdArr.indexOf(item.sockId) === -1) {
+            this.$message.info(`${item.userName}离开了房间`);
+            if (item.sockId === this.sockId) {
+              showFormArea.value = true;
+              sockId.value = '';
+            }
+          }
+        });
+        roomUsers.value = roomUsers;
+        roomUsers.value.forEach((item) => {
+          if (item.sockId === sockId.value) {
+            item.userName = item.userName + '(我)';
+          }
+        });
+        // TODO: 挂断视频
+        VIDEO_VIEW.hideAllVideoModal();
+    });
+     // 取消发送视频
+    socket.on('cancelSendVideo', (user) => {
+        const infoTips = user.sockId === sockId ? '您取消了发送视频' : '对方取消了发送视频';
+        this.$message.info(infoTips);
+        VIDEO_VIEW.hideAllVideoModal();
+    });
+    // 接收视频邀请
+    socket.on('receiveVideo', (sender) => {
+        if (this.user.sockId === sender.sockId) return false;
+        VIDEO_VIEW.showReceiveVideoModalBySender(sender);
+    });
+     // 拒绝接收视频
+    socket.on('rejectReceiveVideo', (user) => {
+        const infoTips = user.sockId === sockId.value ? '您拒绝了接收视频' : '对方拒绝了接收视频';
+        this.$message.info(infoTips);
+        VIDEO_VIEW.hideAllVideoModal();
+    });
+    // 接听视频
+    socket.on('answerVideo', async (user) => {
+        VIDEO_VIEW.showInvideoModal();
+        // 创建本地视频流信息
+        const localStream = await createLocalVideoStream();
+        localStream.value = localStream
+        peer.value = new RTCPeerConnection()
+        console.log(peer.value)
+        initPeerListen()
+        peer.value.addStream(this.localStream)
+        if (user.sockId === this.sockId) {
+          // 接收方
+        } else {
+          // 发送方 创建offer
+          const offer = await peer.value.createOffer(this.offerOption);
+          await peer.value.setLocalDescription(offer);
+          socket.emit('receiveOffer', { user: this.user, offer });
+        }
+    });
+}
 
 onMounted(() => {
-    canSupportWebRTC()
+    if(canSupportWebRTC()) {
+        initSocketEvents()
+    }
 })
 </script>
+
+<style>
+.m-room-wrapper{
+    width: 880px;
+    margin: 20px auto!important;
+}
+.m-room-wrapper .box-card {
+    width: 480px;
+}
+.m-room-wrapper .box-card .item{
+    padding: 18px 0;
+}
+.ant-form-item-control-input-content{
+    display: flex;
+    gap: 12px;
+}
+</style>