AlfonsoAreizaG
New Member
I need to configure a streaming on the local network. Now I'm capturing the video from a USB port on the computer through OBS Studio. Then I generate an HLS file because I need to use this streaming in an html. For this I am using this code:
Project structure:
index.html
obs /
hls.js
The settings in OBS are as follows:
Comments:
> This HTML file will load the files located at http://127.0.0.1:88/, which means that there is a web server running on this same computer. This path is the same specified in OBS as C:/xampp/htdocs/obs_test (see in the image).
> The name of the "demo" file I define in OBS> Settings> Advanced> Recording> File name formatting.
Other Points:
> If I do the same streaming using VLC, but via DirectShow, it works perfectly, it doesn't get freeze.
Problems
Freeze a lot and has a 10 second delay. Can anybody help me?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PaginaPrincipal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: auto;
padding: 0px;
overflow: hidden;
}
.container {
position: absolute;
font-family:'Arial';
text-align: left;
color: rgb(0, 0, 0);
left: 0%;
top: 0%;
}
.fundoVideo {
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
align: center;
}
video {
object-fit: contain;
position: absolute;
margin: auto;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="obs/hls.js"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video" autoplay></video>
<script>
var video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('http://127.0.0.1:88/demo.m3u8?'+Date.now());
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
hls.play();
});
// If it returns any error, it will reload the template after 30 seconds
var reload_time = 30;
hls.on(Hls.Events.ERROR, function() {
window.setTimeout(function() {
console.log("Reloading...");
location.reload();
}, reload_time * 1000);
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'http://127.0.0.1:88/demo.m3u8?'+Date.now();
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
</script>
</body>
</html>Project structure:
index.html
obs /
hls.js
The settings in OBS are as follows:
Comments:
> This HTML file will load the files located at http://127.0.0.1:88/, which means that there is a web server running on this same computer. This path is the same specified in OBS as C:/xampp/htdocs/obs_test (see in the image).
> The name of the "demo" file I define in OBS> Settings> Advanced> Recording> File name formatting.
Other Points:
> If I do the same streaming using VLC, but via DirectShow, it works perfectly, it doesn't get freeze.
Problems
Freeze a lot and has a 10 second delay. Can anybody help me?