Skip to content

Commit

Permalink
feat(h5): add anonymous join for H5 (#232)
Browse files Browse the repository at this point in the history 
Co-authored-by: hzlichengda <[email protected]>
  • Loading branch information
@chandarlee @hzlichengda
chandarlee and hzlichengda authored Apr 3, 2024
1 parent bfa8280 commit 82c41e3
Showing 1 changed file with 162 additions and 143 deletions.
305 changes: 162 additions & 143 deletions SampleCode/H5/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,155 +1,174 @@
<meta charset="utf-8" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>neWebMeeting demo</title>
<style>
#root {
height: 100%;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<button onclick="init()">初始化</button>
<button onclick="destroy()">销毁</button>
<div>
<input style="width: 110px" id="meeting-account" type="text" placeholder="账号" />
<input style="width: 110px" id="meeting-token" type="text" placeholder="token" />
<button onclick="login()">Token登陆</button>
<button onclick="logout()">登出</button>
</div>
<input
class="meeting-id"
type="text"
placeholder="meetingId"
/>
<input id="meeting-nick" type="text" placeholder="入会昵称，必填" />
<div>
<label for="audio">
<input type="checkbox" name="audio" id="audio" className="audio" />
开启音频
</label>
<label for="video">
<input type="checkbox" name="video" id="video" className="video" />
开启视频
</label>
<button onClick="join()">加入会议</button>
</div>
<!-- 预留一个dom用于挂载会议组件 -->
<div id="ne-web-meeting"></div>
<!-- 引入会议组件sdk -->
<script src="./NEMeetingKit_h5_v4.0.1.js"></script>
<script>
/**
* 先执行项目初始化，将会议初始化操作执行结束后，会依据初始化提供的宽高，进行占位
* 然后执行登陆，获取登陆人员信息
* 此时，根据需要，可以进行会议的创建或加入
*/

/* 初始化
* @param width：宽度(px)，为0则表示100%
* @param height：高度(px)，为0则表示100%
* @param config：入会配置
* @param callback： 回调
*/
function init() {
const config = {
appKey: "", //云信服务appkey
};
// 检测浏览器兼容性 返回true表示支持，否则可能存在兼容问题
const result = NEMeetingKit.actions.checkSystemRequirements()
// 初始化会议组件
NEMeetingKit.actions.init(0, 0, config, () => {
console.log('init回调')
// 事件监听
NEMeetingKit.actions.on("peerJoin", (members) => {
console.log("成员加入回调", members);
});
NEMeetingKit.actions.on("peerLeave", (uuids) => {
console.log("成员离开回调", uuids);
});
NEMeetingKit.actions.on("roomEnded", (reason) => {
console.log("房间被关闭", reason);
});
NEMeetingKit.actions.addMeetingStatusListener({
onMeetingStatusChanged: (status, arg, obj) => {
console.log('会议状态变更了: ', status, arg, obj)
},
})
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>neWebMeeting demo</title>
<style>
#root {
height: 100%;
}

});
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>

// 获取会议相关信息
const NEMeetingInfo = NEMeetingKit.actions.NEMeetingInfo // 会议基本信息
const memberInfo = NEMeetingKit.actions.memberInfo // 当前成员信息
const joinMemberInfo = NEMeetingKit.actions.joinMemberInfo // 入会成员信息
}
<body>
<button onclick="init()">初始化</button>
<button onclick="destroy()">销毁</button>
<div>
<input style="width: 110px" id="meeting-account" type="text" placeholder="账号" />
<input style="width: 110px" id="meeting-token" type="text" placeholder="token" />
<button onclick="login()">Token登陆</button>
<button onclick="logout()">登出</button>
</div>
<input class="meeting-id" type="text" placeholder="meetingId" />
<input id="meeting-nick" type="text" placeholder="入会昵称，必填" />
<div>
<label for="audio">
<input type="checkbox" name="audio" id="audio" className="audio" />
开启音频
</label>
<label for="video">
<input type="checkbox" name="video" id="video" className="video" />
开启视频
</label>
<button onClick="join()">加入会议</button>
<button onClick="anonymousJoin()">匿名加入会议</button>
</div>
<!-- 预留一个dom用于挂载会议组件 -->
<div id="ne-web-meeting"></div>
<!-- 引入会议组件sdk -->
<script src="./NEMeetingKit_h5_v4.0.1.js"></script>
<script>
/**
* 先执行项目初始化，将会议初始化操作执行结束后，会依据初始化提供的宽高，进行占位
* 然后执行登陆，获取登陆人员信息
* 此时，根据需要，可以进行会议的创建或加入
*/

function login() {
var account = document.getElementById("meeting-account").value;
var token = document.getElementById("meeting-token").value;
NEMeetingKit.actions.login({
accountId: account,
accountToken: token,
},
function (e) {
console.log('login回调', e)
});
}
/* 初始化
* @param width：宽度(px)，为0则表示100%
* @param height：高度(px)，为0则表示100%
* @param config：入会配置
* @param callback： 回调
*/
function init() {
const config = {
appKey: "", //云信服务appkey
};
// 检测浏览器兼容性 返回true表示支持，否则可能存在兼容问题
const result = NEMeetingKit.actions.checkSystemRequirements()
// 初始化会议组件
NEMeetingKit.actions.init(0, 0, config, () => {
console.log('init回调')
// 事件监听
NEMeetingKit.actions.on("peerJoin", (members) => {
console.log("成员加入回调", members);
});
NEMeetingKit.actions.on("peerLeave", (uuids) => {
console.log("成员离开回调", uuids);
});
NEMeetingKit.actions.on("roomEnded", (reason) => {
console.log("房间被关闭", reason);
});
NEMeetingKit.actions.addMeetingStatusListener({
onMeetingStatusChanged: (status, arg, obj) => {
console.log('会议状态变更了: ', status, arg, obj)
},
})

function logout() {
if (NEMeetingKit) {
NEMeetingKit.actions.logout(
function (e) {
console.log('logout回调', e)
}
)
}
}
});

function destroy() {
// 取消监听
NEMeetingKit.actions.off("peerJoin");
NEMeetingKit.actions.off("peerLeave");
NEMeetingKit.actions.off("roomEnded");
NEMeetingKit.actions.removeMeetingStatusListener();
// 销毁
NEMeetingKit.actions.destroy();
}
// 获取会议相关信息
const NEMeetingInfo = NEMeetingKit.actions.NEMeetingInfo // 会议基本信息
const memberInfo = NEMeetingKit.actions.memberInfo // 当前成员信息
const joinMemberInfo = NEMeetingKit.actions.joinMemberInfo // 入会成员信息
}

function join(params) {
var meetingNum = document.querySelector(".meeting-id").value;
var nickname = document.getElementById("meeting-nick").value;
var audio = document.getElementById("audio").checked;
var video = document.getElementById("video").checked;
function login() {
var account = document.getElementById("meeting-account").value;
var token = document.getElementById("meeting-token").value;
NEMeetingKit.actions.login({
accountId: account,
accountToken: token,
},
function (e) {
console.log('login回调', e)
});
}

console.log("加入参数：", {
meetingNum,
nickName: nickname,
video: video ? 1 : 0,
audio: audio ? 1 : 0,
});
NEMeetingKit.actions.join({
meetingNum, // 会议号
nickName: nickname, // 会中昵称
video, // 视频开关，1为打开2为关闭
audio, // 音频开关，1为打开2为关闭
},
function (e) {
console.log('加入会议回调', e);
});
function logout() {
if (NEMeetingKit) {
NEMeetingKit.actions.logout(
function (e) {
console.log('logout回调', e)
}
)
}
}

function destroy() {
// 取消监听
NEMeetingKit.actions.off("peerJoin");
NEMeetingKit.actions.off("peerLeave");
NEMeetingKit.actions.off("roomEnded");
NEMeetingKit.actions.removeMeetingStatusListener();
// 销毁
NEMeetingKit.actions.destroy();
}

function join(params) {
var meetingNum = document.querySelector(".meeting-id").value;
var nickname = document.getElementById("meeting-nick").value;
var audio = document.getElementById("audio").checked;
var video = document.getElementById("video").checked;

console.log("加入参数：", {
meetingNum,
nickName: nickname,
video: video ? 1 : 0,
audio: audio ? 1 : 0,
});
NEMeetingKit.actions.join({
meetingNum, // 会议号
nickName: nickname, // 会中昵称
video, // 视频开关，1为打开2为关闭
audio, // 音频开关，1为打开2为关闭
},
function (e) {
console.log('加入会议回调', e);
});
}

function anonymousJoin() {
var meetingNum = document.querySelector(".meeting-id").value;
var nickname = document.getElementById("meeting-nick").value;
var audio = document.getElementById("audio").checked;
var video = document.getElementById("video").checked;
NEMeetingKit.actions.anonymousJoinMeeting(
{
meetingNum: meetingNum,
nickName: nickname,
video: video ? 1 : 0,
audio: audio ? 1 : 0,
showSubject: true,
showMeetingRemainingTip: true,
},
function (e) {
console.log(e);
}
</script>
</body>
</html>
);
}
</script>
</body>

</html>

0 comments on commit 82c41e3

Please sign in to comment.