├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── VideoPlayer.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    ├── utils
    │   └── request.js
    └── views
    │   └── Home.vue
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint'
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 工程介绍
 2 | 视频播放 vue3版本
 3 | 
 4 | # 功能介绍
 5 | - [x] 播放摄像头rtsp
 6 | - [x] 播放编码器rtsp
 7 | - [x] 开关播放
 8 | - [x] 开关静音控制
 9 | - [x] 全屏
10 | 
11 | # 文件说明
12 | - 组件位置: @/components/VideoPlayer.vue
13 | - 使用案例: @/views/Home.vue
14 | - 后台访问地址: @/utils/request.js [baseURL]
15 | 
16 | # 组件说明
17 | 
18 | ```vue
19 | <video-player
20 |     v-for="(item, index) in rtspList"
21 |     :key="index"
22 |     :rtspUrl="item.rtspUrl"
23 |     :disableAudio="item.disableAudio"
24 |     :play="item.play"
25 |     :muted="item.muted"
26 |     v-model:full="item.full"
27 |     :class="{ selected: item.selected }"
28 |     @click="selectedVideoElem(index)"
29 | >
30 | <script>
31 | export default {
32 | 	setup() {
33 |         /* 
34 |           参数说明：
35 |             rtspUrl: 地址
36 |             disableAudio: 硬件设备是否支持音频，编码器不支持=false,摄像头支持=true
37 |             play: 是否自动播放 [默认播放=true]
38 |             selected: 选中状态 [添加边框]
39 |             muted: 是否静音 [默认不静音=false]
40 |             full: 是否全屏 [全屏=true]
41 |         */
42 |     	const rtspList = ref([
43 |             	{
44 |                   rtspUrl: "rtsp://admin:cebon61332433@192.168.99.215",
45 |                   disableAudio: false,
46 |                   play: true,
47 |                   selected: false,
48 |                   muted: false,
49 |                   full: false,
50 |                 }
51 |         ])
52 |         
53 |         return { rtspList }
54 |     }
55 | }
56 | </script>
57 | ```
58 | 
59 | 
60 | # 启动
61 | - 控制台 yarn serve
62 | 
63 | # 完整运行
64 | - 需要配合后端项目 我的另一个仓库 [videoplayer_backend](https://github.com/PittYao/videoPlayer_backend)
65 | - 然后在本仓库的utils/request.js中修改后端ip和端口
66 | ```js
67 | const instance = axios.create({
68 |   baseURL: 'http://192.168.99.177:7778',
69 |   timeout: 10000
70 | })
71 | ```
72 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "videoplayer",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.1",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^3.0.0",
14 |     "vue-router": "^4.0.0-0",
15 |     "vuex": "^4.0.0-0"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~4.5.0",
19 |     "@vue/cli-plugin-eslint": "~4.5.0",
20 |     "@vue/cli-plugin-router": "~4.5.0",
21 |     "@vue/cli-plugin-vuex": "~4.5.0",
22 |     "@vue/cli-service": "~4.5.0",
23 |     "@vue/compiler-sfc": "^3.0.0",
24 |     "babel-eslint": "^10.1.0",
25 |     "eslint": "^6.7.2",
26 |     "eslint-plugin-vue": "^7.0.0",
27 |     "sass": "^1.26.5",
28 |     "sass-loader": "^8.0.2"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PittYao/VideoPlayer/8010189d10f078c5598719f1c04e247839cb1429/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="nav">
 3 |   <!--   <router-link to="/">Home</router-link> |
 4 |     <router-link to="/about">About</router-link> -->
 5 |   </div>
 6 |   <router-view/>
 7 | </template>
 8 | 
 9 | <style lang="scss">
10 | #app {
11 |   font-family: Avenir, Helvetica, Arial, sans-serif;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 |   text-align: center;
15 |   color: #2c3e50;
16 | }
17 | 
18 | #nav {
19 |   padding: 30px;
20 | 
21 |   a {
22 |     font-weight: bold;
23 |     color: #2c3e50;
24 | 
25 |     &.router-link-exact-active {
26 |       color: #42b983;
27 |     }
28 |   }
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PittYao/VideoPlayer/8010189d10f078c5598719f1c04e247839cb1429/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/VideoPlayer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <video ref="videoElem" autoplay></video>
  3 | </template>
  4 | 
  5 | <script>
  6 | import { ref, onMounted, reactive, watch } from "vue";
  7 | import { post, get } from "@/utils/request";
  8 | 
  9 | const usePcObjEffect = (rstpUrl, disableAudio) => {
 10 |   const videoElem = ref();
 11 |   const pcObj = reactive({
 12 |     pc: null,
 13 |     sendChannel: null,
 14 |     stream: null,
 15 |     suuid: 0,
 16 |     // 接口地址
 17 |     registerUrl: "/stream/register",
 18 |     receiverUrl: "/stream/receiver/",
 19 |     codecUrl: "/stream/codec/",
 20 |   });
 21 | 
 22 |   // 清空pc
 23 |   const pcClear = () => {
 24 |     videoElem.value.srcObject = null;
 25 |     pcObj.pc = null;
 26 |     pcObj.sendChannel = null;
 27 |     pcObj.stream = null;
 28 |   };
 29 | 
 30 |   // 重置pc
 31 |   const pcReload = () => {
 32 |     pcClear();
 33 | 
 34 |     let stream = new MediaStream();
 35 |     pcObj.stream = stream;
 36 | 
 37 |     let config = {
 38 |       iceServers: [
 39 |         {
 40 |           urls: ["stun:stun.l.google.com:19302"],
 41 |         },
 42 |       ],
 43 |     };
 44 | 
 45 |     pcObj.pc = new RTCPeerConnection(config);
 46 |     pcObj.pc.onnegotiationneeded = handleNegotiationNeededEvent;
 47 | 
 48 |     pcObj.pc.ontrack = (event) => {
 49 |       pcObj.stream.addTrack(event.track);
 50 |       videoElem.value.srcObject = pcObj.stream;
 51 |       console.log(event.streams.length + " track is delivered");
 52 |     };
 53 | 
 54 |     pcObj.pc.oniceconnectionstatechange = (e) => {
 55 |       console.log(e);
 56 |       if (pcObj.pc !== null) {
 57 |         console.log(pcObj.pc.iceConnectionState);
 58 |       }
 59 |     };
 60 |   };
 61 | 
 62 |   const handleNegotiationNeededEvent = async () => {
 63 |     let offer = await pcObj.pc.createOffer();
 64 |     await pcObj.pc.setLocalDescription(offer);
 65 |     getRemoteSdp();
 66 |   };
 67 | 
 68 |   const getRemoteSdp = async () => {
 69 |     try {
 70 |       const sdpData = {
 71 |         suuid: pcObj.suuid,
 72 |         data: btoa(pcObj.pc.localDescription.sdp),
 73 |       };
 74 | 
 75 |       const result = await post(pcObj.receiverUrl + pcObj.suuid, sdpData);
 76 | 
 77 |       try {
 78 |         pcObj.pc.setRemoteDescription(
 79 |           new RTCSessionDescription({
 80 |             type: "answer",
 81 |             sdp: Buffer.from(result, "base64"),
 82 |           })
 83 |         );
 84 |       } catch (e) {
 85 |         console.warn(e);
 86 |       }
 87 |     } catch (error) {
 88 |       console.log("receiver请求失败", error);
 89 |     }
 90 |   };
 91 | 
 92 |   // 获取编解码
 93 |   const getCodecInfo = async () => {
 94 |     let result = await get(pcObj.codecUrl + pcObj.suuid);
 95 | 
 96 |     result.forEach((value) => {
 97 |       pcObj.pc.addTransceiver(value.Type, {
 98 |         direction: "sendrecv",
 99 |       });
100 |     });
101 | 
102 |     pcObj.sendChannel = pcObj.pc.createDataChannel("foo");
103 |     pcObj.sendChannel.onclose = () => console.log("sendChannel has closed");
104 |     pcObj.sendChannel.onopen = () => {
105 |       console.log("sendChannel has opened");
106 |       pcObj.sendChannel.send("ping");
107 |       let interval = setInterval(() => {
108 |         if (pcObj.sendChannel === null) {
109 |           clearInterval(interval);
110 |         } else if (pcObj.sendChannel.readyState === "open") {
111 |           pcObj.sendChannel.send("ping");
112 |         }
113 |       }, 1000);
114 |     };
115 | 
116 |     pcObj.sendChannel.onmessage = (e) => console.log(e);
117 |   };
118 | 
119 |   // 播放视频
120 |   const playVideo = async () => {
121 |     // 重置
122 |     pcReload();
123 |     // 清空
124 |     console.log("pc状态：", pcObj.pc.connectionState);
125 |     if (pcObj.pc.connectionState === "connected") {
126 |       // 连接状态断开
127 |       pcObj.pc.close();
128 |       console.log("pc关闭后建立状态：", pcObj.pc.connectionState);
129 |     }
130 | 
131 |     console.log("rtspUrl:", rstpUrl);
132 | 
133 |     let send_data = {
134 |       rtspUrl: rstpUrl,
135 |       disableAudio: disableAudio,
136 |     };
137 | 
138 |     const result = await post(pcObj.registerUrl, send_data);
139 | 
140 |     try {
141 |       if (result.code === 200) {
142 |         pcObj.suuid = result.data;
143 |         // 请求编解码
144 |         getCodecInfo();
145 |       }
146 |     } catch (error) {
147 |       console.warn("register 注册失败", error);
148 |     }
149 |   };
150 | 
151 |   // 全屏
152 |   const fullScreen = () => {
153 |     const videoElemValue = videoElem.value;
154 | 
155 |     // 适配各浏览器
156 |     if (videoElemValue.requestFullscreen) {
157 |       videoElemValue.requestFullscreen();
158 |     } else if (videoElemValue.webkitRequestFullscreen) {
159 |       videoElemValue.webkitRequestFullscreen();
160 |     } else if (videoElemValue.mozRequestFullScreen) {
161 |       videoElemValue.mozRequestFullScreen();
162 |     }
163 |   };
164 | 
165 |   // 检测全屏元素
166 |   const checkFull = () => {
167 |     var isFull =
168 |       document.fullscreenElement ||
169 |       document.mozFullScreenElement ||
170 |       document.webkitFullscreenElement;
171 |     //to fix : false || undefined == undefined
172 |     if (isFull === undefined) isFull = false;
173 |     return isFull;
174 |   };
175 | 
176 |   return { playVideo, pcClear, videoElem, fullScreen, checkFull };
177 | };
178 | 
179 | export default {
180 |   name: "VideoPlayer",
181 |   props: {
182 |     rtspUrl: String,
183 |     disableAudio: {
184 |       type: Boolean,
185 |       default: false,
186 |     },
187 |     play: {
188 |       type: Boolean,
189 |       default: true,
190 |     },
191 |     muted: {
192 |       type: Boolean,
193 |       default: false,
194 |     },
195 |     full: {
196 |       type: Boolean,
197 |       default: false,
198 |     },
199 |   },
200 |   setup(props, { emit }) {
201 |     const { playVideo, pcClear, videoElem, fullScreen, checkFull } =
202 |       usePcObjEffect(props.rtspUrl, props.disableAudio);
203 | 
204 |     onMounted(() => {
205 |       // 起始步骤
206 |       if (props.rtspUrl === "" || props.rtspUrl === undefined) {
207 |         return;
208 |       }
209 |       // 自动播放
210 |       if (props.play) {
211 |         playVideo();
212 |       }
213 | 
214 |       // 全屏监听
215 |       document.addEventListener("fullscreenchange", () => {
216 |         if (!checkFull()) {
217 |           console.log("退出全屏");
218 |           emit("update:full", false);
219 |         } else {
220 |           console.log("进入全屏");
221 |         }
222 |       });
223 |     });
224 | 
225 |     // 控制播放关闭
226 |     watch(
227 |       () => props.play,
228 |       (newPlay) => {
229 |         newPlay === true ? playVideo() : pcClear();
230 |       }
231 |     );
232 | 
233 |     // 静音开关
234 |     watch(
235 |       () => props.muted,
236 |       (newMuted) => {
237 |         newMuted === true
238 |           ? (videoElem.value.muted = "muted")
239 |           : (videoElem.value.muted = "");
240 |       }
241 |     );
242 | 
243 |     // 全屏开关
244 |     watch(
245 |       () => props.full,
246 |       (newFull) => {
247 |         if (newFull === true) {
248 |           fullScreen();
249 |         }
250 |       }
251 |     );
252 | 
253 |     return { playVideo, pcClear, videoElem };
254 |   },
255 | };
256 | </script>
257 | 
258 | <style lang="scss" scoped>
259 | video {
260 |   width: 600px;
261 | }
262 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import store from './store'
5 | 
6 | createApp(App).use(store).use(router).mount('#app')
7 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import Home from '../views/Home.vue'
 3 | 
 4 | const routes = [
 5 |   {
 6 |     path: '/',
 7 |     name: 'Home',
 8 |     component: Home
 9 |   },
10 | ]
11 | 
12 | const router = createRouter({
13 |   history: createWebHistory(process.env.BASE_URL),
14 |   routes
15 | })
16 | 
17 | export default router
18 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import { createStore } from 'vuex'
 2 | 
 3 | export default createStore({
 4 |   state: {
 5 |   },
 6 |   mutations: {
 7 |   },
 8 |   actions: {
 9 |   },
10 |   modules: {
11 |   }
12 | })
13 | 


--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | // 后台地址
 4 | const instance = axios.create({
 5 |   baseURL: 'http://192.168.99.177:7778',
 6 |   // baseURL: 'http://127.0.0.1:7778',
 7 |   timeout: 10000
 8 | })
 9 | 
10 | // 封装get请求
11 | export const get = (url, params = {}) => {
12 |   return new Promise((resolve, reject) => {
13 |     instance.get(url, { params }).then((response) => {
14 |       resolve(response.data)
15 |     }, err => {
16 |       reject(err)
17 |     })
18 |   })
19 | }
20 | 
21 | // 封装post请求
22 | export const post = (url, data = {}) => {
23 |   return new Promise((resolve, reject) => {
24 |     instance.post(url, data, {
25 |       headers: {
26 |         'Content-Type': 'application/json'
27 |       }
28 |     }).then((response) => {
29 |       resolve(response.data)
30 |     }, err => {
31 |       reject(err)
32 |     })
33 |   })
34 | }
35 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <video-player
  3 |     v-for="(item, index) in rtspList"
  4 |     :key="index"
  5 |     :rtspUrl="item.rtspUrl"
  6 |     :disableAudio="item.disableAudio"
  7 |     :play="item.play"
  8 |     :muted="item.muted"
  9 |     v-model:full="item.full"
 10 |     :class="{ selected: item.selected }"
 11 |     @click="selectedVideoElem(index)"
 12 |   />
 13 |   <div>
 14 |     <button @click="getRtspList">获取播放地址集合</button> |
 15 |     <button @click="switchVideo(true)">开始播放</button> |
 16 |     <button @click="switchVideo(false)">关闭播放</button> |
 17 |     <button @click="switchMuted(true)">静音</button> |
 18 |     <button @click="switchMuted(false)">取消静音</button> |
 19 |     <button @click="launchFull">全屏</button> |
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | import { ref } from "vue";
 25 | import VideoPlayer from "@/components/VideoPlayer.vue";
 26 | 
 27 | const useVideoPlayerEffect = (rtspList, selectedList) => {
 28 |   // 切换 开始/关闭 播放
 29 |   const switchVideo = (play) => {
 30 |     const data = selectedList.value;
 31 |     data.forEach((index) => {
 32 |       rtspList.value[index].play = play;
 33 |     });
 34 | 
 35 |     clearSelected();
 36 |   };
 37 | 
 38 |   // 切换 静音 控制
 39 |   const switchMuted = (muted) => {
 40 |     const data = selectedList.value;
 41 |     data.forEach((index) => {
 42 |       rtspList.value[index].muted = muted;
 43 |     });
 44 | 
 45 |     clearSelected();
 46 |   };
 47 | 
 48 |   // 全屏
 49 |   const launchFull = () => {
 50 |     const data = selectedList.value;
 51 | 
 52 |     if (data.length > 1 || data.length === 0) {
 53 |       alert("只能选择一个画面全屏");
 54 |       return;
 55 |     }
 56 | 
 57 |     const index = data[0];
 58 |     rtspList.value[index].full = true;
 59 | 
 60 |     clearSelected();
 61 |   };
 62 | 
 63 |   // 清除选中
 64 |   const clearSelected = () => {
 65 |     clearSelectedStyle();
 66 |     selectedList.value = [];
 67 |   };
 68 | 
 69 |   // 清除选中样式
 70 |   const clearSelectedStyle = () => {
 71 |     rtspList.value.forEach((item) => {
 72 |       item.selected = false;
 73 |     });
 74 |   };
 75 |   return { switchVideo, switchMuted, launchFull };
 76 | };
 77 | 
 78 | export default {
 79 |   name: "Home",
 80 |   components: {
 81 |     VideoPlayer,
 82 |   },
 83 |   setup() {
 84 | 
 85 |     let rtspList = ref([]);
 86 |     let selectedList = ref([]);
 87 | 
 88 |     const { switchVideo, switchMuted, launchFull } = useVideoPlayerEffect(
 89 |       rtspList,
 90 |       selectedList
 91 |     );
 92 | 
 93 |     // 模拟从后台获取rtsp数据
 94 |     /* 
 95 |       参数说明：
 96 |         rtspUrl: 地址
 97 |         disableAudio: 硬件设备是否支持音频，编码器不支持=false,摄像头支持=true
 98 |         play: 是否自动播放 [默认播放=true]
 99 |         selected: 选中状态 [添加边框]
100 |         muted: 是否静音 [默认不静音=false]
101 |     */
102 |     const getRtspList = () => {
103 |       rtspList.value = [
104 |         {
105 |           // rtspUrl: "rtsp://admin:hk123456@10.0.5.2:554",
106 |           rtspUrl: "rtsp://admin:cebon61332433@192.168.99.215",
107 |           disableAudio: false,
108 |           play: false,
109 |           selected: false,
110 |           muted: false,
111 |           full: false,
112 |         },
113 |         {
114 |           // rtspUrl: "rtsp://admin:hk123456@10.0.6.2:554",
115 |           rtspUrl: "rtsp://admin:61332433@192.168.99.117",
116 |           disableAudio: true,
117 |           play: true,
118 |           selected: false,
119 |           muted: false,
120 |           full: false,
121 |         },
122 |       ];
123 |     };
124 | 
125 |     // 添加节点到选中集合
126 |     const selectedVideoElem = (index) => {
127 |       let videoElem = rtspList.value[index];
128 |       let selectedListRef = selectedList.value;
129 |       if (videoElem !== undefined) {
130 |         selectedListRef.includes(index) === true
131 |           ? selectedListRef.shift(index)
132 |           : selectedListRef.push(index);
133 |         videoElem.selected = !videoElem.selected;
134 |       }
135 |     };
136 | 
137 |     return {
138 |       rtspList,
139 |       selectedList,
140 |       switchVideo,
141 |       switchMuted,
142 |       launchFull,
143 |       getRtspList,
144 |       selectedVideoElem,
145 |     };
146 |   },
147 | };
148 | </script>
149 | 
150 | <style lang="scss" scoped>
151 | .selected {
152 |   border: 1px solid red;
153 | }
154 | </style>


--------------------------------------------------------------------------------