uni-app 直播推流LivePusher在IOS端宽高设置无效

uni-app 直播推流LivePusher在IOS端宽高设置无效

开发环境 版本号 项目创建方式
Windows win10 64位 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：Alpha

HBuilderX版本号：2.7.13

手机系统：iOS

手机系统版本号：iOS 13.0

手机厂商：苹果

手机机型：苹果X

页面类型：vue

打包方式：云端

示例代码：

        const currentWebview = this.$mp.page.$getAppWebview()   
        var pusher = plus.video.createLivePusher("pusher", {  
            url:'',  
            top:'100px',//ios设置无效  
            left: '0px',  
            width: '360px',//ios设置无效  
            height: '360px',//ios设置无效  
        });  
        currentWebview.append(pusher);

操作步骤：

无

预期结果：

无

实际结果：

无

bug描述：

plus.video.createLivePusher的参数里在苹果手机上top、width、height都无效
也有人碰到这问题https://ask.dcloud.net.cn/question/69123?item_id=129230&rf=false

更多关于uni-app 直播推流LivePusher在IOS端宽高设置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

31 回复

我在 5+项目里测试的是有效果的。pusher = plus.video.createLivePusher(‘pusher’, {
url:‘rtmp://xxx’,
top:‘300px’,
left:‘110px’,
width: ‘100%’,
height: ‘200px’,
position: ‘static’
});
var wv = plus.webview.currentWebview();
wv.append(pusher);
pusher.preview(); 1 秒前

更多关于uni-app 直播推流LivePusher在IOS端宽高设置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


vue页面也可以，const wv = this.$mp.page.$getAppWebview() var pusher = plus.video.createLivePusher(‘pusher’, { url: ‘rtmp://121.42.250.244:1935/live/zheng’, top: ‘300px’, left: ‘110px’, width: ‘100%’, height: ‘200px’, position: ‘static’ }); // var wv = plus.webview.currentWebview(); wv.append(pusher); pusher.preview();

你是用IPHONE X测试的吗？

在安卓可以，在iphone x就不行

width不要用100%用300px试试

用的iPhone6p 测试的，width为具体数值也没问题

我用iphone x不行

iPhone6p也太古老了吧，基本没人用了

回复 5***@qq.com:和机型没关系，你的X是什么版本的iOS系统？

回复 CLP: 13.5.1

你说的无效，是什么意思？ 组件的大小固定不变的是吗？你标签里有没有写style？

就是我在页面上显示宽高都是360px的预览窗口，安卓显示正常，苹果就是不按这个宽高来，不需要标签就可以显示了 只要js里写 const currentWebview = this.$mp.page.$getAppWebview() var pusher = plus.video.createLivePusher(“pusher”, { url:’’, top:‘100px’,//ios设置无效 left: ‘0px’, width: ‘360px’,//ios设置无效 height: ‘360px’,//ios设置无效 }); currentWebview.append(pusher);

回复 5***@qq.com: pusher.preview();没有打开预览吗？

回复 CLP: 有打开，但尺寸不对

回复 5***@qq.com: 能录制个视频和完整的demo来吗

回复 CLP: demo代码就是我上面发的，你把上面的代码同时在安卓和iphone x上运行就能看到差别了

回复 CLP: 还有IOS经常不打印日志怎么办

回复 5***@qq.com: 完整的demo，不是代码片段，是项目。

回复 CLP: 用hello-uniap示例改下就有了

就是IOS上pusher.preview();本地预览的时候设定的尺寸在APP上显示没效果

回复 CLP: http://www.html5plus.org/doc/zh_cn/video.html#plus.video.LivePusher.LivePusherStyles 文档这里在IOS上有黑边，并不能全屏显示 height: (String 类型 )LivePusher控件的高度 可取值： 像素值，如"100px"； 百分比，如"10%"，相对于父Webview窗口的高度。 默认值为"100%"。

回复 5***@qq.com: 预览窗口的大小和控件的大小不是一回事，你设置这个试试 aspect: (String 类型 )宽高比 可取值：3:4, 9:16。

回复 CLP: 关键是安卓预览显示的和我设置的大小一样，苹果显示的不一样。比如我要在苹果上预览显示300x300的窗口，我代码要怎么写？

回复 5***@qq.com: 可以调整控件大小，但是可能会有黑边。 你如果谁便设置大小，可能画面会不全或者变形

回复 CLP: 安卓的都不会啊

回复 5***@qq.com:你看看微信小程序的是什么样的

<template> <view class="container"> 
</view>
</template> <script> export default { data() { return { } }, onLoad() { }, onReady() { const currentWebview = this.$mp.page.$getAppWebview() var leftPos = Math.ceil((plus.screen.resolutionWidth - 360)/2); var pusher = plus.video.createLivePusher("pusher", { url:'', top:'100px', left:leftPos + 'px', width: '360px', height: '360px', }); currentWebview.append(pusher); setTimeout(function(){ pusher.preview(); pusher.snapshot(function(e){ console.log(e) }, function(e) { console.log(e) }); },1000) var view = new plus.nativeObj.View('view', {top:'0px',left:'0px',height:'100%',width:'100%'}, [{tag:'img',id:'goMyPosition',src:'_www/static/app-plus/ucenter/setting/face-auth-bg.png',position:{top:'170px',left:leftPos + 'px',width:'360px',height:'360px'}}], ); view.show(); }, onUnload() { }, methods: { } } </script> <style> page{ /* background-color: #FFFFFF; width: 100vw; height: 100vh; */ } </style>

横屏应用，出现相同问题。附iPad真机截图，iPad/iPhone 真机都一样

目前iOS不支持横屏推流，横屏推流，方向还是和竖屏是一样的，和不能设置宽高不是一回事

回复 CLP: 麻烦支持下吧，现在多人直播很多都是横屏应用。安卓可以苹果不行，变成苹果需要区分在服务器转屏，延迟高，体验很差

关于uni-app中LivePusher在iOS端宽高设置无效的问题，这是一个已知的iOS平台限制。以下是关键点说明：

  1. iOS平台的LivePusher组件确实存在宽高设置不生效的问题，这是底层Webview实现导致的限制。

  2. 目前可行的解决方案是：

  • 通过设置外层容器尺寸来控制LivePusher大小
  • 使用CSS transform缩放来实现尺寸调整
  1. 替代实现示例：
const pusher = plus.video.createLivePusher("pusher", {
    url: '',
    top: '0px',
    left: '0px',
    width: '100%',
    height: '100%'
});
// 外层容器控制尺寸
const container = document.createElement('div');
container.style.width = '360px';
container.style.height = '360px';
container.appendChild(pusher);
currentWebview.append(container);
  1. 也可以尝试使用CSS transform：
#pusher {
    transform: scale(0.5);
    transform-origin: 0 0;
}
回到顶部