Develop Reference

Load m3u8 video file as Blob with different orign

I'm attempting to stream video using a Blob URL created from an m3u8 URL.
The m3u8 file contains only relative paths.
E.g.
file1.ts
file2.ts
...
The m3u8 file is stored on a separate host (e.g. the URL is fileserver.com/path/thevideo.m3u8) than the website loading the video (e.g. the URL is website.com).
Therefore, after converting the m3u8 URL to a Blob, the video player subsequently looks for:
website.com/file1.ts
website.com/file2.ts
Whereas, the actual URLs are:
fileserver.com/path/file1.ts
fileserver.com/path/file2.ts
Question is, is there any way to get the video player (I'm using VideoJS) to use the correct URL prefix?
The code I used for Blob URL generation is here: set video objects source file to a blob url
I can confirm that it works if the m3u8 file contains the full *.ts URLs instead of the relative paths, but I want to see if this is possible using only the relative path as that would be more convenient.

You can attach a custom handler for requests made by videojs/http-streaming engine.
player.tech().vhs.xhr.beforeRequest = function(options) {
options.uri = options.uri.replace('example.com', 'foo.com');
return options;
};
Note: You should make a check with safari hls playback if you're using overrideNative option.

How to upload audio related to a document?

I am posting a document with title and details. An audio is recorded as well.
Speech to text recognizes the voice and types out document. Title and Details are saved as a document. I want to save recorded audio as well, so that when i view the document i can play audio as well
How to post that audio?
With document?
or
Create another post/get to store the audio separately?

You can simply read the bytes of the audio file as a byte stream into a byte array with a file reader. To relate the audio file to the document, let the file point to the unique id/title of that document in the database. Here is an example with a JSON to post for storage:
{
"audioBytes": [5ghcj66g6yf...],
"documentId": "cchghh-g6y56g..."
}

Javascript function force downloads an MP3 file from URL, once downloaded however MP3 file wont play on my computer only on VLC Player? Why?

I have a Javascript function that basically force downloads a file once provided the URL and name of the file. This function works absolutely fine as intended I call it from a HTML tag/hyperlink. But once the MP3 file from my function downloads it wont play on my computer. I have designed this function for a user to be able to download different MP3 and WAV files upon clicking on the associated link for that file. I can only play the downloaded MP3 file on the media player VLC it won't play on my laptop. Is there something I am doing to the MP3 file in the download process with my function or why will it not play once downloaded?
I have looked into MP3 file variations and encoding but Im not sure what to look for really or what I am doing wrong. When I download MP3 files from other sites they are working fine and play straight away.
Function:
<script>// <![CDATA[
function downloadFile(data, fileName, type="text/plain") {
// Create an invisible A element
const a = document.createElement("a");
a.style.display = "none";
document.body.appendChild(a);
// Set the HREF to a Blob representation of the data to be downloaded
a.href = window.URL.createObjectURL(
new Blob([data], { type })
);
// Use download attribute to set set desired file name
a.setAttribute("download", fileName);
// Trigger the download by simulating click
a.click();
// Cleanup
window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
}
// ]]></script>
Function Call:
My Download

If you look in the downloaded file, you'll find it contains the text https://cdn.shopify.com/s/files/1/0037/4951/1217/files/ascence-places-like-that-ncs-release.mp3?360 because that's the value you're passing for data and using when creating the blob. Nothing about that code creating a blob downloads the content (and the SOP prevents your code from downloading the content, unless of course the other site overrides it with CORS).
I don't think you can force the link to open the Save dialog. Normally that's triggered by the response to the link from the server (via the Content-Disposition header), which of course you can't control in your scenario. Using the download attribute won't do it, it has no effect cross-origin (other than when the link is a data: or blob: URL, see MDN's description).
You can show them the link so they can right-click and choose "Save target as...", but I know that's going to be a disappointing answer for you.

Creating a .wav file in JS - "Not a WAVE file - no RIFF header"

I'm trying to record audio from the browser's microphone, and save it as a .wav file (to be sent to an API)
I've got the binary blocks of what I'm after, and I can convert it to a .wav file that plays in VLC (and also in the browser)
let blob = new Blob(chunks, { type: 'audio/wav' });
But when I try to send it to the http://www.beyondverbal.com/api/, I receive
{"readyState":4,"responseText":"{\"status\":\"failure\",\"reason\":\"Not a WAVE file - no RIFF header\"}","status":400,"statusText":"Bad Request"}
Essentially the question is, how can I add the RIFF header I need, or am I going about this completely all wrong?
Thanks

How to extract all the current video files and its address in the web page with js?

var imgs=document.images.length;
It can extract all the images on the web page.
How extract all the flv files whose suffix is flv such as sample.flv in the web page with js?Not all the flv files on my local directory but web page.
The plugin Video DownloadHelper in firefox can get the current mp4 file.
Why my js code can't do the same task?
var Links = document.querySelectorAll('a[href$=".mp4"]');
console.log(Links);
How to extract the current video files with js such as the plugin Video DownloadHelper in firefox?

Yahoo Movies use blob stream to transfer video data. There are no direct mp4/flv links anywhere, nor can you get such links directly. The src of the <video> tag refers to a blob stream link:
<video class="yvp-html5-video" preload="" id="2413371376" src="blob:https://www.yahoo.com/1dfafd99-a1ff-4cc8-bcff-255e69db9977"></video>
When you hit to download MP4 from Video DownloadHelper, the plugin actually reads the blob stream and writes it to disk in an MP4 file. It doesn’t download a MP4 file. If you try to Copy URL, you’ll get something like this to your clipboard:
https://roarack01.vpg.cdn.yimg.com/yahoomovies/61fb473f-04a2-381e-b2ae-9496dfba5e66_VYtMtix1DscECbXMT9tHT7yf2P9BZF-mRCMjBejFgALFHl7NSm1ZXPOMICAOr949v2xUgEASYLw-_1_0_vtt.m3u8?a=yahoomovies&ib=sapi&m=application%2fvnd.apple.mpegurl&mr=0&ns=c+i+ci+cii&vid=61fb473f-04a2-381e-b2ae-9496dfba5e66&x=1479599999&s=370695a7063b6aae06fb7f537c85773a
You can record a blob stream, but it’s not an easy task.
For more details on video blob stream, check these links:
What is blob in the <video src=blob:url>?
Export HTML5 blob video to MP4
W3C Media Source Extensions
A URL for Blob and File reference

If I'm understanding correctly you want to look for all the links which have an associated .flv.
If you want this, you can use querySelectorAll and select all the links ending in .flv using the css selector $=.
var flvLinks = document.querySelectorAll('a[href$=".flv"]');

to get all flv files of a directory, please try the following code -
var files = fs.readdirSync("YOUR_DIRECTORY");
var path = require('path');
for(var i in files) {
if(path.extname(files[i]) === ".flv") {
//do your desired task here
}
}
Hope it helps..:)

You can inspect all video requests on Chrome -> Networks tab in Media sub tab.