700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序-腾讯云即时通信 IM 小程序直播(一)

微信小程序-腾讯云即时通信 IM 小程序直播(一)

时间:2023-10-08 15:01:20

相关推荐

微信小程序-腾讯云即时通信 IM 小程序直播(一)

一、这里我们先讲讲使用腾讯云直播 流程

请先将1.2.3的都去简单的过一遍 就是组件的参数了解一下

1.准备推流跟拉流地址(登录腾讯云在控制台 在直播工具箱 找到创建推流跟拉流)推流跟拉流的地址是不一样的 这里需要注意 详细步骤 /document/product/454/7915

2.需要去到绑定小程序的公众平台添加相关直播的类目 比如你是做那类直播的 详细步骤/document/product/454/12518

3.以上都做好之后 我们就可以使用

3.1.<live-pusher> (推流组件 也就是直播)

3.2.<live-player>(拉流组件 也就是观看直播)

3.3.<mlvb-live-room>

详细步骤请看这里 /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='/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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。