+
+
+
+ onclick="fullscreenToggle('fullscreen-container')">Fullscreen
+
信任目标机器
+ target="_blank"
+ class="play-ctr-btn"
+ href="">信任目标机器
+
+ src="sdk/CloudApp.min.js">
diff --git a/sdk/index.html b/sdk/index.html
index ad7e654..9c4391d 100644
--- a/sdk/index.html
+++ b/sdk/index.html
@@ -27,14 +27,11 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
margin: 0;
padding: 0;
}
-
-
.container {
width: 100%;
height: 100%;
- background: gray;
+ background: black;
}
-
.loading {
width: 50px;
height: 50px;
@@ -48,7 +45,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
-o-animation: load-anim 2s linear infinite;
animation: load-anim 2s linear infinite;
}
-
@keyframes load-anim {
from {
-ms-transform: rotate(0deg);
@@ -57,7 +53,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
-
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
@@ -66,7 +61,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
transform: rotate(360deg);
}
}
-
#network-info {
pointer-events: none;
position: absolute;
@@ -77,12 +71,10 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
width: 100%;
color: #fff;
}
-
#keyboard-dialog {
border: 1px solid lightblue;
border-radius: 10px;
}
-
.play-ctr-btn {
display: inline-block;
background: #fff;
@@ -93,8 +85,7 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
border-radius: 5px;
font-size: 14px;
}
-
- .message-modal {
+ .message-modal, .exit-modal {
display: none;
width: 300px;
height: 200px;
@@ -117,12 +108,10 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
text-align: center;
height: 40%;
}
-
.footer-content {
height: 20%;
border-top: 1px solid #dfe1e6;
}
-
.button-alone {
width: 100%;
height: 100%;
@@ -130,7 +119,64 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
text-align: center;
background-color: #fff;
}
-
+ .control-btn {
+ display: none;
+ font-size: 14px;
+ line-height: 40px;
+ text-align: center;
+ width: 40px;
+ height: 40px;
+ position: fixed;
+ z-index: 999;
+ top: 15%;
+ left: 35%;
+ background-color: #fff;
+ border: 1px solid #dfe1e6;
+ border-radius: 50%;
+ }
+ .button-modal{
+ display: none;
+ width: 255px;
+ height: 155px;
+ position: absolute;
+ z-index: 999;
+ top: 50%;
+ left: 50%;
+ background-color: rgba(0, 0, 0, 0.4);
+ border-radius: 5px;
+ transform: translate(-50%, -50%);
+ }
+ .button-network,.button-exit{
+ width: 100%;
+ height: 25%;
+ margin-bottom: 10px;
+ }
+ .radio-group {
+ color: #ffffff;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ height: 35%;
+ }
+ input[type="radio"] {
+ transform: scale(1.5);
+ }
+ .exit-btn {
+ float: left;
+ width: 50%;
+ height: 100%;
+ border: none;
+ text-align: center;
+ background-color: #fff;
+ }
+ .cancel-btn {
+ float: right;
+ width: 50%;
+ height: 100%;
+ border: none;
+ text-align: center;
+ background-color: #fff;
+ }
@@ -173,15 +219,46 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
温馨提示
+
@@ -353,9 +430,31 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
console.log(e);
}
- function toggleNetworkInfo() {
+ function toggleNetworkInfo(event) {
var networkInfoElement = document.getElementById('network-info');
networkInfoElement.hidden = !networkInfoElement.hidden;
+ if (networkInfoElement.hidden) {
+ event.target.innerHTML = '显示时延数据';
+ } else {
+ event.target.innerHTML = '关闭时延数据';
+ }
+ }
+
+ function showExitModal() {
+ const buttonModalEle = document.getElementById('buttonModal');
+ const exitModalEle = document.getElementById('exitModal');
+ buttonModalEle.style.display = 'none';
+ exitModal.style.display = 'block';
+ }
+
+ function exitPhone() {
+ exit();
+ closeExitModal();
+ }
+
+ function closeExitModal() {
+ const exitModalEle = document.getElementById('exitModal');
+ exitModal.style.display = 'none';
}
function exit() {
@@ -455,12 +554,50 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
function startsuccessCallBack(data){
const connectSuccessState = 2048;
if (data.state === connectSuccessState) {
+ closeCtrlModal();
try {
CasCallback.startSuccessCallback();
} catch (error) {}
}
}
+ function radioChange(event) {
+ const checkedVal = event && event.target.value;
+ cloudapp.setResolution(checkedVal);
+ }
+
+ function closeCtrlModal() {
+ const ctrlEle = document.getElementById('controlBtn');
+ const buttonModalEle = document.getElementById('buttonModal');
+ const playContainer = document.querySelector('article');
+ const playerElement = playContainer.shadowRoot.querySelector('#playCanvas') || playContainer.shadowRoot.querySelector('#phoenixVideo');
+ ctrlEle.style.display = 'block';
+ ctrlEle.addEventListener('click', (event) => {
+ if(buttonModalEle.style.display !== 'block') {
+ buttonModalEle.style.display = 'block';
+ } else {
+ buttonModalEle.style.display = 'none';
+ }
+ });
+
+ if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
+ playerElement.addEventListener('touchend', (event) => {
+ if(!buttonModalEle.contains(event.target) && !ctrlEle.contains(event.target)) {
+ buttonModalEle.style.display = 'none';
+ }
+ });
+ } else {
+ document.addEventListener('click', (event) => {
+ if(!buttonModalEle.contains(event.target) && !ctrlEle.contains(event.target)) {
+ buttonModalEle.style.display = 'none';
+ }
+ });
+ }
+
+ buttonModalEle.addEventListener('click', (event) => {
+ event.stopPropagation();
+ });
+ }
diff --git a/sdk/src/AppController.js b/sdk/src/AppController.js
index 3d23f67..40aaa09 100644
--- a/sdk/src/AppController.js
+++ b/sdk/src/AppController.js
@@ -323,6 +323,14 @@ class AppController {
autoRotate: this.options.autoRotate
});
this.touchHandler.start();
+ if(this.touchHandler.displayBox.width && this.touchHandler.displayBox.height) {
+ const ctrlEle = document.getElementById('controlBtn');
+ const containerEle = document.getElementById('container');
+ const left = (containerEle.offsetWidth - this.touchHandler.displayBox.width)/2 + 20;
+ const top = (containerEle.offsetHeight - this.touchHandler.displayBox.height)/2 + 125;
+ ctrlEle.style.top = `${top}px`;
+ ctrlEle.style.left = `${left}px`;
+ }
this.listenPlayerSizeChange();
this.autoRotation = new AutoRotation(this.options.containerId,
@@ -1048,13 +1056,18 @@ class AppController {
if (this.isMSE) {
this.player.style.setProperty('width', '100%', 'important');
this.player.style.setProperty('height', '100%', 'important');
+ // 硬解时video标签会按比例填充视频，避免视频被裁减设置contain显示完整画面
+ this.player.style.setProperty('object-fit', 'contain', 'important');
} else {
// 解决画布居中问题
this.player.style.setProperty('margin', '0 auto', 'important');
}
+ // 有些手机是硬解场景，将画面覆盖整个video容器，避免出现黑边
+ if (this.isMSE && this.options.isMobile) {
+ this.player.style.setProperty('object-fit', 'fill', 'important');
+ }
// 解决真机键盘弹起后，浏览器可视窗变小，video高度很小而导致video停止播放，时延增加的问题。
this.player.style.setProperty('min-height', '60px', 'important');
- this.player.style.setProperty('object-fit', 'contain', 'important');
// H5 场景下 video、canvas 的 display 属性默认值为 inline，需要主动设置为 block，以避免底部留边问题
this.player.style.setProperty('display', 'block', 'important');
@@ -1221,13 +1234,12 @@ class AppController {
}
// 设置画质
- setResolution(width, height) {
- Logger.debug('Setting resolution：' + width + '*' + height);
+ setResolution(clarityVal) {
+ // 暂时默认h264流
+ const frameType = 'H264';
- let config = {
- virtual_width: width,
- virtual_height: height
- };
+ const allMediaConfig = PROTOCOL_CONFIG[frameType];
+ const config = allMediaConfig[`${mediaWidth}P`][clarityVal];
this.setMediaConfig(config);
}
@@ -1365,6 +1377,7 @@ class AppController {
}
return isMSE;
+ // return false;
}
sendDataToCloudApp(data) {
diff --git a/sdk/src/AutoRotation.js b/sdk/src/AutoRotation.js
index e7c2ff2..11f9291 100644
--- a/sdk/src/AutoRotation.js
+++ b/sdk/src/AutoRotation.js
@@ -74,8 +74,7 @@ export default class AutoRotation {
if (rect) {
if (this.isMobile) {
width = Math.max(width - Math.max(rect.left, 0), 0);
- // 需要预留按钮位置
- height = Math.min(height - Math.max(rect.top, 0), rect.height);
+ height = Math.max(height - Math.max(rect.top, 0), 0);
} else {
width = Math.max(width - Math.max(rect.left * 2, 0), 0);
height = Math.min(height - Math.max(rect.top * 2, 0), rect.height);
diff --git a/sdk/src/CanvasPlayer.js b/sdk/src/CanvasPlayer.js
index 69dbb69..ca1edd7 100644
--- a/sdk/src/CanvasPlayer.js
+++ b/sdk/src/CanvasPlayer.js
@@ -39,7 +39,7 @@ class CanvasPlayer extends BaseClass {
/* javascript-obfuscator:enable */
this.videoDecoderWorker.addEventListener('message', this.eventMessageHandel.bind(this));
- // this.loadjs();
+ this.loadjs();
}
setCanvas () {
@@ -58,6 +58,9 @@ class CanvasPlayer extends BaseClass {
}
loadjs(decoderType) {
+ if (!decoderType) {
+ decoderType = 'H264';
+ }
this.videoDecoderWorker.postMessage({
type: 'loadwasm',
libPath: this.options.libPath,
@@ -157,7 +160,6 @@ class CanvasPlayer extends BaseClass {
}
decode(data) {
- console.log('流数据：', data);
/*global __IS_DEBUG__*/
if (__IS_DEBUG__) {
let traceId = window.delayAnalysis.shiftTraceId('receive') || '';
diff --git a/sdk/src/CloudApp.js b/sdk/src/CloudApp.js
index 10dd716..9d7acec 100644
--- a/sdk/src/CloudApp.js
+++ b/sdk/src/CloudApp.js
@@ -116,7 +116,7 @@ class CloudApp {
const clientHeight = document.documentElement.clientHeight;
fullscreenContainer.style.width = `${clientWidth}px`;
// 需要给操作按钮留出空间
- fullscreenContainer.style.height = `${clientHeight - 100}px`;
+ fullscreenContainer.style.height = `${clientHeight}px`;
}
this.appController = CloudApp.setAppController.bind(this)();
@@ -363,13 +363,14 @@ class CloudApp {
this.appController.off(eventName, callback);
}
- setResolution(resolution) {
- if (typeof resolution !== 'object') {
- Logger.debug('resolution should be an object');
- return;
- }
+ setResolution(clarityVal) {
+ // if (typeof resolution !== 'object') {
+ // Logger.debug('resolution should be an object');
+ // return;
+ // }
- this.appController.setResolution(resolution.width, resolution.height);
+ // this.appController.setResolution(resolution.width, resolution.height);
+ this.appController.setResolution(clarityVal);
}
setMediaConfig(config) {
diff --git a/sdk/src/Util.js b/sdk/src/Util.js
index 32b2fb2..194e80d 100644
--- a/sdk/src/Util.js
+++ b/sdk/src/Util.js
@@ -121,6 +121,9 @@ export default class Util {
const parentContainer = document.getElementById('container');
let playerHeight = parentContainer && parentContainer.clientHeight;
let playerWidth = playerHeight * ratio;
+ if (isMobile) {
+ playerWidth = parentContainer && parentContainer.clientWidth;
+ }
const $ele = this.createEl('canvas');
$ele.style.display = 'block';
$ele.width = playerWidth;
diff --git a/sdk/src/codec/Decode.js b/sdk/src/codec/Decode.js
index c465f79..97ac4a4 100644
--- a/sdk/src/codec/Decode.js
+++ b/sdk/src/codec/Decode.js
@@ -11,7 +11,8 @@ class Decode {
loadWASM(event) {
let that = this;
let libPath = event.data.libPath;
- this.decoderType = DECODER_TYPE_MAP[event.data.decoderType];
+ const decoderType = event.data.decoderType.toUpperCase();
+ this.decoderType = DECODER_TYPE_MAP[decoderType];
self.Module = {
locateFile: function (wasm) {
return libPath + wasm;
diff --git a/sdk/src/config/protocolConfig.js b/sdk/src/config/protocolConfig.js
index 2bfaca6..3a66370 100644
--- a/sdk/src/config/protocolConfig.js
+++ b/sdk/src/config/protocolConfig.js
@@ -77,7 +77,8 @@ const PROTOCOL_CONFIG = {
MEDIA_CONFIG_SUCCESS: 0x21,
START_SUCCESS: 0x08,
RECONNECT_FAILED: 0x0D,
- INVALID_OPERATION: 0xFF
+ INVALID_OPERATION: 0xFF,
+ CAE_MEDIA_CONFIG: 0x020
},
ACTIONS_TYPE: {
DOWN: 0,
@@ -110,6 +111,78 @@ const PROTOCOL_CONFIG = {
height: 1920
}
},
+ H264: {
+ '720P': {
+ 'UHD': {
+ virtual_width: 720,
+ virtual_height: 1280,
+ bitrate: 2000000
+ },
+ 'HD': {
+ virtual_width: 720,
+ virtual_height: 1280,
+ bitrate: 1500000
+ },
+ 'SD': {
+ virtual_width: 544,
+ virtual_height: 960,
+ bitrate: 1100000
+ },
+ },
+ '1280P': {
+ 'UHD': {
+ virtual_width: 1080,
+ virtual_height: 1920,
+ bitrate: 4000000
+ },
+ 'HD': {
+ virtual_width: 1080,
+ virtual_height: 1920,
+ bitrate: 3000000
+ },
+ 'SD': {
+ virtual_width: 720,
+ virtual_height: 1280,
+ bitrate: 2200000
+ },
+ },
+ },
+ H265: {
+ '720P': {
+ 'UHD': {
+ virtual_width: 720,
+ virtual_height: 1280,
+ bitrate: 1400000
+ },
+ 'HD': {
+ virtual_width: 720,
+ virtual_height: 1280,
+ bitrate: 1000000
+ },
+ 'SD': {
+ virtual_width: 544,
+ virtual_height: 960,
+ bitrate: 800000
+ },
+ },
+ '1280P': {
+ 'UHD': {
+ virtual_width: 1080,
+ virtual_height: 1920,
+ bitrate: 2700000
+ },
+ 'HD': {
+ virtual_width: 1080,
+ virtual_height: 1920,
+ bitrate: 2000000
+ },
+ 'SD': {
+ virtual_width: 720,
+ virtual_height: 1280,
+ bitrate: 1500000
+ },
+ },
+ },
DEFAULT_RESOLUTION: {
width: 720,
height: 1280
--
Gitee
From 548b66ea888351aa6acad794fbce478e61e394e9 Mon Sep 17 00:00:00 2001
From: yujiaxinwt <1157613664@qq.com>
Date: Thu, 6 Jul 2023 08:52:13 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A3=80=E8=A7=86?=
=?UTF-8?q?=E6=84=8F=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
sdk/src/CloudApp.js | 6 ------
sdk/src/config/protocolConfig.js | 4 ++--
2 files changed, 2 insertions(+), 8 deletions(-)
diff --git a/sdk/src/CloudApp.js b/sdk/src/CloudApp.js
index 9d7acec..60e2456 100644
--- a/sdk/src/CloudApp.js
+++ b/sdk/src/CloudApp.js
@@ -364,12 +364,6 @@ class CloudApp {
}
setResolution(clarityVal) {
- // if (typeof resolution !== 'object') {
- // Logger.debug('resolution should be an object');
- // return;
- // }
-
- // this.appController.setResolution(resolution.width, resolution.height);
this.appController.setResolution(clarityVal);
}
diff --git a/sdk/src/config/protocolConfig.js b/sdk/src/config/protocolConfig.js
index 3a66370..de90b8b 100644
--- a/sdk/src/config/protocolConfig.js
+++ b/sdk/src/config/protocolConfig.js
@@ -77,8 +77,8 @@ const PROTOCOL_CONFIG = {
MEDIA_CONFIG_SUCCESS: 0x21,
START_SUCCESS: 0x08,
RECONNECT_FAILED: 0x0D,
- INVALID_OPERATION: 0xFF,
- CAE_MEDIA_CONFIG: 0x020
+ CAE_MEDIA_CONFIG: 0x020,
+ INVALID_OPERATION: 0xFF
},
ACTIONS_TYPE: {
DOWN: 0,
--
Gitee