新手入门

实时音视频（KRTC） 是由科大未来云提供的一套低延时、高质量的音视频通讯服务，致力于为客户提供稳定、可靠和低成本的音视频传输能力。您可以使用该服务快速构建“视频通话”、“在线教育”、“直播连麦”、“在线会议”等对通信延时要求比较苛刻的音视频应用。

科大未来实时音视频（Real-Time Communication，KRTC），将科大未来多年来在网络与音视频技术上的深度积累，以多人音视频通话和低延时互动直播两大场景化方案，通过科大未来云服务向开发者开放，致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。

多人音视频通话方案 依靠科大未来云覆盖全球的专线网络，全球均可互通，提供覆盖手机、桌面全平台的客户端 SDK 以及云端 API，终端用户还可以在微信、QQ、企业微信的小程序中使用 KRTC 服务，Web 网页也可轻松使用。 低延时互动直播方案 凭借行业领先的网络与音视频技术，结合科大未来云优质的节点资源，帮助开发者搭建卡顿率更低、延时1秒以内的互动直播，让直播走进 CDN 2.0 时代。

Web

本文主要介绍如何快速地将科大未来云 KRTC Web SDK 集成到您的项目中。

准备工作

集成 KRTC Web SDK 之前需要了解的事项。

支持的平台

KRTC Web SDK 基于 WebRTC 实现，目前支持桌面端和移动端的主流浏览器

桌面端支持 Chrome、Firefox、Safari、Opera、IE11、Edge 等浏览器。 移动端支持 Android、iOS、Windows Phone 等浏览器。

URL 域名协议限制

由于浏览器安全策略的限制，使用 WebRTC 能力对页面的访问协议有严格的要求，请参照以下表格进行开发和部署应用。

| 应用场景 | 协议 | 接收(播放) | | ------- | ------ | ------ | | 生产环境 | HTTPS | 支持 | | 开发环境 | HTTP | 支持 | | 本地开发环境 | http://localhost | 支持 | | 本地开发环境 | http://127.0.0.1 | 支持 | | 本地开发环境 | http://[本机IP] | 支持 | | 本地开发环境 | file:/// | 支持 |

开始集成

SDK 提供了 UMD、ES Module 类型的模块，满足在不同类型项目中集成。

npm集成

1. 您需要在项目中使用 npm 安装 krtc-web-sdk 包。

   npm install krtc-web-sdk --save

2. 在项目脚本里引入模块

   import KRTC from 'krtc-web-sdk';

Script 集成

1. 在您的 Web 页面中添加如下代码即可

   <script src="./krtc-web-sdk.min.js"></script>

2. 在脚本中通过 KRTC 命名空间访问 API。

   const KRTC = window.KRTC;
   
   KRTC.init()
   ...

API 概览

KRTC 包含以下方法:

| 名称 | 说明 | | ------ | ------ | | init | 初始化 SDK | | login | 登录 | | logout | 注销 | | createRoom | 创建房间 | | joinRoom | 加入房间 | | leaveRoom | 离开房间 | | destoryRoom | 销毁房间 | | createStream | 创建本地流 | | playStream | 播放本地流 | | pushStream | 推流 | | endPushStream | 结束推流 | | playRemoteStream | 播放远端流 | | on | 监听事件 | | off | 取消监听 |

api 详情

1. init

   初始化 SDK，必须在页面加载完成后调用。

   参数：

   | 名称 | 类型 | 说明 | | ------ | ------ | ------ | | config | Object | 初始化配置 |

   config 参数说明：

   | 名称 | 类型 | 说明 | | ------ | ------ | ------ | | appId | String | 应用 ID | | appSecret | String | 应用 Key | | userId | String | 登录用户的ID |

   返回：Promise 对象

   KRTC.init({
       appId: '54156685',
       appSecret: 'dds5f5454dsafdsf',
       userId: '123456789'
   }).then(() => {
       console.log('init success');
   }).catch(err => {
       console.log(err);
   });

2. login

   登录，必须在初始化完成后调用。

   参数：null

   返回：Promise 对象

   KRTC.login().then(() => {
       console.log('login success');
   }).catch(err => {
       console.log(err);
   });

3. logout

   注销，必须在登录完成后调用。

   参数：null

   返回：Promise 对象

   KRTC.logout().then(() => {
       console.log('logout success');
   }).catch(err => {
       console.log(err);
   });

4. createRoom

   创建房间，必须在登录完成后调用。

   参数：

   | 名称 | 类型 | 说明 | | ------ | ------ | ------ | | roomType | Number | 房间类型 |

   roomType 参数说明：

   取值：1-混流模式，2-非混模式

   返回：Promise 对象 resolve(roomId) reject(err)

   KRTC.createRoom(1).then(roomId => {
       console.log('create room success', roomId);
   }).catch(err => {
       console.log(err);
   });

5. joinRoom

   加入房间

   参数：

   | 名称 | 类型 | 说明 | | ------ | ------ | ------ | | roomId | String | 房间 ID |

   返回：Promise 对象

   KRTC.joinRoom('123456789').then(() => {
       console.log('join room success');
   }).catch(err => {
       console.log(err);
   });

6. leaveRoom

   离开房间 ，必须在加入房间完成后调用。

   参数：null

   返回：Promise 对象

   KRTC.leaveRoom().then(() => {
       console.log('leave room success');
   }).catch(err => {
       console.log(err);
   });

7. destoryRoom

   销毁房间，须房间创建者调用。

   参数：

   | 名称 | 类型 | 说明 | | ------ | ------ | ------ | | roomId | String | 房间 ID |

   返回：Promise 对象

   KRTC.destoryRoom('123456789').then(() => {
       console.log('destory room success');
   }).catch(err => {
       console.log(err);
   });

8. createStream

   创建本地流，必须在加入房间完成后调用。

   参数：

   | 名称 | 类型 | 说明 | | ------ | ------ | ------ | | config | Object | 流配置 |

   config 参数说明：

   | 名称 | 类型 | 说明 | | ------ | ------ | ------ | | audio | Boolean / Object | 是否开启音频 | | video | Boolean / Object | 是否开启视频 |

   audio 参数说明：

    ```
    audio: {
        sampleRate: 44100, // 音频码率，默认为44100
    }
    ```

   video 参数说明：

    ```
    video: {
        width: 640, // 视频宽度，默认为640
        height: 480, // 视频高度，默认为480
        frameRate: 15, // 视频帧率，默认为15
        bitrate: 500, // 视频码率，默认为500
    }
    ```

   返回：Promise 对象 resolve(stream) reject(err)

   KRTC.createStream().then(stream => {
       console.log('create stream success', stream);
   }).catch(err => {
       console.log(err);
   });

9. playStream

   播放本地流，需要传递本地流。

   参数：

   | 名称 | 类型 | 说明 | | ------ | ------ | ------ | | id | String | DOM的ID | | stream | Object | 本地流 |

   返回：Promise 对象

   KRTC.playStream('local-video', stream).then(() => {
       console.log('play stream success');
   }).catch(err => {
       console.log(err);
   });

10. pushStream

    推送本地流，需要传递本地流。

    参数：null

    返回：Promise 对象

    KRTC.pushStream(stream).then(() => {
        console.log('push stream success');
    }).catch(err => {
        console.log(err);
    });

11. endPushStream

    结束推送本地流，需要传递本地流。

    参数：null

    返回：Promise 对象

    KRTC.endPushStream().then(() => {
        console.log('end push stream success');
    }).catch(err => {
        console.log(err);
    });

12. playRemoteStream

    播放远端流，需要传递远端流。

    参数：

    | 名称 | 类型 | 说明 | | ------ | ------ | ------ | | id | String | DOM的ID | | peerId | String | 远端流的用户ID | | url | String | 远端流地址 |

    返回：Promise 对象

    KRTC.playRemoteStream('remote-video', '123456789', 'http://
    .com/stream.m3u8').then(() => {
        console.log('play remote stream success');
    }).catch(err => {
        console.log(err);
    });

13 on

监听事件

参数：

| 名称 | 类型 | 说明 | | ------ | ------ | ------ | | event | String | 事件名称 | | callback | Function | 回调函数 |

event 参数：

| 名称 | 类型 | 说明 | | ------ | ------ | ------ | | joinRoom | String | 用户加入房间 | | leaveRoom | String | 用户离开房间 | | destoryRoom | String | 房间被销毁 | | startPush | String | 监听房间内推流 | | endPush | String | 监听房间内推流结束 | | roomPeerReady | String | 监听房间信息推送 |

返回：undefined

KRTC.on('joinRoom', (roomId) => {
    console.log('join room success', roomId);
}
KRTC.on('leaveRoom', () => {
    console.log('leave room success');
}
KRTC.on('destoryRoom', () => {
    console.log('destory room success');
}
KRTC.on('startPush', (roomId) => {
    console.log('start push success', roomId);
}
KRTC.on('endPush', (roomId) => {
    console.log('end push success', roomId);
}
KRTC.on('roomPeerReady', (roomId, peerId) => {
    console.log('room peer ready', roomId, peerId);
}

14. off

取消监听事件

参数：

| 名称 | 类型 | 说明 | | ------ | ------ | ------ | | event | String | 事件名称 |

返回：undefined

KRTC.off('joinRoom');
KRTC.off('leaveRoom');
KRTC.off('destoryRoom');
KRTC.off('startPush');
KRTC.off('endPush');
KRTC.off('roomPeerReady');