功能实现流程 1 实现流程以下是简单的 SDK 调用流程, 详细 API 接口请参考接口文档 1.1 初始化 SDK // 声明变量 var zg; // 初始化实例 zg = new ZegoClient(); // 配置必要参数 _config = { "appid": ,

Size: px

Start display at page:

Download "功能实现流程 1 实现流程以下是简单的 SDK 调用流程, 详细 API 接口请参考接口文档 1.1 初始化 SDK // 声明变量 var zg; // 初始化实例 zg = new ZegoClient(); // 配置必要参数 _config = { "appid": ,"

幅贝谱丁
4 years ago
Views:

1 功能实现流程 1 实现流程以下是简单的 SDK 调用流程, 详细 API 接口请参考接口文档 1.1 初始化 SDK // 声明变量 var zg; // 初始化实例 zg = new ZegoClient(); // 配置必要参数 _config = { "appid": , // 必填, 应用 id, 请从即构管理控制台 - nsole.zego.im/acount/register 获取 "idname": new Date().getTime() + '', // 必填, 用户自定义 id, 全局唯一 "nickname": 'u' + new Date().getTime(), // 必填, 用户自定义昵称 "server": "wss://wsliveroom api.zego.im:8282/ws", // 必填, 接入服务器地址, 请从即构管理控制台 - ister 获取 "loglevel": 0, // 日志级别,debug:0,info:1,warn:2,error:3,report:99, disable:100( 数字越大, 日志越少 ), 建议选择 1 "logurl": "", // 必填,logServer 地址, 请从即构管理控制台 - console.zego.im/acount/register 获取 "remoteloglevel": 0 // 上传日志最低级别, 建议跟 loglevel 一致 zg.config(_config);

2 1.2 创建房间登录 token 的获取详见后文 3 安全方案中的 3.1 房间登录安全源码片段如下 : // 获取登录 token $.get(" {app_id: _config.appid, id_name: _config.idname,function (token) { if (!token) { alert('get token failed') else { startlogin(token), 'text'); 1.3 登录房间登录房间成功是后续信令操作的前提源码片段如下, 仅供参考 : //login function startlogin(token) { zg.login(roomid, 2, token, function (streamlist) { // 登录成功后的处理逻辑 loginsuccess(streamlist);, function (err) { // 登录失败后的处理逻辑 loginfailed(err); ) 登录错误码列表如下 :

3 错误码 ZegoClient.Success ZegoClient.Error.Param ZegoClient.Error.Timeout ZegoClient.Error.Network ZegoClient.Error.Kickout ZegoClient.Error.Server ZegoClient.Error.Unknown 成功含义参数错误超时网络错误用户被踢服务返回错误未知错误 1.4 枚举设备 SDK 提供接口可以枚举当前的麦克风, 摄像头, 扬声器设备源代码片段如下, 仅供参考 : zg.enumdevices(function(deviceinfo) { if (deviceinfo.microphones) { for (var i = 0; i < deviceinfo.microphones.length; i++) { trace("microphone: " + deviceinfo.microphones[i].label); if (deviceinfo.cameras) { for (var j = 0; j < deviceinfo.cameras.length; j++) { trace("camera: " + deviceinfo.cameras[i].label); );

4 1.5 本地预览在开播前可以预览当前画面, 可以指定麦克风和摄像头的设备 Id, 也可以使用默认设备源代码片段如下, 仅供参考 : function dopreview(audioinput, videoinput) { var avconstraints = { audio: true, audioinput: audioinput, video: true, videoinput: videoinput, videoquality: videoquality, horizontal: true ; //WebRTC 可以共用相同设备, 所以预览时必须指定开播的 streamid zg.startpreview( localvideo, avconstraints, function() { trace("preview success"); dopublish();, function(error) { alert("start device error ", error); ); 使用默认设备时,audioInput 和 videoinput 参数不用填推纯音频或纯视频时, 只需将对应的 video 或 audio 设为 false, 然后在播放拉流接口中传入第四个播放模式参数, 例 :zg.startplayingstream(streamid, video,null, {playtype:'audio'); 1.6 开始直播开始直播前必须先开始预览源代码片段如下, 仅供参考 :

5 function dopublish() { var result = zg.startpublishingstream(publishstreamid, localvideo); if (!result) { alert("publish " + publishstreamid + " return " + result); 1.7 直播状态回调直播开始, 直播失败, 重试直播都通过此回调通知源代码如下, 仅供参考 : zg.onpublishstateupdate = function(type, streamid, error) { if (type == 0) { trace("publish " + streamid + " success"); else if (type == 2) { trace("publish " + streamid + " retry"); else { // trace("publish " + streamid + "error " + error.code); alert("publish " + streamid + " error " + error.msg); ; 1.8 开始拉流指定播放流的 <video> 标签, 画面会渲染在指定的 <video> 标签里,streamid 可于登录成功回调中取得源代码如下, 仅供参考 :

6 function doplay(streamid,video) { var result = zg.startplayingstream(streamid, video); if (!result) { alert(' 哎呀, 播放失败啦 '); video.style = 'display:none'; console.error("play " + el.nativeelement.id + " return " + resul t); 1.9 拉流状态回调拉流开始, 拉流失败, 拉流重试都通过此回调通知源代码如下, 仅供参考 : zg.onplaystateupdate = function(type, streamid, error) { if (type == 0) { trace("play " + streamid + " success"); else if (type == 2) { trace("play " + streamid + " retry"); else { // trace("publish " + streamid + "error " + error.code); alert("play " + streamid + " error " + error.msg); ; 2 屏幕共享 2.1 使用说明

7 web 屏幕共享功能, 目前只支持桌面端 ( 例如 window 和 mac) 的 chrome 和火狐浏览器, 其中 chrome 需要下载即构共享插件 ( 分享功能只能获取到系统扬声器声音, 外部麦克风需另外推流 ( 例子 : 电脑播放音乐可以采集到, 对着电脑说话声音采集不到 ) 当同时推多路流时, 建议音频只推一路, 防止回音 2.2 插件安装点击下载即构共享插件 ( 并解压 ; 打开你的 Chrome 浏览器, 点击屏幕右上方的扩展按钮, 选择更多工具 > 扩展程序, 打开开发者模式 > 加载已解压的扩展程序 > 选择解压的即构共享插件文件夹, 即可完成安装 2.3 方法调用火狐获取屏幕区域需要在代码中传入参数,chrome 则会以弹窗形式给用户提供选择 startscreenshotfirfox 火狐获取屏幕共享媒体流参数 mediasource 含义屏幕共享区域类型只能是 'screen', 'application', 'window' 中一个

8 auido callback(suc, mediastream) 是否捕捉声音获取共享媒体流回调 bool suc 是 bool 类型代表成功与否, mediastream 为获取到的媒体流 screen 代表整个屏幕 ;application 代表某个应用 ; window 代表某个应用的某个窗口 startscreenshotchrome chrome 获取屏幕共享媒体流参数 callback(suc, mediastream) 含义获取共享媒体流回调类型 suc 是 bool 类型代表成功与否, mediastream 为获取到的媒体流 stopscreenshot stopscreenshot( ) 2.4 推流示例 (chrome)

9 zg.startscreenshotchrome(function (suc,mediastream) { previewvideo.srcobject = mediastream;// 本地预览必须 ) // 与正常推流一样, 需要先调用 sdk 预览接口, 成功后再推流, // 需要注意的是 mediastreamconstraints.externalcapture = true ( zg.startpreview(localvideo, mediastreamconstraints, function() { zg.startpublishingstream(streamid, localvideo, extrainfo);, error) ) [ 更多 github 示例 ] 3 安全方案 3.1 房间登录安全基本流程 1. JS 与业务后台建立通信, 获取 Token 信息 2. JS 调用 ZegoClient.login 登录 Zego 服务器, 传入 Token 信息, 验证通过后, 完成登录 3. ZegoClient 会保持与 Zego 服务器的长连接, 处理发送或接收的消息 4. JS 调用 ZegoClient.logout 登出 Zego 服务器

10 请注意 : 生成 Token 信息需要业务后台业务后台自行开发 login_token 信息 login_token 信息为标准 json 格式字符串, 具体为 : { "ver": 1, "hash": xxxxx, "nonce": xxxxx, "expired": xxxxx, 字段说明如下 : 参数名类型说明 ver int 版本号, 填 1 即可 hash String hash = MD5(app_id+app_sign_32+id_name+nonce+ nonce String 随机串, 需要保证同一 user_id 在失效时间内不重复按 guid 生成 expired int64 失效时间,unix_timestamp; 单位 : 秒 expired 为失效时间点, 需要用当前时间加上失效时长对于 hash 计算中使用字段的更详细说明 :

11 参数名类型说明 app_id int ZEGO 分配给客户的 app_id,app 唯一标识 app_sign_32 String 通过 app_sign 运算获得算法 : 剔除 app_sign 里的 "0x", "," 字符后, 获取前面 32 字节即为 app_sign_32( 具体算法可参考下述代码 ) id_name String 与初始化时 config 里设置的 idname 保持一致 nonce String 随机串, 与 json 中的 nonce 一致 expired int64 失效时间, 与 json 中的 expired 一致请注意 : 1. login_token 传输过程中, 会经过 base64 加密 2. 每次登录都要重新获取 login_token 3. 业务方开发的 JS 需要和业务后台建立一种安全通讯和鉴权机制, 业务方使用自有的账户体系或第三方认证体系的登录完成后, 业务方 JS 和业务后台交互获取该 login_token, AppSecret 是存储在业务后台的 3.2 login_token 生成示例代码 nodejs 语言 login_token 生成示例代码如下 :

12 /** * 拉流端获取登录 token appid 即构分配的 appid appsign 即构分配的 appsign idname 这里的 idname 需要和 websdk 前端传入的 idname 一致, // 否则校验失败 ( 因为这里的 idname 是为了校验和前端传进来的 idname 是否一致 ) */ function getzegoutoken(appid, appsign, idname) { let nonce = new Date ().gettime ().tostring (); let time = Math.floor (new Date ().gettime () / * 60); let appsign32 = appsign.replace (/0x/g, '').replace (/,/ g, '').substring (0, 32); console.log ('appsign:' + time + ' ' + appsign32 + ' ' + nonce); if (appsign32.length < 32) { console.log ('private sign erro!!!!'); return null; time); let sourece = md5 (appid + appsign32 + idname + nonce + console.log ('hash:' + sourece); let jsonstr = JSON.stringify({ 'ver': 1, 'expired': time, 'nonce': nonce, 'hash': sourece ); console.log ('json', jsonstr); return Buffer.from(jsonStr).toString('base64');

13 go 语言 login_token 生成示例代码如下 : //appid,app_sign 是控制台上申请账号的时候获得, 这里的 idname 需要和 websdk 前端传入的 idname 一致, // 否则校验失败 ( 因为这里的 idname 是为了校验和前端传进来的 idname 是否一致 ) func maketokensample(appid uint32, app_sign string, idname string, expir ed_add int64) (ret string, err error){ nonce := UniqueId() expired := time.now().unix() + expired_add // 单位 : 秒 app_sign = strings.replace(app_sign, "0x","",-1) app_sign = strings.replace(app_sign, ",", "", -1) if len(app_sign) < 32 { return "", fmt.errorf("app_sign wrong") app_sign_32 := app_sign[0:32] source := fmt.sprintf("%d%s%s%s%d",appid,app_sign_32,idname,nonce,ex pired) sum := GetMd5String(source) token := tokeninfo{ token.ver = 1 token.hash = sum token.nonce = nonce token.expired = expired buf, err := json.marshal(token) if err!= nil { return "", err encodestring := base64.stdencoding.encodetostring(buf) return encodestring, nil php 语言 login_token 生成示例代码如下 :

14 //app_id,app_sign 是控制台上申请账号的时候获得, 这里的 idname 需要和 websdk 前端传入的 idname 一致, // 否则校验失败 ( 因为这里的 idname 是为了校验和前端传进来的 idname 是否一致 ) public function gettoken(int $app_id, string $app_sign, string $idname, int $expired_add) { $nonce = uniqid(); $expired = time() + $expired_add; // 单位 : 秒 $app_sign = str_replace("0x", "", $app_sign); $app_sign = str_replace(",", "", $app_sign); if(strlen($app_sign) < 32) { return false; $app_sign_32 = substr($app_sign, 0, 32); $source = $app_id.$app_sign_32.$idname.$nonce.$expired; $sum = md5($source); $tokeninfo = [ 'ver' => 1, 'hash' => $sum, 'nonce' => $nonce, 'expired' => $expired, ]; $token = base64_encode(json_encode($tokeninfo)); return $token; java 语言 login_token 生成示例代码如下 : package demo; import org.json.jsonobject; import java.security.messagedigest; import java.security.nosuchalgorithmexception;

15 import java.util.date; import java.util.uuid; import org.apache.commons.codec.binary.base64; public class ZegouUtils { public static void main(string[] args) { String appid = " "; // 即构分配的 appid String appsign = "0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00"; // 即构分配的 appsign String idname = "xxxxxxx"; // 这里的 idname 需要和 websdk 前端传入的 idname 一致, // 否则校验失败 ( 因为这里的 idname 是为了校验和前端传进来的 idname 是否一致 ) String Token = getzegoutoken(appid,appsign,idname); System.out.println("--Token--:"+Token); ){ /** * 拉流端获取登录 token appid 即构分配的 appid appsign 即构分配的 appsign idname 这里的 idname 需要和 websdk 前端传入的 idname 一致, // 否则校验失败 ( 因为这里的 idname 是为了校验和前端传进来的 idname 是否一致 ) */ public static String getzegoutoken(string appid,string appsign,string idname String nonce= UUID.randomUUID().toString().replaceAll("-", ""); long time=new Date().getTime()/ *60; String appsign32=new String(appSign.replace("0x", "").replace(",", "").s ubstring(0, 32)); System.out.println("appSign:"+time+" "+appsign32+" "+nonce); if(appsign32.length()<32){ System.out.println("private sign erro!!!!"); return null;

16 String sourece= getpwd(appid+appsign32+idname+nonce+time); System.out.println("hash:"+sourece); JSONObject json=new JSONObject(); json.put("ver", 1); json.put("hash", sourece); json.put("nonce", nonce); json.put("expired",time); //unix 时间戳, 单位为秒 org.apache.commons.codec.binary.base64 base64 = new org.apache.commons.c odec.binary.base64(); System.out.println("json"+json.toString()); return base64.encodeasstring(json.tostring().getbytes()); /** * 获取 MD5 加密 pwd 需要加密的字符串 String 字符串加密后的字符串 */ public static String getpwd(string pwd) { try { // 创建加密对象 MessageDigest digest = MessageDigest.getInstance("md5"); // 调用加密对象的方法, 加密的动作已经完成 byte[] bs = digest.digest(pwd.getbytes()); // 接下来, 我们要对加密后的结果, 进行优化, 按照 mysql 的优化思路走 // mysql 的优化思路 : // 第一步, 将数据全部转换成正数 : String hexstring = ""; for (byte b : bs) { // 第一步, 将数据全部转换成正数 : int temp = b & 255; // 第二步, 将所有的数据转换成 16 进制的形式 // 注意 : 转换的时候注意 if 正数 >=0&&<16, 那么如果使用 Integer.toHex String(), 可能会造成缺少位数 // 因此, 需要对 temp 进行判断 if (temp < 16 && temp >= 0) { // 手动补上一个 0 hexstring = hexstring + "0" + Integer.toHexString(temp);

17 else { hexstring = hexstring + Integer.toHexString(temp); return hexstring; catch (NoSuchAlgorithmException e) { // TODO Auto-generated catch block e.printstacktrace(); return ""; 4 常见错误 4.1 登陆房间时, 控制台输出返回 ZegoClient.Error.Timeout 解决方案 : 请检查初始化配置 ZegoClient.config 里面每个参数的类型是否正确, 一般情况下都是类型不正确引起的问题

18 4.2 登陆房间时, 控制台输出返回 result= 原因 : 观众角色不允许创建房间, 也就是这个房间不存在解决方案 : 1) 在 ZegoClient.config 里面的 option.audiencecreateroom 设置为 TRUE 2) 在 ZegoClient.login 里面将 role 设置为 1, 主播角色 4.3 登陆房间时, 控制台输出返回 token Error 1008 的报错原因 : 计算 token 的时候, 算法不对引起, 可通过这个链接 : ( 来验证是否正确 : 1) 首先验证 hash 字段是否有错, 这里要注意 id_name 是 string 类型, 不是数值类型 ; expired 是 uninx 的时间戳, 不是北京时间 2) login_token 由业务侧后台生成后, 将 json 里面的字段经过 base64 加密后再下发给 web 端详情请参考 : 4.1 房间登录安全

功能实现流程 1 实现流程以下是简单的 SDK 调用流程, 详细 API 接口请参考接口文档 1.1 初始化 SDK // 声明变量 var zg; // 初始化实例 zg = new ZegoClient(); // 配置必要参数 zg.config({ appid: appid, // 必填,

功能实现流程 1 实现流程以下是简单的 SDK 调用流程, 详细 API 接口请参考接口文档 1.1 初始化 SDK // 声明变量 var zg; // 初始化实例 zg = new ZegoClient(); // 配置必要参数 zg.config({ appid: appid, // 必填, 功能实现流程 1 实现流程以下是简单的 SDK 调用流程, 详细 API 接口请参考接口文档 1.1 初始化 SDK // 声明变量 var zg; // 初始化实例 zg = new ZegoClient(); // 配置必要参数 zg.config({ appid: appid, // 必填, 应用 id, 请从即构管理控制台 -https://con sole.zego.im/acount/register

功能实现流程 1 实现流程 以下是简单的 SDK 调用流程, 详细 API 接口请参考接口文档 1.1 初始化 SDK // 声明变量 var zg; // 初始化实例 zg = new ZegoClient(); // 配置必要参数 _config = { "appid": ,

功能实现流程 1 实现流程以下是简单的 SDK 调用流程, 详细 API 接口请参考接口文档 1.1 初始化 SDK // 声明变量 var zg; // 初始化实例 zg = new ZegoClient(); // 配置必要参数 _config = { "appid": ,