大家好，我是 @小曾同学，小伙伴们也可以叫我小曾～
如果你想实现一对一音视频通话和屏幕共享功能，不妨来看看这篇文章，保姆级教程，不需要从零实现，直接集成声网 SDK 即可轻松上手。
• Npm & Node.js
• 前端开发基础，如 html & CSS & JavaScript • 注册声网账号，申请声网APPID、临时Token ，详见开始使用声网平台。
如果你还没有声网账号，可以通过文末的链接免费注册，每个账户每月都有 10000 分钟免费额度。如果是个人学习/调试，时长完全够用。
• MacBook Pro • Visual Studio Code：v1.75.1 • Npm：v8.19.3 • Node.js：v16.19.0 • 声网 SDK：v4.2.1 ，sdk的下载可查看**这里**。 • Google Chrome ：v110.0.5481.177
• index.html：用于设计 Web 应用的用户界面 • index.css：用于设计网页样式 • basicVideoCall.js：实现音视频通话逻辑代码，主要通过 AgoraRTCClient 实现 • AgoraRTC_N-4.2.1.js：声网音视频SDK • assets：第三方库，主要用于设计用户界面
<script src="./AgoraRTC-N-4.2.1.js"></script>var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });var options = {appid: null,channel: null,uid: null,token: null};$(() => {var urlParams = new URL(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();}})
async function join() {[ options.uid, localTracks.audioTrack, localTracks.videoTrack ] = await Promise.all([// 加入频道client.join(options.appid, options.channel, options.token || null, options.uid || null),// 创建本地音视频track//AgoraRTC.createCameraVideoTrack(),AgoraRTC.createMicrophoneAudioTrack(),AgoraRTC.createCameraVideoTrack()]);localTracks.videoTrack.play("local-player");$("#local-player-name").text(`localVideo(${options.uid})`);await client.publish(Object.values(localTracks));console.log("publish success");}
function handleUserPublished(user, mediaType) {const id = user.uid;remoteUsers[id] = user;subscribe(user, mediaType);}function handleUserUnpublished(user, mediaType) {if (mediaType === 'video') {const id = user.uid;delete remoteUsers[id];$(`#player-wrapper-${id}`).remove();}}
async function subscribe(user, mediaType) {const uid = user.uid;// 订阅远端用户await client.subscribe(user, mediaType);console.log("subscribe success");if (mediaType === 'video') {const player = $(`<div id="player-wrapper-${uid}"><p class="player-name">remoteUser(${uid})</p><div id="player-${uid}" class="player"></div></div>`);$("#remote-playerlist").append(player);user.videoTrack.play(`player-${uid}`);}if (mediaType === 'audio') {user.audioTrack.play();}}
client.on("user-published", handleUserPublished);client.on("user-unpublished", handleUserUnpublished);
async function leave() {for (trackName in localTracks) {var track = localTracks[trackName];if(track) {track.stop();track.close();localTracks[trackName] = undefined;}}
async function share() {client.on("user-published", handleUserPublished);client.on("user-unpublished", handleUserUnpublished);let screenTrack;[] = await Promise.all([client.join(options.appid, options.channel, options.token || null, options.uid || null),AgoraRTC.createMicrophoneAudioTrack(),AgoraRTC.createScreenVideoTrack({encoderConfig: {framerate: 15,height: 720,width: 1280}}, "auto")]);
if(screenTrack instanceof Array){localTracks.screenVideoTrack = screenTrack[0]localTracks.screenAudioTrack = screenTrack[1]}else{localTracks.screenVideoTrack = screenTrack}localTracks.screenVideoTrack.play("local-player");$("#local-player-name").text(`localVideo(${options.uid})`);
if(localTracks.screenAudioTrack == null){await client.publish([localTracks.screenVideoTrack, localTracks.audioTrack]);}else{await client.publish([localTracks.screenVideoTrack, localTracks.audioTrack, localTracks.screenAudioTrack]);}
localTracks.screenVideoTrack.on("track-ended", () => {alert(`Screen-share track ended, stop sharing screen ` + localTracks.screenVideoTrack.getTrackId());localTracks.screenVideoTrack && localTracks.screenVideoTrack.close();localTracks.screenAudioTrack && localTracks.screenAudioTrack.close();localTracks.audioTrack && localTracks.audioTrack.close();});
关注实时互动领域的
技术实践、行业洞察、人物观点
☟☟☟