I'm trying to figure out how to provide an endless video stream using Java and video.js. So on the backend side, I hold a playlist of one .m3u8 file and couple .ts files. And my flow consists of the following steps:
Give .m3u8 text on UI. .m3u8 endpoint screenshot
Start the flow on the front-end side by video.js lib. video.js part screenshot
Video.js requests for a single .ts file that was indicated in .m3u8 file. ts endpoint screenshot
On the backend with the help of a sheduler, I change the context state streamContentContext.setCurrentChunkId(streamContentContext.getCurrentChunkId() + 1), and when video.js realizes that the only ts file is over, he tries to update .m3u8 file. At this moment, the index of ts is already updated by the scheduler and it should request /ts/2 endpoint.
THE PROBLEM IS: all subsequent .ts files on the front-end side simply cannot be played, maybe there should be some kind of attribute or event that will start adding a new piece of video to the previous one.
UPD: after I read this article (https://developer.apple.com/documentation/http_live_streaming/example_playlists_for_http_live_streaming/live_playlist_sliding_window_construction) it all became clear to me that it’s worth removing some attributes from .m3u8 file, so I left only #EXTM3U, #EXT-X-VERSION:3, #EXT-X-TARGETDURATION:11, #EXT-X-MEDIA-SEQUENCE: + streamContentContext.getCurrentChunkId()
browser screenshot
Related
I am building a web app that contains a file preview system.
It works fine on PDFs, text files, pictures of all type, and so forth. But what it can't do is play videos or audio files (.mp4, .mp3, etc; I don't have any other formats handy).
I am suspecting that it's because an image or text is loaded all at once, but audio and video tend to stream, which isn't behaving here. Interestingly, it does work in Firefox... but not Chrome.
Here is the relevant code:
function loadFile(){
var pvurl = URL.createObjectURL(document.getElementById('file').files[0]);
if (source_name.substring(".mp4")>1){
pw.createElement("video");
}
pw.src=pvurl;
pw.onload=function () {URL.revokeObjectURL(pvurl);};
URL.revokeObjectURL(pvurl);
}
<input type="file" class="file" id="file" onchange="source_name=this.value;">
<iframe id="preview" class="hidden mainWindow" style="height:100%;"></iframe>
I get two error messages from this. Meanwhile, the iframe at least appears to start loading the video or audio (and I get the video loading screen and spinner), but just stops trying after a second or two.
Resource interpreted as Document but transferred with MIME type video/mp4: "blob:null/895c8ed2-49f1-4160-b2f4-b6904068d5ad".
blob:null/895c8ed2-49f1-4160-b2f4-b6904068d5ad:1 Not allowed to load local resource: blob:null/895c8ed2-49f1-4160-b2f4-b6904068d5ad
I have tried removing the revokeObjectURL line (in case it revokes it before it's loaded or something--and does that actually save any memory? Is it loading from file or buffering?), but that doesn't seem to actually fix the problem, and I get the same errors. What is going on here? It also seems to be seeing the MIME type, but I can't find a guide on how to get the code to see it. I'd like to get rid of the warning or perhaps find a way to handle audio or video types differently, if it can't work in an iframe (I don't see why that would make a difference, but...).
If you also have any information on exactly how this works, I'd also appreciate it.
The app does all its processing clientside in Javascript, so I'm rather interested in how this URL access method compares to the FileReader.readAsArrayBuffer() method I'm using for everything else (I do need to read the source file at a byte level several times, so if the URL method is a pipe that's a no-go).
I'm using howler.js to play audio on my website, but because I am downloading audio through direct links there are differing load times depending on the length of the audio. I was wondering if there was a way to see how much of the file has been downloaded and display it to the user so that they know an approximate time it would take for it to finish loading. An example of how I am downloading audio is shown below.
lvlHowlWEB[eps] = new Howl({
src:["https://dl.dropboxusercontent.com/s/hb7gw9zqvdptdzq/Potat2k18.mp3?dl=0"],
html5: false,
});
(Note: Audio will not begin playback until after it has loaded completely. I am just looking to see if there's a way to view how much longer it will take to be completely downloaded)
Any help would be appreciated!
You could consider using a ServiceWorker to intercept the HTTP requests and show progress updates as they download. https://fetch-progress.anthum.com/
Alternatively, you could use fetch() and show download progress, then convert the downloaded data into a Blob for URL.createObjectURL(), which could then be used for Howler's src property.
I want to stream a transport stream file on a HTML player. Is there a way to implement it?
I have tried these following approaches to play the TS file-
a) Put it in a video tag:
I simply wrote a video tag
But it showed me a blank screen.
b) I tried it with iframe tag:
I wrote a simple tag:
It actually downloaded the file but screen turned blank.
c) I used HLS player for showing the ts file
The HLS (hls.js) validated the file. However it gave me the "manifestLoadError".
Can anyone helpe me with this HLS error?
Or suggest me another way to show this TS file?
Browsers can not play ts. You need to convert to iso/fmp4 before playing.
Am running a drm widfine live stream and I like to get some information from the manifest. I found a website:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/getManifest#Syntax
but if I run this code I get a: 'browser' is not defined no-undef.
var manifest = browser.runtime.getManifest();
console.log(manifest.name);
If you want to read the manifest file, you can use the manifest URL which you use to load the stream. This link will give you a file with the needed information for the stream, then you use JavaScript to read out the XML file each time a stream is loaded.
Within the file, you can find the bitrate data. Within your player you should be able to find the bitrate that its currently playing at.
Read XML file using javascript
I'm trying to implement local video caching into my video-streaming application.
I'm using:
react-native-video for video playback
rn-fetch-blob for downloading files
I've managed to start the download at the beginning, replace the original URL with the local one and continue with the playback from my local file (it works as expected) - even with partial file (as long as I start from 0).
The main problem is seek function. If a user wants to start watching at e.g. 120s - download will still start at 0B. I've implemented Range header in the Fetch API looking something like this:
"Range": "bytes: {oneSecondInBytes * whereYouWantToStartWatchingInSeconds}-{fileSizeInBytes}"
to overcome this problem. Now download starts at desired Bytes and downloads only desired part of the video file.
The download works normally but video playback throws Unrecognized media format error. Also tried adding some bytes for headers at the beginning (0-10000B) - to try and recognize the video file, no luck.
So I'm wondering if it's possible to implement partial video file download with rn-fetch-blob and be able to play the file back using react-native-video (not starting at the beginning of the file), later also add other pieces to the file (until the whole download is complete). How could I convince react-native-video that my partial download is indeed proper mp4 file?
UPDATE
I've messed around with HTTP GET headers for a while and actually got somewhere. Not a complete solution but might help someone:
"Content-Type": "video/mp4",
"Range": `bytes=0-1000, 45111150-`,
"Accept-Ranges": "bytes",
"Content-Length": "89024062"
^^ these are my test headers. Had to add two value to Range. The first one just downloads the first part of the file to get headers and to recognize the file type. The second one is from the "seek point" owards. Video now plays and file type is recognized.