Meteor-files: Cross domain Video Play Issue

[salmanhasni]

I have edit my /etc/hosts "127.0.0.1 example.localhost" according to business logic. sub domain always needed to properly fetch all the required items from mongo, but I am stuck arround the images/video
because if i use .link() method it returns the url http://localhost:3000/cdn/storage/videos/uh2RbzwQ9PeAPm8yL/m3u8/uh2RbzwQ9PeAPm8yL.m3u8
where as i needed https://football.localhost:3000 to make the video to bypass the cross domain security issue

[salmanhasni]

@dr-dimitru can you please help here, its a bit urgent. please verify is this a bug ? so i can contribute in it quickly or there exist any solution for it already in package ?

[dr-dimitru]

Hi @salmanhasni ,

Quickest solution for you is overwrite .link() method to:

const files = new FilesCollection({ /*...*/ });

const _origLink = files.link;
files.link = function (v) {
  return _origLink(v).replace(__meteor_runtime_config__.ROOT_URL, 'https://football.localhost:3000');
}

Where https://football.localhost:3000 can be stored as env.variable or in Meteor.settings

Let me know if it helps

[salmanhasni]

Hi @dr-dimitru I will give it try today and will surely let you know. thanks for the quick response and heads up.

[salmanhasni]

for the quick fix it worked, I extended your idea to make it more dynamic than to store all possible subDomains in settings.
_origLink.replace("://", "://" + subDomain + ".");

[valorloff]

files.link = function (v) {
  return _origLink(v).replace(__meteor_runtime_config__.ROOT_URL, 'https://football.localhost:3000');
}

fantastic solution!
Big thanks!

[haibo32012]

I follow the stream files example code, insert a video and succeed, try play it on the page, but nothing displayed. In the Elements place src=http://localhost:3000/cdn/storage/files/PKgKqxPXLJaEKEQdt/original/PKgKqxPXLJaEKEQdt.mp4?play=true
my storagePath:'assets/app/uploads/files', this is the template code :src="{{file.link}}?play=true", what's wrong?

[dr-dimitru]

Hello @haibo32012 ,

Looks good to me.

1. Where do you store file FS or GridFS?
2. Does it throws any errors on Client or Server?
3. What "Network" tab displays, any network errors?

[haibo32012]

@dr-dimitru I test on local, what's your mean store file FS or GridFS, when I create collection have already set storagePath, is this not enough?

[dr-dimitru]

when I create collection have already set storagePath, is this not enough?

Enough.

What about?:

1. Does it throws any errors on Client or Server?
2. What "Network" tab displays, any network errors?

[haibo32012]

No Errors, Client or Server or Network.

[haibo32012]

I am still confuss when i upload a file, where the file is, what i say is on local FS, when i succeed upload a file, i check the database and find it,i searched it on the my computer FS, can't find it.

[dr-dimitru]

i searched it on the my computer FS, can't find it.

Where have you checked?

No Errors, Client or Server or Network.

I'm still would like to see what network tab may tell us.
Could you post few screenshots?

[haibo32012]

[haibo32012]

First is client picture, Second is mongo database result.

[dr-dimitru]

Hi @salmanhasni ,

According to original issue:

try play it on the page, but nothing displayed

I need to see what server respond with when you're request file in a browser.
On screenshot - no request for uploaded file is sent from browser to server.
Please make sure:

1. Uploaded file is somehow requested from browser (with video/audio/img/etc. element)
2. "Headers" tab is open under "Network" tab

[haibo32012]

this is when i use simple stream demo code test, it can't find data.what I confuse is where the data store when i upload a file under local development enviroment.

[dr-dimitru]

Hello @haibo32012 ,

Well - 404 means file not found by library.
Could you locate uploaded file inside directory defined via storagePath?
And what your storagePath is?

If you will enable debug-mode via debug flag set to true and passed into FilesCollection constructor - it will help a lot to solve your issue. Please, enable it and post full logs from Server and Client console here.

Thank you.

[haibo32012]

thanks, I have figured out what's going on, the storeagePath set the wrong place, thanks so much for your patience.

[dr-dimitru]

@haibo32012 I'm glad it helped. Do not hesitate to ask more.

[salmanhasni]

instead of replacing original link I found an another hacky way to fix the cross domain issue

/** Listen to incoming HTTP requests, can only be used on the server
*** http://www.something.com/path/to/intercept
**/
WebApp.rawConnectHandlers.use("/path/to/intercept", function(req, res, next) {
  //define white list of urls, or can be done like adding subdomain as prefix to Meteor.absoluteUrl();
  let whiteList = [];
  const found = _.find(whiteList, function(url) {
    return url == req.headers.origin;
  });
  if(found){
    res.setHeader("Access-Control-Allow-Origin", req.headers.origin);
  }
  return next();
});

[dr-dimitru]

@salmanhasni ,

You're welcome to send PR with this snippet to docs :)