I have two iframe elements loaded with each their document, both of the same origin domain.
The document loaded in the first frame obtains some media stream (using getUserMedia) and will attach the stream to a player.
The document loaded in the second frame also has a player and I want to re-use the same media stream for this player as well.
Searching for a solution I came across the RTCPeerConnection class article at Mozilla Developer Network and then some examples of using it.
But it looks really heavy for a simple use case like mine. I just want to share the stream between two frames in the same browser and on the same computer.
Is what I have found the only way to achieve this?
If so is there any way to improve the performance (less CPU usage)?
Or is there another way to achieve the above mentioned use case?
I can't quote a relevant Web standard publication at the moment, to assert the behaviour I am about to describe is "standardised", but I have empirically verified it (playing back of a media stream in another frame) is trivial to accomplish with Google Chrome, Microsoft Edge or Mozilla Firefox, if the frames/documents share the same origin.
Being how these are the most popular user agents, especially for applications that depend on the MediaStream class, their capability should suffice for your application, I presume.
The crux of the solution is that the aforementioned user agents do not distinguish between frames of the same origin with regard to playing back a media stream.
Meaning that yes, if you can use the following code in your application, assuming player refers to some HTMLMediaElement and media_source to some MediaStream object:
player.srcObject = media_stream;
...then the code will work "from another frame" as well (provided that other frame is of the same origin, of course).
There is no special case that you have to address. To play back the same media stream in multiple documents/frames, you can (and should, methodically) be assigning the same media stream object to the srcObject property of some media element that is part of any one of the documents, as long as the documents share the same origin.
The performance should arguably be optimal, since the media stream is one and the same and is thus "shared" by all media playback elements. You are not duplicating the stream, after all.
I am certain the proposed solution becomes invalid when you attempt to play back a media stream created in context of one origin, with a media playback element that is associated with another origin. You may be able to duplicate the media stream by copying its data segments, blob by blob or source buffer by source buffer, perhaps, using message passing that assumes both frames cooperate on either end of the communication channel (through postMessage), but that will definitely not be performance optimal, I'd imagine, if at all possible.
Related
I was wondering how streaming service providers like Netflix, Hulu, Sling.. et identify my device when I login using web Browser on my labtop.
I couldn't find any Javascript APIs to get a GUID or so.
You can use the fingerprintJS2 library for your project too.
https://fingerprintjs.com/
How this library gets fingerprints
Fingerprint.js collects all the unique features from a device/browser passing them through a hash function to provide a unique identifier.
Example
There are many other ways to get unique browser fingerprint.
The newest method to obtain browser information is called “Canvas Fingerprinting.” Simply put, websites are written in HTML5 code, and inside that code, there is a little piece of code that takes your browser’s fingerprint.
So, how are websites doing that, exactly? Let me explain.
This new tracking method that websites employ to obtain your browser fingerprint is enabled by new coding features in HTML5.
HTML5 is the coding language used to build websites. It’s the core fundamentals of every website. Within the HTML5 coding language, there’s an element which is called “canvas.”
Originally, the HTML element was used to draw graphics on a web page.
Wikipedia provides the following explanation on how exploiting the HTML5 canvas element generates browser fingerprinting:
“When a user visits a page, the fingerprinting script first draws text with the font and size of its choice and adds background colors. Next, the script calls Canvas API’s ToDataURL method to get the canvas pixel data in dataURL format, which is basically a Base64 encoded representation of the binary pixel data. Finally, the script takes the hash of the text-encoded pixel data, which serves as the fingerprint."
In plain English, what this means is that the HTML5 canvas element generates certain data, such as the font size and active background color settings of the visitor’s browser, on a website. This information serves as the unique fingerprint of every visitor.
In contrast to how cookies work, canvas fingerprinting doesn’t load anything onto your computer, so you won’t be able to delete any data, since it’s not stored on your computer or device, but elsewhere.
Source and further reading: https://pixelprivacy.com/resources/browser-fingerprinting/
https://multilogin.com/everything-you-need-to-know-about-canvas-fingerprinting/
By the way you can get much more information from Googling yourself.
I am using fingerprintjs.library for creating a browser fingerprint it works well with all device but when i test fingerprint in exact configuration device like laptop with exact configuration it generate same fingerprint.
Before implementation i read many blogs says canvas fingerprint generate unique base64 string but when i tested in device with same configuration it generate same canvas fingerprint. The canvas fingerprint is not unique in exact or similar device.
While using fingerprint.Js libary, i made some option disable like plugins, enumerate device, browser version because this are dynamic in nature on adding headphone in device fingerprint will read headphone information or generate fingerprint accordingly or same with browser version. fingerprint will vary if any of this thing change in future.
My requirement was to create a unique & constant fingerprint that donot change even after opening browser after somedays.
I suggest using localStorage and store a unique white-listed ID that gets verified on every login attempt.
localStorage.setItem('laazaz_id', '4587ff526d');
localStorage.getItem('laazaz_id'); //returns 4587ff526d
docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
I am writing a webinar platform and using MediaRecorder on the presenter’s speaker client and Media Source Extensions on the listener client. The initial byte segment contains all the information about the video, and the subsequent ones contain only the timestamp (https://www.w3.org/TR/media-source/#init-segment). I ensured that the video was sent without failures from the first client to the second client. But when I refresh the page on the listener's client, the media stream immediately stops, because no start segment. Can someone tell me how to solve this problem?
You need to segment the stream yourself.
If you're using WebM, just keep everything up to the start of the first Cluster and treat this as the initialization segment. Then, you can pick up anywhere in the stream at the beginning of a cluster that has a keyframe.
Unfortunately for you, you don't get to tell the browser where to insert keyframes when you're recording with MediaRecorder. So, you'll either have to determine which clusters have keyframes yourself, or do some server-side transcoding. The latter was likely required anyway, unless you were planning to serve the same bitrate/encoding to all clients.
I have an web page where users can view videos.
But the problem is when I inspect the page, it shows the video url.
So is there any idea how we can hide video source like youtube and other videos portal ?
There is no way to hide the video URL entirely without resorting to browser plugins. You can obscure it though, but in most cases they won't be worth it.
Using Media Source Extensions you can deliver segments of video data using obscured urls. And the URL won't be immediately visible in the source of the page. This is similar to what Youtube or Netflix does but requires massive engineering work on the backend. This is also the technique used to play MEPG-DASH with e.g. dash.js or shaka-player.
Set it using Javascript, so it's not viewable with view source, it won't help with inspecting though.
If your issue is people copying the stream URL and using it in their own players, then you might look at protecting it with some sort of tokens security. This is supported by almost any CDN out there, and there are plenty of open source systems to do it in most programming languages.
Lastly, if the issue is that you don't want anyone to copy the content, you can apply DRM protection. One of the easiest and straightforward ways to get started with that, might be using Azure Media Services.
It has been a long time for people trying to download videos from those sites not allowing them to do, and now they are using the HTML5 element with blob: URL created from MediaSource. Anyway whatever the source is, the video is buffered
and played in the browser so the data must be somewhere.
There are solutions like https://superuser.com/questions/1033563/how-to-download-video-with-blob-url, which is kind of useful for those sites not strictly protected, not working in the extreme case.
So here let's assume that all scripts are strictly obfuscated with network transmission encrypted, and how should we extract the data buffered to be displayed.
Solutions are not limited, except from reimplementing a browser myself.
Edit
The scenario seem like Youtube a lot, but it is impossible to trace anything through the heavily obfuscated script neither the encrypted network transmission.
I have been searching for something in chrome extension reference to find anything that would allow me to manipulate audio level of a tab. Only option that has come to my mind is make script have it go through all elements in page and either remove them or mute them if possible.
But i feel there has to be a way to reroute all audio streams to nothing, like break them from output which is speakers if using audio api of html5...however no avail either with chrome extension apis or web audio api.
Goal: mute all sounds on page (flash, audio element, etc.)
You cannot do this now, although this will hopefully change in the near-term future.
At the moment, there is nothing in the Chrome APIs, although I did propose a tabaudio API back in February (and am working on a new draft -- as well as an implementation -- right now.)
Can you give me an idea as to what you want this functionality for? (They ask for potential uses when proposing APIs.)
Perhaps the closest that you can do is something similar to what the MuteTab Chrome extension does (written by me, http://www.github.com/jaredsohn/mutetab), which basically scans the page for object, embed, audio, video, and applet tags and hides them from the page. Unfortunately, this misses web audio. Also, instead of muting, it "stops" it by removing it from the page, which could block the video or game associated with the sound. Alternatively, if you just care about HTML5 video or audio or Flash that has an API (such as YouTube), you could could use JavaScript to pause or mute things.
There's now a Chrome extension allowing to mute websites by URL using blacklist/whitelist approach called "Mute Tabs by URL".
It does require you to allow it to read your 'browsing history', but description swears that it doesn't store your URLs anywhere, and event points to a location of source code, so you can verify it for yourself