小程序开发之组件live-pusher（实时音视频录制）

最新推荐文章于 2024-07-31 12:41:08 发布
最新推荐文章于 2024-07-31 12:41:08 发布
阅读量1w 收藏 1
点赞数
分类专栏： ONE PIECE--小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JackJia2015/article/details/86506733
版权
本文介绍了小程序中的live-pusher组件，用于实时音视频录制。该组件为原生组件，使用时存在特定限制，仅对部分国内主体小程序开放，并需要用户授权camera和record权限。内容涵盖live-pusher的属性，包括错误码(errCode)、状态码(code)和网络状态数据(info)，同时提醒开发者注意默认宽高设置和在开发者工具上的不支持情况。最后，提到了相关API wx.createLivePusherContext和等待图片属性的支持情况。
摘要由CSDN通过智能技术生成

live-pusher

实时音视频录制。该组件是原生组件，使用时请注意相关限制。
暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限。
在这里插入图片描述

需要用户授权 scope.camera、scope.record

live-pusher属性在这里插入图片描述在这里插入图片描述

最低0.47元/天 解锁文章
M.Siebel
关注
专栏目录
音视频小程序端常见问题
weixin_69626842的博客
05-11 1692
小程序的环境要求是怎样的？ 微信 App iOS 最低版本要求：7.0.9 微信 App Android 最低版本要求：7.0.8 小程序基础库最低版本要求：2.10.0 由于小程序测试号不具备 <live-pusher> 和 <live-player> 的使用权限，请使用企业小程序账号申请相关权限进行开发。 由于微信开发者工具不支持原生组件（即 <live-pusher> 和 <live-player> 标签），需要在真机上进行运行体验。 不支持
微信小程序 live-pusher 实时音视频录制 组件
java1234的博客
06-08 2489
完整微信小程序(Java后端) 技术贴目录清单页面（必看） 实时音视频录制（v2.9.1 起支持同层渲染）。需要用户授权 scope.camera、scope.record。 暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。 一级类目/主体类型 二级类目 小程序内容场景 社交 直播 涉及娱乐性质，如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核，需经当地互联网主管机关审核确认，预计审核时长7天左右
微信小程序live-pusher那些坑
03-29
最近在做用微信小程序实现实时通话，一个页面同时使用了live-pusher和live-player。中途踩了许多坑，在这里做一下总结，希望能帮到大家。   1问题：Live-player播着播着没声音了。 原因：对live-pusher进行start, stop,resume等操作时，会停止所有正在播放的live-player的声音。（暂时没发现调用live-pusher的pause会引起这个问题。） 两种解决方案： 一种是避免在live-player播放后操作live-pusher。比如进页面直接开启live-pusher，然后不再操作。官方DEMO就是使用这种方案。 第二种，则是每次操作l
vue3 livePusher对象 处理内嵌摄像头视频流(手写livePusher)
最新发布
weixin_50821114的博客
07-31 1031
vue3 实现 uniapp的livePusher
uni app 使用live-pusher录制视频
weixin_45581310的博客
09-21 6747
uni app 使用live-pusher录制视频
微信小程序官方组件展示之媒体组件live-pusher源码
软件事业部的博客
10-17 472
以下将展示微信小程序之媒体组件live-pusher源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：实时音视频录制（v2.9.1 起支持同层渲染）。需要用户授权 scope.camera、scope.record。
小程序+音视频1：live-pusher
weixin_44727080的博客
08-29 2318
是小程序内部用于支持音视频上行能力的功能标签
微信小程序实现livepusher推流时控制屏幕方向（orientation）
布克吉的博客
02-22 650
通过改变livepusher中的orientation 属性，改变拉流视频画面的方向，此方法根据设备变化自动感应，避免了手动切换方向的麻烦。关于下方的监听设备方向也可以尝试，但效果不太理想而且麻烦。：只能逆时针切换横屏，顺时针则画面会旋转90°。已经到了解决这个问题的进度，其他就不多说了。根据介绍使用Promise风格，在。小程序API->设备->中使用以下函数进行监听。
uni-app技术分享| uni-app转小程序_实时音视频
anyRTC的博客
04-07 3236
uniapp转小程序_实时音视频 微信小程序 实现实时音视频与 uniapp 转码成微信小程序 实现实时音视频两者是一样的，区别仅仅是一个是原生小程序一个是 uniapp 转码成小程序 本文使用uniapp转码成小程序实现音视频通话 前提 确保微信开发平台 =》开发 =》开发管理 =》接口设置 的 实时播放音视频流与实时录制音视频流开启 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvSzutl4-1649304145472)(./3.jpg)] 线上版本配置 an
技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
yinshipin007的博客
05-13 3974
1、概述 本文内容分别介绍了微信小程序视音视频和WebRTC的技术特征、差异等，并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC互通的实现思路以及技术方案。希望能带给你启发。 分别介绍一下小程序音视频和WebRTC 2017年腾讯视频云团队跟微信团队联合，将视频云 SDK 跟微信小程序整合在一起，并通过 <live-pusher> 和 <live-player> 两个标签的形式开放内部的功能。通过这两个标签，开发者可以实现在线直播、低延时监控、双.
微信小程序直播播放页面代码live-player标签
10-02
微信小程序直播播放页面代码live-player标签，可用于微信小程序直播开发
腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
yinshipin007的博客
06-09 1126
本文来自腾讯视频云终端技术总监rexchang（常青）技术分享，内容分别介绍了微信小程序视音视频和WebRTC的技术特征、差异等，并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC互通的实现思路以及技术方案。希望能带给你启发。分别介绍一下小程序音视频和WebRTC小程序音视频是什么？​2017年腾讯视频云团队跟微信团队联合，将视频云 SDK 跟微信小程序整合在一起，并通过 和 两个标签的形式开放内部的功能。通过这两个标签，开发者可以实现在...
微信小程序直播live-player和live-pusher踩坑记录
小歲月丶太着急
05-31 9702
实现一个直播小程序难题汇总记录知识点记录1、live-player的展现方式1）live-player 全屏问题2）在全屏后的live-player上加视图，安卓机无法展示的问题3）解决live-player 放在scroll-view上的问题4）live-player 可以上下滑动问题5）live-pusher 可以上下滑动问题6）live-player 没有视频画面时设置默认图问题7）live-player 没有视频画面时设置默认图问题 最近做了一个微信小程序版的直播小程序，期间遇到了很多问题，在此汇总
EasyPusher实现安卓Android手机直播推送同步录像功能（源码解析）
jyt0551的博客
02-28 3216
EasyPusher是一款非常棒的推送客户端。稳定、高效、低延迟，音视频同步等都特别好。装在安卓上可作为一款单兵设备来用。说到单兵，在项目中通常都需要边传边录的功能，因此后来EasyPusher也加入了该特性。该文章将结合代码来阐述下这个功能是如何实现的。EasyPusher在设置里增加了相关选项来方便开启和关闭本地录像功能，如下图所示，在设置里勾选后就可以推送的同时进行录像了。EasyPusher
实时音视频功能简析(live-pusher与live-player)
qzmlyshao的博客
02-24 1665
属性名类型默认值说明srcString用于音视频下行的播放 URL，支持 RTMP、FLV 等协议modeStringlive模式。live（直播），RTC（实时通话，该模式时延更低）autoplayBooleanfalse是否自动播放mutedBooleanfalse是否静音Stringverticalvertical（垂直），horizontal（水平）object-fitStringcontain填充模式，可选值有。
记录--实时音视频功能简析(live-pusher与live-player)
林恒的博客
02-07 1806
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 使用须知 2017年下半年，微信6.5.21版本支持在线音视频功能。开发者可以通过两个音视频组件 和 实现实时地在线直播、视频通话、语音通话等功能。 上述功能需要用到两个小程序媒体组件中的两个： live-pusher 与 live-player 。下文简单介绍两这个组件的基础知识。仅可以带你入门，如果是高手请绕行。 注册小程序...
uniapp利用内置组件live-pusher和video实现app端的简单视频聊天功能
jdhrucn的博客
09-20 2460
完成上面的操作之后，就可以配置我们的nginx了，找到nginx.conf文件。然后在live-pusher输入我们的rtmp地址就行自己电脑的ip地址加上配置好的端口 1935（这样我们的单项视频聊天就实现了，要想实现双向的，就重复上面的操作，再建一个组件进行推流和拉流就可以了。网上有很多的搭建流媒体的软件。我这里用的是nginx搭建的流媒体服务。2.当我们把前端页面搭建之后，就得考虑到推流的视频流放在哪里，拉流从哪里拉到视频流。js代码的方法都是uniapp官方提供的，用来控制推流的。
uniapp app端如何使用live-pusher实现camera效果
weixin_61659587的博客
05-09 901
uniapp app端如何使用live-pusher实现camera效果
使用live-player与live-pusher实现实时音视频通话，但是没有对方画面与声音
07-14
要实现实时音视频通话，需要同时使用live-player和live-pusher组件，并且配合使用TRTC的实时音视频SDK。 以下是实现步骤和代码示例： 步骤一：准备工作 1. 在腾讯云官网注册账号并创建云通信应用，获取SDKAppID。 2. 下载并引入TRTC的小程序SDK。 步骤二：初始化SDK 在小程序的App.js中初始化TRTC SDK，代码示例如下： ```javascript const trtcConfig = { SDKAppID: 'your_SDKAppID', // 替换为实际的 SDKAppID }; App({ onLaunch: function () { wx.$trtc = require('./path/to/TRTCSDK.js').createInstance(trtcConfig); } }); ``` 步骤三：实现音视频通话 1. 在小程序页面中创建TRTC实例，并设置事件监听： ```javascript const trtcInstance = getApp().$trtc; Page({ data: { localView: '', remoteView: '', }, onLoad: function () { trtcInstance.on('onLocalView', (e) => { this.setData({ localView: e.view }); }); trtcInstance.on('onRemoteView', (e) => { this.setData({ remoteView: e.view }); }); trtcInstance.on('onUserExit', (e) => { // 处理用户退出房间的逻辑 }); }, joinRoom: function () { const roomId = 'your_room_id'; // 替换为实际的房间ID const userId = 'your_user_id'; // 替换为实际的用户ID trtcInstance.joinRoom(roomId, userId); }, exitRoom: function () { trtcInstance.exitRoom(); } }); ``` 2. 在小程序页面的WXML中使用live-pusher组件推送本地音视频流： ```html <live-pusher url="{{pusherUrl}}"></live-pusher> ``` 3. 在小程序页面的WXML中使用live-player组件播放远程音视频流： ```html <live-player src="{{remoteView}}" bindplay="onPlay"></live-player> ``` 4. 在小程序页面的JS中配置推流地址： ```javascript Page({ data: { pusherUrl: '', }, joinRoom: function () { const roomId = 'your_room_id'; // 替换为实际的房间ID const userId = 'your_user_id'; // 替换为实际的用户ID // 获取推流地址 const pusherUrl = trtcInstance.getPusherUrl(roomId, userId); this.setData({ pusherUrl }); // 加入房间 trtcInstance.joinRoom(roomId, userId); }, }); ``` 在上述代码中，`trtcInstance.getPusherUrl()`方法用于获取推流地址，并将其绑定到live-pusher组件的url属性上。`remoteView`用于绑定remoteView事件，将远程音视频流展示在live-player组件中。 这样，使用live-player和live-pusher组件结合TRTC SDK就可以实现实时音视频通话了。具体的实现细节还需要根据业务需求进行调整和完善。以上仅为简单示例，更详细的代码和功能可以参考腾讯云TRTC小程序SDK的官方文档。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值