保姆级教程！基于SoundNetWebSDK实现音视频通话和屏幕共享，不妨看看这篇文章，保姆级教程，无需从头实现，直接集成即可轻松上手SoundNetSDK。本文也分享了自己在实践中遇到的一些问题，帮助朋友们避坑。如果文章知识点有错误，欢迎指正，让我们一起学习，共同进步~01背景介绍声网提供各种音视频SDK，本文将使用WebSDK。本文主要分享给小伙伴们如何使用SoundNetSDK实现web端音视频通话和屏幕共享功能。也会涵盖实践中遇到的一些问题，记录下来，防止小伙伴们踩坑，同时也希望通过分享从0到1的实战，能够帮助到更多的小伙伴。02前期准备实战前需要具备以下前提条件：?npm&Node.js?前端开发基础，如html&CSS&JavaScript?注册盛网账号，申请盛网APPID，临时Token，详情平台见开始使用声网。如果您没有声网账号，可以在这里免费注册，每个账号每月有10000分钟的免费使用额度。如果是个人学习/调试，时间完全够用。我个人的开发环境，具体信息如下：?MacBookPro?VisualStudioCode:v1.75.1?Npm:v8.19.3?Node.js:v16.19.0?SoundNetSDK:v4.2.1,sdk的下载可以在这里查看。?GoogleChrome:v110.0.5481.17703已通过实战【前期准备】。我们已经完成了相关配置，并且已经有了AppID、Channel、临时Token、SoundNetSDK。在本次实战中，我们主要讲解两个Demo，分别是音视频通话和屏幕共享。3.1实现音视频通话在开始实战之前，首先声明Demo的结构，创建一个名为Agora_VideoCall的文件夹，该文件夹包含五个文件，分别是：?index.html：用于设计web的用户界面application?index.css：用于设计网页样式?basicVideoCall.js：实现音视频通话逻辑代码，主要通过AgoraRTCClient?AgoraRTC_N-4.2.1.js：VoiceNet音视频SDK?assets：第三方库，主要用于设计用户界面，在index.html文件中导入AcousticsSDK。具体可以查看详细代码。接下来主要详细讲解音视频通话和屏幕共享的实现逻辑。3.1.1实现音视频调用逻辑客户端对象，即创建客户端对象varclient=AgoraRTC.createClient（{模式：“rtc”，编解码器：“vp8”}）；2）定义变量AppID、Token、Channel、UserID，并使用箭头函数用于页面调用时加入音视频通话频道。varoptions={appid:null,channel:null,uid:null,token:null};$(()=>{varurlParams=newURL(location.href).searchParams;options.appid=urlParams.get("appid");options.channel=urlParams.get("channel");options.token=urlParams.get("token");options.uid=urlParams.get("uid");if(options.appid&&options.channel){$("#uid").val(options.uid);$("#appid").val(options.appid);$("#token").val(options.token);$("#channel").val(options.channel);$("#join-form").submit();}})3)添加通道定义join函数主要是将本地音视频轨道添加到一个RTC频道，此时需要在函数中传入AppID、Token、Channel、UserID。加入房间后，需要发布音视频轨道，所以也需要创建音视频轨道，并调用publish方法将本地的这些音视频轨道对象作为参数发布到频道中。注意，创建音视频轨道时，需要先调用createMicrophoneAudioTrack：从麦克风采集的音频创建本地音轨对象；然后调用createCameraVideoTrack：从摄像头捕获的视频创建本地视频轨道对象。（如果先调用createCameraVideoTrack，页面上不会显示本地视频预览画面。）创建后调用play方法显示本地预览，调用publish方法发布到RTC频道。请注意，play和publish方法没有使用顺序，谁先到并不重要。asyncfunctionjoin(){[options.uid,localTracks.audioTrack,localTracks.videoTrack]=awaitPromise.all([//加入频道client.join(options.appid,options.channel,options.token||null,options.uid||null),//创建本地音视频轨//AgoraRTC.createCameraVideoTrack(),AgoraRTC.createMicrophoneAudioTrack(),AgoraRTC.createCameraVideoTrack()]);localTracks.videoTrack.play("本地播放器");$("#local-player-name").text(`localVideo(${options.uid})`);awaitclient.publish(Object.values(localTracks));console.log("publishsuccess");}4)频道中添加或移除远程用户逻辑将同一频道的远程用户添加到本地界面，远程用户取消发布时从本地移除用户.functionhandleUserPublished(user,mediaType){constid=user.uid;remoteUsers[id]=用户；subscribe(user,mediaType);}functionhandleUserUnpublished(user,mediaType){if(mediaType==='video'){constid=user.uid;删除远程用户[id]；$(`#player-wrapper-${id}`).remove();}}5)订阅远程音视频逻辑远程用户发布音视频时，本地用户需要订阅才能实现音视频调用。在subscribe函数中，需要传入两个参数，分别是远端用户在同一频道的userid和远端mediaType，调用play方法播放远端用户的音视频。从而实现一对一的麦子连接。asyncfunctionsubscribe(user,mediaType){constuid=user.uid;//订阅远程用户awaitclient.subscribe(user,mediaType);console.log("订阅成功");if(mediaType==='video'){constplayer=$(`
