pabsan-0/.tmuxinator.yml

## .tmuxinator.yml
name: ros_noetic_video
on_project_exit: tmux kill-window
windows:
  - main:
      pre: source /opt/ros/noetic/setup.bash
      layout: tiled
      panes:
        - roscore
        - sleep 1; roslaunch rosbridge_server rosbridge_websocket.launch
        - sleep 1; rosrun web_video_server web_video_server
        - sleep 3; rosrun image_publisher image_publisher /opt/ros/noetic/share/rviz/images/splash.png
        - sleep 4; rosrun image_transport republish raw in:=`rostopic list | grep image_raw$` out:=/camera/compressed/compressed
        - sleep 5; xdg-open ./index.html

## index.html
<!--
Taken from https://parkerrobert.medium.com/how-to-visualise-ros-images-in-html-c6b88e37e985
w/ revived links.
-->

<!DOCTYPE html><html><head><meta charset="utf-8" />

<script type="text/javascript" src="https://unpkg.com/eventemitter2@6.4.9/lib/eventemitter2.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/roslibjs/1.1.0/roslib.min.js"></script>
<script type="text/javascript" type="text/javascript">
// Connecting to ROS
// -----------------
var ros = new ROSLIB.Ros({url : 'ws://localhost:9090'})
ros.on('connection', function() {console.log('Connected to websocket server.')
})
ros.on('error', function(error) {console.log('Error connecting to websocket server: ', error)
})
ros.on('close', function() {console.log('Connection to websocket server closed.')
})
// ----------------------

var listener = new ROSLIB.Topic({ros : ros,name : '/camera/compressed/compressed/compressed',messageType : 'sensor_msgs/CompressedImage'})

listener.subscribe(function(message) {
    console.log('Received message on ' + listener.name)
    document.getElementById('image_sub').src = "data:image/jpeg;base64," + message.data
})

</script>
</head><body><h1>Robot's perspective</h1><p>Looking through the eyes of a robot.</p><img id="image_sub" /></body></html>
	name: ros_noetic_video
	on_project_exit: tmux kill-window
	windows:
	- main:
	pre: source /opt/ros/noetic/setup.bash
	layout: tiled
	panes:
	- roscore
	- sleep 1; roslaunch rosbridge_server rosbridge_websocket.launch
	- sleep 1; rosrun web_video_server web_video_server
	- sleep 3; rosrun image_publisher image_publisher /opt/ros/noetic/share/rviz/images/splash.png
	- sleep 4; rosrun image_transport republish raw in:=`rostopic list \| grep image_raw$` out:=/camera/compressed/compressed
	- sleep 5; xdg-open ./index.html
	<!--
	Taken from https://parkerrobert.medium.com/how-to-visualise-ros-images-in-html-c6b88e37e985
	w/ revived links.
	-->

	<!DOCTYPE html><html><head><meta charset="utf-8" />

	<script type="text/javascript" src="https://unpkg.com/eventemitter2@6.4.9/lib/eventemitter2.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/roslibjs/1.1.0/roslib.min.js"></script>
	<script type="text/javascript" type="text/javascript">
	// Connecting to ROS
	// -----------------
	var ros = new ROSLIB.Ros({url : 'ws://localhost:9090'})
	ros.on('connection', function() {console.log('Connected to websocket server.')
	})
	ros.on('error', function(error) {console.log('Error connecting to websocket server: ', error)
	})
	ros.on('close', function() {console.log('Connection to websocket server closed.')
	})
	// ----------------------

	var listener = new ROSLIB.Topic({ros : ros,name : '/camera/compressed/compressed/compressed',messageType : 'sensor_msgs/CompressedImage'})

	listener.subscribe(function(message) {
	console.log('Received message on ' + listener.name)
	document.getElementById('image_sub').src = "data:image/jpeg;base64," + message.data
	})

	</script>
	</head><body><h1>Robot's perspective</h1><p>Looking through the eyes of a robot.</p><img id="image_sub" /></body></html>