Skip to content

Commit 12a8bf5

Browse files
OurEraOurEra
authored
Merge pull request #16 from yydounai1234/master
Web demo code optimization
2 parents e63d8cf + 5b9407c commit 12a8bf5

File tree

1 file changed

+72
-76
lines changed
  • One-On-One-Video/One-On-One-Video-Web/native

1 file changed

+72
-76
lines changed

‎One-On-One-Video/One-On-One-Video-Web/native/index.html‎

Lines changed: 72 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
<!-- subscribe.html -->
21
<!DOCTYPE html>
32
<html>
43
<head>
54
<meta charset="utf-8" />
65
<title>One on One Sample</title>
7-
</head>
8-
<!-- 同样，这里引入我们的 SDK -->
96
<!-- sdk源文件git地址：https://github.com/pili-engineering/QNRTC-Web/tree/master/Release/qnweb-rtc.js -->
10-
<script src="./qnweb-rtc.js"></script>
7+
<!-- 该地址仅供测试，不保证稳定，正式环境切勿使用 -->
8+
<script src="https://docs.qnsdk.com/qnweb-rtc.js"></script>
119
<style>
1210
select {
1311
width: 300px;
@@ -16,90 +14,88 @@
1614
section {
1715
margin-bottom: 20px;
1816
}
19-
2017
#localtracks, #remotetracks {
21-
width: 320px;
22-
height: 240px;
23-
background: #000;
18+
width: 320px;
19+
height: 240px;
20+
background: #000;
2421
}
25-
</style>
22+
</style>
23+
</head>
2624
<body>
2725
<label>请输入 RoomToken 加入房间开始连麦</label>
28-
<input id="roomtoken" type="text"></input>
26+
<input id="roomtoken" type="text" />
2927
<p class="tips">如果您不知道如何生成 RoomToken，查看<a href="https://developer.qiniu.io/rtc/8802/pd-overview" target="_black">这里的接入流程</a></p>
3028
<button onclick="joinRoom()">加入房间</button>
3129
<p>本地视频</p>
3230
<div id="localtracks"></div>
3331
<p>远端视频</p>
3432
<div id="remotetracks"></div>
3533
</body>
36-
<script>
37-
// 确认引入成功
38-
console.log("current version", QNRTC.VERSION);
39-
// 增加一个函数 publish，用于采集并发布自己的媒体流
40-
// 这里的参数 client 是指刚刚初始化的 QNRTCClient 对象
41-
async function publish(client) {
42-
// 同时采集麦克风音频和摄像头视频轨道。
43-
// 这个函数会返回一组audio track 与 video track
34+
</html>
35+
<script>
36+
// 确认引入成功
37+
console.log("current version", QNRTC.VERSION);
38+
// 这里采用的是 async/await 的异步方案，您也可以根据需要或者习惯替换成 Promise 的写法
39+
async function joinRoom() {
40+
// 创建QNRTCClient对象
41+
const client = QNRTC.createClient();
42+
// 需要先监听对应事件再加入房间
43+
autoSubscribe(client);
44+
const roomTokenInput = document.getElementById("roomtoken");
45+
const roomToken = roomTokenInput.value;
46+
// 这里替换成刚刚生成的 RoomToken
47+
await client.join(roomToken);
48+
console.log("joinRoom success!");
49+
await publish(client);
50+
}
51+
// 增加一个函数 publish，用于采集并发布自己的媒体流
52+
// 这里的参数 client 是指刚刚初始化的 QNRTCClient 对象
53+
async function publish(client) {
54+
// 同时采集麦克风音频和摄像头视频轨道。
55+
// 这个函数会返回一组audio track 与 video track
4456

45-
const localTracks = await QNRTC.createMicrophoneAndCameraTracks();
46-
console.log("my local tracks", localTracks);
47-
// 将刚刚的 Track 列表发布到房间中
48-
await client.publish(localTracks);
49-
console.log("publish success!");
57+
const localTracks = await QNRTC.createMicrophoneAndCameraTracks();
58+
console.log("my local tracks", localTracks);
59+
// 将刚刚的 Track 列表发布到房间中
60+
await client.publish(localTracks);
61+
console.log("publish success!");
62+
// 在这里添加
63+
// 获取页面上的一个元素作为播放画面的父元素
64+
const localElement = document.getElementById("localtracks");
65+
// 遍历本地采集的 Track 对象
66+
for (const localTrack of localTracks) {
67+
console.log(localTrack)
68+
// 如果这是麦克风采集的音频 Track，我们就不播放它。
69+
if (localTrack.isAudio()) continue;
70+
// 调用 Track 对象的 play 方法在这个元素下播放视频轨
71+
localTrack.play(localElement, {
72+
mirror: true
73+
});
74+
}
75+
}
5076

51-
// 在这里添加
52-
// 获取页面上的一个元素作为播放画面的父元素
53-
const localElement = document.getElementById("localtracks");
54-
// 遍历本地采集的 Track 对象
55-
for (const localTrack of localTracks) {
56-
console.log(localTrack)
57-
// 如果这是麦克风采集的音频 Track，我们就不播放它。
58-
if (localTrack.track.info.kind === "audio") continue;
59-
// 调用 Track 对象的 play 方法在这个元素下播放视频轨
60-
localTrack.play(localElement, true);
61-
}
62-
}
77+
// 这里的参数 client 是指刚刚初始化的 QNRTCClient 对象
78+
async function subscribe(client, tracks) {
79+
// 传入 Track 对象数组调用订阅方法发起订阅，异步返回成功订阅的 Track 对象。
80+
const remoteTracks = await client.subscribe(tracks);
6381

64-
// 这里的参数 client 是指刚刚初始化的 QNRTCClient 对象
65-
async function subscribe(client, trackInfoList) {
66-
// 通过传入 trackInfoList 调用订阅方法发起订阅，成功会返回相应的 Track 对象，也就是远端的 Track 列表了
67-
const remoteTracks = await client.subscribe(trackInfoList);
82+
// 选择页面上的一个元素作为父元素，播放远端的音视频轨
83+
const remoteElement = document.getElementById("remotetracks");
84+
// 遍历返回的远端 Track，调用 play 方法完成在页面上的播放
85+
for (const remoteTrack of [...remoteTracks.videoTracks, ...remoteTracks.audioTracks]) {
86+
remoteTrack.play(remoteElement);
87+
}
88+
}
6889

69-
// 选择页面上的一个元素作为父元素，播放远端的音视频轨
70-
const remoteElement = document.getElementById("remotetracks");
71-
// 遍历返回的远端 Track，调用 play 方法完成在页面上的播放
72-
for (const remoteTrack of [
73-
...remoteTracks.videoTracks,
74-
...remoteTracks.audioTracks,
75-
]) {
76-
remoteTrack.play(remoteElement);
77-
}
78-
}
79-
// 这里的参数 client 是指刚刚初始化的 QNRTCClient 对象, 同上
80-
function autoSubscribe(client) {
81-
// 添加事件监听，当房间中出现新的 Track 时就会触发，参数是 trackInfo 列表
82-
client.on("user-published", (userId,tracks) => {
83-
console.log("user-published!", userId,tracks);
84-
subscribe(client, tracks)
85-
.then(() => console.log("subscribe success!"))
86-
.catch(e => console.error("subscribe error", e));
87-
});
88-
// 就是这样，就像监听 DOM 事件一样通过 on 方法监听相应的事件并给出处理函数即可
89-
}
90-
91-
// 这里采用的是 async/await 的异步方案，您也可以根据需要或者习惯替换成 Promise 的写法
92-
async function joinRoom() {
93-
// 创建QNRTCClient对象
94-
const client = QNRTC.createClient();
95-
const roomTokenInput = document.getElementById("roomtoken");
96-
const roomToken = roomTokenInput.value;
97-
// 需要先监听对应事件再加入房间
98-
autoSubscribe(client);
99-
// 这里替换成刚刚生成的 RoomToken
100-
await client.join(roomToken);
101-
console.log("joinRoom success!");
102-
publish(client);
103-
}
104-
</script>
105-
</html>
90+
// 这里的参数 client 是指刚刚初始化的 QNRTCClient 对象, 同上
91+
function autoSubscribe(client) {
92+
// 添加事件监听，当房间中出现新的 Track 时就会触发，参数是 trackInfo 列表
93+
client.on("user-published", (userId,tracks) => {
94+
console.log("user-published!", userId,tracks);
95+
subscribe(client, tracks)
96+
.then(() => console.log("subscribe success!"))
97+
.catch(e => console.error("subscribe error", e));
98+
});
99+
// 就是这样，就像监听 DOM 事件一样通过 on 方法监听相应的事件并给出处理函数即可
100+
}
101+
</script>

0 commit comments

Comments
 (0)