mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-20 00:51:41 +00:00
aaac6a4fbb
* WIP adding second websocket handling for cameras * just more WIP * even more wip. Most java-side framework completed, but not yet debugged * IT LIVES. Still needs lots of cleanup. But we're transferring and displaying data! * moved down an architecture layer. Improved multiple-camera handling * Additional WIP to help improve smoothness and performance, though not yet tested * bugfixes galore * tweak compression * spotless * more tweaks for handling slow/intermittent streams * wpilibformat maybe? * clang-format maybe? * WIP - adding thinclient. I don't like it yet, it should be more auto-generated than it is. * thinclient formatting fixups * Reduced amount of empty send data by limiting to only one stream per client (which is all we really need). Framerate is up slightly, overhead is down. * bugfixes, faster streaming, better mjpeg compression settings, thinclient working * spotless and formatting * cmon wpiformat.... * re-added mjpg streams * added a loading GIF to imporve the feeling of responsiveness * formatting * urlparams and built-in thinclient * wpiformat * prevent wpiformat complaints * Removed uint8 array and base64 conversion from client side * Synced up js implementations for ws streaming * formatting/spotless
224 lines
6.9 KiB
HTML
224 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>ThinClient</title>
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.imgbox {
|
|
display: grid;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.center-fit {
|
|
|
|
width: 90vw;
|
|
margin: auto;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<hr>
|
|
<div class="imgbox">
|
|
<img id="streamImg" class="center-fit" src=''>
|
|
</div>
|
|
<hr>
|
|
|
|
<form id="frm1">
|
|
Host <input type="text" id="host" value="photonvision.local"><br>
|
|
Port <input type="text" id="port" value="1181"><br>
|
|
</form>
|
|
|
|
<button>Start Stream</button>
|
|
|
|
<script type="module">
|
|
class WebsocketVideoStream{
|
|
|
|
constructor(drawDiv, streamPort, host) {
|
|
|
|
this.drawDiv = drawDiv;
|
|
this.image = document.getElementById(this.drawDiv);
|
|
this.streamPort = streamPort;
|
|
this.serverAddr = "ws://" + host + "/websocket_cameras";
|
|
this.noStream = false;
|
|
this.noStreamPrev = false;
|
|
this.setNoStream();
|
|
this.ws_connect();
|
|
this.imgData = null;
|
|
this.imgDataTime = -1;
|
|
this.imgObjURL = null;
|
|
this.frameRxCount = 0;
|
|
|
|
requestAnimationFrame(()=>this.animationLoop());
|
|
}
|
|
|
|
animationLoop(){
|
|
var now = window.performance.now();
|
|
|
|
if((now - this.imgDataTime) > 2500 && this.imgData != null){
|
|
//Handle websocket send timeouts by restarting
|
|
this.setNoStream();
|
|
this.stopStream();
|
|
setTimeout(this.startStream.bind(this), 1000); //restart stream one second later
|
|
} else {
|
|
if(this.streamPort == null){
|
|
this.setNoStream();
|
|
} else if (this.imgData != null) {
|
|
//From https://stackoverflow.com/questions/67507616/set-image-src-from-image-blob/67507685#67507685
|
|
if(this.imgObjURL != null){
|
|
URL.revokeObjectURL(this.imgObjURL)
|
|
}
|
|
this.imgObjURL = URL.createObjectURL(this.imgData);
|
|
|
|
//Update the image with the new mimetype and image
|
|
this.image.src = this.imgObjURL;
|
|
this.noStream = false;
|
|
|
|
} else {
|
|
//Nothing, hold previous image while waiting for next frame
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(()=>this.animationLoop());
|
|
}
|
|
|
|
setNoStream() {
|
|
this.noStreamPrev = this.noStream;
|
|
this.noStream = true;
|
|
if(this.noStreamPrev == false && this.noStream == true){
|
|
//One-shot background change to preserve animation
|
|
this.image.src = "loading.gif";
|
|
}
|
|
}
|
|
|
|
startStream() {
|
|
if(this.serverConnectionActive == true && this.streamPort > 0){
|
|
this.ws.send(JSON.stringify({"cmd": "subscribe", "port":this.streamPort}));
|
|
this.noStream = false;
|
|
}
|
|
}
|
|
|
|
stopStream() {
|
|
if(this.serverConnectionActive == true && this.streamPort > 0){
|
|
this.ws.send(JSON.stringify({"cmd": "unsubscribe"}));
|
|
this.noStream = true;
|
|
}
|
|
}
|
|
|
|
setPort(streamPort){
|
|
this.stopStream();
|
|
this.frameRxCount = 0;
|
|
this.streamPort = streamPort;
|
|
this.startStream();
|
|
}
|
|
|
|
ws_onOpen() {
|
|
// Set the flag allowing general server communication
|
|
this.serverConnectionActive = true;
|
|
console.log("Connected!");
|
|
this.startStream();
|
|
}
|
|
|
|
ws_onClose(e) {
|
|
this.setNoStream();
|
|
|
|
//Clear flags to stop server communication
|
|
this.ws = null;
|
|
this.serverConnectionActive = false;
|
|
|
|
console.log('Camera Socket is closed. Reconnect will be attempted in 0.5 second.', e.reason);
|
|
setTimeout(this.ws_connect.bind(this), 500);
|
|
|
|
if(!e.wasClean){
|
|
console.error('Socket encountered error!');
|
|
}
|
|
|
|
}
|
|
|
|
ws_onError(e){
|
|
e; //prevent unused failure
|
|
this.ws.close();
|
|
}
|
|
|
|
ws_onMessage(e){
|
|
if(typeof e.data === 'string'){
|
|
//string data from host
|
|
//TODO - anything to recieve info here? Maybe "avaialble streams?"
|
|
} else {
|
|
if(e.data.size > 0){
|
|
//binary data - a frame
|
|
this.imgData = e.data;
|
|
this.imgDataTime = window.performance.now();
|
|
this.frameRxCount++;
|
|
} else {
|
|
//TODO - server is sending empty frames?
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
ws_connect() {
|
|
this.ws = new WebSocket(this.serverAddr);
|
|
this.ws.binaryType = "blob";
|
|
this.ws.onopen = this.ws_onOpen.bind(this);
|
|
this.ws.onmessage = this.ws_onMessage.bind(this);
|
|
this.ws.onclose = this.ws_onClose.bind(this);
|
|
this.ws.onerror = this.ws_onError.bind(this);
|
|
console.log("Connecting to server " + this.serverAddr);
|
|
}
|
|
|
|
ws_close(){
|
|
this.ws.close();
|
|
}
|
|
|
|
}
|
|
|
|
var stream = null;
|
|
|
|
function streamStartRequest() {
|
|
var host = document.getElementById("host").value + ":5800";
|
|
var port = document.getElementById("port").value;
|
|
if(stream == null){
|
|
stream = new WebsocketVideoStream("streamImg",port,host);
|
|
stream.startStream();
|
|
} else {
|
|
stream.setPort(port);
|
|
}
|
|
|
|
}
|
|
|
|
// Attach listener
|
|
document.querySelector('button').addEventListener('click', streamStartRequest);
|
|
|
|
// Deal with URLParams, validating inputs
|
|
const queryString = window.location.search;
|
|
const urlParams = new URLSearchParams(queryString);
|
|
const port_in = urlParams.get('port')
|
|
const host_in = urlParams.get('host')
|
|
if(port_in != ""){
|
|
document.getElementById("port").value = port_in;
|
|
}
|
|
|
|
if(host_in != ""){
|
|
document.getElementById("host").value = host_in;
|
|
}
|
|
|
|
if(port_in != "" & host_in != ""){
|
|
streamStartRequest(); //we got valid inputs, auto-start the stream
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|