一文教你uni-app开发小程序直播功能,轻松打造专属直播间!

1、微信后台申请插件开通

微信后台 登录微信后台
点击设置中的第三方设置 —> 添加插件 --> 点击小程序直播组件(获取AppID)

fae32202311281014252851.png

64dd4202311281015057557.png

7b058202311281015413723.png

2、微信后台开通直播功能

点击进入直播后台系统

ff636202311281016392015.png

这里就是我们创建的直播功能区域

be72d202311281017211255.png

3、代码中接入直播插件AppID

支持在主包或分包内引入【直播组件】 live-player-plugin 代码包
(注:直播组件不计入代码包体积),项目根目录的 app.json 引用,示例代码如下:
uni-app开发中在pages.json引入

(1) 主包引入和"pages"同级

"plugins": {"live-player-plugin": {"version": "1.3.0", // 注意填写该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)"provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)}
}

Copy

(2) 分包引入

"subpackages": [{"plugins": {"live-player-plugin": {"version": "1.3.0", // 注意该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)"provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)}}}
]

Copy

4、【直播组件】如何使用

直接在直播控制台创建好直播间,拿到房间id;
相关文档 微信接入文档

进入直播间方式

1、使用 navigator 组件跳转进入直播间

// 1、使用 navigator 组件跳转进入直播间
<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{roomId}}&custom_params={{customParams}}"></navigator>

Copy

2、使用 navigateTo 方法跳转进入直播间

// 2、使用 navigateTo 方法跳转进入直播间
let roomId = [直播房间id] // 填写具体的房间号,可通过下面【获取直播房间列表】 API 获取
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节(上限600个字符,超过部分会被截断)
wx.navigateTo({url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
})

Copy

3、服务端获取数据,提供给前端获取!

644ae202311281019345395.png

4、控制台创建直播

709c6202311281020039672.png

5、手机扫码打开

e5773202311281020377955.png

5、直播组将状态获取

小程序直播订阅组件能力

小程序端引入 live-player-plugin
let livePlayer = requirePlugin('live-player-plugin')
console.log(livePlayer,'livePlayer====事件')livePlayer.getOpenid(e) // 获取用户openid参数
livePlayer.getShareParams(e) // 获取分享卡片链接参数
livePlayer.getSubscribeStatus(e) // 获取单次订阅状态
livePlayer.getLiveStatus(e) // 获取直播状态 
// 往后间隔1分钟或更慢的频率去轮询获取直播状态
// 101: 直播中, 102: 未开始, 103: 已结束, 104:禁播, 105: 暂停中, 106: 异常,107:已过期 

Copy

a654f202311281021316475.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/181369.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

思维导图软件MindNode 5 mac使用场景

MindNode 5 for Mac是一款思维导图软件产品&#xff0c;为用户在灵感启发、思绪整理、记忆协助、项目规划、授课讲演等诸多场景下提升学习和工作效率。通过导图社区和云文件无缝链接用户设备&#xff0c;方便用户随时随地收集灵感和展示文档。 MindNode 5 for Mac应用场景 助力…

【axios】TypeScript实战,结合源码,从0到1教你封装一个axios - 基础封装篇

目录 前言版本环境变量配置引入的类型1、AxiosIntance: axios实例类型2、InternalAxiosRequestConfig: 高版本下AxiosRequestConfig的拓展类型3、AxiosRequestConfig: 请求体配置参数类型4、AxiosError: 错误对象类型5、AxiosResponse: 完整原始响应体类型 目标效果开始封装骨架…

【古月居《ros入门21讲》学习笔记】15_ROS中的坐标系管理系统

目录 说明&#xff1a; 1. 机器人中的坐标变换 tf功能包能干什么&#xff1f; tf坐标变换如何实现 2. 小海龟跟随实验 安装 ros-melodic-turtle-tf 实验命令 运行效果 说明&#xff1a; 1. 本系列学习笔记基于B站&#xff1a;古月居《ROS入门21讲》课程&#xff0c;且使…

KT1404C语音芯片做的板子连接usb到电脑出来空的盘符 怎么处理?

一、问题简介 KT1404C画的板子&#xff0c;连接usb到电脑&#xff0c;出来空的盘符&#xff0c;可以确定KT404C没问题放别的板子OK&#xff0c;就是这个板子不正常&#xff0c;并且芯片5脚的电压输出是3.5v &#xff0c;正常的板子是3.3v&#xff0c;什么问题呢&#xff1f; 问…

数据结构之二叉树与堆以及力扣刷题函数扩展

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 数据结构初阶 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力 目录 1.前言 2.树 2.1概念 2.2树的相关概念 3.…

Python自动化办公:PDF文件的加密与解密

在本篇文章中&#xff0c;我们将介绍如何使用PyPDF2库对PDF文件进行加密和解密操作。 包括如何给PDF文件添加密码&#xff0c;以及如何从受密码保护的PDF文件中删除密码。 注&#xff1a;删除密码的操作&#xff0c;前提是需要知道密码哦 1. 安装PyPDF2库 首先&#xff0c;…

2023.11.26使用opencv调节图片亮度

2023.11.26使用opencv调节图片亮度 测试一些opencv对图片的处理效果&#xff0c;方法比较简单&#xff0c;找出所有像素点&#xff0c;然后将RGB三色的亮度分别进行调节即可&#xff0c;同类可以进行像素级的处理。测试结果和项目代码如下&#xff1a; 使用OpenCV调节图拍亮…

物理层之码分复用(内含相关例题)

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

数字人透明屏幕的技术原理是什么?

数字人透明屏幕的技术原理主要包括人脸识别和全息影像技术。其中&#xff0c;人脸识别技术是通过摄像头捕捉游客的面部表情和动作&#xff0c;并将其转化为数据指令&#xff0c;以便与数字人物进行互动。而全息影像技术则是利用透明屏幕&#xff0c;通过全息投影的方式将数字人…

基于Java+Vue+uniapp微信小程序商品展示系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

【古月居《ros入门21讲》学习笔记】12_服务端Server的编程实现

目录 说明&#xff1a; 1. 服务模型 说明 2. 实现过程&#xff08;C&#xff09; 创建服务器代码&#xff08;C&#xff09; 配置服务器代码编译规则 编译 运行 3. 实现过程&#xff08;Python&#xff09; 创建服务器代码&#xff08;Python&#xff09; 运行效果 说…

解决electron-build打包后运行app报错:cannot find module xxx

现象&#xff1a; 关于这个问题查了很多资料&#xff0c;也问了chatgpt都没有找到答案。 最后只能靠自己了。 于是冷静下来回想一下细节。突然发现了一个特别点。 eletron-builder打包时&#xff0c;强制要求eletron-builder和eletron必须都放在devDependencies 否则&#…

echarts图表滚动条带动页面窗口滚动条的问题

网上搜了很多方法不管用&#xff0c;后来发现每次滚动echarts或者左右滑动echarts下方都会报错&#xff0c;报错提示如下&#xff0c;看看你们的图表是否这样报错&#xff1a; 报错信息如下&#xff1a;Unable to preventDefault inside passive event listener invocation 原…

基于隐马尔可夫模型的一种流水印

文章信息 论文题目&#xff1a;An Invisible Flow Watermarking for Traffic Tracking: A Hidden Markov Model Approach 期刊&#xff08;会议&#xff09;&#xff1a;ICC 2019 - 2019 IEEE International Conference on Communications (ICC) 时间&#xff1a;2019 级别&am…

Elsevier的latex模板

1.关于Elsevier的letex模板&#xff08; version 2.3 2021-05-11)一开始直接编辑出现The key ‘stm/author/&#xff1c;options&#xff1e;‘ is unknown and 的问 LaTeX Error: The key stm/author/<options> is unknown and is being ignored. 关于Elsevier的letex…

居家适老化设计第三十四条---卫生间之照明

居家适老化卫生间照明设计需要考虑以下几个方面&#xff1a;1. 光源选择&#xff1a;选择适合老年人眼睛的柔和光源&#xff0c;避免刺眼和眩光的发生。可以选择LED灯具&#xff0c;因为它们具有节能、寿命长和可调光的特点。2. 光线布置&#xff1a;在不同区域设置不同的光线&…

使用docker命令_进入容器_登录mysql服务_并执行sql语句---Docker工作笔记005

今天就用到了,不得不说用docker用到的还是少,记录一下,常用的也就这些吧. 首先执行: docker ps [root@localhost dataease-1.18.9]# docker ps CONTAINER ID IMAGE COMMAND CREATED …

数据分享 I 全国各市城镇化率,shapeflie格式,附数据可视化

基本信息. ​数据名称: 城镇化率 数据格式: shapeflie 数据时间: 2006-2020年 数据几何类型: 面 数据坐标系: WGS84坐标系 数据来源&#xff1a;网络公开数据 数据可视化. 安徽省各市2015年城镇化率 广东省各市2015年城镇化率 江西省各市2015年城镇化率

【Redis6快速深入学习04】Redis字符串(String)的使用和原理

Redis字符串(String) 4.1 Redis 中 String 的简介 String 是Redis五种最基本的类型之一&#xff0c;在使用时可以理解成与Memcached一模一样的类型&#xff0c;一个key对应一个value。 String 类型是二进制安全的。意味着 Redis 的 string 可以包含任何数据。比如 jpg 图片或…

【开源】基于Vue+SpringBoot的学校热点新闻推送系统

项目编号&#xff1a; S 047 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S047&#xff0c;文末获取源码。} 项目编号&#xff1a;S047&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 新闻类型模块2.2 新闻档案模块2.3 新…