I have created a screen recording application in Java, which works fine and encodes the video stream using MediaCodec. Then, I send the bytes through a socket connection to JavaScript. However, I am having trouble playing the live stream after converting the bytes to a stream using JavaScript libraries such as Bradway.js and Jmuxer.js.
Here is some code that has been tested:
/Bradway.js/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Video Stream</title>
<style>
#videoCanvas {
display: block;
width: 640px; /* Adjust as needed */
height: 480px; /* Adjust as needed */
border: 1px solid black; /* Optional border for visualization */
}
</style>
<script src="./Decoder.js"></script>
<script src="./Player.js"></script>
<script src="./YUVCanvas.js"></script>
</head>
<body>
<!-- Video player element -->
<canvas id="videoCanvas"></canvas>
<!-- Include jmuxer library -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jmuxer.min.js"></script> -->
<script src="/socket.io/socket.io.js"></script>
<script>
// Function to check if the data is H.264 encoded
function isH264(data) {
// H.264 NAL unit start code is 0x00 00 01 or 0x00 00 00 01
if (data.length < 4) {
return false; // Not enough data
}
if (data[0] === 0x00 && data[1] === 0x00 && (data[2] === 0x01 || (data[2] === 0x00 && data[3] === 0x01))) {
return true; // H.264 start code found
}
return false; // Not H.264 encoded
}
const socket = io();
var player;
socket.on('RemoteVideoByte', bufferdata => {
if (!player) {
player = new Player({
useWorker: true,
workerFile: './Decoder.js',
size: { width: 640, height: 480 },
webgl: 'auto',
});
var canvas = document.getElementById('videoCanvas');
canvas.appendChild(player.canvas);
}
socket.binaryType = 'arraybuffer';
var data = new Uint8Array(bufferdata);
player.decode(data);
// Check if the decoded data is H.264 encoded
if (isH264(data)) {
console.log("Decoded data is H.264 encoded.");
} else {
console.log("Decoded data is not H.264 encoded.");
}
});
// Handle any WebSocket errors
socket.on('error', error => {
console.error('WebSocket error:', error);
});
</script>
</body>
</html>
/Jmuxer.js/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Video Stream</title>
<style>
#player {
display: block;
width: 640px;
height: 480px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="player"></div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jmuxer.min.js"></script>
<script>
const socket = io();
socket.binaryType = 'arraybuffer';
socket.on('connect', () => {
console.log('Socket connected');
});
socket.on('RemoteVideoByte', bufferdata => {
jmuxer.feed({
video: new Uint8Array(bufferdata)
});
});
socket.on('error', error => {
console.error('WebSocket error:', error);
});
var jmuxer = new JMuxer({
node: 'player',
mode: 'video',
flushingTime: 1000,
fps: 30,
debug: false
});
</script>
</body>
</html>
Can you please help me solve this issue? It would be greatly appreciated.