Is it possible to capture desktop screen sharing through webRTC.. As we know that it just captures the screen on the browser tab but is it possible to capture the whole desktop screen like navigating through files on computer or opening and viewing files like pdf etc..
Currently, only "stateless" screen capturing is available in RTCWeb implementations (both chrome & firefox). E.g.
Install chrome extension and then try this demo
Above demo will simply capture screen of "any" opened application's screen. Though, such screen capturing API fails to capture screens of full-screen game applications.
More information available here:
https://developer.chrome.com/extensions/desktopCapture (HTTPs+getUserMedia+postMessage)
Regarding remote desktop sharing from a web-browser, it has a pile
more security risks associated with it compared to screen sharing. The
UI/security aspects will be tough to deal with, and the feature will
be very susceptible to social engineering -- phone call: "this is
Google/Dell/Computer-Management; we've detected your machine has a
virus on it; could you browse to and we'll assist you in
removing it" -- etc. Ref
Yes, it's possible. At least using Chrome. There are several ways of doing it, but the simplest one is:
Add this constaint when you invoke getUserMedia:
constraints.video.mandatory.chromeMediaSource = 'screen'
When starting chrome, use this argument (chrome version > 35):
--enable-usermedia-screen-capturing
You can find an example of sharing screen and recording the shared screen at a remote server repository here:
https://github.com/Kurento/kurento-tutorial-js/blob/develop/kurento-recorder-screen/static/index.js
If you try to execute that example, play close attention to the security restrictions. All signalling needs to travel using TLS. Using raw HTTP will produce chrome to refuse sharing screen.
Yes it is. I recently worked on WebRTC and was able to stream desktop easily. Following links helped me implement my requirements :
Firefox Extension : http://mozilla.github.io/webrtc-landing/
Dont forget to add your *.github.io to about:config -> getUserMedia screensharing allowed domains
Google Chrome extension : https://developer.chrome.com/extensions/samples#search
Open this in Run : Chrome.exe --enable-usermedia-screen-capturing
Other Reference : https://github.com/muaz-khan/WebRTC-Experiment
Related
I am trying to make an online examination portal. When students start the exam, their webcam will start automatically and record the stream live and store in the server. Invigilators will either watch the students live or they can watch the saved live streams later.
I researched about this and found WebRTC as a possible solution along with a gateway server like Kurento. But later found out that WebRTC is not supported in Safari, which is a setback! My application should run successfully in web portal in any modern browsers which includes safari and also in android or iphone.
So can anyone suggest a possible solution to my problem? Which technology should I use that can support all browsers and OS?
Also, it would be helpful if you can provide links to good documentation or tutorials.
Note from the future (2020): This answer really isn't accurate anymore.
WebRTC is one problem... capture from the camera with getUserMedia is another. Safari doesn't support either.
There is no video capture API in Safari currently. The only thing you can do is make a native app for iOS.
Worse yet, because of Apple's restrictive policies, alternative browsers, such as Chrome, are crippled on iOS as they aren't allowed to use their own browser engines.
Use standards based technologies like getUserMedia and WebRTC for your primary web-based application. If you decide that the economics of your situation enable it, you can make an iOS app to work alongside until Apple decides to participate in modern browser standards like everyone else.
You can use Mediadevices.getUserMedia (https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) to capture webcam stream on browser (chrome and firefox).
To play with webcam stream on safari, you would have to use a pollyfill - https://github.com/Temasys/AdapterJS
To record the video/audio stream, you can make use of Media recorder api https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder (Note : recording stream is still a challenge in Safari as there is no support/pollyfill. However, it works perfectly on Chrome and Firefox latest versions).
Helpful demonstrations :
https://webrtc.github.io/samples/
https://mozdevs.github.io/MediaRecorder-examples/index.html
https://codepen.io/collection/XjkNbN/
https://hacks.mozilla.org/2016/04/record-almost-everything-in-the-browser-with-mediarecorder/
I am Creating an MVC Application using twitter bootstrap 3. Now I need to test the responsive feature in a mobile . I know there is some add on available in Mozilla that allows us to have the same experience as in mobile through desktop, have anyone of you heard of such add on?
You could use the user-agent switcher addon.
However mobile device emulation is one of the point where the Chrome devtools are more feature rich than Firefox/Firebug.
In Chrome, you go to devtools configuration and in the Overrides tab check 'Show emulation view in console drawer'. Then back in devtools click on the show console icon, and finally go to the emulation tab. It let you choose a device, resolution and emulate touch events with the mouse.
Ctrl-Shift-M (Responsive mode) is built into Firefox and will let you work with any size of mobile screen resolution and simulate touch events with the mouse.
There are no presets for specific phones (although you can add new size presets if you want) and you won't be able to spot all differences because you'll always be rendering with Gecko. For increased accuracy you'd have to use a tool that at least emulates different rendering engines. Browserstack can be good for that but in my experience it is tediously slow.
If you are doing user agent detection then an addon to manipulate that might be useful but presumably if you're going for a responsive design you will be more concerned with media query behaviours than hacky user agent tricks.
We have an option to download PDF on our mobile website. PDF download is working in one environment, but not working in another environment in Samsung Galaxy tab.
In the environment where it is not working in the Galaxy tab, it's working absolutely fine in both iPad and Desktop. The pdf is generated and the "starting download" toast message also appears, but after that the download fails.
Has anyone faced this issue before?
OS version : 4.0.3
Browser. : Native android browser
I've looked into this a bit, and I found that it works ok when the downstream/upstream ratio of my internet connection is about 2:1, but it doesn't work when the ratio is 10:1. Based on that, I'd suggest that the Android end of the transport protocol isn't very good about adapting to highly asymmetric connections. The upstream path is used for acknowledgements, and a highly asymmetric path can interfere with the protocol - particularly when each end of the protocol is designed by different parties (and not thoroughly tested). All of your testing is consistent with this theory. And it is a known issue that transport protocols can sometimes fail to adapt adequately to asymmetric paths.
I'm developing a mobile website for iPhone, Android, etc. using jQuery Mobile. I'd like to be able to test this in my desktop browser and was wondering what the best approach is. I guess I could use a plugin to change the User-Agent header to the appropriate value and manually resize the browser to the device's width, but is there a simpler/more reliable way?
Update
Sorry, I should have mentioned that the only hardware available is a Windows laptop
Well if you have a Mac and xCode is installed you can use the Simulator. Open Mobile Safari and point to you web page on all Apple devices
You can also use the Android Emulator ( But I've not tested that it can access the web from the browser )
Alternatively you could use a plugin ( as you have suggested ).
I personally use Chrome with this plugin:
https://chrome.google.com/webstore/detail/ljfpjnehmoiabkefmnjegmpdddgcdnpo
with pretty good results.
I've used Device Anywhere before
http://www.keynotedeviceanywhere.com/
you access the device through a web portal/site and control it, but this costs $$$
Actual device testing in going to be the most reliable
related:
http://sixrevisions.com/tools/10-excellent-tools-for-testing-your-site-on-mobile-devices/ ( other suggestions )
Difference between iPhone Simulator and Android Emulator
In Chrome hit F12 to open the Developer Toolbar. Then click 'Toggle device toolbar' (tablet icon, top left next to select element). You can then choose the device at the top to test.
There's also PerfectoMobile for testing on devices remotely...though it can be painfully slow. I'd really recommend at least getting some 'base' testing devices, if possible.
There is also http://www.browserstack.com/responsive that can be used to get a screenshot of what your site would look like on a number of given devices.
There is however a limitation of how many screenshots you can get in the free version I have linked to here.
I got nice results, visualy, by using Chrome add-on called Ripple Beta. Bad thing is that there is no ability to add some custom device, like tablets of 8" or 9" or bigger... but works. I'm not sure is it able to show some errors visible on real device but seems nice.
Manymo should work very well simulating Android for you. It shows me exactly what my cell phone shows, even though my desktop browsers don't. Manymo is a website with a lot of Android phones pictured. Just click one and enter your URL. There are options such as Android versions and screen sizes.
Look for the Chrome plugin Responsive Web Design Tester - you'll be able to emulate mobile browsers for different device sizes on all platforms.
I know this isn't a direct programming question, but's it's kinda relevant as I'm trying to get a good testing environment set up before I embark on my latest project.
I'm trying to set up Opera Mobile for Windows to allow me to test a new website. The UserAgent I get is a fairly generic one, so my workaround is to tweak my mobile.browser file to have the correct screen width and height of the target device.
Is it possible to add to the list of "fake" user agents that Opera Mobile for Windows can pretend to be? It currently supports S60, Android and Windows Mobile.
You can modify headers using Fiddler scripts. From the examples at http://www.fiddler2.com/fiddler/dev/scriptsamples.asp, here's a line that might be of particular interest:
Pretend your browser is the GoogleBot webcrawler
oSession.oRequest["User-Agent"]="Googlebot/2.X (+http://www.googlebot.com/bot.html)";
OnBeforeRequest