# 快速开始

# 简介

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

# 前提条件

物理音视频采集设备，如内置摄像头和麦克风
安装最新稳定版 Chrome 浏览器 (opens new window) 或其他浏览器
有效的菊风开发者账号（免费注册 (opens new window) ）
有效的菊风 AppKey

# 集成 SDK

下载 Juphoon Web SDK 包。
将下载下来的 .js 文件保存到项目文件所在的目录下。
在项目文件中，将如下代码添加到 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 或 ""
const loginParam = "";//表示直接使用默认值

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

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

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

# 加入会议

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

channelId：表示会议标识符。它必须是不为空的字符串。在调用 join 时，服务器会查询是否存在该 channelId 的会议。存在则加入，不存在则创建并加入。
joinParam ：类似于 loginParam，joinParam 对象中的参数也都是可选的。创建一个 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>

并设定DomRemote（本地画面）和DomLocal（远端画面）分别为:

DomRemote = document.getElementById('localVideo');
DomLocal = document.getElementById('remoteVideo');

然后调用startVideo (opens new window) 打开视频通道，目前对端视频通道未开启:

/**
 * DomLocal：本地画面
 * uid：用户id，默认为 'self'
 * picSize：视频尺寸，默认为空字符串
 * fr： 帧率，默认为24
 */
JCSDK.startVideo(DomLocal,uid,picSize,fr);

# 视频订阅

订阅其他成员视频，开启其他成员视频通道:

/**
 * DomRemote: 远端画面
 * uid：用户id，为成员列表中的userId
 * picSize：视频尺寸，256/512/768/1024四个尺寸供选择
 * fr： 帧率，默认为24，可修改
 */
JCSDK.startVideo(DomRemote,uid,picSize,fr);

在上面的例子中：本地视频画面将被渲染到 id 为localVideo 的元素中。当其他成员加入频道后，远端视频画面会被渲染到 id 为 remoteVide 的元素中。

TIP

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

获取当前成员列表成员订阅状态:

JCSDK.getMediainfo();

# 离开会议

当您想要退出会议时，调用 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){
    // 返回登出原因
};

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

# 更多内容

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

← 产品概述管理会议成员 →