Web端接入声网

Web端接入声网流程以及遇到的问题

由于项目由腾讯SDK接入改声网SDK接入，我也不得不开始接入声网，不过我这一部分做的是通过复制app里面的链接到浏览器播放，所以我这边做web的接入

流程
1、通过声网官方文档声网官方文档，找到对应自己的产品和对应的平台

2、下包 （我是直接下载的js文件，也可通过文档的获取sdk来引入）

3、开始正式接入声网

// 开始接入声网
	var rtc = {
		// 用来放置本地客户端。
		client: null,
		// 用来放置本地音视频频轨道对象。
		localAudioTrack: null,
		localVideoTrack: null,
	};

	var options = {
		// 替换成你自己项目的 App ID。
		appId: "替换成你自己项目的 App ID",
		// 传入目标频道名。
		channel: null,
		// 如果你的项目开启了 App 证书进行 Token 鉴权，这里填写生成的 Token 值。
		token: null,
		// 设置频道内的用户角色，可设为 "audience" 或 "host"
		role: "audience",
		uid: null,
	};
      async function startBasicLive() {
		/**
		 * 接下来的代码写在这里。
		 */
		// 1.创建本地客户端
		rtc.client = AgoraRTC.createClient({ mode: "live", codec: "vp8" });
		// 2.设置用户角色
		// Role 的值可以是 "host" 或者 "audience"。
		rtc.client.setClientRole(options.role, { level: 2 });
		//3.加入目标频道
		const uid = await rtc.client.join(options.appId, options.channel, options.token, options.uid);
		// 5.订阅远端用户
		rtc.client.on("user-published", async (user, mediaType) => {
			// 开始订阅远端用户。
			await rtc.client.subscribe(user, mediaType);
			console.log("subscribe success");
			// 订阅完成后，从 `user` 中获取远端音频轨道对象。
			const remoteAudioTrack = user.audioTrack;
			// 表示本次订阅的是音频。
			if (mediaType === "audio") {
				/* 改改改这里  通过thisUserId获取用户信息 并追加*/
				$.ajax({
					type: "GET",
					url: "自己的接口" + user.uid,//改改改这里：获取远端连麦用户信息
					dataType: "json",
					success: function (res) {
						console.log(res);
						if (res.code == 0) {
						//页面布局
							let appEl = '<div class="userInfo" id="' + user.uid + '"><img src="' + res.result.img + '" /><p>' + res.result.nickName + '</p></div>';
							$('#user_box').append(appEl);
							$('#zhibo_box').append('<div id="remote_stream' + user.uid + '"></div>');
							if (initType == 0) {
								//初次进入静音播放
								console.log("初次进入静音播放11111=========", user.uid);
								console.log(remoteAudioTrack);
							} else {
								//关闭静音
								console.log("关闭静音222222=====", user.uid);
								console.log(remoteAudioTrack);
							}
						}
					},
					fail: function (res) {

					}
				})
				// 播放音频因为不会有画面，不需要提供 DOM 元素的信息。
				remoteAudioTrack.play();
			}
		});

		//退订
		rtc.client.on("user-unpublished", async (user, mediaType) => {
			if (mediaType === "audio") {
				//await leaveCall();
				const playerContainer = document.getElementById(user.uid);
				if (playerContainer) playerContainer.remove();
			}
			console.log(user.uid + "==========================下麦了")
		});

		// 收到 token-privilege-will-expire 回调时，从服务器重新申请一个 Token，并调用 renewToken 将新的 Token 传给 SDK
		rtc.client.on("token-privilege-will-expire", async function () {
			await fetchToken(options);
			await rtc.client.renewToken(options.token);
		});
		// 收到 token-privilege-did-expire 回调时，从服务器重新申请一个 Token，并调用 join 重新加入频道
		rtc.client.on("token-privilege-did-expire", async function () {
			await fetchToken(options);
			const uid = await rtc.client.join(options.appId, options.channel, options.token, options.uid);
		});
		// 4.创建并发布本地音视频轨道        
		// 如果用户角色设为观众，跳过该步骤。
		// // 通过麦克风采集的音频创建本地音频轨道对象。
		// rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
		// // 通过摄像头采集的视频创建本地视频轨道对象。
		// rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
		// // 将这些音视频轨道对象发布到频道中。
		// await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
		console.log("publish success!");
	}
	
 // 6. 离开频道
	async function leaveCall() {
		// 销毁本地音视频轨道。
		// rtc.localAudioTrack.close();
		// rtc.localVideoTrack.close();

		// 遍历远端用户。
		rtc.client.remoteUsers.forEach(user => {
			// 销毁动态创建的 DIV 节点。
			const playerContainer = document.getElementById(user.uid);
			if (playerContainer) playerContainer.remove();
			// 离开频道。
			// await rtc.client.leave();
		});
	}

问题
1、声网对web端接口严格，必须使用https协议或者localhost打开页面和进行接口联调
2、订阅远端用户去调用sdk时，uid必须是一个int类型，否则压根调不起来user-published方法，无法进行订阅远端用户，且页面不会报错(这里真的是巨坑！！！)
因为我只需要打开链接进行播放，所以是游客性质，没有uid，与后端协商后，由我这边自动生成一个ID，下图为修改过来的

3、侦听token会过期回调和重新加入的回调，声网自己给了api

• 收到token-privilege-will-expire回调时，从服务器重新申请一个 Token，并调用 renewToken 将新的 Token 传给 SDK
• 收到 token-privilege-did-expire回调时，从服务器重新申请一个 Token，并调用 join 重新加入频道

4、订阅完成后，从 user 中获取远端音频轨道对象。
5、销毁频道时，谁下麦谁的头像等html消失，所以必须监听到uid