feat:

2022-07-05 14:05:20 +08:00 · 2022-07-05 14:05:20 +08:00 · 8af84d8f2d
commit 8af84d8f2d
parent 83089af7c7
9 changed files with 300 additions and 191 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,3 +4,4 @@ dist/
 **/dist
 **/yarn-error.log
 .DS_Store
+.idea
--- a/.idea/markdown.xml
+++ b/.idea/markdown.xml
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MarkdownSettings">
+    <enabledExtensions>
+      <entry key="MermaidLanguageExtension" value="true" />
+      <entry key="PlantUMLLanguageExtension" value="true" />
+    </enabledExtensions>
+  </component>
+</project>
--- a/webrtc-server/server.js
+++ b/webrtc-server/server.js
@ -3,10 +3,11 @@ const koaSend = require('koa-send');
 const statics = require('koa-static');
 const socket = require('socket.io');

+const fs = require('fs');
 const path = require('path');
 const http = require('http');

-const port = 3000;
+const httpPort = 8765;
 const app = new Koa();


@ -28,16 +29,16 @@ app.use(async (ctx, next) => {
    await next();
  }
 });
-const httpServer = http.createServer(app.callback()).listen(port, ()=>{
-    console.log('httpServer app started at port ...' + port);
+const httpServer = http.createServer(app.callback()).listen(httpPort, () => {
+  console.log('httpServer app started at port ...' + httpPort);
 });
-const options = {
+
+const httpIo = socket(httpServer, {
  ioOptions: {
    pingTimeout: 10000,
    pingInterval: 5000,
  }
-};
-const httpIo = socket(httpServer, options);
+});
 // Record<roomId,  { userName: string; roomId: string; socketId: string }>
 const rooms = {};
 // Record<socketId, sock>
--- a/webrtc-static/public/index.html
+++ b/webrtc-static/public/index.html
@ -4,11 +4,9 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>webrtc-icon-192x192.png">
    <title>webrtc-demo</title>
  </head>
  <body>
    <div id="app"></div>
-    <script src="<%= BASE_URL %>video-view.js"></script>
  </body>
 </html>
--- a/webrtc-static/public/video-view.js
+++ b/webrtc-static/public/video-view.js
--- a/webrtc-static/public/webrtc-icon-192x192.png
+++ b/webrtc-static/public/webrtc-icon-192x192.png
--- a/webrtc-static/src/pages/Room.vue
+++ b/webrtc-static/src/pages/Room.vue
@ -33,6 +33,15 @@
          发起视频
        </el-button>
      </div>
+      <Video
+          :showStartVideoByReceiver="showStartVideoByReceiver"
+          :showStartVideoBySender="showStartVideoBySender"
+          :showVideo="showVideo"
+          @cancelSendVideo="cancelSendVideo"
+          @cancelReceiveVideo="cancelReceiveVideo"
+          @hangupVideo="hangUpVideo"
+          @answerVideo="answerVideo"
+      />
    </div>
    <div v-else>
      <h1>当前域名的浏览器不支持WebRTC！</h1>
@ -42,13 +51,14 @@

 <script>
 import socket from '../utils/socket.js';
+import Video, { setRemoteSteam, setLocalStream } from '@/pages/Video';

 export default {
  name: 'Room',
+  components: { Video },
  created () {
    if (this.canSupportWebRTC()) {
      this.initSocketEvents();
-      this.initVIDEO_VIEWSdk();
    }
  },
  data () {
@ -68,6 +78,10 @@ export default {
    };
    return {
      showFormArea: true,
+      showVideo: false,
+      showStartVideoByReceiver: null,
+      showStartVideoBySender: null,
+      remoteStream: null,
      roomForm: {
        roomId: '',
        userName: ''
@ -137,7 +151,7 @@ export default {
    async getDevices () {
      try {
        const devices = await navigator.mediaDevices.enumerateDevices();
-        VIDEO_VIEW.showDevicesNameByDevices(devices);
+        console.log('devices', devices);
      } catch (error) {
        console.error(error);
        const msg = `getDevices error: ${error.name} : ${error.message}`;
@ -206,7 +220,7 @@ export default {
          }
        });
        // TODO: 挂断视频 0-0
-        VIDEO_VIEW.hideAllVideoModal();
+        this.hideAllVideoModal();
      });
      socket.on('disconnect', (message) => {
        this.showFormArea = true;
@ -214,7 +228,7 @@ export default {
        console.log('client sock disconnect:', message);
        socket.emit('userLeave', this.user);
        // TODO: 挂断视频 0-0
-        VIDEO_VIEW.hideAllVideoModal();
+        this.hideAllVideoModal();
      });
      // ================== 视频相关 =====================

@ -222,31 +236,41 @@ export default {
      socket.on('cancelSendVideo', (user) => {
        const infoTips = user.sockId === this.sockId ? '您取消了发送视频' : '对方取消了发送视频';
        this.$message.info(infoTips);
-        VIDEO_VIEW.hideAllVideoModal();
+        this.hideAllVideoModal();
      });
      // 接收视频邀请
      socket.on('receiveVideo', (sender) => {
        if (this.user.sockId === sender.sockId) return false;
-        VIDEO_VIEW.showReceiveVideoModalBySender(sender);
+        this.showStartVideoBySender = sender;
      });
      // 拒绝接收视频
      socket.on('rejectReceiveVideo', (user) => {
        const infoTips = user.sockId === this.sockId ? '您拒绝了接收视频' : '对方拒绝了接收视频';
        this.$message.info(infoTips);
-        VIDEO_VIEW.hideAllVideoModal();
+        this.hideAllVideoModal();
      });
      // 接听视频
      socket.on('answerVideo', async (user) => {
-        VIDEO_VIEW.showInvideoModal();
+        this.showVideo = true;
        // 创建本地视频流信息
        this.localStream = await this.createLocalVideoStream();
-        document.querySelector('#echat-local').srcObject = this.localStream;
+        setLocalStream(this.localStream);
        // Link: https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection
        // RTCPeerConnection 接口代表一个由本地计算机到远端的 WebRTC 连接
        // 呼叫方发送一个 offer(请求)，被呼叫方发出一个 answer（应答）来回答请求
        this.peer = new RTCPeerConnection();
        console.log(this.peer);
-        this.initPeerListen();
+        this.peer.onicecandidate = (event) => {
+          if (event.candidate) {
+            socket.emit('addIceCandidate', { candidate: event.candidate, user: this.user });
+          }
+        };
+        this.peer.onaddstream = (event) => {
+          // 拿到对方的视频流
+          setRemoteSteam(event.stream);
+        };
+        this.peer.onclose = () => {
+        };
        // Adding a local stream won't trigger the onaddstream callback
        this.peer.addStream(this.localStream);
        if (user.sockId === this.sockId) {
@ -266,9 +290,9 @@ export default {
        this.$message.info(infoTips);
        this.peer.close();
        this.peer = null;
-        VIDEO_VIEW.hideAllVideoModal();
-        document.querySelector('#echat-remote-1').srcObject = null;
-        document.querySelector('#echat-local').srcObject = null;
+        this.hideAllVideoModal();
+        setRemoteSteam(null);
+        setLocalStream(null);
      });
      //
      socket.on('addIceCandidate', async (candidate) => {
@ -314,50 +338,26 @@ export default {
    // 发送视频
    toSendVideo () {
      socket.emit('toSendVideo', this.user);
-      VIDEO_VIEW.showStartVideoModalByReceiver(this.receiveUser);
+      this.showStartVideoByReceiver = this.receiveUser;
    },
-    initVIDEO_VIEWSdk () {
-      const configOptios = {
-        startVideoCancelCb: this.startVideoCancelCb,
-        receiveVideoCancelCb: this.receiveVideoCancelCb,
-        receiveVideoAnswerCb: this.receiveVideoAnswerCb,
-        hangUpVideoCb: this.hangUpVideoCb,
-        openMikeCb: this.openMikeCb,
-        closeMikeCb: this.closeMikeCb,
-        openCammerCb: this.openCammerCb,
-        closeCammerCb: this.closeCammerCb,
-        toScreenCb: this.toScreenCb,
-      };
-      VIDEO_VIEW.configCallBack(configOptios);
+    hideAllVideoModal () {
+      this.showVideo = false;
+      this.showStartVideoByReceiver = null;
+      this.showStartVideoBySender = null;
    },
-    startVideoCancelCb () {
+    cancelSendVideo () {
      socket.emit('cancelSendVideo', this.user);
-      VIDEO_VIEW.hideAllVideoModal();
+      this.hideAllVideoModal();
    },
-    receiveVideoCancelCb () {
+    cancelReceiveVideo () {
      socket.emit('rejectReceiveVideo', this.user);
-      VIDEO_VIEW.hideAllVideoModal();
+      this.hideAllVideoModal();
    },
-    receiveVideoAnswerCb () {
+    answerVideo () {
      socket.emit('answerVideo', this.user);
    },
-    hangUpVideoCb () {
+    hangUpVideo () {
      socket.emit('hangupVideo', this.user);
-    },
-    openMikeCb () {
-
-    },
-    closeMikeCb () {
-
-    },
-    openCammerCb () {
-
-    },
-    closeCammerCb () {
-
-    },
-    toScreenCb () {
-
    },
    async createLocalVideoStream () {
      const constraints = { audio: true, video: true };
@ -366,17 +366,6 @@ export default {
      console.log('localStream:', localStream);
      return localStream;
    },
-    initPeerListen () {
-      this.peer.onicecandidate = (event) => {
-        if (event.candidate) { socket.emit('addIceCandidate', { candidate: event.candidate, user: this.user }); }
-      };
-      this.peer.onaddstream = (event) => {
-        // 拿到对方的视频流
-        document.querySelector('#echat-remote-1').srcObject = event.stream;
-      };
-      this.peer.onclose = () => {
-      };
-    },
  }
 };
 </script>
@ -385,9 +374,11 @@ export default {
 .m-room-wrapper {
  margin-top: 20px;
 }
+
 .m-room-wrapper .box-card {
  width: 480px;
 }
+
 .m-room-wrapper .box-card .item {
  padding: 18px 0;
 }
--- a/webrtc-static/src/pages/Video.vue
+++ b/webrtc-static/src/pages/Video.vue
@ -0,0 +1,111 @@
+<template>
+  <div class="video">
+    <div v-if="showVideo">
+      <div class="videoWrapper">
+        <video autoplay class="remoteStream" id="remoteStream"></video>
+        <video autoplay class="localStream" id="localStream"></video>
+      </div>
+      <div>
+        <el-button type="danger" @click="clickHangup">挂断</el-button>
+      </div>
+    </div>
+    <div v-if="!showVideo && showStartVideoByReceiver" class="modal">
+      <div class="desc">等待{{ showStartVideoByReceiver.userName }}接受视频通话邀请</div>
+      <div class="avatar">
+        <el-avatar icon="el-icon-user-solid"></el-avatar>
+      </div>
+      <div>
+        <el-button type="danger" @click="cancelSendVideo">挂断</el-button>
+      </div>
+    </div>
+    <div v-if="!showVideo && showStartVideoBySender" class="modal">
+      <div class="avatar">
+        <el-avatar icon="el-icon-user-solid"></el-avatar>
+      </div>
+      <div class="desc">{{ showStartVideoBySender.userName }}邀请您进行视频通话</div>
+      <div>
+        <el-button type="primary" @click="clickAnswer">接听</el-button>
+        <el-button type="danger" @click="cancelReceiveVideo">挂断</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VideoView',
+  props: ['devices', 'showVideo', 'showStartVideoByReceiver', 'showStartVideoBySender', 'remoteStream', 'localStream'],
+  methods: {
+    cancelSendVideo () {
+      this.$emit('cancelSendVideo');
+    },
+    cancelReceiveVideo () {
+      this.$emit('cancelReceiveVideo');
+    },
+    clickHangup () {
+      this.$emit('hangupVideo');
+    },
+    clickAnswer () {
+      this.$emit('answerVideo');
+    }
+  }
+};
+
+export function setLocalStream (stream) {
+  document.querySelector('#localStream').srcObject = stream;
+}
+
+export function setRemoteSteam (stream) {
+  document.querySelector('#remoteStream').srcObject = stream;
+}
+</script>
+
+<style scoped>
+.video {
+  width: 500px;
+  height: 440px;
+}
+
+.modal {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.desc {
+  color: #fff;
+  margin-bottom: 20px;
+}
+
+.avatar {
+  margin-bottom: 20px;
+}
+
+video {
+  background: #000;
+}
+
+.videoWrapper {
+  position: relative;
+  width: 500px;
+  height: 400px;
+}
+
+.localStream {
+  width: 150px;
+  height: 100px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.remoteStream {
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/webrtc-static/src/utils/socket.js
+++ b/webrtc-static/src/utils/socket.js
@ -1,4 +1,4 @@
 import io from 'socket.io-client';
-const host = 'localhost:3000';
+const host = 'http://localhost:8765';
 const socket = io.connect(host);
 export default socket;