Merge "Include Resize button that will scale the viewport" am: d7ae98bd73 am: d44cdce7b0 am: 37a475ce4c
Change-Id: I7584e3b0fc528c73d7450ed33e411a5e98fd66f3
diff --git a/host/frontend/gcastv2/webrtc/Android.bp b/host/frontend/gcastv2/webrtc/Android.bp
index 790f4de..c1d99f0 100644
--- a/host/frontend/gcastv2/webrtc/Android.bp
+++ b/host/frontend/gcastv2/webrtc/Android.bp
@@ -116,6 +116,13 @@
}
prebuilt_usr_share_host {
+ name: "webrtc_logcat.js",
+ src: "assets/js/logcat.js",
+ filename: "logcat.js",
+ sub_dir: "webrtc/assets/js",
+}
+
+prebuilt_usr_share_host {
name: "webrtc_receive.js",
src: "assets/js/receive.js",
filename: "receive.js",
@@ -123,9 +130,9 @@
}
prebuilt_usr_share_host {
- name: "webrtc_logcat.js",
- src: "assets/js/logcat.js",
- filename: "logcat.js",
+ name: "webrtc_viewpane.js",
+ src: "assets/js/viewpane.js",
+ filename: "viewpane.js",
sub_dir: "webrtc/assets/js",
}
diff --git a/host/frontend/gcastv2/webrtc/assets/index.html b/host/frontend/gcastv2/webrtc/assets/index.html
index 252c98e..5a249f6 100644
--- a/host/frontend/gcastv2/webrtc/assets/index.html
+++ b/host/frontend/gcastv2/webrtc/assets/index.html
@@ -8,10 +8,11 @@
<body>
<button id="receiveButton">Receive Media</button>
<button id="keyboardCaptureBtn">Capture Keyboard</button>
+ <button id="resizeButton">Resize Viewport</button>
<hr>
<section class="noscroll">
<div class="one" >
- <video id="video" autoplay width="540" height="1080" style="touch-action:none" ></video>
+ <video id="deviceScreen" autoplay width="540" height="1080" style="touch-action:none" ></video>
</div>
<div class="two" >
@@ -22,6 +23,7 @@
<script src="js/receive.js"></script>
<script src="js/logcat.js"></script>
+ <script src="js/viewpane.js"></script>
</body>
</html>
diff --git a/host/frontend/gcastv2/webrtc/assets/js/receive.js b/host/frontend/gcastv2/webrtc/assets/js/receive.js
index b722f10..d47566c 100644
--- a/host/frontend/gcastv2/webrtc/assets/js/receive.js
+++ b/host/frontend/gcastv2/webrtc/assets/js/receive.js
@@ -5,9 +5,9 @@
const keyboardCaptureButton = document.getElementById('keyboardCaptureBtn');
keyboardCaptureButton.addEventListener('click', onKeyboardCaptureClick);
-const videoElement = document.getElementById('video');
+const deviceScreen = document.getElementById('deviceScreen');
-videoElement.addEventListener("click", onInitialClick);
+deviceScreen.addEventListener("click", onInitialClick);
function onInitialClick(e) {
// This stupid thing makes sure that we disable controls after the first click...
@@ -15,8 +15,8 @@
// because these days user-interaction is required to enable audio playback...
console.log("onInitialClick");
- videoElement.controls = false;
- videoElement.removeEventListener("click", onInitialClick);
+ deviceScreen.controls = false;
+ deviceScreen.removeEventListener("click", onInitialClick);
}
let pc1;
@@ -316,7 +316,7 @@
'onIceStateChange ' + getPcName(pc) + " '" + pc.iceConnectionState + "'");
if (pc.iceConnectionState == "connected") {
- videoElement.srcObject = videoStream;
+ deviceScreen.srcObject = videoStream;
startMouseTracking()
} else if (pc.iceConnectionState == "disconnected") {
@@ -341,33 +341,33 @@
function startMouseTracking() {
if (window.PointerEvent) {
- videoElement.addEventListener("pointerdown", onStartDrag);
- videoElement.addEventListener("pointermove", onContinueDrag);
- videoElement.addEventListener("pointerup", onEndDrag);
+ deviceScreen.addEventListener("pointerdown", onStartDrag);
+ deviceScreen.addEventListener("pointermove", onContinueDrag);
+ deviceScreen.addEventListener("pointerup", onEndDrag);
} else if (window.TouchEvent) {
- videoElement.addEventListener("touchstart", onStartDrag);
- videoElement.addEventListener("touchmove", onContinueDrag);
- videoElement.addEventListener("touchend", onEndDrag);
+ deviceScreen.addEventListener("touchstart", onStartDrag);
+ deviceScreen.addEventListener("touchmove", onContinueDrag);
+ deviceScreen.addEventListener("touchend", onEndDrag);
} else if (window.MouseEvent) {
- videoElement.addEventListener("mousedown", onStartDrag);
- videoElement.addEventListener("mousemove", onContinueDrag);
- videoElement.addEventListener("mouseup", onEndDrag);
+ deviceScreen.addEventListener("mousedown", onStartDrag);
+ deviceScreen.addEventListener("mousemove", onContinueDrag);
+ deviceScreen.addEventListener("mouseup", onEndDrag);
}
}
function stopMouseTracking() {
if (window.PointerEvent) {
- videoElement.removeEventListener("pointerdown", onStartDrag);
- videoElement.removeEventListener("pointermove", onContinueDrag);
- videoElement.removeEventListener("pointerup", onEndDrag);
+ deviceScreen.removeEventListener("pointerdown", onStartDrag);
+ deviceScreen.removeEventListener("pointermove", onContinueDrag);
+ deviceScreen.removeEventListener("pointerup", onEndDrag);
} else if (window.TouchEvent) {
- videoElement.removeEventListener("touchstart", onStartDrag);
- videoElement.removeEventListener("touchmove", onContinueDrag);
- videoElement.removeEventListener("touchend", onEndDrag);
+ deviceScreen.removeEventListener("touchstart", onStartDrag);
+ deviceScreen.removeEventListener("touchmove", onContinueDrag);
+ deviceScreen.removeEventListener("touchend", onEndDrag);
} else if (window.MouseEvent) {
- videoElement.removeEventListener("mousedown", onStartDrag);
- videoElement.removeEventListener("mousemove", onContinueDrag);
- videoElement.removeEventListener("mouseup", onEndDrag);
+ deviceScreen.removeEventListener("mousedown", onStartDrag);
+ deviceScreen.removeEventListener("mousemove", onContinueDrag);
+ deviceScreen.removeEventListener("mouseup", onEndDrag);
}
}
@@ -412,10 +412,10 @@
var x = e.offsetX;
var y = e.offsetY;
- const videoWidth = videoElement.videoWidth;
- const videoHeight = videoElement.videoHeight;
- const elementWidth = videoElement.width;
- const elementHeight = videoElement.height;
+ const videoWidth = deviceScreen.videoWidth;
+ const videoHeight = deviceScreen.videoHeight;
+ const elementWidth = deviceScreen.width;
+ const elementHeight = deviceScreen.height;
// vh*ew > eh*vw? then scale h instead of w
const scaleHeight = videoHeight * elementWidth > videoWidth * elementHeight;
diff --git a/host/frontend/gcastv2/webrtc/assets/js/viewpane.js b/host/frontend/gcastv2/webrtc/assets/js/viewpane.js
new file mode 100644
index 0000000..62297a4
--- /dev/null
+++ b/host/frontend/gcastv2/webrtc/assets/js/viewpane.js
@@ -0,0 +1,29 @@
+// Resize button will control the execution of the resizeDeviceScreen function
+const resizeButton = document.getElementById('resizeButton');
+resizeButton.addEventListener('click', resizeDeviceScreen);
+
+// This will be used to set the max size for the video element.
+// Ex. 0.9 means that the video element will be at most 90% of the windowSize
+const maxVideoRatio = 0.9;
+
+function resizeDeviceScreen() {
+ // Capture/derive all the relevant dimensions
+ var viewportHeight = window.innerHeight;
+ var viewportWidth = window.innerWidth;
+ var maxHeight = viewportHeight * maxVideoRatio;
+ var maxWidth = viewportWidth * maxVideoRatio;
+ var videoWidth = deviceScreen.videoWidth;
+ var videoHeight = deviceScreen.videoHeight;
+
+ if (videoHeight <= maxHeight && videoWidth <= maxWidth) {
+ deviceScreen.setAttribute('height', videoHeight);
+ deviceScreen.setAttribute('width', videoWidth);
+ }
+ else {
+ deviceScreen.setAttribute('height', maxHeight);
+ deviceScreen.setAttribute('width', maxWidth);
+ }
+}
+
+// Listen for the 'play' event on the primary video element
+deviceScreen.addEventListener('play', resizeDeviceScreen);
\ No newline at end of file
diff --git a/host/frontend/gcastv2/webrtc/webRTC.cpp b/host/frontend/gcastv2/webrtc/webRTC.cpp
index dfa621b..c8afbee 100644
--- a/host/frontend/gcastv2/webrtc/webRTC.cpp
+++ b/host/frontend/gcastv2/webrtc/webRTC.cpp
@@ -152,13 +152,15 @@
FLAGS_certs_dir + "/server.key");
const std::string index_html = FLAGS_assets_dir + "/index.html";
- const std::string receive_js = FLAGS_assets_dir + "/js/receive.js";
const std::string logcat_js = FLAGS_assets_dir + "/js/logcat.js";
+ const std::string receive_js = FLAGS_assets_dir + "/js/receive.js";
+ const std::string viewpane_js = FLAGS_assets_dir + "/js/viewpane.js";
const std::string style_css = FLAGS_assets_dir + "/style.css";
httpd->addStaticFile("/index.html", index_html.c_str());
- httpd->addStaticFile("/js/receive.js", receive_js.c_str());
httpd->addStaticFile("/js/logcat.js", logcat_js.c_str());
+ httpd->addStaticFile("/js/receive.js", receive_js.c_str());
+ httpd->addStaticFile("/js/viewpane.js", viewpane_js.c_str());
httpd->addStaticFile("/style.css", style_css.c_str());
httpd->addWebSocketHandlerFactory(
diff --git a/host_package.mk b/host_package.mk
index 5a17fcf..cddfd09 100644
--- a/host_package.mk
+++ b/host_package.mk
@@ -88,8 +88,9 @@
webrtc_assets := \
index.html \
style.css \
- js/receive.js \
js/logcat.js \
+ js/receive.js \
+ js/viewpane.js \
webrtc_certs := \
server.crt \