Apparently I used the totally wrong keywords while googling because Im looking for solutions on how to embed videos in my webpage and still make "impossible" (i.e. make it hard) to download these directly as a mp4 file. I mean there are various players where you'll quite easily find out the original file on the webserver directly within the browser...
And on the opposite there are pages like youtube where you cannot really find out the full file but you'd have to use third party solutions to download the files.
Do you know any libraries / modules which support embedding in such a way like youtube?
Thanks
It really is not that hard to download/capture the file if you are making it available to stream to a device, even for YouTube videos, so you have to consider what your goals are.
Most content protection systems, or Digital Rights Management systems, don't really attempt to stop someone capturing the file. Rather they try to ensure that the captured file is of no use by having it encrypted so it cannot play back.
The tricky part then moves to securely sharing the decryption key with authorised users in a way that neither they nor a third party can view or share the key. This is the essence of nearly all common DRM systems.
If you do want to use DRM but don't want to pay for a full DRM solution then you could use clear key encryption with MPEG-DASH streaming. This essentially transmits the key with the stream so it not very secure, but it may meet your needs. There is some info on using it with a cloud encoding service here:
https://bitmovin.com/tutorials/mpeg-cenc-clearkey-drm-encryption/
Related
I am trying to build a web application which will need to have audio streaming functionality implemented in some way. Just to give you guys some context: It is designed to be a purely auditive experience/game/idkhowtocallit with lots of different sound assets varying in length and thus file size. The sound assets to be provided will consist of ambient sounds, spoken bits of conversation, but also long music sets (up to a couple of hours). Why I think I won't be able to just host these audio files on some server or CDN and serve them from there is, because the sound assets will need to be fetched and played dynamically (depending on user interaction) and as instantly as possible.
Most importantly, consuming larger files (like the music sets and long ambient loops) as a whole doesn't seem to be client-friendly at all to me (used data consumption on mobile networks and client-side memory usage).
Also, without any buffering or streaming mechanism, the client won't be able to start playing these files before they are downloaded completely, right? Which would add the issue of high latencies.
I've tried to do some online research on how to properly implement a good infrastructure to stream bigger audio files to clients on the server side and found HLS and MPEG-DASH. I have some experience with consuming HLS players with web players and if I understand it correctly, I would use some sort of one-time transformation process (on or after file upload) to split up the files into chunks and create the playlist and then just serve these files via HTTP. From what I understand the process should be more or less the same for MPEG-DASH. My issue with these two techniques is that I couldn't really find any documentation on how to implement JavaScript/TypeScript clients (particularly using the Web Audio API) without reinventing the wheel. My best guess would be to use something like hls.js and bind the HLS streams to freshly created audio elements and use these elements to create AudioSources in my Web Audio Graph. How far off am I? I'm trying to get at least an idea of a best practice.
To sum up what I would really appreciate to get some clarity about:
Would HLS or MPEG-DASH really be the way to go or am I missing a more basic chunked file streaming mechanism with good libraries?
How - theoretically - would I go about limiting the amount of chunks downloaded in advance on the client side to save client-side resources, which is one of my biggest concerns?
I was looking into hosting services as well, but figured that most of them are specialized in hosting podcasts (fewer but very large files). Has anyone an opinion about whether I could use these services to host and stream possibly 1000s of files with sizes ranging from very small to rather large?
Thank you so much in advance to everyone who will be bothered with helping me out. Really appreciate it.
Why I think I won't be able to just host these audio files on some server or CDN and serve them from there is, because the sound assets will need to be fetched and played dynamically (depending on user interaction) and as instantly as possible.
Your long running ambient sounds can stream, using a normal HTMLAudioElement. When you play them, there may be a little lag time before they start since they have to begin streaming, but note that the browser will generally prefetch the metadata and maybe even the beginning of the media data.
For short sounds where latency is critical (like one-shot user interaction sound effects), load those into buffers with the Web Audio API for playback. You won't be able to stream them, but they'll play as instantly as you can get.
Most importantly, consuming larger files (like the music sets and long ambient loops) as a whole doesn't seem to be client-friendly at all to me (used data consumption on mobile networks and client-side memory usage).
If you want to play the audio, you naturally have to download that audio. You can't play something you haven't loaded in some way. If you use an audio element, you won't be downloading much more than what is being played. And, that downloading is mostly going to occur on-demand.
Also, without any buffering or streaming mechanism, the client won't be able to start playing these files before they are downloaded completely, right? Which would add the issue of high latencies.
If you use an audio element, the browser takes care of all the buffering and what not for you. You don't have to worry about it.
I've tried to do some online research on how to properly implement a good infrastructure to stream bigger audio files to clients on the server side and found HLS and MPEG-DASH.
If you're only streaming a single bitrate (which for audio is usually fine) and you're not streaming live content, then there's no point to HLS or DASH here.
Would HLS or MPEG-DASH really be the way to go or am I missing a more basic chunked file streaming mechanism with good libraries?
The browser will make ranged HTTP requests to get the data it needs out of the regular static media file. You don't need to do anything special to stream it. Just make sure your server is configured to handle ranged requests... most any should be able to do this right out of the box.
How - theoretically - would I go about limiting the amount of chunks downloaded in advance on the client side to save client-side resources, which is one of my biggest concerns?
The browser does this for you if you use an audio element. Additionally, data saving settings and the detected connectivity speed may impact whether or not the browser pre-fetches. The point is, you don't have to worry about this. You'll only be using what you need.
Just make sure you're compressing your media as efficiently as you can for the required audio quality. Use a good codec like Opus or AAC.
I was looking into hosting services as well, but figured that most of them are specialized in hosting podcasts (fewer but very large files). Has anyone an opinion about whether I could use these services to host and stream possibly 1000s of files with sizes ranging from very small to rather large?
Most any regular HTTP CDN will work just fine.
One final note for you... beware of iOS and Safari. Thanks to Apple's restrictive policies, all browsers under iOS are effectively Safari. Safari is incapable of playing more than one audio element at a time. If you use the Web Audio API you have more flexibility, but the Web Audio API has no real provision for streaming. You can use a media element source node, but this breaks lock screen metadata and outright doesn't work on some older versions of iOS. TL;DR; Safari is all but useless for audio on the web, and Apple's business practices have broken any alternatives.
I'm trying to add a few videos to my website using HTML5. My videos are all 1080, but I want to give people the option to watch in a lower quality if needed. Can I do this without having to upload multiple videos (1 for each quality) without the usage of a server-side language?
I've been extensively searching for this. Haven't find anyone say that it can't be done, but no one said it can either. I am using Blogger as my host, which is why I am can't use server-side languages.
Thank you.
without the usage of a server-side language?
Yes, of course. The client can choose what version of the video to download.
Can I do this without having to upload multiple videos (1 for each quality)
Not practically, no. You need to transcode that video and upload those different versions.
Haven't find anyone say that it can't be done
A couple things to consider... first is that a video file can contain many streams. I don't know what your aversion is to multiple files, but yes it is possible to have several bitrates of video in a single container. A single MP4, for example, could easily contain a 768 kbps video, a 2 Mbps video, and an 8 Mbps video, while having a single 256 kbps audio track.
To play such a file, a client (implemented with Media Source Extensions and the Fetch API) would need to know how to parse the container and make ranged requests for specific chunks out of the file. To my knowledge, no such client exists as there's little point to it when you can simply use DASH and/or HLS. The browser certainly doesn't do this work for you.
Some video codecs, like H.264, support the concept of scaling. The idea here is that rather than having multiple encodings, there's just one where additional data enhances the previous video that was sent. There is significant overhead with this mechanism, and even more work you'd have to do. Not only does your code now need to understand the container, but now it has to handle the codec in use as well... and it needs to do it efficiently.
To summarize, is it possible to use one file? Technically, yes. Is there any benefit? None. Is there anything off-the-shelf for this? No.
Edit: I see now your comment that the issue is one of storage space. You should really put that information in your question so you can get a useful answer.
It's common for YouTube and others to transcode things ahead of time. This is particularly useful for videos that get a ton of traffic, as the segments can be stored on the CDN, with nodes closer to the clients. Yes, it's also possible to transcode on-demand as well. You need fast hardware for this.
No.
I can't fathom how this could ever be possible. Do you have an angle in mind?
Clients can either download all or part(s) of a file. But to do this you would have to somehow download only select pixels of each frame. Even if you had knowledge of which byte-ranges of each frame were which pixels, the overhead involved in requesting each byte-range would be greater than the size of the full 1080p video.
What is your aversion to hosting multiple qualities? Is it about storage space, or complexity/time of conversion?
I would like to implement video recording/playback/storage capability for my website. I'm done a bit of research, for HTML5 recording, there is RecordRTC which is based on WebRTC. For playback there's video.js. I want to be able to store them on s3 but I haven't figured out how.
1) Is this the best way to do it without paying for cloud based commercial ones such as ziggeo, nimbb and pipe?
2) are there any alternatives that i should look into?
3) how does storage work after recording using RecordRTC and uploading to s3? Do i need to do any sort of compression?
Any help would be great! Really appreciate it
Video recording is the future of all websites in our eyes - and by our I mean here at Ziggeo (full disclosure, I work at Ziggeo :) ).
In regards to recording there are many ways to do it and it is up to you to go with a specific one or implement all of them, so you could do it through Flash, WebRTC (https://webrtc.org/), or ORTC (https://ortc.org/).
We are currently offering you to record using WebRTC plus fallback with Flash and are working on implementing ORTC as well.
Now as mentioned above, there are many ways to do it and it is up to you, however it is up to your end users also since they might not be able to record over flash due to company policy or your website is on HTTP so you can not use WebRTC, etc.
With your own implementation you need to run the numbers and combine it all together (and work on keeping it up and running), while here at Ziggeo we do that for you and keep improving our SDKs and features.
Further more we also allow you to push the videos to S3 buckets, FTP, YouTube and Facebook - soon to DropBox as well.
So if you are like us, you will probably like to go down the road of do it yourself. If you however want to have time to work on your website, apps, and other things and just have the video, I do suggest using some service.
In regards to compression. It is good to mention that we do transcoding of all videos that are uploaded to our servers (You can see more here: https://ziggeo.com/features/transcoding). There is an original video that is kept and next to it the transcoded video (which can have watermark or some effects, etc. while it does not need to).
In general you want to 'standardize' the uploaded videos since different browsers will give you different video data containers and this would give you the upper hand so that it is easier to make adjustments to them later on for preview depending on the browser that is used.
To summarize:
1) - This depends on what kind of recording/playback and storage you need. If it is professional then using a service such as Ziggeo will help you focus on the important part of your service - like website design, functionality and similar, while if it is for fun and play you still have a free plan on Ziggeo, or you could get your sleeves up and do some codding :)
2) - I would personally look into WebRTC and ORTC if I was making implementation myself to see which one I would need more (or would be easier for me to implement). Once you find the one that you like, they usually offer some suggestions on their forums with what works best for them. (Be prepared however to need flash implementation at some point as well if it is business related setup)
3) It is best to standardize what you store in terms of resolution, video data containers and similar and often it is good to keep the original videos as well, so that you can always re-encode them if that is needed (which can happen in early stages of development).
I am newbie in using Streaming Server. we are evaluating EvoStream Media Server to stream HLS stream with AES128 encryption.
I have few queries on AES 128. I have search through google but no luck
When doing HLS with VOD(Video on Demand) , Evostream creates chunks of segments along with m3u8 index file that contains all information including key and IV vectors.
#EXT-X-KEY:METHOD=AES-128,URI="2015-06-25T11-20-18.key",IV=0x0360f11b211ef025d7f72c41d58e0a2d
My question if when i play this file in html5 media player and debug it using F12, i can easily get the key and IV used to encrypt the file. Then what is kind of security AES provide if anyone can get those key and IV vector to decrypt the data.
Please any one have some knowledge over it, please share ...
The key seems to be in yet another file:
URI="2015-06-25T11-20-18.key"
2015-06-25T11-20-18.key is only a reference to the key, not the key itself.
So you need to control access to the file and only make it available to persons that are allowed to play the video.
The answer to your question is that HLS with AES-128 provides transport security making it difficult for someone to capture your content in a man-in-the-middle scenario. It doesn't provide DRM.
You are supposed to change the keys every 3-4 hours and the IV every 50 Mb of data and serve the keys over HTTPS and not plain HTTP.
See Serving Key Files Securely Over HTTPS on the Apple Developer site.
The first thing, that you have to keep in mind when dealing with content protection, is the fact that there is no perfect solution. There is no solution to guarantee you that only the audiences that you intended will be able to watch the video. All the protection schemes make it harder for the others to steal it but not impossible. Here are some of your options:
AES-128 encryption - you have to take special care to protect the key. Once the key "leaks" then anyone will be able to decode the video with some effort. The advantage is that's this method is simple and supported by the multitude of players.
SAMPLE-AES encryption - again you have to take care of the key. But even if it "leaks" one would need a specialized software to decode the video as it's not trivial. The disadvantage is that not all players support this method.
use DRM - DRM solutions are very expensive and require effort for integration and specialized players. But they provide the most protection.
There is no silver bullet. It depends on you needs and the level of protection you need. Don't forget that after all even the most advanced encryption scheme is not protected against simple things like screen capturing for example.
In normal case or a general use case
1. You can continue to use AES-128 as the encryption mechanism
2. Use HTTPS to provide the transport security.
3. Use token/cookie to authorize the user
(The cookie/token should be sent to the key server and the key server validates it before delivering the key)
Above 3 steps provide you the content protection, transport protection and to authorize users.
To answer your second question,
Authorized users with right tokens will be able to download the contents and keys to decrypt it. (There are plenty of tools to do it) you need a custom client to avoid that and html5 supported browsers cannot stop that.
I'm developing a Chrome Packaged App with video playback feature.
First of all, I want to allow the user to stream online media (e.g. MP4 video), and at the same time, saving the video to a location chosen by the user. Is there a way to achieve so?
Also, I want to save the locations of media played by the user, and allow the user to play it later without locating it again. Do anyone have some ideas on that?
Thank you guys very much.
You should be able to do what you want. Your best bet currently is to use the chrome.fileSytem API, which lets you save files to a location chosen by the user. You can also use retainEntry and restoreEntry to allow you to play the files back in later sessions, however I don't believe that is not available in stable channel yet (it is currently restricted to the dev channel, but should be available for general use in version 31).
Also check out the chrome.mediaGalleries API. It is designed to provide access to media, however it doesn't provide the write capabilities you need yet.
Streaming can be done using HTML5 Video tag.
Please check :
http://html5doctor.com/the-video-element/
Also, you can use plugins like :
http://www.videojs.com/