微信小程序连接“萤石云”

这篇具有很好参考价值的文章主要介绍了微信小程序连接“萤石云”。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

获取直播rtmp地址

备注:  1.萤石开发手册:https://open.ys7.com/doc/zh/uikit/wechat_miniapp.html

             2.微信公众平台:在微信公众平台里注册小程序必须选用企业账号(需要审核)

             3.可以采用复核资质快速注册小程序(无需任何费用和审核)

         

 有萤石云的监控地址怎么连接到小程序,微信小程序,小程序

         4.萤石云小程序依赖微信实时音视频播放组件live-player,需要通过类目审核。审核通过后开启该组件的接口权限。

        5.在微信小程序中请求萤石开放平台API时,需预先设置通讯域名,小程序只可以和指定的域名进行网络通讯。您可以登录微信公众平台,在左侧导航栏单击 「开发」,然后单击 「开发设置」,在 「服务器域名」 区域,单击 「修改」,进行配置。

有萤石云的监控地址怎么连接到小程序,微信小程序,小程序

先获取直播rtmp地址,在播放视频(1.2顺序互换一下)!!!!!!!!!!!!

 代码部分:

1.视频播放:

wxml(视频播放区块)

<live-player id="videoPlayr"  binderror="error" bindstatechange="statechange" mode="RTC" src="{{videoSrc}}"  autoplay="true" ></live-player>

 注释:

  • bindstatechange:监听播放状态变化,通过e.detail.code获取当前播放状态值

  • mode属性默认为live(直播模式),萤石云小程序live-player组件为实时通话模式(mode="RTC"),该模式时延更低。

  • src:您的设备播放地址,目前仅支持flv,rtmp格式。萤石开放 API 仅提供 rtmp 播放协议地址。
  • autoplay:true表示自动播放,false表示手动播放。
  • cover-view组件 可覆盖在live-player组件之上,用于展示“播放按钮”、"全屏按钮"等播放器辅助功能。通过hidden="{true}"进行隐藏,hidden="{false}"进行展示。(此案例不需要)
let livePlayerContext   
page({
    data: {
        videoSrc: '' // 视频播放地址
    },
   onLoad: function () {
     livePlayerContext = wx.createLivePlayerContext('videoPlayr'); 
     //创建 LivePlayerContext 对象,以操作live-player组件
     // 调用接口获取videoSrc视频播放地址,videoPlayr为组件的id名
   },
  // 开始播放
  videoPlayer(){
    this.setData({
      play:'none',
      play2:'block'
    })
    livePlayerContext.play({
      success: ()=>{
         console.log("播放成功")
      },
      fail: (error)=>{
        console.log("播放失败:",error)
      }
      })
  },
  //暂停播放
  closePlayer(){
    this.setData({
      play:'block',
      play2:'none'
    })
    livePlayerContext.pause({
      success:()=>{
        console.log("暂停播放")
      },
      fail:(error)=>{
        console.log("暂停播放失败",error)
      }
    })
  },
  statechange(e) {   // 播放状态监听
    const { code } = e.detail;
    switch (code){
      case 2007: //启动loading
        break;
      case 2001: //连接服务器 
        break;
      case 2002: //已经连接 RTMP 服务器,开始拉流 
           break;
      case 2008: // 解码器启动
        console.log("case 2008: //解码器启动");
        break;
      case 2009: //视频分辨率改动
         console.log("case 2009: //视频分辨率改动");
        this.handlePlay(); // 视频分辨率改动可能导致播放暂停,可调用handlePlay()重启播放
        break;
      case 2004: 
        console.log("case 2004: // 视频播放开始");
        break;
      case 2003: 
          console.log("case 2003: //网络接收到首个视频数据包(IDR)");
          break;
      case 2103: //网络断连, 已启动自动重连(本小程序不自动重连)
          break;
      case 3001:
      case 3002:
      case 3003:
      case 3005: // RTMP 读/写失败,之后会发起网络重试
          console.log("播放失败");
          break;
      case 2105: // 当前视频播放出现卡顿
        break;
      case -2301: // 经多次重连抢救无效,更多重试请自行重启播放
        break;
    }
  },
})

 注释:livePlayerContext讲解

  • 直播组件控制 - LivePlayerContext - 《百度智能小程序API文档(202003)》 - 书栈网 · BookStackLivePlayerContext示例扫码体验图片示例代码示例错误码AndroidiOS 智能小程序,智能连接人与信息、人与服务、人与万物的开放生态,依托以百度App为代表的全域流量,通过百度AI开放式赋能, 精准连接用户,无需下载安装便可享受智慧超前的使用体验。https://www.bookstack.cn/read/smartprogram-apilist-202003/6ef21e6bf6f825a5.md

2.获取直播rtmp地址

有萤石云的监控地址怎么连接到小程序,微信小程序,小程序

  注释:

        1.返回数据,返回字段url为rtmp直播地址

        2.需要注册“萤石云”账号

        3.AccessToken在萤石云“我的账号”下的应用信息里

page({
    onLoad:function(){
    //请求rtmp直播地址
    wx.request({
      url: 'https://open.ys7.com/api/lapp/v2/live/address/get', 
      method: 'POST',
      data: {
        accessToken:"",
        deviceSerial:"",//设备序列号
        channelNo:"1",//通道号
        protocol:"3",//流轮播协议
        quality:"1",//视频清晰度
        expireTime:'86400'//过期时间
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值(一定要加,不然会提 
         示"deviceSerial不能为空", code: "10001")
      },
      success:(res) =>{
        console.log(res.data);      
        if(res.data.code ==200 && res.data.data){
          console.log("请求rtmp直播地址成功!",res.data.data.url)
          this.setData({
            videoSrc:res.data.data.url
          })
          console.log(this.data.videoSrc)
        }else {
          // 微信提供的错误信息弹出框
          wx.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
      }
    })
    }
})

               

3.云台控制

在前面两项的基础上来进行云台控制

注释:

        1.目前萤石云小程序只支持设备上、下、左、右四个方位的转向

        2.我们通过微信提供的 catchtouchstart 和 catchtouchend 监听手势移动开始和结束时的坐标值

        

有萤石云的监控地址怎么连接到小程序,微信小程序,小程序

 有萤石云的监控地址怎么连接到小程序,微信小程序,小程序

    文章来源地址https://www.toymoban.com/news/detail-520220.html

<!-- 按钮区块 -->
<view class="mobile-ez-ptz-contaoner" id="ptz-img-container" 
catchtouchstart="handlePtzTouchStart" catchtouchend="handlePtzTouchEnd">
   <view class="mobile-ez-ptz-main">
     <image class="suspend" src="../../images/remoteControl/suspend.png"  style="display: 
     {{play}}"  catchtouchstart="videoPlayer"></image>
     <image class="play" src="../../images/remoteControl/play.png"  style="display: 
     {{play2}}" catchtouchstart="closePlayer"></image>
   </view>	
   <view class="mobile-ez-ptz-icon-top" id="mobile-ez-ptz-icon-top"></view>
   <view class="mobile-ez-ptz-icon-left"  id="mobile-ez-ptz-icon-left"></view>
   <view class="mobile-ez-ptz-icon-bottom" id="mobile-ez-ptz-icon-bottom"></view>
   <view class="mobile-ez-ptz-icon-right" id="mobile-ez-ptz-icon-right"></view>
</view>
page({
  // 计算移动起始方位
  handlePtzTouchStart(event){
    wx.createSelectorQuery().select('#ptz-img-container').boundingClientRect( (rect)                 
    => {
       let { clientX,clientY} = event.touches[0]; // 移动起始坐标值
       let rectLeft = rect.left; // 计算云台控制组件的位置
       let rectTop = rect.top; // 计算云台控制组件的位置

       var centerLeft = 104 + rectLeft; // 组件实际坐标值
       var centerTop = 104 + rectTop;// 组件实际坐标值
       var left = clientX - centerLeft; // 移动偏移量
       var top = clientY - centerTop; // 移动偏移量

       if(Math.abs(left) > Math.abs(top)){
         if(left>0){
           this.handlePtzControl(3); // 向右移动
         }else {
           this.handlePtzControl(2); // 向左移动
         }
       } else {
         if (top > 0) {
           this.handlePtzControl(1); // 向下移动

         } else {
           this.handlePtzControl(0); // 向上移动
         }
       }
     }).exec();
   },
  // 计算移动结束时方位
  handlePtzTouchEnd(event) {
    let { clientX, clientY } = event.changedTouches[0]; //移动结束坐标值
    const _this = this; 
    wx.createSelectorQuery().select('#ptz-img-container').boundingClientRect( (rect)                     
    => {
      let rectLeft = rect.left;// 计算云台控制组件的位置
      let rectTop = rect.top;// 计算云台控制组件的位置

      var centerLeft = 104 + rectLeft;  // 组件实际坐标值
      var centerTop = 104 + rectTop;// 组件实际坐标值
      var left = clientX - centerLeft;// 移动偏移量
      var top = clientY - centerTop;// 移动偏移量
      if (Math.abs(left) > Math.abs(top)) {
        if (left > 0) {
          _this.handlePtzControl(3,'stop');
        } else {
          _this.handlePtzControl(2, 'stop');
        }
      } else {
        if (top > 0) {
          _this.handlePtzControl(1, 'stop');
        } else {
          _this.handlePtzControl(0,'stop');
        }
      }
    }).exec();
  },
  // 调用接口控制云台转向(被执行两次开始点击一次,结束点击一次)
  handlePtzControl(position,type){ //position是方向(3:右,2:左,1:下,0:上),type是判断 
    开始还是结束
    const { accessToken, deviceSerial, channelNo } = this.data;
    var url = 'https://open.ys7.com/api/lapp/device/ptz/start';  //请求开始云台控制地址
    if(type == 'stop'){
      url = 'https://open.ys7.com/api/lapp/device/ptz/stop'//请求结束云台控制地址
    }
    wx.request({
      url: url, //请求地址上面的url局部变量(判断是开始云台控制地址/结束云台控制地址)
      method: 'POST',
      data: {
        "accessToken": accessToken,
        "deviceSerial": deviceSerial,//设备序列号
        "channelNo": channelNo,//通道号
        "direction": position, //操作命令:0-上,1-下,2-左,3-右,8-放大,9-缩小
        speed:1,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: (res) => {
        console.log(res.data)
        const code = res.data.code;
        if(code == 10029){
          wx.showToast({
            title: '个人版接口调用超限,请升级企业版',
            icon: 'none',
          })
        } 
        if(code == 200){
          console.log('控制成功')
        } 
      }
    })
  },
})

 4.声音的暂停和播放

  closeSound(){
    this.setData({
      abc:'none',
      abc2:'block'
    })
    livePlayerContext.mute({
      success: ()=>{
        console.log("关闭声音")
     },
     fail: (error)=>{
       console.log(error)
       console.log('关闭声音失败')
     }
    })
  },
  openSound(){
    this.setData({
      abc:'block',
      abc2:'none'
    })
    livePlayerContext.resume({
      success: ()=>{
        console.log("开启声音")
     },
     fail: (error)=>{
       console.log(error)
       console.log('开启声音失败')
     }
    })
  },

   5.语音播报            

// 创建recorderManager对象
const recorderManager = wx.getRecorderManager();
const options = {
  duration: 60000, //指定录音的时长,单位 ms,最大为10分钟(600000),默认为1分钟(60000)
  sampleRate: 16000, //采样率
  numberOfChannels: 1, //录音通道数
  format: 'mp3', //音频格式,有效值 aac/mp3
}
page({
   onLoad:function(){
    // 监听录音结束事件
    recorderManager.onStop((res) => {
      const { recoderTime } = this.data;
      const { tempFilePath } = res;
      wx.uploadFile({
        url: 'https://open.ys7.com/api/lapp/voice/sendonce', //临时语音下发接口
        filePath: tempFilePath, //tempFilePaths[0],
        name: 'voiceFile',
        formData: {
          accessToken: accessToken,
          deviceSerial: deviceSerial,
          channelNo: channelNo,
        },
        header: {
          'content-type': 'amultipart/form-data' // 默认值
        },
        success:(res)=>{
          let data=res.data;
          if(!data.code){
            data=JSON.parse(data);
          }
          if(data.code==200){
            console.log('发送成功');
          }
        },
        fail:(error)=>{
          console.log('发送失败:',error);
        }
      })
    }) 
   },
  // 开始对讲
  speakStart(event){
    recorderManager.start(options);
    console.log("开始对讲");
    this.setData({
      a:'none',
      a2:'block',
    })
  },
    // 结束对讲
    speakEnd(event) {
    console.log("结束对讲")
    recorderManager.stop();
    this.setData({
      a:'block',
      a2:'none',
    })
  }
})

到了这里,关于微信小程序连接“萤石云”的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序弱网监控

    在真实的项目中,我们为了良好的用户体验,会根据用户当前的网络状态提供最优的资源,例如图片或视频等比较大的资源,当网络较差时,可以提供分辨率更低的资源,能够让用户尽可能快的看到有效信息,而不是一直白屏等待。 那如何设计一个生产环境可用的小程序当前

    2024年02月15日
    浏览(35)
  • 微信小程序获取收货地址及存储收货地址

    这个城市数据的js直接放网盘了我 链接:https://pan.baidu.com/s/18UsJ1VUxEI-7LJjVW8BW4w  提取码:mmao wxml wxss

    2024年02月15日
    浏览(51)
  • 微信小程序-逆地址解析

    根据经纬度查询周围小区用到的是 逆地址解析 的功能,所谓的逆地址解析是指根据经纬度获取位置的相关描述,在申请完密钥后下载微信小程序 Javascript SDK 调用其提供的方法即可实现查询周围小区的功能。  第三步:下载并解压后将 Javascript SDK 放到  libs  目录下,然后到

    2024年02月16日
    浏览(29)
  • 微信小程序,添加地址,修改地址,删除地址及设为默认地址(上)

    地址管理页面的wxml 他的wxss ok,现在样子设好了,现在就是他的js 现在地址管理这个页面就完成了

    2024年02月04日
    浏览(33)
  • 【微信小程序怎么开店铺】微信小程序店铺怎么制作?

    【微信小程序怎么开店铺】微信小程序店铺怎么制作?线上开店已经是当下非常主流的经营模式之一,尤其是微信小程序,微信小程序在近几年的普及和发展下,大有超越app的使用率。因此,把线上开店铺和微信小程序结合起来,就成为了当下许多企业商家的共同选择。那么

    2024年02月09日
    浏览(48)
  • uniapp 微信小程序导航功能(单个地址)

    获取终点的坐标,根据终点的坐标,终点名称,终点详细地址,调起地图导航到第三方APP 1、针对单个地址导航

    2024年02月12日
    浏览(78)
  • 微信小程序实现实时日志和接口监控的接入

    前提:产品提出能够实时监控菜品展示、加购、下单的整个流程。方便正式环境查看接口运行情况。所以就接入了,小程序的日志和接口监控。 Log.js 在需要监听的页面进行调用 注意事项: Log的输出,必需是在手机上运行时才会有记录,在开发者上运行是没有记录的 查看位

    2024年02月13日
    浏览(49)
  • 微信小程序请求服务器地址报错

    {\\\"errno\\\":600009,\\\"errMsg\\\":\\\"request:fail invalid url \\\"/home/swiperdata\\\"\\\"} 1、基地址没写 2、基地址或者接口地址没写对,可能多了空格或者字符等 3、使用了第三方封装的请求方法没有在main.js引入注册 注意: 需在根目录的main.js 的new Vue()和app.$mount()之间引入此文件。 在new Vue()后面的原因是,

    2024年02月11日
    浏览(45)
  • 微信小程序wx.getLocation+腾讯地图手动选择地址及解析地址

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 步骤: 入驻腾讯位置服务平台 申请开发者密钥(Key):申请秘钥 Key的作用与注意事项 微信公众平台绑定插件 参考地址: https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginStart 申请开发者密钥(key):申请密钥

    2024年01月20日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包