web端视频通话sdk集成和功能实现流程（实时视频系列五）

最新推荐文章于 2024-05-09 10:57:11 发布

海水冷却

最新推荐文章于 2024-05-09 10:57:11 发布

阅读量9.3k

点赞数 1

分类专栏：技术

本文链接：https://blog.csdn.net/sinat_20146421/article/details/82560499

版权

技术专栏收录该内容

51 篇文章 4 订阅

订阅专栏

本文介绍的是在wed端如何集成即构音视频SDK，以实现在wed端一对一，一对多及多人实时视频通话的功能。

一、SDK集成指引

1、安装

请从 jZego-RTC-SDK 下载 SDK。 npm下载包支持typescript语言(推荐)：

npm i webrtc-zego

2、集成SDK

可使用script直接引入

<script src="jZego-rtc-1.0.1.js"></script>

或者

import {ZegoClient} from 'webrtc-zego'或
var ZegoClient = require('webrtc-zego').ZegoClient

API 说明请参考：Web SDK API 说明。

3、兼容性说明

由于不同的浏览器对于 Web 的支持各不相同，目前 SDK 支持的浏览器的版本如下：
这里写图片描述

二、功能实现流程

1、实现流程

以下是简单的SDK调用流程，详细API接口请参考接口文档

1.1 初始化SDK

// 声明变量
var zg;

// 初始化实例
zg = new ZegoClient();

// 配置必要参数
zg.config({
  appid: appid,         // 必填，应用id，由即构分配
  idName: idName,       // 必填，用户自定义id，全局唯一
  nickName:  nickName,  // 必填，用户自定义昵称
  remoteLogLevel: 1,     // 上传日志最低级别，建议跟 logLevel 一致
  logLevel: 1,          // 日志级别，debug:0,info:1,warn:2,error:3,report:99,disable:100（数字越大，日志越少），建议选择 1
  server: server        // 必填，接入服务器地址，由即构分配
  logUrl: logUrl        // 必填，logServer 地址，由即构分配
});

1.2 获取登录 token

源码片段如下：

// 获取登录 token
function loadLoginToken() {
        var xmlhttp;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    trace("login token success:" + xmlhttp.responseText);
                    loginToken = xmlhttp.responseText;
                    doLogin();
                }
                else {
                    trace("login token failed");
                    alert("获取登录信息失败");
                }
            }
        };

        //从开发者后台获取token
        xmlhttp.open("GET", loginTokenUrl + "?app_id=" + appid + "&id_name=" + idName, true);
        xmlhttp.send();
    }

1.3 登录房间

登录房间成功是后续信令操作的前提。源码片段如下，仅供参考：

zg.login(roomId, 2, loginToken, function(streamList) {
    //登录成功处理逻辑
}, function(err) {
    alert("login error: " + err.msg);
});

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);
        }
    }

});

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 开始直播

开始直播前必须先开始预览。源代码片段如下，仅供参考：

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标签里。源代码如下，仅供参考:

function doPlay(streamid) {
    trace("play " + streamid);
    var remoteVideo = document.createElement("video");
    remoteVideo.setAttribute("autoplay", "");
    remoteVideo.setAttribute("webkit-playsinline", "");

    var videos = util.getById("videos");
    videos.appendChild(remoteVideo);

    remoteVideoMap[streamid] = remoteVideo;

    var result = zg.startPlayingStream(streamid, remoteVideo);
    if (!result) {
        alert("play " + streamid + " return " + result);
    }
}

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 使用说明

web屏幕共享功能，目前只支持桌面端(例如window和mac)的chrome和火狐浏览器，其中chrome需要下载即构共享插件

分享功能只能获取到系统扬声器声音，外部麦克风需另外推流(栗子：电脑播放音乐可以采集到，对着电脑说话声音采集不到)

当同时推多路流时，建议音频只推一路，防止回音

2.2 插件安装

解压即构共享插件;

打开你的 Chrome 浏览器，点击屏幕右上方的扩展按钮，选择更多工具 > 扩展程序，打开开发者模式 > 加载已解压的扩展程序 >
选择解压的即构共享插件文件夹，即可完成安装。

2.3 方法调用
这里写图片描述
2.4推流示例(chrome)

   zg.startScreenShotChrome(function (suc,mediastream) {

       previewVideo.srcObject = mediastream;//本地预览

       // 与正常推流一样，需要先调用sdk预览接口，成功后再推流 ，
       // 需要注意的是  mediaStreamConstraints.externalCapture = true (必须)          
       zg.startPreview(localVideo, mediaStreamConstraints, function() {

         zg.startPublishingStream(streamid, localVideo, extraInfo);

       }, error)

    })

3 安全方案

3.1 房间登录安全

3.1.1 基本流程

JS与业务后台建立通信，获取 Token 信息。

JS调用 ZegoClient.login 登录 Zego 服务器，传入 Token 信息，验证通过后，完成登录。

ZegoClient 会保持与 Zego 服务器的长连接，处理发送或接收的消息。

JS调用 ZegoClient.logout 登出 Zego 服务器。

请注意：
生成 Token 信息需要业务后台自行开发。

3.1.2 login_token 信息

login_token 信息为标准 json 格式，具体为：

{
    "ver": 1,
    "hash": xxxxx,
    "nonce": xxxxx,
    "expired": xxxxx,
}

这里写图片描述

请注意:

login_token 传输过程中，会经过 base64 加密。

每次登录都要重新获取 login_token。

业务方开发的JS需要和业务后台建立一种安全通讯和鉴权机制，业务方使用自有的账户体系或第三方认证体系的登录完成后，业务方JS和业务后台交互获取该
login_token， AppSecret 是存储在业务后台的。

3.2 login_token 生成示例代码

go 语言 login_token 生成示例代码如下：

func makeTokenSample(appid uint32, app_key string, idname string, expired_add int64) (ret string, err error){
    nonce := UniqueId()
    expired := time.Now().Unix() + expired_add      //单位:秒

    app_key = strings.Replace(app_key, "0x","",-1)
    app_key = strings.Replace(app_key, ",", "", -1)
    if len(app_key) < 32 {
      return "", fmt.Errorf("app_key wrong")
    }

    app_key_32 := app_key[0:32]
    source := fmt.Sprintf("%d%s%s%s%d",appid,app_key_32,idname,nonce,expired)
    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 生成示例代码如下：

public function getToken(int $app_id, string $app_key, string $idname, int $expired_add)
{
    $nonce = uniqid();
    $expired = time() + $expired_add; //单位:秒

    $app_key = str_replace("0x", "", $app_key);
    $app_key = str_replace(",", "", $app_key);
    if(strlen($app_key) < 32) {
        return false;
    }
    $app_key_32 = substr($app_key, 0, 32);

    $source = $app_id.$app_key_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;
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 = "0000000000";  //即构分配的appId
        String appKey = "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";  //即构分配的appKey
        String idName = "xxxxxxx"; //业务系统用户唯一标识
      String Token = getZeGouToken(appid,appKey,idName);
      System.out.println("--Token--:"+Token);
  }

    /**
     * 拉流端获取登录token
     * @param appId  即构分配的appId
     * @param appKey 即构分配的appKey
     * @param idName 业务系统用户唯一标识
     * @return
     */
    public static String getZeGouToken(String appId,String appKey,String idName){

        String nonce= UUID.randomUUID().toString().replaceAll("-", "");
        long time=new Date().getTime()/1000+30*60;
        String appKey32=new String(appKey.replace("0x", "").replace(",", "").substring(0, 32));
        System.out.println("appKey:"+time+"    "+appKey32+"    "+nonce);

        if(appKey32.length()<32){
            System.out.println("private key erro!!!!");
            return null;
        }

        String sourece= getPwd(appId+appKey32+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.codec.binary.Base64();
        System.out.println("json"+json.toString());
        return base64.encodeAsString(json.toString().getBytes());
    }


    /**
     * 获取MD5加密
     * @param pwd 需要加密的字符串
     * @return 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.toHexString()，可能会造成缺少位数
                // 因此，需要对temp进行判断
                if (temp < 16 && temp >= 0) {
                    // 手动补上一个“0”
                    hexString = hexString + "0" + Integer.toHexString(temp);
                } 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 里面每个参数的类型是否正确，一般情况下都是类型不正确引起的问题。
这里写图片描述

4.2 登陆房间时，控制台输出返回result=1000001002

原因：观众角色不允许创建房间，也就是这个房间不存在。

解决方案：

1)在ZegoClient.config里面的option.audienceCreateRoom设置为TRUE

2)在ZegoClient.login里面将role设置为1，主播角色。

4.3 登陆房间时，控制台输出返回token Error的报错

原因：计算token的时候，算法不对引起，可通过这个链接：http://sig-wstoken.zego.im:8181/tokenindex 来验证是否正确：

1) 首先验证 hash 字段是否有错，这里要注意 id_name 是string类型，不是数值类型; expired 是 uninx 的时间戳，不是北京时间。

2) login_token由业务侧后台生成后，将json里面的字段经过base64加密后再下发给web端。

海水冷却

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
6
评论
web端视频通话sdk集成和功能实现流程（实时视频系列五）

本文介绍的是在wed端如何集成即构音视频SDK，以实现在wed端一对一，一对多及多人实时视频通话的功能。一、SDK集成指引1、安装请从 jZego-RTC-SDK 下载 SDK。 npm下载包支持typescript语言(推荐)： npm i webrtc-zego2、集成SDK可使用script直接引入&lt;script src="jZego-rtc-1....
复制链接

扫一扫