here i am using ffmpeg to use camera and audio to make a hls stream on server as the stream continious old m3u8 components deletes and new ones gets added to main.m3u8. but as we insert the url of hls stream file main.m3u8. the player refreshes as soon as the file gets rewritten because of new and old ones. so
i have tried to change the players like hls.js or videojs etc none were to solve this. how to solve this and make sure the stream runs smoothly.
Server.js
const startStreaming = (viddev,auddev) => {
if (ffmpegProcess) {
ffmpegProcess.kill();
}
const segmentDuration = 10;
const outputFilename = './video/output.m3u8';
const ffmpegCommand = `ffmpeg -f dshow -i video="${viddev}" -f dshow -i audio="${auddev}" -codec:v libx264 -preset ultrafast -tune zerolatency -codec:a aac -b:a 128k -hls_time ${segmentDuration} -hls_list_size 3 -hls_flags delete_segments -start_number 0 -hls_segment_type mpegts ${outputFilename}`;
ffmpegProcess = exec(ffmpegCommand);
ffmpegProcess.stderr.on('data', (data) => {
console.error(`ffmpeg stderr: ${data}`);
});
ffmpegProcess.on('close', (code) => {
console.log(`ffmpeg process exited with code ${code}`);
});
};
app.use('/video', express.static(path.join(__dirname, 'video')));
// Endpoint to list audio and video devices
app.get('/devices', async (req, res) => {
const data=await parseDevices()
// console.log(data.cameras[0].name)
startStreaming(data.cameras[0].name,data.microphones[0].name);
res.json(data)
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js HLS Player</title>
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: white;
}
</style>
</head>
<body>
<video
id="video"
class="video-js vjs-default-skin"
controls
autoplay
preload="auto"
width="640"
height="268"
data-setup='{"autoplay": true, "liveui": true}'>
<source src="https://localhost:3000/video/output.m3u8" type="application/x-mpegURL">
</video>
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
// Initialize Video.js player
var player = videojs('video', {
autoplay: 'play',
liveui: true // Enable the live UI for live streams
});
// Seek to live when the player is ready
player.ready(function() {
player.liveTracker.on('liveedgechange', function() {
player.currentTime(player.liveTracker.liveCurrentTime());
});
});
// Handle any errors encountered by Video.js
player.on('error', function() {
console.error('Video.js encountered an error:', player.error());
});
</script>
</body>
</html>
New contributor
Leo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.