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

声网(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)

邮箱账号: [email protected]

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

• 下载小程序sdk
  https://docs.agora.io/cn/Agora%20Platform/downloads
• 小程序引入

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音视频的短暂中断，体验不是太好，所以业务许可的话，第一种更推荐。