保姆级教程!基于声网 Web SDK实现音视频通话及屏幕共享

这篇具有很好参考价值的文章主要介绍了保姆级教程!基于声网 Web SDK实现音视频通话及屏幕共享。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

01 背景介绍

声网提供了各端丰富的音视频 SDK,本文将要使用的是 Web 端 SDK。

本篇文章主要给小伙伴们分享如何使用声网 SDK 实现 Web 端音视频通话及屏幕共享功能,其中也会涵盖在实践过程中遇到的一些问题,以此记录防止小伙伴们踩坑,同时也希望通过从 0 到 1 实战的分享,能够帮助更多的小伙伴。

02 前期准备

在实战之前,需要有以下准备条件:

• 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

03 实战环节

通过[前期准备],我们已经完成了相关配置,已经拥有了 App ID、Channel、临时 Token、声网 SDK,在本次实战中,主要详细讲解两个 demo,分别是音视频通话及屏幕共享连麦。

3.1 实现音视频通话

在开始实战之前,先声明下 Demo 组成架构,

创建一个文件夹名为 Agora_VideoCall,文件夹中包含五个文件,分别是:

• index.html:用于设计 Web 应用的用户界面
• index.css:用于设计网页样式
• basicVideoCall.js:实现音视频通话逻辑代码,主要通过 AgoraRTCClient 实现
• AgoraRTC_N-4.2.1.js:声网音视频SDK
• assets:第三方库,主要用于设计用户界面

在 index.html 文件中导入声网SDK,具体内容可查看详细代码,接下来主要详细讲解音视频通话及屏幕共享实现逻辑。

<script src="./AgoraRTC-N-4.2.1.js"></script>
3.1.1 实现音视频通话逻辑

以下代码均在 basicVideoCall.js 文本中写入

1)首先调用 AgoraRTC.createClient 方法创建一个 client 对象,也就是创建客户端对象

var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

2)定义变量 App ID,Token、Channel、User ID,并使用箭头函数实现当页面被调用时用于加入音视频通话通道。

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();
  }
})

3)加入频道

定义 join 函数主要是将本地音视频 track 加入一个 RTC 频道,此时需要在函数中传入 App ID,Token、Channel、User ID。加入房间后,需要发布音视频track,所以还需要创建音视频 track,并调用 publish 方法将这些本地音视频track对象当作参数发布到频道中。

注意注意,在创建音视频 track 时需要先调用 createMicrophoneAudioTrack :通过麦克风采集的音频创建本地音频轨道对象;再调用 createCameraVideoTrack :通过摄像头采集的视频创建本地视频轨道对象。(如果先调用createCameraVideoTrack ,那么页面中将不会显示本地视频预览画面)

创建之后即可调用 play 方法展示本地预览,并调用 publish 方法发布到 RTC 频道中。注意 play 和 publish 方法的使用没有先后顺序,谁在前在后没有什么影响。

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");
}

4)在频道中添加或移除远端用户逻辑

实现将同频道的远端用户添加到本地接口,当远端用户取消发布时,则从本地将用户移除。

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();

  }
}

5)订阅远端音视频逻辑

当远端用户发布音视频时,本地用户需要对其订阅,从而实现音视频通话,在 subscribe 函数中需要传入两个参数,分别是同频道远端用户 user id 和远端 mediaType,并调用 play 方法,播放远端用户音视频,从而实现一对一连麦。

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();
  }
}

6)监听事件

当远端用户发布或者取消发布音视频 track 时,本地还需要对其监听,在 join 函数中,监听 client.on(“user-published”, handleUserPublished) 事件和 client.on(“user-unpublished”, handleUserUnpublished) 事件,具体如下

client.on("user-published", handleUserPublished);
client.on("user-unpublished", handleUserUnpublished);

声网 屏幕共享,实现音视频通话,实现屏幕共享
7)离开频道

当用户点击 leave 按钮时,则将 stop 本地和远端音视频 track。

async function leave() {
  for (trackName in localTracks) {
    var track = localTracks[trackName];
    if(track) {
      track.stop();
      track.close();
      localTracks[trackName] = undefined;
    }
  }
3.1.2 Demo展示

接下来可以运行我们的 Demo 啦,输入 APPID、Token、Channel、Userid,点击 join,即可看到自己本地的画面,如果想和别人连麦,可以再复制一下网址,输入相同的 APPID、Token、Channel,即可实现连麦,赶快试试吧。
声网 屏幕共享,实现音视频通话,实现屏幕共享

3.2 屏幕共享连麦

屏幕共享就是将本地用户的屏幕内容,以视频画面的方式分享给其他远端用户观看。其工作原理实际上是通过 createScreenVideoTrack 创建一个屏幕共享的视频轨道对象来实现。采集屏幕的过程中浏览器会询问需要共享哪些屏幕,根据终端用户的选择去获取屏幕信息。

在上述音视频 demo 的基础上实现屏幕共享功能。

3.2.1 添加屏幕共享UI

在 index.html 页面中添加屏幕共享(ScreenShare)button
声网 屏幕共享,实现音视频通话,实现屏幕共享

3.2.2 屏幕共享实现逻辑

以下代码均在 basicVideoCall.js 文本中写入

1)实现 share 函数

和上述 join 函数功能类似,主要用于开启屏幕共享,使用 createScreenVideoTrack 创建屏幕共享的视频轨道对象,同时也可以对视频编码进行一些简单的配置。函数中同样也需要添加监听事件。

async function share() {

  client.on("user-published", handleUserPublished);
  client.on("user-unpublished", handleUserUnpublished);
  let screenTrack;

      [options.uid, localTracks.audioTrack, 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")
  ]);

2)添加屏幕共享音视频轨道,并调用 play 方法播放本地屏幕共享的视频。

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})`);

3)发布屏幕共享

发布本地音频和屏幕共享画面至 RTC 频道中。

if(localTracks.screenAudioTrack == null){
    await client.publish([localTracks.screenVideoTrack, localTracks.audioTrack]);
  }
  else{
    await client.publish([localTracks.screenVideoTrack, localTracks.audioTrack, localTracks.screenAudioTrack]);
  }

4)在 share 函数实现逻辑中需要绑定 “track-ended” 事件,当屏幕共享停止时,会有一个警报通知最终用户。

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();
  });

3.2.3 Demo 展示

当点击 ScreenShare 时,会提示用户选择哪一个 page 进行分享,同时也有一个默认音频选项,点击分享之后,即可发布屏幕共享。
声网 屏幕共享,实现音视频通话,实现屏幕共享
声网 屏幕共享,实现音视频通话,实现屏幕共享
声网 屏幕共享,实现音视频通话,实现屏幕共享

04 小结

如果你想实现音视频和屏幕共享的 Web 应用,完全可以借鉴本篇文章 + 声网SDK,如果不是很熟悉的话,可以先看声网给出的「快速开始 - 实现音视频通话」。

在实践过程中需要注意的是:在创建音视频 track 时需要先调用 createMicrophoneAudioTrack ,再调用 createCameraVideoTrack ,如果先调用 createCameraVideoTrack 那么页面中将不会显示本地视频预览画面。

Generally,本篇文章给出的 demo 比较简单,如果想要添加其他的功能比如,虚拟背景、AI降噪等,可以在此基础上继续添加功能。

(正文完)

参考资料

• 注册声网账号
• 相关 SDK 下载
• 快速开始 - 实现音视频通话文章来源地址https://www.toymoban.com/news/detail-569330.html

到了这里,关于保姆级教程!基于声网 Web SDK实现音视频通话及屏幕共享的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 声网 Agora音视频uniapp插件跑通详解

    在使用声网SDK做音视频会议开发时, 通过声网官方论坛 了解到,声网是提供uniapp插件的,只是在官方文档中不是很容易找到。 插件地址如下: Agora音视频插件 Agora音视频插件(JS) 本文讲解如何跑通演示示例

    2024年02月15日
    浏览(86)
  • 基于声网 SDK 实现 iOS 端的一对一视频通话

    在很多产品,加入实时视频通话已经不是新鲜事情了,尤其是近几年的疫情影响,个人公司国家对于实时音视频的需求一直在快速的增长。例如视频会议、社交应用、实时游戏,甚至也可能出现在一些元宇宙的场景中。 本文将教你如何通过声网视频 SDK 在 iOS 平台上实现一个

    2023年04月08日
    浏览(21)
  • Web网页音视频通话之基于Sipjs

    简述 本文是以 FreeSwitch 作为信令服务器,通过sipjs(基于webRtc) 进行媒体协商,网络协商后,进行P2P媒体传输。 参考知识: sip.js https://sipjs.com/ webRtc开发手册 https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API 效果图 : HTML javaScript operation.js 拨打 接听 通话中

    2023年04月17日
    浏览(17)
  • 基于WebAssembly构建Web端音视频通话引擎

    Web技术在发展,音视频通话需求在演进,怎么去实现新的Web技术点在实际应用中的值,以及给我们带来更大的收益是需要我们去探索和实践的。LiveVideoStackCon 2022北京站邀请到田建华为我们从实践中来介绍WebAssembly、WebCodecs、WebTransport等技术在音视频行业的价值以及优势。 文

    2024年02月11日
    浏览(15)
  • web 前端实现音视频通话 - liveKit 框架

    go1.18以上 liveKit-server.exe liveKit官方文档链接 科学上网(github) 在liveKit 中有两个概念,分别是:room 房间 和 user 用户 房间很好理解,类似一个腾讯会议中的 一个会议 用户指的是 加入房间的所有人。 每个用户的权限是相同的 想要实现主持人功能,可以通过web服务器来对liveKi

    2024年04月14日
    浏览(15)
  • 微信小程序实现抖音视频效果教程

    本文详细介绍了微信小程序中如何实现类似抖音视频效果的页面,包括视频播放、用户头像展示和基本信息展示等功能,提供了wxml、wxss和js文件的代码示例,助力开发者快速搭建。

    2024年02月12日
    浏览(29)
  • FFMpeg-3、基于QT实现音视频播放显示

    1、音视频播放的基础知识 内容来自雷神博客 1、在Windows平台下的视频播放技术主要有以下三种:GDI,Direct3D和OpenGL;音频播放技术主要是DirectSound。 SDL本身并不具有播放显示的功能,它只是封装了底层播放显示的代码 记录三种视频显示技术:GDI,Direct3D,OpenGL。其中Direct3D包

    2024年02月03日
    浏览(23)
  • 【音视频SDK测评】线上K歌软件开发技术选型

    在线K歌软件的开发有许多技术难点,需考虑到音频录制和处理、实时音频传输和同步、音频压缩和解压缩、设备兼容性问题等技术难点外,此外,开发者还应关注音乐版权问题,确保开发的应用合规合法。 前面写了几期关于 直播 SDK 技术选型 的文章,主要是从RTC实时音视频

    2024年02月14日
    浏览(21)
  • MediaBox音视频终端SDK已适配鸿蒙星河版(HarmonyOS NEXT)

    2024年1月,HarmonyOS NEXT 鸿蒙星河版系统开发者预览版开放申请,该系统将只能安装为鸿蒙开发的原生应用,而不再兼容安卓应用。对此,阿里云MediaBox音视频终端SDK产品已实现功能的鸿蒙化迁移和重构,全面适配鸿蒙系统HarmonyOS NEXT系统。 当前, 阿里云播放器SDK预览版已面

    2024年03月22日
    浏览(31)
  • 【复】基于 WebRTC 的音视频在线监考模块的设计与实现(下)

    在上一篇博文 【复】基于 WebRTC 的音视频在线监考模块的设计与实现(上) 中,主要介绍了关于 WebRTC 的基本理论,那么这篇文章我们将进入实战阶段,通过 WebRTC 框架,去实现 P2P 通话,以及延伸到一对多的音视频通话,从而实现在线监考功能;   在开发 Web 时,WebRTC 标准

    2024年02月01日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包