Camera stream aspect ratio calculations
This commit is contained in:
parent
35d8607484
commit
06f994a827
@ -1,18 +1,20 @@
|
|||||||
|
var messageChannel = 'HA_entity_id_placeholder';
|
||||||
|
|
||||||
function fixCameraImgView() {
|
function fixCameraImgView() {
|
||||||
|
window.clearInterval(window.bodyDetectInterval);
|
||||||
var img = document.getElementsByTagName('img');
|
var img = document.getElementsByTagName('img');
|
||||||
|
|
||||||
if (img && img.length) {
|
if (img && img.length) {
|
||||||
img[0].setAttribute('width', document.body.clientWidth);
|
img[0].setAttribute('width', document.body.clientWidth);
|
||||||
img[0].setAttribute('style', 'margin-top: ' + ((document.body.clientHeight - img[0].offsetHeight) / 2));
|
img[0].removeAttribute('style');
|
||||||
}
|
setTimeout(function() {
|
||||||
var ovrl = document.getElementById('appOverlay');
|
window[messageChannel].postMessage(document.body.clientWidth / img[0].offsetHeight);
|
||||||
if (ovrl) {
|
}, 100);
|
||||||
ovrl.remove();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.bodyDetectInterval = setInterval(function() {
|
window.bodyDetectInterval = setInterval(function() {
|
||||||
if (document.body != null) {
|
if (document.body != null && document.getElementsByTagName('img').length) {
|
||||||
setTimeout(fixCameraImgView, 1000);
|
fixCameraImgView();
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
@ -16,7 +16,7 @@ class _CameraStreamViewState extends State<CameraStreamView> {
|
|||||||
VideoPlayerController videoPlayerController;
|
VideoPlayerController videoPlayerController;
|
||||||
Timer monitorTimer;
|
Timer monitorTimer;
|
||||||
bool started = false;
|
bool started = false;
|
||||||
double aspectRatio = 1.78;
|
double aspectRatio = 1.33;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
@ -24,9 +24,6 @@ class _CameraStreamViewState extends State<CameraStreamView> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
void loadStreamUrl() {
|
void loadStreamUrl() {
|
||||||
setState((){
|
|
||||||
started = true;
|
|
||||||
});
|
|
||||||
Logger.d("[Camera Player] Loading stream url");
|
Logger.d("[Camera Player] Loading stream url");
|
||||||
HomeAssistant().getCameraStream(_entity.entityId)
|
HomeAssistant().getCameraStream(_entity.entityId)
|
||||||
.then((data) {
|
.then((data) {
|
||||||
@ -44,6 +41,7 @@ class _CameraStreamViewState extends State<CameraStreamView> {
|
|||||||
videoPlayerController = VideoPlayerController.network("${ConnectionManager().httpWebHost}${data["url"]}");
|
videoPlayerController = VideoPlayerController.network("${ConnectionManager().httpWebHost}${data["url"]}");
|
||||||
videoPlayerController.initialize().then((_) {
|
videoPlayerController.initialize().then((_) {
|
||||||
setState((){
|
setState((){
|
||||||
|
started = true;
|
||||||
aspectRatio = videoPlayerController.value.aspectRatio;
|
aspectRatio = videoPlayerController.value.aspectRatio;
|
||||||
});
|
});
|
||||||
autoPlay();
|
autoPlay();
|
||||||
@ -89,7 +87,7 @@ class _CameraStreamViewState extends State<CameraStreamView> {
|
|||||||
if (_entity.supportStream && !started) {
|
if (_entity.supportStream && !started) {
|
||||||
loadStreamUrl();
|
loadStreamUrl();
|
||||||
return buildLoading();
|
return buildLoading();
|
||||||
} else if (_entity.supportStream && started) {
|
} else if (_entity.supportStream) {
|
||||||
if (videoPlayerController.value.initialized) {
|
if (videoPlayerController.value.initialized) {
|
||||||
return AspectRatio(
|
return AspectRatio(
|
||||||
aspectRatio: aspectRatio,
|
aspectRatio: aspectRatio,
|
||||||
@ -102,18 +100,28 @@ class _CameraStreamViewState extends State<CameraStreamView> {
|
|||||||
streamUrl = '${ConnectionManager().httpWebHost}/api/camera_proxy_stream/${_entity
|
streamUrl = '${ConnectionManager().httpWebHost}/api/camera_proxy_stream/${_entity
|
||||||
.entityId}?token=${_entity.attributes['access_token']}';
|
.entityId}?token=${_entity.attributes['access_token']}';
|
||||||
return AspectRatio(
|
return AspectRatio(
|
||||||
aspectRatio: 1.33,
|
aspectRatio: aspectRatio,
|
||||||
child: WebView(
|
child: WebView(
|
||||||
initialUrl: streamUrl,
|
initialUrl: streamUrl,
|
||||||
initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
|
initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
|
||||||
debuggingEnabled: Logger.isInDebugMode,
|
debuggingEnabled: Logger.isInDebugMode,
|
||||||
javascriptMode: JavascriptMode.unrestricted,
|
javascriptMode: JavascriptMode.unrestricted,
|
||||||
|
javascriptChannels: {
|
||||||
|
JavascriptChannel(
|
||||||
|
name: 'HA_${_entity.entityId.replaceAll('.', '_')}',
|
||||||
|
onMessageReceived: ((message) {
|
||||||
|
setState((){
|
||||||
|
aspectRatio = double.tryParse(message.message) ?? 1.33;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
)
|
||||||
|
},
|
||||||
onWebViewCreated: (WebViewController controller) {
|
onWebViewCreated: (WebViewController controller) {
|
||||||
webViewController = controller;
|
webViewController = controller;
|
||||||
},
|
},
|
||||||
onPageStarted: (url) {
|
onPageStarted: (url) {
|
||||||
rootBundle.loadString('assets/js/cameraImgViewHelper.js').then((js){
|
rootBundle.loadString('assets/js/cameraImgViewHelper.js').then((js){
|
||||||
webViewController.evaluateJavascript(js);
|
webViewController.evaluateJavascript(js.replaceFirst('entity_id_placeholder', _entity.entityId.replaceAll('.', '_')));
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
Reference in New Issue
Block a user