Screensharing over WebRTC and browser support - javascript

I am trying to build screensharing over the browser. I am trying to find the best native implementation and did some initial online research
MediaDevices.getUserMedia() - available in FF. In chrome its a little weird
WebRTC Tab Content Capture - I see its in proposal stage
Screensharing a browser tab in HTML5 - A blog explaining other methods
Researching above everything seems to be around 2012 time frame and I want to know what is the latest?
Question: Which current technologies/javascript API can i use and what is its support across browsers

Screensharing is alive and kicking in Firefox, but atm requires the user modifying about:config. See my answer to another question for how. I believe they're working on removing that obstacle.
Chrome is similar but not quite the same, and AFAIK requires the user to install an extension.
I don't believe other browsers support this natively yet.

You can save html document onto <canvas> or <foreignObject> of <svg> element, then send data URL, ArrayBuffer or Blob of <canvas> or <svg>; or alternatively, send html document as encoded string.

Related

How to add support for new "Insertable Streams" feature in current browsers?

I want to encrypt streams before sending to my media server, like here and here.
the problem is they are using very new experimental feature (Insertable Streams), I tried to find a hack to make it work in current browsers. right now the only half way that I've found is to display streams in a canvas and capture altered streams from that canvas here, but I don't know how to do it and whether it's a right approach or not?
You can enable the API in Chrome for users of your site using a Chrome origin trial. Origin trials are intended for experimentation. More info about origin trials in general can be found here.

How to modify the content of WebRTC MediaStream video track?

I use WebRTC in a scenario in which the client video stream is recorded on a third-party server https://tokbox.com/. I would like to put some kind of watermark in the recorded video.
Investigation brought me to this page http://w3c.github.io/webrtc-pc/#mediastreamtrack and it seems that it is technically possible since it says that:
A MediaStream acquired using getUserMedia() is, by default, accessible to an application. This means that the application is able to access the contents of tracks, modify their content, and send that media to any peer it chooses.
This is exactly what I need, but I didn't find any examples or explanation of this function. I'd like to get some advice from WebRTC experts.
You need to use a canvas to route the video from getUserMedia to, modify it there, and then use canvas.captureStream() to turn it back into a MediaStream. This is great - except that canvas.captureStream(), while agreed to in the WG hasn't actually been included in the spec yet. (There's a pull request with the proposed verbiage that Mozilla wrote.)
As far as implementations: the initial implementation of captureStream() just landed in Firefox Nightly (41), and it's still behind a pref until a bug or two is fixed. You can enable it with canvas.capturestream.enabled in about:config. You can see a demo at Mozilla's test page for captureStream().
Doing it without canvas.captureStream() would be tough; you're best way would be to do getUserMedia->canvas-> and then use video.captureStream() (or captureStreamUntilEnded()) - however, video.captureStream is also waiting for formal acceptance. Mozilla has had video.captureStream() for some time, however, and I think it works in FF 38 (current release).

Javascript Audio Editor

Im trying to develop an javascript based audio editor. It should be possible to record, play and edit an audio file with. Its especially important to visualize the recording audio (realtime) and the selected/uploaded audio file (both of them).
I red alot about the Web-Audio-API and saw a few examples as well, but there are some problems - it only works in chrome/safari so far, it should be run on firefox as well, but it doesnt. So what Im looking for is an crossbrowser API or javascript/jquery libary which provides the called features.
Here are some examples to show u what I mean:
http://plucked.de/ (great tool, but there are many bugs as well)
http://www.stud.fit.vutbr.cz/~xmyler00/audiee/ (as u can see web audio API doesnt work on firefox)
The Web-Audio-API is a fairly new standard and is steadily being adopted by the major browsers with varying levels of support. Currently Chrome and Safari have the best support and Firefox support is in it's draft stage. For the sort of application, with cross browser support, that you're wanting you will need to go to third party plugins/extensions/addons for the support you're after.
Welcome to the bleeding edge. :)

Disable HTML5 in WebView without disabling Javascript

For diagnostic purposes, I need to be able to disable HTML5 in Android's WebView, without disabling Javascript (i.e. keep WebSettings.setJavaScriptEnabled(true);)
To further clarify: I love the ability to play YouTube videos without any Flash plugin installed. It even works with setPluginsEnabled(false). I can do this thanks to WebView's HTML5 built-in support. Now, to test a certain function, I need to trigger DownloadListener.onDownloadStart() with a YouTube video without disabling Javascript.
Is this possible?
Update: Since I posted this question I discovered that at least DOM storage can be disabled. I haven't found a way to disable HTML5 video yet.
I know it's very old question... Still, you may want to check this answer for an idea. The WebSettings class has these methods for enabling/disabling HTML5 features:
setDomStorageEnabled(boolean flag) - Sets whether the DOM storage API is enabled.
setDatabaseEnabled(boolean flag) - Sets whether the database storage API is enabled.
setDatabasePath(String databasePath) - Sets the path to where database storage API databases should be saved.
setAppCacheMaxSize(long appCacheMaxSize) - Note: deprecated in API 18.
setAppCachePath(String appCachePath) - Sets the path to the Application Caches files.
setAppCacheEnabled(boolean flag) - Sets whether the Application Caches API should be enabled.
I am not sure that this question makes much sense. You're not going to be able to "disable" an HTML5 feature in a browser that supports it. The best you can probably do is to set a non-HTML5 doctype on the webpage, but even then most rendering engines (webkit included) will still gladly support those features (<video> tag, <canvas>, etc) that they implement.
It sounds like what you're really trying to do is test what happens with a streaming video on a particular device (with an older?.. version of webkit that doesn't support <video>). Is that right? In this case, I'm not aware of any version of Webkit that has ever been distributed with Android that does not have support for <video>, but I could be wrong.

HTML5 Local Storage of audio element source - is it possible?

I've been experimenting with the audio and local storage features of html5 of late and have run into something that has me stumped.
I'd like to be able to cache or store the source of the audio element locally to enable speedier and offline playback. The problem is I can't see how this is possible with the current implementation.
I have tried the following using WebKit:
Creating a manifest file to set up local caching but the audio file appears not to be a cacheable item maybe due to the way it is stream or something
I have also attempted to use javascript to put an audio object into local storage but the size of the mp3 makes this impossible due to memory issues (i think).
I have tried to use the data uri and base64 to use the html as a audio transport that can be cached but again the filesize makes this prohibitive. Also the audio element does not seem to like this in WebKit (works fine in mozilla)
I have tried several methods of putting the data into the local database store. Again suffering the same issues as the other cases.
I'd love to hear any other ideas anyone may have as to how I could achieve my goal of offline playback using caching/local storage in WebKit.
I've been trying to do this myself, on the iOS (for iPhone / iPad) but it refuses to cache audio files in offline, even if in Cache Manifest.
It does not error, but instead simply pretends to have played the audio element if invoked via JavaScript without a control. If it's embedded with a control, it displays an alternate control that says "Cannot play audio file.". It works fine if the application is able to go online.
It seems not to cache the audio, playing another sound resource seems to cause it to clear the previous resource from memory - this is pretty worthless functionality even when online.
I have experimented with base64 encoding the audio as data URI's. This works in Safari on the desktop (at least for fairly short samples of around 20-30k that I've been using) but seems not to be supported at all on iOS - it silently does nothing, which is highly annoying.
I don't know about other vendors - Google Chrome used to not support data URI's for audio but perhaps they fixed it... - it seems like it's not possible for now though.
Update: Minor discrepancy with iPhone OS 3.x (tested with 3.1.2): If an audio element is specified in an offline web app but it doesn't have a control, it displays a non-interactive control with a non-animated spinner on it (which it definitely shouldn't do). I assume this is fixed in iOS 4.x (which should be out next week).
So it's been a while since I asked this question and I thought i'd give some info about how we solved it. Basically we encoded the data into PNG's using a similar technique to this:
http://audioscene.org/scene-files/yury/pngencoding/sample.html
Then cached the image on the mobile device using html5 local storage and accessed it as needed. The PNG's were pretty big but this worked for us.
I spent a while trying to do this for a game I'm making, and since as far as I could tell browsers (Firefox and Chrome) still don't support caching of audio elements I thought I'd post the solution I found.
There is a workaround described here: http://dougx.net/plunder/index.php#code
I can confirm it works pretty well, but is probably better suited to smaller files. As he describes here (http://dougx.net/plunder/GameSounds.txt), you encode the audio as base64 strings, and give them a data:audio/ogg;base64 (or any compatible audio format) header, which HTML5 audio can then read in. Because this is just a string, the browser will cache it.
I guess it would be preferable to get the manifest approach working, since this feels like the most relevant mechanism for locally caching the file.
What happens if you alter the audio file's HTTP headers, e.g. Content-Type and Expires? Does the browser do something different if the file extension is changed?
I see you've had no luck so far.
You might want to take a look at JAI (JavaScript Audio Interface) ("the world's first javascript interface for web <audio>"). Or get in touch with Alastair MacDonald, who wrote it.
Failing that, the HTML5 Doctor may be able to assist.
Adding video and audio files to local storage works with iOS 4.3.
I just added a video and an audio file to manifest and they both got downloaded to offline storage on iPad.

Categories