草庐IT

小白必看,集成七牛云SDK实现Web端音视频通话

小曾同学.com 2023-04-20 原文

😄作者简介:
小曾同学.com,一个致力于测试开发的博主⛽️,主要职责:测试开发、CI/CD
如果文章知识点有错误的地方,还请大家指正,让我们一起学习,一起进步。😊
座右铭:不想当开发的测试,不是一个好测试✌️。
如果感觉博主的文章还不错的话,还请点赞、收藏哦!👍

如果你有一个实现”1v1音视频通话“的场景需求,如果你想入门音视频,不妨来看看这篇文章。本文将介绍如何通过少量的代码集成七牛音视频SDK,实现高质量、低延迟的音视频通话Web应用。

文章目录

一 前言🌟

在开始实践之前,有必要提前简单介绍一下七牛的 RTC SDK。它提供了功能丰富的各端SDK,目前QRTC有新旧两套版本并行:

新版本:4.x及之后的版本

旧版本:3.x及之前的版本

如果接入的话,web 端推荐使用4.x版本,其他端使用5.x版本。另外在实现过程中需要用到APPidtoken信息,所以在接入 SDK 之前需要先了解下接入流程,完成对应认证信息,获取对应Appidtoken信息,而且每月有2万分钟免费额度。如果你是学习/调试,这些时长完全够用。

二 前期准备🌟

如果你集成七牛云 SDK 并想实现 Web 端音视频通话,那么需要有以下准备:

  • 首先需要注册七牛云控制台账号,具体注册流程可查看这里

  • 注册并认证之后,打开“产品与方案”,选择“实时音视频”,创建一个应用,即可获取七牛云 appid。

  • 再通过 appid 栏目,生成临时 roomtoken(即 token)。另外,对于appid、roomtoken等相关概念的介绍可查阅基本概念文档

  • 七牛Web SDK:获取最新SDK可在这里获取(web端 SDK对应的是一个js文件)。

小编开发及测试环境如下:

  • Visual Studio code:v1.76.2
  • 七牛Web SDK:v4.2.0
  • Google Chrome:v111.0.5563.64

三 实战环节🌟

基于【前期准备】已经获取了七牛 appid 和临时 token,本小节将介绍 Web 端如何集成七牛云音视频 SDK,实现 1V1 音视频通话。在开发之前,需要了解实时音视频通话的基本流程,流程图如下(图片来源于官网):

3.1 创建Web项目✨

创建一个名为 VideoCallDemo 的文件夹。一个Web客户端项目至少需包含以下文件:

index.html :主要用于设计Web应用的用户界面。

VideoCall.js: 主要通过 QNRTCClient实现具体应用逻辑的代码。

qnweb.js : 引入Web端RTC SDK。(将官方提供的Web SDK的内容拷贝至该文件内。)

3.2 实现音视频通话✨

(1)引入SDK

index.html 文件中引入SDK

<script src="qnweb.js"></script>

(2)设计客户端用户页面

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>One on One Sample</title>
    <script src="qnweb.js"></script>
    <script src="VideoCall.js"></script>
    <style>
        #localtracks, #remotetracks {
            width: 320px;
            height: 240px;
            background: #000;
        }
    </style>
    </head>
    <body>
        <label>请输入 RoomToken </label>
        <input id="roomtoken" type="text" />
        <button onclick="joinRoom()">加入房间</button> 
        <p>本地视频</p>
        <div id="localtracks"></div>
        <p>远端视频</p>
        <div id="remotetracks"></div>
    </body>
        
</html>

(3)实现音视频通话逻辑

VideoCall.js文件中,实现音视频通话逻辑。
通过调用createClient()方法创建QNRTCClient对象。当用户点击加房时,通过调用join方法加入RTC房间,并在方法中传入 roomtoken 参数,再调用createMicrophoneAndCameraTracks()方法采集音视频,该方法会返回音频轨和视频轨对象,并调用publish()方法将音视频 track发布到房间,再通过play()方法播放本地视频 track。

async function joinRoom() {
    // 创建QNRTCClient对象
    const client = QNRTC.createClient();
    // 需要先监听对应事件再加入房间
    autoSubscribe(client);
    const roomTokenInput = document.getElementById("roomtoken");
    const roomToken = roomTokenInput.value;
    await client.join(roomToken);
    await publish(client);
}

async function publish(client) {
    // 返回一组audio track 与 video track
    const localTracks = await QNRTC.createMicrophoneAndCameraTracks();
    await client.publish(localTracks);
    // 获取页面上的一个元素作为播放画面的父元素
    const localElement = document.getElementById("localtracks");
    // 遍历本地采集的 Track 对象
    for (const localTrack of localTracks) {
        console.log(localTrack)
        // 如果这是麦克风采集的音频 Track,我们就不播放它。
        if (localTrack.isAudio()) continue;
        // 调用 Track 对象的 play 方法在这个元素下播放视频轨
        localTrack.play(localElement, {
            mirror: true
        });
	}
}

(3)订阅远端音视频track

通过subscribe函数实现订阅远端音视频功能,并在预设的位置中播放音视频。

async function subscribe(client, tracks) {
// 传入 Track 对象数组调用订阅方法发起订阅,异步返回成功订阅的 Track 对象。
    const remoteTracks = await client.subscribe(tracks);
    const remoteElement = document.getElementById("remotetracks");
    // 遍历返回的远端 Track,调用 play 方法完成在页面上的播放
    for (const remoteTrack of [...remoteTracks.videoTracks, ...remoteTracks.audioTracks]) {
        remoteTrack.play(remoteElement);
    }
}

(4)添加事件监听
通过监听 client.on("user-published") 事件来获取远端用户 track 列表,实时检测房间内 track变化,并在合适的时机调用 subscribe

function autoSubscribe(client) {
    // 添加事件监听,当房间中出现新的 Track 时就会触发,参数是 trackInfo 列表
    client.on("user-published", (userId,tracks) => {
        subscribe(client, tracks)
        .then(() => console.log("subscribe success!"))
        .catch(e => console.error("subscribe error", e));
    });
}

至此,音视频通话简易demo已完成,可以尝试运行查看效果

(5)浏览器兼容性检测

并不是所有的浏览器都支持webRTC,可以通过checkSystemRequirements()方法检测浏览器兼容性,该方法,会自动检测媒体流采集、加入房间、发布、订阅、离开房间等整个流程。在VideoCall.js文件实现checkSystem()函数。

async function checkSystem(){
    const result = await QNRTC.checkSystemRequirements();
    if (result.ok) {
        console.log("test ok!");
    } else {
        console.log("test fail", result.reason);
    }
}

并在index.html文件中增加对应 button 进行函数调用。

<div>
      <button onclick="checkSystem()">checkSystem</button>
</div>

3.3 Demo展示 ✨

推荐:如果你也是使用的VSCode IDE ,不妨在插件列表中安装Live Server插件,之后在html文件中右击选择Open with Live Server即可运行网页。demo运行地址为 http://127.0.0.1:5502/index.html

当用户点击checkSystem 按钮时,可以在控制台过滤“test ok! ”查看检测信息。(如下图右侧控制台信息);当点击加入房间时,客户端开始采集麦克风和摄像头并进行发布,同时当远端用户加入时,会实时监测并订阅远端音视频 track。至此,音视频通话demo实现完毕。

四 小结 🌟

本文详细介绍了web平台如何集成七牛云SDK,实现音视频通话。通过少量代码,实现简易音视频Demo,如果你想实现更复杂的场景,可以参考七牛官网API。行文仓促,认识有限,欢迎讨论拍砖。

有关小白必看,集成七牛云SDK实现Web端音视频通话的更多相关文章

  1. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗? - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后,每个操作都应在S3上回滚。S3Object这可能吗?? 最佳答案 虽然S3API具有批量删除功能,但它不支持事务,因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST),因此每个上传操作都是通过一个独立的API调用完成的

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  4. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  5. MIMO-OFDM无线通信技术及MATLAB实现(1)无线信道:传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括:阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下,MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中,可以获得复用增益,即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中,可以获得分集增益,即可靠性性能的改善。分集增益用独立衰落支路数来描述,即分集指数。在使用了空时编码的MIMO系统中,由于接收天线或发射天线之间的间距较远,可认为它们各自的大尺度衰落是相互独立的,因此分布式MIMO

  6. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题,今天小编就来解答与大家分享一下动漫制作流程,为了帮助有兴趣的同学理解,大多数人会选择动漫培训机构,那么今天小编就带大家来看看动漫制作要掌握哪些技巧?一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性,以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料,可以是手绘也可以是3d软件创建。在此步骤中,要注意的问题是色彩和平面布局。三、动漫制作制作完成后,加工成型。完成不同的表现形式后,就要对设计稿进行加工处理,使加工的难易度降低,并得到一些基本准确的概念,以便于后续的大样、准确的尺寸制定。四、

  7. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像,并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时,是将这组图像视为MJPG流。我需要转换一组PNG图像到视频,FFMPEG就不认了。pyav内置了ffmpeg库,不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  8. TimeSformer:抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”,各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解,本篇主要介绍了FBAI团队的TimeSformer,这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用,就请点赞、收藏、关注!paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  9. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  10. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常,数组被实现为内存块,集合被实现为HashMap,有序集合被实现为跳跃列表。在Ruby中也是如此吗?我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为,并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而,大多数Rubyist对数组的性能特征有一些期望,这会迫使不符合它们的实现变得默默无闻,因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

随机推荐