# 快速开始

# 简介

本文主要介绍了如何快速集成 WebRTC SDK 并在您自己的 app 里实现实时音视频通话。

# 前提条件

# 集成 SDK

  1. 下载 Juphoon Web SDK 包。

  2. 将下载下来的 .js 文件保存到项目文件所在的目录下。

  3. 在项目文件中,将如下代码添加到 HTML 中(Vue 项目添加至 项目/public/index.html):

    <script src="juphoon-sdk.webrtc.min.js"></script>
    

SDK 会在全局导出一个 JCSDK 对象,您可以直接通过 JCSDK.函数名 的方式调用 SDK 内部函数。

现在您已经在自己的项目中集成了 Juphoon Web SDK,下一步就可以通过调用 SDK 内部的函数实现实时音视频通话的功能。

# 实现视频通话功能

# 登录

菊风云平台是实现音视频通话的基础,只有在成功登录菊风云平台后您才能在平台上执行各种业务操作。

调用 login (opens new window) 登录菊风云平台,并传入 AppKey 、用户名、密码及其他可选的登录参数。

const appkey = "xxxxx";
const userId = "juphoon";
const password = "123"; // 密码,不能为 null 或 ""

// 可选参数, 例子中是默认值
// 1. heartbeatTime 表示心跳间隔。指经过多久向对方发送心跳包,告知服务器自己还在线。
// 2. connectUrl 表示服务器地址。默认使用菊风服务器,可自定义服务器。(需要在最后加上`/`。)
const loginParam = {
    heartbeatTime: 500
    connectUrl: "https://ums.justalkcloud.com:18443/"
}

JCSDK.login(appkey, userId, password, loginParam);     

login (opens new window) 返回 true 表示正常执行调用流程,但不代表登录成功。登录结果通过 onLogin (opens new window) 回调函数通知。

JCSDK.onLogin = function(result, reason){
	// result,登录结果
    // reason, 登录失败的原因,仅登录失败时有返回值
}

如果登录失败,则需要您根据返回的结果调整登录参数;如果登录成功,则可以进行下一步,创建并加入会议。

# 加入会议

当多个人都处在同一个会议中时,他们之间可以进行音视频通话。在 Juphoon Web SDK 中,创建和加入会议都是调用 join (opens new window) 函数,并需要传入两个参数:

  • channelId:表示会议标识符。它必须是不为空的字符串。在调用 join 时,服务器会查询是否存在该 channelId 的会议。存在则加入,不存在则创建并加入。

  • joinParam :类似于 loginParamjoinParam 对象中的参数也都是可选的。创建一个 JS 对象,在对象中自定义会议密码,昵称,会议最大人数等会议属性。

const channelId = "myChannel";
const joinParam= {
    displayName: "juphoon_test",
    password: "1234",
    capacity: 16,
    cdn: "cdn_address",
    record:"通过buildAliossRecordParam 或buildQiniuRecordParam 构建",
    maxResolution: JC_MAX_RESOLUTION_720p,
};

在准备好两个参数后,调用 join (opens new window) 创建、加入会议,传入会议属性joinParam

JCSDK.join(channelId, joinParam);

在加入会议后,通过回调函数 onJoin (opens new window) 来获取加入会议后的结果。

JCSDK.onJoin = function (result){...};

当会议存在时,调用 join 会加入到指定 channelId 的会议中,此时其他成员将收到 onParticipantJoin 回调。

JCSDK.onParticipantJoin = function (participant){
    // participant 对象包含了离开的成员的信息
};
相关内容

管理会议成员

获取会议属性

# 发起视频通话

在加入会议后,网页中还无法显示视频画面,声音也无法获取,这是因为您还没有申请到麦克风和摄像头的权限。菊风提供 startVideo (opens new window) 函数处理这些问题,该函数能够打开音视频通道并渲染音频和视频。在调用该函数前,您需要先在 html 中创建两个 DOM 元素:

  • 第一个 DOM 元素为 video 类型的元素,用于渲染本地的视频画面。
  • 第二个 DOM 元素为 div 类型的元素,用于渲染远端的视频画面。远端的视频画面由服务器拼接,返回一个完整的 video 类型的 DOM 元素作为子元素。
<section style="flex: 1 1 0; display: flex; flex-direction: column">
	<video id="localVideo" autoplay playsinline webkit-playsinline muted style="padding:0;width: 300px;"></video>
	<div id="remoteVideo"></div>
</section>

然后调用 startVideo (opens new window) 打开视频通道,将刚刚创建的两个 DOM 元素作为参数传入。

JCSDK.startVideo(document.getElementById("localVideo"),document.getElementById("remoteVideo");

在上面的例子中:本地视频画面将被渲染到 idlocalVideo 的元素中。当其他成员加入频道后,远端视频画面会被渲染到 idremoteVide 的元素中。

TIP

在浏览器中调用 startVideo (opens new window) 时,浏览器会弹出摄像头麦克风的权限请求,点击 允许 则可以打开摄像头并进行视频通话。

# 离开会议

当您想要退出会议时,调用 leave (opens new window) 离开会议。

JCSDK.leave();

离开会议的结果将通过回调函数 onLeave (opens new window) 通知。

JCSDK.onLeave = function(result){
	// 查看是否成功离开会议
}

在一位成员成功离开会议后,其他成员会收到 onParticipantLeft (opens new window) 回调。

JCSDK.onParticipantLeft = function(participant){
    // participant 对象包含了离开的成员的信息
};

# 登出

在结束视频通话后,调用 logout (opens new window) 登出当前用户。

JCSDK.logout();

登出结果通过回调函数 onLogout (opens new window) 通知。

JCSDK.onLogout = function(reason){
    // 返回登出原因
};

在成功登出后,将无法收到任何消息和回调通知。

# 更多内容

完成以上步骤后就实现了最基本的视频通话功能,您可以在 更多功能 中了解更多的集成内容。

最后更新时间: 2021/4/16 17:26:55