|
|
@@ -142,15 +142,18 @@ const app = new Vue({
|
|
|
|
|
|
rtcMediaPlayerStyle() {
|
|
|
let obj = {
|
|
|
- objectFit: "fill"
|
|
|
+ objectFit: "fill",
|
|
|
+ width: `${this.layoutViewWidth}px`,
|
|
|
+ height: `${this.layoutViewHeight}px`,
|
|
|
}
|
|
|
if (this.isLandscape) {
|
|
|
obj = {
|
|
|
width: `${this.layoutViewHeight}px`,
|
|
|
height: `${this.layoutViewWidth}px`,
|
|
|
- left: '50%',
|
|
|
- top: '50%',
|
|
|
- transform: 'translate(-50%, -50%) rotate(90deg)'
|
|
|
+ // left: '50%',
|
|
|
+ // top: '50%',
|
|
|
+ // transform: 'translate(-50%, -50%) rotate(90deg)'
|
|
|
+ transform: 'rotate(90deg)'
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -237,7 +240,7 @@ const app = new Vue({
|
|
|
switch (event.type) {
|
|
|
case "screenChange":
|
|
|
// 0：横屏 1：竖屏
|
|
|
- // console.log("屏幕方向变化事件:" + event.val);
|
|
|
+ console.log("屏幕方向变化事件:" + event.val);
|
|
|
this.isLandscape = event.val === 0;
|
|
|
break;
|
|
|
case "wsState":
|
|
|
@@ -975,10 +978,36 @@ method: post
|
|
|
this.height = window.innerHeight
|
|
|
this.width = window.innerWidth
|
|
|
this.$nextTick(() => {
|
|
|
+
|
|
|
// 云机画面宽高
|
|
|
let layoutView = document.querySelector('.layout-view')
|
|
|
- this.layoutViewWidth = layoutView.offsetWidth
|
|
|
- this.layoutViewHeight = layoutView.offsetHeight
|
|
|
+ // 获取视口宽度,webRTC需要做成16:9的画面
|
|
|
+ let currentWidth = layoutView.clientWidth;
|
|
|
+ let currentHeight = layoutView.clientHeight;
|
|
|
+
|
|
|
+ // this.layoutViewWidth = layoutView.offsetWidth;
|
|
|
+ // this.layoutViewHeight = layoutView.offsetHeight;
|
|
|
+
|
|
|
+ // 计算当前视口的宽高比
|
|
|
+ const currentRatio = currentWidth / currentHeight;
|
|
|
+
|
|
|
+ // 9:16 的目标比例
|
|
|
+ const targetRatio = 9 / 16;
|
|
|
+ console.log(`当前视口的宽高比: ${currentRatio}`);
|
|
|
+ // 判断当前视口的宽高比与目标比例的关系
|
|
|
+ if (currentRatio > targetRatio) {
|
|
|
+ // 当前视口的宽高比大于目标比例，说明宽度“过宽”，需要以高度为基准
|
|
|
+ console.log("当前视口宽度过宽，应以高度为基准调整宽度");
|
|
|
+ this.layoutViewWidth = currentHeight * targetRatio;
|
|
|
+ this.layoutViewHeight = currentHeight;
|
|
|
+ console.log(`1目标: 宽${this.layoutViewWidth},高${this.layoutViewHeight}`);
|
|
|
+ } else {
|
|
|
+ // 当前视口的宽高比小于目标比例，说明高度“过高”，需要以宽度为基准
|
|
|
+ console.log("当前视口高度过高，应以宽度为基准调整高度");
|
|
|
+ this.layoutViewHeight = currentWidth / targetRatio;
|
|
|
+ this.layoutViewWidth = currentWidth;
|
|
|
+ console.log(`2目标: 宽${this.layoutViewWidth},高${this.layoutViewHeight}`);
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
|
tangdehang