I'm serving some static HTML, CSS and JS files and also a folder called tmp with some images and video files using Express.js for my Node app:
app.use(express.static("build"));
app.use(express.static("../tmp"));
When I go to http://localhost:3003, it loads up my app very nicely and it loads all the images on my webpage(located in the tmp folder) but the problem is every video file looks like this:
If I press fullscreen on the video player or even visit the url directly http://localhost:3003/video_1.mp4, it works.
Is this a problem with Express.js trying to stream the video data from the tmp folder? I really don't know how to solve this issue. I tried to delay the playback and use a 3rd party library to play the video but no luck.
Seems to work when I directly specify the whole path localhost:3003/picture.png in src of the video element
Related
I have loopback 4 - nodejs in the backend and Ionic 4 in the frontend of my mobile application. I'm storing an mp3 file on server sid and I want to stream and play it on the client-side so basically audio streaming from loopback4.
So basically I'm looking for server-side code in loopback-4 which is in typescript to audio-stream a file to client. (I'm unable to use npmjs libraries since most of them are not typed and cannot be used in typescript)
As soon as I know about loopback4, it doesn't have nodejs stream implementation. I recommend you to use native NodeJS streams. Check out this repo https://github.com/noamtcohen/AudioStreamer
Short answer:
I was able to achieve this by simply serving static files i.e my audio file from the server-side. Accessing it using the endpoint I made and calling it using the tag on the frontend.
Long answer:
In loopback 4, you can find a line of code in application.ts file where public directory from the root folder of the server project is served.
this.static('/', path.join(__dirname, '../../public'));
Similarly, you can serve your static files from whatever dir you want. In my case, I served my files from media folder which I added in the root directory of my node project.
this.static('/', path.join(__dirname, '../media'));
The second step is to expose an API endpoint which you would use to make a get request to the server. You can do that inside index.ts file of the server project and the code right below app.start().
app.static('/media', 'media', { extensions: ['mp3'] });
Here, adding the API endpoint and the directory in the root folder of the node project is mandatory.
Now, on the frontend you only have to add your complete url to access the static file from node project to the src attribute of html tag.
Add controls attribute to the tag and html will handle everything for you. You can play, pause, skip, etc.
<audio controls #audioElement id="id1" [src]="http://localhost:3000/media/audio-files/myAudiofile.mp3">
It's a first time I'm doing this so got some trivial (I think) problems with files upload.
I have a pair: Angular 7 app + NodeJS (express) backend. I successfully uploading files (images) through the Angular page, NodeJS save it with correct format, but I don't know what can I do to be able to target just uploaded images in my web-service and where should I store new files. Should it be : src/app/uploads or only src/app ? Can someone explain the idea behind.
Do I need to do any extra actions in Angular? Because it shows me 404 page if I try to target something out of scope of the app.
Thanks!
I think that src directory should store only source code (or something change when you update your version of code)
In my opinion, uploaded file shouldnt be stored in src directory.
Maybe
Root dir
- docs
- migrations
- node_modules
- src
- tmp
- uploaded
.......
I'm uploading files from Angular 2 with ngx-uploader and storing them on backend (nodejs/feathers) with multer. Now I'm having trouble to reach and display them, for now im just trying to display image, but actually i just need to see how paths work so i can reach the .pdf files.
As a file path im getting this: resources\\uploads\\quality-docs\\FILENAME so i tried to reach them like this: http://localhost:3030/resources/uploads/quality-docs/FILENAME but it doesnt work, it gives me 404. Just realised when i put files in static, public folder, i can reach it like http://localhost:3030/FILENAME ... but is there a way for it to not be in public?
This is how my backend structure looks like:
Any ideas/sugestions are welcome, is this even a right way to go? Plus if any of you have idea how to delete files from server?
Assuming that you are using express in your node app, you need to include a static route to the resources/uploads directory (express static routes) like the following:
app.use(express.static('resources/uploads'))
For deleting files from a node application use unlink fs.unlink
My flash SWF needs to load "photo.jpg" using URLRequest but in vain. Heres how I am doing it
imLoader = new Loader();
imLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
imLoader.load(new URLRequest("photo.jpg"));
The SWF and photo are both located in the same directory on my localhost server. When i render it in the browser, photo doesn't load. But when i do it manually by simply opening the SWF, photo loads up properly.
Is it something related to crossdomain or what is the problem?
The path is relative to the HTML document. So if your image and SWF are not in the same directory as the HTML you need to provide a path (absolute or relative to the HTML).
So if your SWF and image are in 'media' directory you would need:
imLoader.load(new URLRequest("media/photo.jpg"));
//or
imLoader.load(new URLRequest("/media/photo.jpg"));
//or (if SWF and image are on different server)
imLoader.load(new URLRequest("http://www.domain.com/media/photo.jpg"));
this is the scenario i'm trying to achieve: a sound stored on the same server as a web application, plays when a condition is met on the client. It works perfectly when I run it in the IDE and change the webconfig to point to the server where the DB is. However when I deploy it and access it via the browser, the sound does not play. The same sound that played when i used my development machine. Code is:
var configsetings = new System.Configuration.AppSettingsReader();
string soundPath= configsetings.GetValue("Notification",typeof(System.String)).ToString();
var sound = new System.Media.SoundPlayer { SoundLocation = Server.MapPath(soundPath) };
sound.Load();
sound.Play();
web config is:
<add key="Notification" value="~/beep-4.wav" />
The sound file is sitting in the root folder of the ASP.NET web application. So what could be wrong? There is no audio output device on the server neither is there a player like media player nevertheless these factors did NOT stop it from working in my dev machine.
Looking at the code you posted I will assume you wrote it in C#.
So, this code will run on the server-side, and the client-side (the web browser) will never know about it or about your audio file. Please read about asp.net code-behind and how it works. If you want to play an audio file in the browser (client-side), you need to use either javascript, or flash, or the < audio > tag from html5.
By installing a sound card on a server you will only achieve (in a best case scenario) to get the file played on that server.
Thanks yms, the tag worked. I put a routine that writes the tag's HTML to a div at run time and put it in a timer.
sounddiv.InnerHtml = "<audio preload=\"auto\" autoplay=\"autoplay\">" +
"<source src=\"" + soundPath + "\" type=\"audio/wav\" />" +
" Your browser does not support the audio tag. </audio>";
This code is called in the code behind in a timer in response to the condition.
So the sound repeats every 30 seconds. Problem solved. Thanks guys for the leads.