微信小程序-腾讯云即时通信 IM 小程序直播(一)
一、这里我们先讲讲使用腾讯云直播 流程
请先将1.2.3的都去简单的过一遍 就是组件的参数了解一下
1.准备推流跟拉流地址 （登录腾讯云在控制台 在直播工具箱 找到创建推流跟拉流）推流跟拉流的地址是不一样的 这里需要注意 详细步骤 https://cloud.tencent.com/document/product/454/7915
2.需要去到绑定小程序的公众平台添加相关直播的类目 比如你是做那类直播的 详细步骤https://cloud.tencent.com/document/product/454/12518
3.以上都做好之后 我们就可以使用
3.1.<live-pusher> （推流组件 也就是直播）
3.2.<live-player>（拉流组件 也就是观看直播）
3.3.<mlvb-live-room>
详细步骤请看这里 https://cloud.tencent.com/document/product/454/12518
4.讲一下这两个组件的几个重要属性
4.1<live-pusher> 推流组件
url:'推流地址' //这个是展示的推流地址 是我们第一步创建的推流地址 放在这里就好
mode:'SD' //这里有四个选择 SD，HD，FHD，RTC 。 SD、HD 和 FHD 主要用于直播类场景， RTC 则主要用于双向视频通话或多人视频通话场景
autopush:false 是否自动启动推流 //这个就是如果为 true 主播点击开播 那就是直接开播了 false 的话 我们就可以先预览一下直播效果 如果合适我们在直接开播
enable-camera:true //是否开启摄像头 默认开启
debug:true //是否开启调试 我们在开发中 开启这个方便我们观察 直播是否正常 上线需关闭
4.2<live-player> 拉流组件
url:'拉流地址' //这个是展示的拉流地址 是我们第一步创建的拉流地址 放在这里就好
mode:'live' //live 模式主要用于直播类场景 RTC 则主要用于双向视频通话或多人视频通话场景
autoplay:false //进入直播间是否自动播放 一般都是自动播放的
background-mute：false //当微信切到后台时，是否关闭播放声音
debug:true //是否开启调试 我们在开发中 开启这个方便我们观察 观看直播是否正常 上线需关闭
二、现在我们来看看 代码如果实现
提示:做一个功能的时候 我们最好先自己写一个dome测试一下 通了在放在咱自己的项目里面去 这样才不会眼花缭乱
1.这个是一个简单的创建直播的页面 其实还有其他的 这根据你们业务需求来 当我们点击直播的时候 这中间过程是需要请求后端接口 将房间名称以及其他业务需求传过去 然后后端会返回房间id 推流地址给你 这里我就不做了 因为我知道推流地址了 就直接拿来用了
index.wxml文件
<view class="box"><input class="input" value='{{roomData.roomName}}'type="text" placeholder="需要创建的房间名称" maxlength='30' /><button class="mini-btn" type="primary" size="mini" bindtap='setupLive'>开播</button></view>index.js文件
Page({data: {roomData: {roomNumberID: 110,//房间号roomName: '',//房间名称userNameID: 2,//用户iduserName: '小明',//用户名称,}},//开播setupLive() {// 跳转到直播页面 wx.navigateTo({url: `/pages/room-live/index?roomData=` + this.data.roomData,});},
})2.直播页面 直播展示 看你们怎么设计 如果直播是全屏的画 我们那些按钮采用cover-view 这个组件悬浮上去 比如：暂停直播、美颜等级调整、关闭直播等等这些操作
room.wxml
<view class="box"><live-pusher id="livePlayerID" src="{{roomData.roomUrl}}" mode="SD" autopush='{{pusher.autopush}}' enable-camera='true' auto-focus='true' orientation="orientation" beauty='5' whitenes='5' device-position='front' waiting-image='https://profile.csdnimg.cn/B/F/D/2_qingqingyang6' background-mute class="live-playe"></live-pusher><view><text>这里做一些其他操作</text></view><cover-view style="position: fixed; top: 0; left: 0;">悬浮在页面上 比如：暂停直播、美颜等级调整、关闭直播等等这些操作</cover-view></view>room.js
Page({data: {roomData: {roomNumberID: 110,//房间号roomName: '美好的一天直播间',//房间名称userNameID: 2,//用户iduserName: '小明',//用户名称,roomUrl: 'rtmp://.....', //推流地址},livePlayer: null,},onLoad(e) {<!-- 这里是初始化id -->this.data.livePlayer = wx.createLivePusherContext('livePusherID');this.data.livePlayer.start({})},
})以上是简单的直播流程
3.观看直播间页面 其实跟直播的差不多 相对比较简单
see-rome.wxml
<view><live-player src="rtmp://....." mode="live" autoplay='false' muted="false" orientation="orientation"background-mute object-fit="contain" debug id="livePlayerID" class="live-playe"></live-player></view>see-rome.js
Page({ onLoad(e) {<!-- 这里是初始化id -->let player = wx.createLivePlayerContext('livePlayerID');player.play();},})一个简单的dome就完成了 其实有很多需要注意的 比如直播的时候实在pc端直播还是用什么第三方的 如果用第三方的 那我们前端就只需要做拉流 就不需要做推流了 拉流就比较简单
下期就讲一下 我们观看直播间的时候 给主播点赞 在直播间发送消息 直播间商品展示 送礼物等 腾讯云的即时通信IM
微信小程序-腾讯云即时通信 IM 小程序直播(一)相关推荐
- 微信小程序集成腾讯云即时通信IM
这里写自定义目录标题 腾讯云即时通信IM 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一个表格 设定 ...
- [Web端接入经验分享] 腾讯云即时通信TIM、实时音视频TRTC
[Web端接入经验分享] 腾讯云即时通信TIM.实时音视频TRTC 即时通信TIM官网地址 即时通信TIM SDK API文档地址 实时音视频TRTC官网地址 实时音视频TRTC SDK API文档地 ...
- 对腾讯云即时通信 IM快速入门（Web H5）TUIKit的改造
快速入门组件非常容易上手,然后对于初学者,我对官方例子有个疑惑,例子中用户登录写在main.ts中,我想通过用户自主输入用户id的方式登录,无法在main.ts加载前,用vue实现一个输入框. imp ...
- 腾讯云-即时通信 IM uni-app 和 java 整合过程
流程 初始化 登录(登录需要seggin授权) 获取genSig的代码 pom.xml 引入 工具类: import com.tencentyun.TLSSigAPIv2;public class I ...
- uniapp结合腾讯云及时通信IM的聊天记录本地存储方案
uniapp结合腾讯云及时通信IM的聊天记录本地存储方案 UniApp 是一个跨平台的应用开发框架,可以使用 Vue.js 开发多端应用(如H5.小程序.App等).在 UniApp 中,可以使用 u ...
- 【中级】 微信小程序 - 腾讯云 - wafer2 - PHP - DEMO - 003 - 源码分析 - 01 - 文件组成详细分析
1 前言: 本文原创,欢迎转载,但是,务必保持原文并且给出原文链接. 微信小程序 - 腾讯云 - PHP - DEMO 是微信提供的一个微信小程序和腾讯云小程序云服务wafer 进行接口的例子. 本仓 ...
- php qcloud sdk weapp_微信小程序腾讯云php后台解决方案
微信小程序腾讯云php后台解决方案 微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)conf ...
- 小程序 + 腾讯云移动直播SDK
小程序 + 腾讯云移动直播SDK 小程序 腾讯云移动直播SDK 关于腾讯 M L V B 直播 必须项: 主播开播: 观众收看: 连麦: 发送文本消息: 小程序 主要是推流标签和拉流标签:没什么好说的 ...
- 腾讯云10亿扶持小程序：3元套餐可能免费
腾讯云10亿资金扶持"小程序·云开发",对超过100万小程序开发者提供免费云开发资源支持. 1月9日,正值小程序正式发布两周年,腾讯云在2019年微信公开课PRO上宣布,将推出总价 ...
最新文章
- Java应用程序中的性能改进：ORM / JPA
- Java Web安全编码
- 数据库-聚合函数-count-sum
- 迷“铺地砖”的数学家
- 《白日梦想家》观后感
- 在Linux中模拟击键和鼠标移动
- MongoDB 副本集的相关概念【转】
- centos7 运行 jar_centos7两行命令就部署了服务器测试环境？(java)
- Flask—10-项目部署（02）
- 宏晶STC单片机使用STC-ISP串口烧录失败的解决方法及实例汇总 (Ver0.99.16)
- Android系统启动流程分析之启动应用
- 逆战ds服务器怎么修复,IBMDS3512存储硬盘坏了正确的更换方法应该是怎么
- 安装Pytorch-gpu版本（第一次安装 或 已经安装Pytorch-cpu版本后）
- vlc播放器linux编译,linux安装vlc视频播放器
- E3亮点：StudioMDHR的《茶杯头》
- 3d场景渲染插件MultiScatter 1.623
- 2023二建各科入门帮助
- Android传感器、语音识别、定位系统、Google Map API、快捷方式、widget编程总结及示例
- 360前端星计划学习笔记0410
- android apk对遥控器支持,Android中关于APK对遥控器支持的修改