I'm getting ready to start an HTML5 web app and I would love it to allow my users to be able to share their desktop to an audience.
Imagine I have a ppt, I want to broadcast my powerpoint presentation to 3 to 5 viewers, in remote locations. I am navigating the powerpoint slides with audio, and they are watching it.
How can I make this work?
1) I guess I can manually upload my powerpoint deck to the HTML5 client in my browser, and convert that into some format, send it to the server and then to the clients and navigate it, outside of powerpoint. But then I can't support excel, or whatever else is on my desktop.
2) Do I need a client application that somehow streams / pushes my desktop viewport into the browser? Is this even possible?
3) Other methods / ideas?
I understand why security restrictions would prevent this from happening in the open web. But imagine an intranet, business use case.
Related
Data passed to my physical monitors is separate from the data passed to screen captures. I am sure of this, because if I run a screen capture while playing a movie on chrome (but not Firefox!), most popular services will just show a black screen. This implies that visual data passed from a browser to your desktop is separate from the data going from your desktop to a screen capture application. But how? What are they doing to keep these separate? How does my OS know which data from the browser is fine to show to the screen capture program and which is not?
Another example of this phenomena is when certain less-than-ethical streamers use video game cheats that will show hidden player locations on their monitor's screen, but not to their audience on a live-stream.
When you play video using DRM and encryption, the decryption of that video isn't capturable via usual methods. In fact, if done correctly that video will be encrypted all the way up to the monitor via HDCP. Reality is that the whole stack of components used for DRM is unreliable, so it's more common you'll just get lower quality video if your system cannot ensure encryption.
Some resources:
DRM and HDCP
Encrypted Media Extensions API
Working on a project that will need browser / device cross compatible audio recording (video is not required, but may utilise camera audio inputs). Thinking some kind of HTML5 and flash fallback (for idevices / IE / old browsers etc).
The HTML5 demos I have found dont seem to work. Can confirm my mic works in my OS
http://webaudiodemos.appspot.com/AudioRecorder/index.html (doesnt seem to pickup audio, however saving file works but it just plays no sound)
http://www.html5rocks.com/en/tutorials/getusermedia/intro/ (wont even prompt me for access to mic)
Also I have found a nice flash example here (http://www.jordansthings.com/blog/?p=5) but I am not a flash dev.
Wondered if there was some kind of API / library with fallbacks, that also allowed not only capture, but posting this to a server side script for further processing. Eg user presses a button, starts speaking, presses stop, then sends that file to the server rather than daving the file to client.
So my question(s):
Is there an audio capture API / library that would handle all of this for me including fallbacks
Is it possible to send the captured audio to the server without clunky save + upload
Does anyone have some nice working examples of either html5 or flash?
It should be easy to create your own solution using the following:
https://code.google.com/p/wami-recorder/
It's a flash recorder with an javascript interface.
Check SO for examples, alternatives etc:
https://stackoverflow.com/search?q=https%3A%2F%2Fcode.google.com%2Fp%2Fwami-recorder%2F
I'm not sure why I thought the file should be handled by the browser (chrome in my case) and then do something (for chrome I think its use QuickTime to play) but instead I just get an untitled browser title, and the page doesn't actually load, as if its loading an empty html page
anyway the address is:
www.motionvideos.tv/video/1022_market_review_february_2012_taylors.mp4
Other details which may effect it:
The site uses WordPress, which is currently not functioning, due to someone's fiddling, and will be down for a day or so (stupid zeus server redirects)
The video is just under 9MB.
Possible causes?
This link is for video download.
Do you want it to show on page?
If so you need to open a HTML page to embed this in.
This is how you embed it via code:
http://www.mediacollege.com/video/format/mpeg4/streaming/example.html
For WP you`ll need to open up a post and use a dedicated plugin for embedding.
Also, you should know that :
MP4 is not a universally common codec - some users (many?) will not be able to view it
The file itself will load directly from the server, thus noticeably effecting total bandwidth usage (can reflect on site speed, hosting costs and etc)
Also not all hosters support (by default) media hosting. This got a lot to do with above mentioned bandwidth issue.
I would suggest re-coding to more common codec + using 3-rd party provider
(I.E. Flash + Youtube for one is a popular choice but you can also go with AVI + Media Hosting Provider X)
Hope this helps.
I have a jQuery Mobile website I created for a friend/client of mine. It only has 6 pages or so (2 of them are dialog windows). The site has HTML5 video with fallback for flash support via the videojs library. All videos are encoded properly in mp4, ogv (theora), and webm and so far play on every device I have used.
My problem lies bandwidth, the purpose of the program really needs to be an application because these are informational videos that may need to be viewed at any time, even with no web access (web access is required for first login to verify credentials).
I was left with 3 solutions, try writing native apps for all the platforms myself in their native languages, use Sencha Touch (which I am comfortable enough with extJS to do), or taking my existing jquery mobile app that is 100% functional including log-in and some backend package management to assign users a package of videos (there are multiple packages each with between 8-20 videos), and follow the jQuery Mobile tutorial for getting your app ready for PhoneGap, I believe its only enabling two settings, and both are to enable "cross-domain" requests, since my current web app would be running as localhost, it would see the scripts as external pages.
My main question/problem is for one, I have never used PhoneGap; aside from their Hello World android tutorial, and I know there are other all-in-one frameworks out there now: PhoneGap, Titanium, Corona, Adobe Flex (which I am installing while writing this tutorial, to see what it has to offer. If it has features like encoding videos automatically for the target device (video resolution changing), or even has local video playback features at all that may work.
Does anyone know which of the current frameworks have the ability to install a set of videos to the sdcard, (totaling around 6mb per install), and play them natively (by that i mean, in the devices native player, not inline inside of a webview). Which on android phones anyways, my current videojs based player plays the files natively in everything I have tried it on.
I just need a push in the right direction, if there is a PhoneGap plugin that I don't know about that allows videos to be played from the sd card, that would be terrific. Although I am not very happy with the speed of the android and blackberry webview controls. So something that uses 100% native controls would be great. I hope you guys can come up with some ideas, you can see the current app in action at m.yourvideobenefits.com email:abc#tool.com password: demo
You should view it from your phone if you want to see it properly, but if you do not have a smart phone; keep in mind that when viewing this page certain desktop browsers, the videos become their actual size after they are through loading. This is because i have autoload="true" in the video tag (which is ignored on most phones, but believe it or not, setting autoload="true" is what actually allowed the videos to not play inline on certain devices. A bug on the device, I am sure...but without this tag the videos played inline on iPhone 4 with the latest iOS version.
You could do it very easily with phonegap; you already have your web page, so it would be much less work, probably.
You could get the videos from inside your apps bundle in ios, and then it wouldn't be hard to select the one with the best resolution for the device being used. You could also download the videos at the perfect format and resolution the first time your app plays from your server using the file api. That convined with the storage api is nice for actualizations.
There's a plugin I use for android, because video tag is sometimes bugged or doesn't work at all in older versions, https://github.com/phonegap/phonegap-plugins/tree/master/Android/VideoPlayer.
It only plays from web or sdcard, but that's rarely too bad.
I can't help you with black berry, but I'm pretty sure there must be a way of doing it. And, anyway, appcelerator doesn't support it yet, so you would probably had to do it natively. Even if there isn't a plugin for black berry, you'd probably have to chose between native developement and html5 player inside phonegap. I won't give you my opinion about it here, for I'm not the one to give it and Stack Overflow says I shouln'd give it anyway.
I need to capture an image from a webcam (tethered camera, etc.) into a form or html5 canvas so that I can save the image to the server. Also, I would like to be able to preview the image live in the page.
For example, I have a browser running at a registration check in station. I would like to take a picture of the attendee currently standing in front of the table, and submit that image into the database. Then I can use that image to print the attendee's badge with their picture on it.
I'm using rails and paperclip, though I doubt that matters.
Anyone done this before, or have some ideas how to do it?
There is a plugin for jQuery entitled 'jQuery Webcam Plugin' that provides a friendly and easy way to interact with a webcam. It actually relies on a small flash component (unfortunately), but it does a great job of making the interaction easy - as well as providing functionality to copy imagery direct into an HTML5 canvas.
Again, it's unfortunate that it relies on Flash, but I think any reliable solution is going to need flash at this point in time.
The plugin is available here: http://www.xarg.org/project/jquery-webcam-plugin/
At present, if you want to interact with a web cam from a web page you need to look at using a plug in. Flash has a mature interface to web cams, so it would be my first choice of tool.
There used to be a spec for native web cam support in HTML 5, but it has been spun out into its own, independent, specification. Currently there is no browser support for it outside of experimental Opera builds.
Android >=3.0 (on plenty of tablets and one phone soon) is supposed to support this. Searching for "html media capture" and "device api" will get you a lot more information.
On the not-even-alpha bleeding edge side, there are things like webrtc and the mozilla rainbow plugin.