Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序使用 移动直播SDK

小程序使用 移动直播SDK

原创
作者头像
yuliang
修改于 2021-03-22 02:22:03
修改于 2021-03-22 02:22:03
9K00
代码可运行
举报
文章被收录于专栏:TRTC Web SDKTRTC Web SDK
运行总次数:0
代码可运行

在使用腾讯的 trtc 产品时,要是想在微信小程序实现直播的业务能力,首先需要指定 ‘主播’‘观众’ 角色,小程序的 <trtc-room> 中的标签属性和实例对象的方法都没有做直播状态时的角色区分;再就是想在主播端和观众端实现一些弹幕,点赞,连麦互动时需要使用到 custom 自定义面板,需要对页面进行设计,我也有对 custom 面板的简单使用写了两篇文章可供参考:微信小程序TRTC使用custom自定义面板(理解篇)微信小程序TRTC使用custom自定义面板(实现篇)。为了方便开发者,腾讯云还有 移动直播SDK,其中集成了弹幕、点赞、美颜、连麦等一些功能的,微信小程序端的调用方式也是以组件形势进行调用。

腾讯 移动直播SDK 基于 RTMP SDK 的多平台直播开发工具,配合腾讯云直播云点播IM等云服务为客户提供了快速接入一体化 的直播方案,支持包括iOS、安卓、小程序等多种接入方式。配合腾讯云直播服务使用 RTMP over QUIC 快速推流至腾讯云,让直播更低卡顿、更低延迟。通过建立加速通道为双向传输的连麦降低音视频传输的延迟,保证直播连麦服务更加流畅。借助AI识别技术,对人脸进行识别定位。支持动销贴纸、手势互动、智能抠背、美颜美妆、高级滤镜等功能,满足客户的多样直播场景。

目前SDK的集成只支持iOS、安卓、微信小程序;摄像头推流的功能也是只有iOS、安卓、微信小程序;录屏推流功能只有iOS和安卓;拉流播放的功能是支持iOS、安卓、微信小程序和Web端;对于连麦互动的方案,微信小程序采用RTMP方案,安卓和iOS可以使用RTMP方案之外还可以采用RTC方案

微信小程序集成的 移动直播SDK 版本是基础版本,版本功能可以到官方文档 SDK下载 进行查看。微信小程序的集成方法也可以上官网查看完成的流程。其中就是需要添加一个自己的域名来作为播放域名。

微信小程序使用 移动直播SDK 和使用trtc一样,直接引入组件,然后在需要直播的页面中写入 <mlvb-live-room> 组件,以下是代码说明:(参考官方Demo

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const app = getApp()

Page({
  component: null,
  data: {
    userName: '',
    roomID: '',
    roomName: '',
    pureAudio: false,
    role: 'audience',
    showLiveRoom: false,
    rooms: [],
    comment: [],
    linked: false,
    debug: false,
    frontCamera: true,
    inputMsg: [],
    muted: false,
    toview: '',
    beauty: 5,
    shouldExit: false,
    phoneNum: '',
    headerHeight: app.globalData.headerHeight,
    statusBarHeight: app.globalData.statusBarHeight,
  },
  // 进入页面将上个页面收集的一些配置信息进行保存
  onLoad: function (options) {
    var self = this;
    console.log("--> onLoad: ", options)
    var role = options.type == 'create' ? 'anchor' : 'audience';

    if (role == 'audience') {
      self.setData({
        roomID: options.roomID,
        roomName: options.roomName,
        userName: options.userName,
        role: role,
        showLiveRoom: true
      }, function () {
        self.start();
      })
    } else {
      self.setData({
        roomName: options.roomName,
        userName: options.userName,
        pureAudio: JSON.parse(options.pureAudio),
        role: role,
        showLiveRoom: true
      }, function () {
        console.log('======> page data: ', self.data)
        self.start();
      })
    }
  },
  // 设置监听 mlvb-live-room 组件返回的事件
  onRoomEvent: function (e) {
    var self = this;
    var args = e.detail;
    console.log('onRoomEvent', args)
    switch (args.tag) {
      case 'roomClosed': {
        wx.showModal({
          content: `房间已解散`,
          showCancel: false, // 标识房间已经解散
          complete: () => {
            wx.navigateBack({ delta: 1 })
          }
        });
        break;
      }
      case 'error': {
        wx.showToast({
          title: `${args.detail}[${args.code}]`,
          icon: 'none',
          duration: 1500
        })
        if (args.code == 5000) {
          this.data.shouldExit = true;
        } else {
          console.error("收到error:", args)
          if (args.code != -9004) {
            setTimeout(() => {
              wx.navigateBack({ delta: 1 })
            }, 1500)
          } else {
            self.setData({
              linked: false, // 出错断开连麦标识
              phoneNum: ''
            })
          }
        }
        break;
      }
      case 'linkOn': { // 连麦连上
        self.setData({
          linked: true, // 标识连麦连上
          phoneNum: ''
        })
        break;
      }
      case 'linkOut': { //连麦断开
        self.setData({
          linked: false, // 标识断开连麦
          phoneNum: ''
        })
        break;
      }
      case 'recvTextMsg': {
        console.log('收到消息:', e.detail.detail);
        var msg = e.detail.detail;
        self.data.comment.push({
          content: msg.message,
          name: msg.userName,
          time: msg.time
        });
        self.setData({
          comment: self.data.comment,
          toview: ''
        });
        // 滚动条置底
        self.setData({
          toview: 'scroll-bottom'
        });
        break;
      }
      case 'requestJoinAnchor': { //收到连麦请求
        var jioner = args.detail;
        var showBeginTime = Math.round(Date.now());
        wx.showModal({
          content: `${jioner.userName} 请求连麦`,
          cancelText: '拒绝',
          confirmText: '接受',
          success: function (sm) {
            var timeLapse = Math.round(Date.now()) - showBeginTime;
            if (timeLapse < 10000) {
              if (sm.confirm) {
                console.log('用户点击同意')
                self.component && self.component.respondJoinAnchor(true, jioner);
              } else if (sm.cancel) {
                console.log('用户点击取消')
                self.component && self.component.respondJoinAnchor(false, jioner);
              }
            } else {
              wx.showToast({
                title: '连麦超时',
              })
            }
          }
        })
        break;
      }
      default: {
        console.log('onRoomEvent default: ', e)
        break;
      }
    }
  },
  // 开始直播或者播放直播
  start: function () {
    var self = this;
    // 选择<mlvb-live-demo>实例
    self.component = self.selectComponent("#id_liveroom")
    console.log('self.component: ', self.component)
    console.log('self:', self);
    // 启动
    self.component.start();
  },
  // 设置页面标签为房间名
  onReady: function () {
    var self = this;
    // 设置页面标签为房间名
    wx.setNavigationBarTitle({
      title: self.data.roomName
    })
  },
  // 检查房间是否还存在,存在恢复直播或播放
  onShow: function () {
    if (this.data.shouldExit) {
      wx.showModal({
        title: '提示',
        content: "收到退房通知",
        showCancel: false,
        complete: function () {
          wx.navigateBack({ delta: 1 });
        }
      });
    }
    var self = this;
    self.component && self.component.resume();
  },
  // 观众点击连麦请求
  onLinkClick: function () {
    var self = this;
    self.component && self.component.requestJoinAnchor();
    self.setData({
      phoneNum: 'phone-1'
    })
    self.setInternal();
  },
  // 接听动画
  setInternal: function () {
    var self = this;
    setTimeout(() => {
      if (!self.data.phoneNum) {
        return;
      }

      var curPhoneNum = '';
      switch (self.data.phoneNum) {
        case 'phone-1':
          curPhoneNum = 'phone-2';
          break;
        case 'phone-2':
          curPhoneNum = 'phone-3';
          break;
        case 'phone-3':
          curPhoneNum = 'phone-1';
          break;
        default:
          break;
      }
      self.setData({
        phoneNum: curPhoneNum
      })
      self.setInternal();
    }, 500);
  },
  // 退出页面后停止直播或播放
  onHide: function () {
    var self = this;
    self.component && self.component.pause();
  },
  // 调试模式开关
  showLog: function () {
    var self = this;
    self.setData({
      debug: !self.data.debug
    })
  },
  // 麦克风开关
  changeMute: function () {
    var self = this;
    self.setData({
      muted: !self.data.muted
    })
  },
  // 美颜开关
  setBeauty: function () {
    var self = this;
    self.setData({
      beauty: self.data.beauty == 5 ? 0 : 5
    })
  },
  // 切换摄像头
  changeCamera: function () {
    var self = this;
    self.component && self.component.switchCamera();
    self.setData({
      frontCamera: !self.data.frontCamera
    })
  },
  // 返回键
  onBack: function () {
    wx.navigateBack({
      delta: 1
    });
  },
})

wxml文件:

代码语言:html
AI代码解释
复制
<view class='container-box'>
  <!-- 直接调用 移动直播组件 -->
  <mlvb-live-room id="id_liveroom" wx:if="{{showLiveRoom}}" roomid="{{roomID}}" role="{{role}}" roomname="{{roomName}}" pureaudio="{{pureAudio}}" debug="{{debug}}" muted="{{muted}}" beauty="{{beauty}}" template="float" bindRoomEvent="onRoomEvent">

    <!-- 主播返回按钮 -->
    <cover-view slot="casterBackButton" style='position:absolute;left:0;height:10%;width:10%;top:{{(headerHeight + statusBarHeight) - 26}}rpx'>
        <cover-image class='close' src="/pages/Resources/back.png" bindtap="onBack"></cover-image>
    </cover-view>

    <!-- 观众返回按钮 -->
    <cover-view slot="audienceBackButton" style='position:absolute;left:0;height:10%;width:10%;top:{{(headerHeight + statusBarHeight) - 26}}rpx'>
        <cover-image class='close' src="/pages/Resources/back.png" bindtap="onBack"></cover-image>
    </cover-view>
      
    <!-- 主播推流界面上叠加的操作按钮 -->
    <cover-view slot="caster" style='position:absolute;bottom:0;height:10%;width:100%'>
      <cover-view class="operate">
        <!-- 切换(前后置)摄像头 -->
        <cover-view class='img-box'>
          <cover-image class='img-view' src='/pages/Resources/camera{{frontCamera?"":"-gray"}}.png' bindtap="changeCamera"></cover-image>
        </cover-view>
        <!-- 美颜按钮 -->
        <cover-view class='img-box'>
          <cover-image class='img-view' src='/pages/Resources/{{beauty > 0? "beauty" : "beauty-dis"}}.png' bindtap="setBeauty"></cover-image>
        </cover-view>
        <!-- 调试模式开关 -->
        <cover-view class='img-box'>
          <cover-image class='img-view' src='/pages/Resources/{{debug? "log" : "log2"}}.png' bindtap="showLog"></cover-image>
        </cover-view>
      </cover-view>
    </cover-view>

    <!-- 观众播放界面上叠加的操作按钮 -->
    <cover-view slot="audience" style='position:absolute;bottom:0;height:10%;width:100%'>
      <cover-view class='{{!linked? "operate-nolink" : "operate"}}'>
        <!-- 观众端连上麦后 切换摄像头按钮 -->
        <cover-view wx:if="{{linked}}" class='img-box'>
          <cover-image class='img-view' src='/pages/Resources/camera.png' bindtap="changeCamera"></cover-image>
        </cover-view>
        <!-- 观众端连上麦后 美颜开关 -->
        <cover-view wx:if="{{linked}}" class='img-box'>
          <cover-image class='img-view' src='/pages/Resources/{{beauty > 0? "beauty" : "beauty-dis"}}.png' bindtap="setBeauty"></cover-image>
        </cover-view>
        <!-- 没连上麦时 发起连麦请求的按钮 -->
        <cover-view wx:if="{{!linked}}" class='img-box-big'>
          <cover-image class='img-view-big' src='/pages/Resources/video-call.png' bindtap="onLinkClick"></cover-image>
        </cover-view>
        <!-- 调试模式开关 -->
        <cover-view class='{{!linked? "img-box-small" : "img-box"}}'>
          <cover-image class='{{!linked? "img-view-small" : "img-view"}}' src='/pages/Resources/{{debug? "log" : "log2"}}.png' bindtap="showLog"></cover-image>
        </cover-view>
      </cover-view>
      <!-- 请求连麦动画 -->
      <cover-image wx:if="{{phoneNum}}" class='center' src="/pages/Resources/{{phoneNum}}.png"></cover-image>
    </cover-view>
  </mlvb-live-room>
</view>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
打通小程序音视频和webRTC
2017年腾讯视频云团队跟微信团队联合,将视频云 SDK 跟微信小程序整合在一起,并开放内部功能。
腾讯视频云终端团队
2018/05/03
19.4K14
打通小程序音视频和webRTC
微信小程序集成TRTC SDK,集成移动直播SDK
在集成小程序 SDK 前,请确保您已完成以下步骤,具体操作请参见跑通Demo(小程序)。
yuliang
2021/03/22
5.1K0
微信小程序避坑指南
 详见官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/client-lib/client.html
smy
2018/11/28
3.4K0
微信小程序避坑指南
小程序-云点播
之前在Web端用 h5connect.js 方式点播视频,现在需要移动到微信小程序中,求大佬解决帮助,急急急.... 谢谢啦!
用户7418541
2020/06/04
4.7K0
小程序摄像头使用技巧
小程序社区版主 x837195936(熊晨沣):做了一个小demo,小程序调用摄像头拍照。拍照时可以选相框,也可以在相机上添加别的饰品、表情等覆盖物。主要是cover-view,cover-image结合camera组件的应用。 index.wxml <view class="container"> <camera device-position='{{devicePosition}}' hidden='{{hideCamara}}' style="width: 100%;height: {{hh}
极乐君
2018/07/05
1.6K0
【愚公系列】2022年03月 微信小程序-视图容器
覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view,支持嵌套在cover-view里。
愚公搬代码
2022/12/01
6790
【愚公系列】2022年03月 微信小程序-视图容器
「小程序JAVA实战」小程序视频播放的时候生命周期的控制(56)
当播放单个视频时,点击搜索,视频还在后台继续播放,这是有问题,需要通过生命周期的方式来控制,当跳转页面时,视频暂停播放,视频返回后继续播放。源码https://github.com/limingios
IT架构圈
2019/01/24
6990
「小程序JAVA实战」小程序视频播放的时候生命周期的控制(56)
微信小程序TRTC使用custom自定义面板(实现篇)
本文主要是使用 custom 面板实现直播互动,上下麦操作。如有疑问可参考 微信小程序TRTC使用custom自定义面板(理解篇)。本文只是简单演示如何实现主播与观众进行连麦互动,在实际中,通常是有主播端发起与粉丝进行直播互动,通过粉丝来接受,进行连麦。发送这种消息可以使用IM(即时通讯)完成。
yuliang
2021/03/16
1.4K0
小程序自定义tabbar的两种方式
在根目录下创建custom-tab-bar目录,然后在该目录下新建组件component,注意是组件,不要建成page页面,虽然都一样是js/json/wxml/wxss四个文件
全栈程序员站长
2022/11/17
1K0
小程序自定义tabbar的两种方式
微信小程序滑块验证方法
如图: 滑块验证组件 puzzleVerify目录 index.wxml <!-- 滑动验证弹窗 --> <view class="slide_model" wx:if="{{slidebel}}"> <view class="slide_wrapper"> <!-- 拼图图片部分 --> <view class="canvas_img" id="canvas_img"> <!-- 背景图片 --> <canvas style="width: {{canvas_width}
江一铭
2022/06/17
1.8K0
微信小程序滑块验证方法
「小程序JAVA实战」小程序视频展示页开发(52)
PS:如果我们把cover-view中的cover去掉的话,我们这个view肯定是无法保存在我们的视频里面的。下面的我们来一起实现里面的功能。
IT架构圈
2019/01/24
1.3K0
「小程序JAVA实战」小程序视频展示页开发(52)
微信小程序初体验
本文讲述了一位开发者在使用微信开发者工具进行小程序开发过程中,从编写代码、调试、优化,到项目发布上线的整个流程。同时,介绍了开发过程中遇到的具体问题和解决方法,包括页面加载、交互逻辑、性能优化、小程序云开发等。通过本篇文章,读者可以了解到小程序开发的整体流程,并学会如何解决开发过程中遇到的问题。
IMWeb前端团队
2018/01/08
3.1K0
微信小程序初体验
微信小程序Video组件实现视频、自定义播放按钮、封面图、封面图文字demo
在video标签中添加view或cover-view标签,封面图可直接设置video组件的poster属性,自定义按钮和封面图文字包在view中设置定位即可,给自定义按钮绑定点击事件,触发事件后隐藏最外层view,给video绑定bindended事件 设置最外层view显示
peng_tianyu
2022/12/15
3.3K0
微信小程序Video组件实现视频、自定义播放按钮、封面图、封面图文字demo
微信小程序实战通:小程序结合flask后台实现身份证智能识别
最近在工作上需要在微信上开发小程序。作为一个熟练于电脑客户端开发,网页前后台全栈开发,驱动开发,系统底层开发等多年经验的老鸟而言,刚开始接触小程序任务时居然一时有点懵逼,这是任何人面对全新领域时的正常状态,经过一段时间摸索后我很快掌握了小程序开发的基本要领,有关小程序开发的资料很多,但在我看来能够让一个毫无小程序开发经验的人能在短时间内快速上手掌握教程还是不多,因此我想把自己做过的项目展现出来,只要你跟着完成一遍,小程序的开发技巧基本就掌握了,本文能够起到省时省力的效果。
望月从良
2021/03/15
3.5K0
微信小程序实战通:小程序结合flask后台实现身份证智能识别
微信小程序----map路线规划
bug: 页面脚的步行、骑行、驾车区域在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中。 感谢: 感谢Lrj_estranged指出问题!
Rattenking
2021/02/01
1.4K0
微信小程序----map路线规划
全栈开发工程师微信小程序-中(中)
official-account 用户扫码打开小程序,在小程序内配置公众号关注组件,快捷关注公众号.
达达前端
2019/07/03
8730
全栈开发工程师微信小程序-中(中)
微信小程序地图实时定位_小程序获取当前位置定位信息
因为小程序更新了获取地理位置API接口,需要先在app.json中配置一下permission字段 ,不然会报微信小程序getLocation 需要在app.json中声明permission字段
全栈程序员站长
2022/11/10
4.7K0
微信小程序地图实时定位_小程序获取当前位置定位信息
小程序多平台同构方案分析-kbone 与 remax
此文介绍国内主流小程序的架构,以及通过运行时适配可达到一套小程序代码运行在多个小程序平台上的方案,主要介绍 kbone 与 remax 两套方案,他们原理基本一致,所有小程序代码都在 worker 线程上运行,最终在 worker 线程生成一棵 dom tree,再把 dom tree 同步到 render 线程上通过 w/axml 进行渲染。
binnie
2019/12/17
2.2K0
小程序多平台同构方案分析-kbone 与 remax
小程序开发中的一些实践和踩坑
在公司小程序也开发了一段时间了,中间遇到过很多问题,特此记录几个比较典型的问题和解决方案。
张张
2019/12/23
1.2K0
小程序开发中的一些实践和踩坑
小程序textarea与弹窗
在小程序 textarea 组件上展示一个模态弹窗组件,会发现 textarea 中输入的文字内容,会直接穿透模态弹窗显示在最上面,而且还能点击输入文字。
IMWeb前端团队
2019/12/04
2.1K0
推荐阅读
相关推荐
打通小程序音视频和webRTC
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档