游密科技 WebRTC SDK for HTML5

概述

游密实时语音SDK(Video SDK)是游密科技公司旗下的一款专注于为开发者提供实时语音技术和服务的云产品。我们的研发团队来自腾讯,其中不少是拥有10年以上音视频经验的专家,专业专注;我们的服务端节点部署遍布全球,为用户提供高效稳定的实时云服务,且弹性可扩展。通过Video SDK,能够让您的应用轻松拥有多人实时视频通话的能力,可广泛应用于社交、游戏、在线教育、视频会议等场景。支持一对一、多人实时视频互动,打破屏幕阻隔,还原最纯粹的面对面聊天场景。 WebRTC SDK 对 WebRTC 和游密信令服务器、游密 turn 服务器进行统一封装,开发者申请了游密 appKey 后,使用本 SDK 即可简单快速地在H5页面中实现实时视频和实时语音功能。

四步集成

Step1:注册账号

游密官网注册游密账号。

Step2:添加应用,获取Appkey

在控制台添加应用,添加成功后 在网页左边的游戏栏会增加一个对应的应用,点击进去就可以获得接入需要的AppkeyAppsecret

Step3:下载Video SDK包体

根据游戏使用的游戏引擎与开发语言,在下载入口下载对应的SDK包体。

Step4:开发环境配置

开发环境配置

快速接入

SDK集成

  1. 引入 js 文件

** 直接引入 ymrtc.min.js

<script src="path/to/ymrtc.min.js"></script>
  1. 初始化

本 SDK 只有一个类:YMRTC,只要实例化这个类,就可以使用本 SDK 的全部功能。

若使用方法一直接引入 js 文件,可以直接访问 YMRTC 类:

var rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true,  // true 为视频+语音通讯,false 为仅语音通讯
    debug: true,  // 开启debug日志
    dev: true     // 使用测试环境
});

本 SDK 同时支持 CommonJS 或 AMD 标准,除了上述直接引用,也可以使用这些标准方法初始化:

// CommonJS 规范
var YMRTC = require('path/to/ymrtc.min.js');
var rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true,  // true 为视频+语音通讯,false 为仅语音通讯
    debug: true,  // 开启debug日志
    dev: true     // 使用测试环境
});

或者

// AMD 规范
require(['path/to/ymrtc.min.js'], function(YMRTC) {
    var rtc = new YMRTC({
        appKey: '[您所申请的 appKey 字符串]',
        video: true  // true 为视频+语音通讯,false 为仅语音通讯
        debug: true,  // 开启debug日志
        dev: true     // 使用测试环境
    });
});

或者,若使用 ES6 或 TypeScript,可以使用 import

import YMRTC from 'path/to/ymrtc.min';

const rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true  // true 为视频+语音通讯,false 为仅语音通讯
});

或者,若使用方法二使用 npm 引入,则使用本 SDK 的 npm 名称:

import YMRTC from 'youme-webrtc';

const rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true  // true 为视频+语音通讯,false 为仅语音通讯
});
  1. 用户登录、加入房间、初始化本地媒体(本地摄像头和麦克风)
// 登录
rtc.login('[用户id]', '[token]');
// 加入房间,会自动等待登录成功再加入房间
rtc.joinRoom('[房间号,支持数字、字母、下划线组合]');
// 初始化本地媒体,然后把本地媒体放入 <video>(或 <audio>)
ymrtc.startLocalMedia({
                video: 'stdres' 
                }).catch((err) => {
                    if (err.name === 'NotAllowedError') {
                        alert('浏览器禁用了摄像头和麦克风的访问权限,或者页面没有使用 https 协议,请检查设置。');
                    } else if (err.name === 'NotFoundError') {
                        alert('没有找到摄像头或麦克风,请检查它们的连接。');
                    } else {
                        alert(err.name);
                    }
                });

更多控制 API 请参看下文的 API 文档,亦可以参看示例代码。

  1. 监听事件,播放其他用户传来的视频和语音
// 当房间有人加入,或者当你自己刚刚加入了房间
rtc.on('room.member-join:[房间号]', function (roomId, memberIdList) {
    // memberIdList 为用户ID数组
    memberIdList.forEach(function(memberId) {
        // 监听该位用户的媒体流(stream)变化,若有变则用 <video> (或 <audio>)播放该流
        rtc.on('user.update-stream:' + memberId, function(mId, stream) {
            // 此处省略为该用户新建 <video> 标签的代码
            document.getElementById('[用户 mId 所属 <video> 标签的 id]').srcObject = stream;
        });
    });
});

// 当房间有人退出
rtc.on('room.member-leave:[房间号]', function (roomId, memberId) {
    // memberId 为离开房间的用户ID
    // 此处省略删除该用户所属的 <video> 标签的代码
});

// 事件监听:本地媒体状态,自己的媒体状态
ymrtc.on('local-media.status:*', function (eventFullName, status) {
    E('local-media-status').innerHTML = status;
});
ymrtc.on('local-media.has-stream', function (stream) {
    //显示自己的视频画面
    E('local-media').style.display = 'inline-block';
    E('local-media').srcObject = stream;
    E('local-media-start-stop').innerHTML = '停止';
});
ymrtc.on('local-media.remove-stream', function () {
    E('local-media').style.display = 'none';
    E('local-media-start-stop').innerHTML = '启动';
});

事件机制

本 SDK 提供丰富的事件接口,方便满足不同的需求。同时本 SDK 支持后缀通配符“*”以匹配多种事件。

以上文提及的成员媒体流更新事件 user.update-stream:[成员ID] 为例,假设需要监听的成员ID名称为 zhang3,那么事件名称就是 user.update-stream:zhang3。我们可以使用 on 接口监听这个事件:

ymrtc.on('user.update-stream:zhang3', function(memberId, stream) {
    console.log(memberId); // "zhang3"
    console.log(stream);   // [Object]
});

事件名称支持后缀通配符“*”。假设你需要监听所有成员的媒体流更新,可以这么写:

ymrtc.on('user.update-stream:*', function(eventFullName, memberId, stream) {
    console.log(eventFullName); // "user.update-stream:zhang3"
    console.log(memberId); // "zhang3"
    console.log(stream);   // [Object]
});

如上述代码所示,若使用了通配符,那么回调函数中第一个参数将会传入这个事件的完整名称。从第二个参数开始才是事件参数。

如果需要监听所有事件,也可以这么写:

ymrtc.on('*', function(eventFullName) {
    console.log(eventFullName); // 事件完整名称,例如 "user.update-stream:zhang3"
    console.log(arguments);  // Array [事件完整名称, 事件参数1, 事件参数2, ...]
});

注:事件名称仅支持把通配符放在最后。 例如 user.*:zhang3 是不能识别的。

本 SDK 在事件名称的设计上多数采用了 [事件分类].[事件名称]:[某个重要参数] 的格式,以方便后缀通配符的使用。