Camera stream aspect ratio calculations

This commit is contained in:
Yegor Vialov 2020-02-20 21:48:22 +00:00
parent 35d8607484
commit 06f994a827
2 changed files with 24 additions and 14 deletions

View File

@ -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);

View File

@ -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('.', '_')));
}); });
}, },
), ),