Skip to content

Commit 887d0d9

Browse files
OurEraOurEra
authored
Merge pull request #14 from yydounai1234/master
Web add vue demo with v4.0.4
2 parents e81a346 + a7da20c commit 887d0d9

File tree

29 files changed

+3326
-1
lines changed

29 files changed

+3326
-1
lines changed

‎Group-Video/Group-Video-Web/index.html‎ renamed to ‎Group-Video/Group-Video-Web/native/index.html‎

File renamed without changes.

‎Group-Video/Group-Video-Web/vue/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎Group-Video/Group-Video-Web/vue/README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# QNRTC Web Group-Video Demo v4.0.4
2+
3+
4+
## 运行
5+
6+
```
7+
yarn install
8+
yarn start
9+
```
10+
11+
## 注意事项
12+
**浏览器只允许 localhost 或者 https 页面访问媒体设备(摄像头)，开发时请确保通过 localhost 来访问**

‎Group-Video/Group-Video-Web/vue/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎Group-Video/Group-Video-Web/vue/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "rtcdemo",
3+
"version": "4.0.4",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vue-tsc --noEmit && vite build",
7+
"preview": "vite preview"
8+
},
9+
"dependencies": {
10+
"qnweb-rtc": "^4.0.4",
11+
"vue": "^3.2.25"
12+
},
13+
"devDependencies": {
14+
"@vitejs/plugin-vue": "^2.0.0",
15+
"typescript": "^4.4.4",
16+
"vite": "^2.7.1",
17+
"vue-tsc": "^0.29.8"
18+
}
19+
}

‎Group-Video/Group-Video-Web/vue/public/favicon.ico‎

4.19 KB
Binary file not shown.

‎Group-Video/Group-Video-Web/vue/src/App.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang="ts">
2+
// This starter template is using Vue 3 <script setup> SFCs
3+
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
4+
import groupVideo from './components/group-video.vue'
5+
</script>
6+
7+
<template>
8+
<groupVideo />
9+
</template>
10+
11+
<style>
12+
#app {
13+
font-family: Avenir, Helvetica, Arial, sans-serif;
14+
-webkit-font-smoothing: antialiased;
15+
-moz-osx-font-smoothing: grayscale;
16+
text-align: left;
17+
color: #2c3e50;
18+
margin-top: 20px;
19+
}
20+
</style>

‎Group-Video/Group-Video-Web/vue/src/assets/logo.png‎

6.69 KB
Loading

‎Group-Video/Group-Video-Web/vue/src/components/group-video.vue‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<template>
2+
<h1>QNRTC Web 多人连麦示例代码</h1>
3+
<label>请输入 RoomToken 加入房间开始连麦</label>
4+
<input v-model="token" type="text" /><br />
5+
<button @click="joinRoom">加入房间</button>
6+
<button @click="leaveRoom">离开房间</button>
7+
<p class="tips">
8+
如果您不知道如何生成 RoomToken，查看<a
9+
href="https://developer.qiniu.io/rtc/8802/pd-overview"
10+
target="_black"
11+
>这里</a
12+
>
13+
</p>
14+
<div id="trackcontainer">
15+
<p>本地视频</p>
16+
<div class="video" ref="localVideo"></div>
17+
<p>远端视频</p>
18+
<div class="video" ref="remoteVideo"></div>
19+
</div>
20+
</template>
21+
22+
<script lang="ts">
23+
import { ref, reactive, onMounted, defineProps } from "vue";
24+
import QNRTC from "qnweb-rtc";
25+
export default {
26+
setup() {
27+
const token = ref("");
28+
const localTracks = reactive([]);
29+
const localVideo = ref(null);
30+
const remoteVideo = ref(null);
31+
const client = ref(null);
32+
return {
33+
token,
34+
localVideo,
35+
remoteVideo,
36+
client,
37+
};
38+
},
39+
mounted() {
40+
window.addEventListener("beforeunload", () => {
41+
this.client && this.client.leave();
42+
});
43+
this.client = QNRTC.createClient();
44+
this.client.on(
45+
"connection-state-changed",
46+
function (connectionState, info) {
47+
console.log("connection-state-changed", connectionState, info);
48+
}
49+
);
50+
this.client.on("user-joined", (user) => {
51+
console.log("user-joined", user);
52+
});
53+
this.client.on("user-left", (user) => {
54+
console.log("user-left", user);
55+
});
56+
this.autoSubscribe();
57+
},
58+
methods: {
59+
// 加入房间
60+
async joinRoom() {
61+
await this.client.join(this.token);
62+
this.publish();
63+
},
64+
// 自动订阅
65+
autoSubscribe() {
66+
// 添加事件监听，当房间中出现新的 Track 时就会触发，参数是 trackInfo 列表
67+
this.client.on("user-published", (userId, tracks) => {
68+
console.log("user-published!", userId, tracks);
69+
this.subscribe(tracks)
70+
.then(() => console.log("subscribe success!"))
71+
.catch((e) => console.error("subscribe error", e));
72+
});
73+
// 就是这样，就像监听 DOM 事件一样通过 on 方法监听相应的事件并给出处理函数即可
74+
},
75+
// 离开房间
76+
leaveRoom() {
77+
for (let i of this.localTracks) {
78+
i.destroy();
79+
}
80+
this.localTracks = [];
81+
this.client.leave();
82+
},
83+
// 订阅 Track
84+
async subscribe(trackInfoList) {
85+
// 通过传入 trackInfoList 调用订阅方法发起订阅，成功会返回相应的 Track 对象，也就是远端的 Track 列表了
86+
const remoteTracks = await this.client.subscribe(trackInfoList);
87+
// 选择页面上的一个元素作为父元素，播放远端的音视频轨
88+
const remoteElement = this.remoteVideo;
89+
// 遍历返回的远端 Track，调用 play 方法完成在页面上的播放
90+
for (const remoteTrack of remoteTracks.videoTracks) {
91+
remoteTrack.play(remoteElement);
92+
}
93+
},
94+
// 发布 Track
95+
async publish() {
96+
// 同时采集麦克风音频和摄像头视频轨道。
97+
// 这个函数会返回一组 audio track 与 video track
98+
const localTracks = await QNRTC.createMicrophoneAndCameraTracks();
99+
console.log("my local tracks", localTracks);
100+
this.localTracks = localTracks;
101+
// 将刚刚的 Track 列表发布到房间中
102+
await this.client.publish(localTracks);
103+
console.log("publish success!");
104+
// 在这里添加
105+
// 获取页面上的一个元素作为播放画面的父元素
106+
const localElement = this.localVideo;
107+
// 遍历本地采集的 Track 对象
108+
for (const localTrack of localTracks) {
109+
// 如果这是麦克风采集的音频 Track，我们就不播放它。
110+
if (localTrack.track.info.kind === "audio") continue;
111+
// 调用 Track 对象的 play 方法在这个元素下播放视频轨
112+
localTrack.play(localElement, {
113+
mirror: true,
114+
});
115+
}
116+
},
117+
},
118+
};
119+
</script>
120+
121+
<style scoped>
122+
select {
123+
width: 300px;
124+
}
125+
126+
section {
127+
margin-bottom: 20px;
128+
}
129+
130+
.video {
131+
width: 320px;
132+
height: 240px;
133+
background: #000;
134+
}
135+
136+
button {
137+
margin-right: 10px;
138+
}
139+
</style>

‎Group-Video/Group-Video-Web/vue/src/env.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/// <reference types="vite/client" />
2+
3+
declare module '*.vue' {
4+
import { DefineComponent } from 'vue'
5+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
6+
const component: DefineComponent<{}, {}, any>
7+
export default component
8+
}

0 commit comments

Comments
 (0)