Setup: I'm working on a video upload tool. I use a 3rd party javascript library that loads content from a users various storage locations (Hard Drive, Dropbox, Facebook, etc )
The library pushes the videos to our S3 bucket and returns the url of the uploaded file.
Goal: I would like to get the metadata (Height / Width / Duration / Etc) about the video without having to load the entire video binary.
Context: I use a service that handles video transcoding, and eventually posts the transcoded metadata to one of our backend servers. The transcoding can take a few minutes.
I need to get the temporary metadata of the uploaded file, but i don't want to load the full video.
Setting preload="metadata" on an HTML video tag means the browser is supposed to fetch metadata but not the whole stream. It's only considered a hint, i.e., browsers are not required to follow it, but you could try it and see if it works on the browsers you need to support. What it should do, I believe, is fetch just the first part of the video file, so it can read the header.
If that doesn't work, you probably need to implement a separate Ajax call to fetch the metadata. Hopefully your transcoding service gives you the metadata in a way that you can access it server-side. Otherwise you might need to extract it yourself, on the server. For example, you could use the ffmpeg library (or spawn an ffmpeg command line process) to parse out the metadata.
Related
I want to achieve the following, but it remains unclear if this is possible.
The current scenario:
Someone is streaming a video with audio through
OBS to a media server, clients connect through a website.
[OBS Stream/Video Stream] -> [AWS/External Streaming Service] -> Clients
The wanted scenario:
capture this stream through a custom media server
and manipulate it by injecting certain metadata at certain moments
during the livestream. Note the importance of live.
[OBS Stream/Video Stream] -> [My Custom Node.js Server to insert metadata] -> [AWS/External Streaming Service] -> Clients
The idea:
The idea is that I want to synchronize the stream to some popup for example. The default protocol stream seems to be RTMP from OBS, but maybe this can be changed. At a given time during the livestream, an html5 videoplayer on the website can read these tags from the livestream (through some additional library such as video.js) and tell the JS application to show some text. In the end, it boils down to synchronizing the video stream to a text stream (eg from a websocket connection)
Potential solutions:
ID3 tags. I read about ID3 tags in MP3 files, but this does not seem to be what i'm looking as it needs a complete .mp3 file upfront and is not used for streams (Dynamically Inject ID3 in FFMPEG Live Stream). What I want is to dynamically inject metadata into this stream. For example, inject an id at any time (dynamically chosen) which references to a database for example should suffice.
LTC/Linear Time Code/SMPTE is this possible to embed that in a video stream somehow with node.js? that would enable me to match timings with an id on the client.
Is this possible to do given an incoming video stream with audio? and if so, what is the format of the stream and how do I inject metadata?
EDIT: it seems RTMP is not supported without flash in the browser. This is a no-go so I will need to use another stream format such as HLS/FLV?
Sounds like using something like Liquidsoap as your streaming server would do the trick for inserting the metadata into the stream. Plenty of options for manipulating metadata for you to explore.
As for client side decoding you could perhaps use a javascript readable stream within a service worker to split the server output into metadata/video and process as you see fit.
I did a similar thing for processing inband metadata on an infinite mp3 stream which might give you some ideas on where to start. You can find the code for that here
I am in developer mode in the .region file trying to add a background video with the video tag. I put the mp4 file into the template folder and I have been trying to access it through src="video.mp4" and display the video. It doesn't display the video and I am not sure why I can't grab it. When i change the source to any http// video online it works so its not the code. It only doesn't display the video when I try grabbing it from the local folder. Any leads or help would be appreciated. Thank you!
Files that are directly located in the /template folder are not intended to be accessible via http. Instead, put the file within /template/assets and then reference the file as /assets/video.mp4.
If that doesn't help, ensure that the file is even accessible via http by entering http://yoursite.squarespace.com/assets/video.mp4 in the address bar (using your site's correct URL). If you can access the video file, then it will work as a src attribute of a video element. If you cannot access it, then something else is going on: either you haven't uploaded the file or the file name is incorrect.
Another tip: if using the full URL for a file (as opposed to the relative URL), try using https for the protocol in place of http. The correct protocol depends on your site's settings, of course, and whether you are using your built-in or custom domain.
If using the local development server via Node.js (as opposed to the live server, that is, your actual Squarespace site), try pushing/uploading the files to the live server on Squarespace (via Git or SFTP) and then retesting locally. I've found that sometimes this may be required due to caching in the local environment. This will also reveal whether the file you are uploading is too large (the documentation does claim a 1MB limit which may be true, though it may be as large as 5MB or 20MB if the docs are out of date; I cannot recall whether this has changed).
If the file is too large for the /assets folder, then your only other option besides hosting it via a different service entirely is to use the file storage via the Squarespace Config UI, which allows up to 20MB, and referencing your video via that path. You'd have to get the video down to 20MB by shortening, scaling or further compressing it.
If hosting the file via a different service, Cloudinary may be worth considering; a free account may allow up to a 100MB video file and enough bandwidth (assuming your website's traffic is relatively low).
I am currently experimenting with the google-castable-video component of the Google Web Components of the Polymer library. So far no larger issues. But when I try to stream a video, which has a blob-url as source, the stream on the Chromecast starts buffering, but immediatly stops without showing a frame.
Now i am asking myself, if it is even possible to use an url like blob:http%3A//127.0.0.1%3A8889/fd3e3425-f5ea-48f1-a380-5febf0f071ad with the Chromecast-SDK. If not, are there any alternative ways to load a local video and stream that with this Web-Component? (Excluding existing tools like Videostream, etc.)
Any help appreciated.
The URL you have provided is pointing to the local loopback so when chromecast receives that, it tries to load that from its own local device and clearly that is not what you want. If you want to serve local content from your sender side, you need to embed a local web server in your sender and serve content using that web server; you can search on StackOverflow for prior posts on serving local content to chromecast.
I've been trying figure out how to get mp3 files in an Amazon S3 bucket paired with Cloudfront to allow me to stream the files directly on my site but not allow anyone to take the source URL of the mp3s by viewing the source code of the page and then sharing or leeching the link.
Right now, I am using an html5 mp3 playlist from mediaelements.js and the mp3 file is always in the source code. That's fine, but I want to only allow the mp3 to play on my specific website and if the link gets copied from the source and accessed in a different browser it should show an access restricted error.
I tired to update the cloudfront policy to expire within 30 seconds of the page load, but that will ultimately prevent the files from playing once the 30 seconds is over and if the user didn't play one of the tracks prior to that expiration.
Is there another way to do this without putting a time expiration on the cloudfront links?
I think this is what you are looking for: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-signed-urls-overview.html
Basically you can vend URLs dynamically from your service, and CloudFront will validate signature. You can also set pretty short expiration time to avoid wide distribution of your URL, and restrict IP addresses that might access URL (see Custom Policies section in the referenced document).
It's possible with just few line wizard coding on back-end (private method) ,i prefer to using free tier EC2 instance and configure environment for handle streamable contents for deliver everything clear this way provide a restrict page to someone going to leech or using IDM for donwload your mp3 files.
Example : Grooveshark.com
However still there is some another methods like Owain answer .
Unfortunately, you can't. MediaElements.js may be hosted on your site, but it's being run on the user's computer. So although it looks like they are playing an MP3 via your site, they are actually just downloading a URL from your site and playing it using code running on their computer.
You could write server-side code that went off to S3 and retrieved the MP3 before returning it as if it were a file hosted on your server, but that still wouldn't limit people from copying that link, unless some sort of session were used before returning the file to ensure they're logged in via your site.
But that would mean you can't make use of CloudFront. That's the compromise. Distribute your MP3 via a CDN and improve download performance by hosting the file in an edge location closer to your users, or take advantage of server-side security to ensure your IP isn't hosted by unscrupulous third parties.
Using the Phonegap media API, it is possible to play back external files hosted on a web server.
Once that file has been played, I wonder if it is possible to save it locally, so that the next time I listen to it, I can get it from a local path rather than from a URL? This is what I mean by "offlining".
However, there is no save() method in the media API. Is the file stored in a cache so that I can pick it up using the file API (provided I knew the path)?
I suppose one solution could be to download the file and then play it, but I don't want to keep the user waiting for the download to finish. I want to start playing the media file a s a p. Is it possible to start playback before the file has downloaded completely, using progressive download, for example?