美文网首页vue学习
声网(Agora)视频通话-小程序

声网(Agora)视频通话-小程序

作者: 69e1d9dadce5 | 来源:发表于2019-06-01 11:41 被阅读0次

    声网(Agora)

    • 声网 Agora 为开发者提供实时音视频 API,只需集成 Agora SDK,即可快速在应用内构建多种实时互动场景。

    微信小程序

    • 官方地址:https://docs.agora.io/cn/Video/miniapp_video?platform=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F
    • 首先在声网创建账号,进去后创建项目,appid是指项目的appid




      以上因为浏览器原因自动翻译页面,可能会看到不太一样,如果使用安全的食品通话,开启上图中的app证书,打开信令调试开关

    • 微信小程序接入视频通话,需要声网给开通小程序的权限
      (1) 给声网邮箱发送邮件,注明开通微信小程序接入权限,并给发送appid(appid是声网注册是创建项目的appid)
    邮箱账号: sales@agora.io
    

    (2)给声网客服打电话开通,声网电话:400 6326626
    注:给官网邮箱发邮件,没人回复我,后来还是打客服开通的,客服态度很好哦

    const AgoraMiniappSDK = require('../../lib/Agora_Miniapp_SDK_for_WeChat.js');
    
    • 小程序接入代码片段
    // 推流上下文
        this.ctx = wx.createLivePusherContext("livePush");
    //  拉流上下文
        this.liveP = wx.createLivePlayerContext('livePlayer');
    
        var that = this;
        let client = new AgoraMiniappSDK.Client();
        that.setData({
          client: client
        });
        // 初始化
        client.init("这是你的appid", function () {
          // 初始化成功
          console.log("初始化成功");
          client.join("token 如果没有写null", "房间号", "这里是用户uid", function (uid) {
            // 加入成功
            console.log("加入成功User " + uid + " join channel successfully");
            // 发布本地音频流并获取推流 url 地址
            client.publish(function (res) {
              // 发布成功
              console.log("发布成功pushPath" + res);
              that.setData({
                pushPath: res
              })
              // 监听
              client.on('error', function (err) {
                console.log("Got error msg:", err.reason);
                if (err.reason === 'DYNAMIC_KEY_TIMEOUT') {
                  client.renewChannelKey(that.data.fangjianhao, function () {
                    console.log("Renew channel key successfully");
                  }, function (err) {
                    console.log("Renew channel key failed: ", err);
                  });
                }
              });
              // 监听远程视频添加
              client.on('stream-added', function (evt) {
                client.subscribe(evt.uid, function (res) {
                  console.log("订阅视频流成功playUrl" + res);
                  that.setData({
                    playUrl: res
                  });
                }, function (err) {
                  console.log("订阅视频流错误", err);
                });
              });
    
              client.on('update-url', function (evt) {
                console.log("视频播放", evt);
              });
    
              client.on('stream-removed', function (evt) {
                console.log("视频停止播放");
              });
    
              client.on('video-rotation', function (evt) {
                console.log(evt.uid + " leaved from this channel");
              });
    
    
            }, function (err) {
              // 发布失败
              console.log("发布失败" + err);
            });
          }, function (err) {
            // 加入失败
            console.log("加入失败", err);
          });
        }, function (err) {
          //初始化失败
          console.log("初始化失败", err);
        });
    
    

    注: 不同appid不能通话
    官网api:https://docs.agora.io/cn/Video/API%20Reference/wechat/index.html

    • 官网小程序demo地址
    https://github.com/AgoraIO/Agora-Miniapp-Tutorial
    
    • 实现web和小程序互通注意
      (1) 下载官方web端的示例demo,注意访问地址是https或是本地localhost
      (2) 如果不添加一下代码,web端不影响,小程序端只有声音,并没有视频
      (3) 以上本地调试应该没有问题,如果不成功打开小程序端的"打开调试",正式版还需要配置声网的域名(如下所示):
    https://miniapp.agoraio.cn
    https://miniapp-1.agoraio.cn
    https://miniapp-2.agoraio.cn
    https://miniapp-3.agoraio.cn
    https://miniapp-4.agoraio.cn
    https://uni-webcollector.agora.io
    wss://miniapp.agoraio.cn
    
    示例代码:
      client = AgoraRTC.createClient({mode: 'live'});
    修改后:
      client = AgoraRTC.createClient({mode: 'live',codec: "h264"});
    

    注明

    • 此代码可能与官方示例代码不太一样,以官方代码为准
    • 希望各位批评指正,小编会努力改正的
    • 微信组件live-player和live-pusher踩坑
      (1) 对live-pusher进行start, stop,resume等操作时,会停止所有正在播放的live-player的声音
      (2) 一种是避免在live-player播放后操作live-pusher。比如进页面直接开启live-pusher,然后不再操作。官方DEMO就是使用这种方案。
      第二种,则是每次操作live-pusher后,都重新调用live-player的play操作(感觉需要短暂的延迟调用)。不过这会引起正在播放的live-player音视频的短暂中断,体验不是太好,所以业务许可的话,第一种更推荐。

    相关文章

      网友评论

        本文标题:声网(Agora)视频通话-小程序

        本文链接:https://www.haomeiwen.com/subject/uouotctx.html