I am creating p2p application to share video and screen from Chrome to Mozilla. When I work with Chrome on both sides, it works fine. But when Mozilla is receiving screensharing video, I get a problem.
To start screenshare I do the following in Chrome:
connection.addStream({screen: true, oneway: true}
On the client side I have this callback:
connection.onstream = function (e) {
// handle input stream
}
With Mozilla this callback is not launched, but I see flickering on my main webcam stream: few frames from webcam and few frames from screenshare continiously.
How can I fix this? Is this Mozilla bug?
it you're adding more than one stream to a single peerconnection, you may be hitting the fact that Chrome and Firefox support different dialects of SDP.
Unless you do translation of the SDP, you'll have to use different peerconnections until the chrome bug is fixed.
My solution was migrating to SimpleRTC (http://simplewebrtc.com). This is same sort of library, but it is updated regularly to reflect browsers/API changes. The challange was signalling layer, because it uses special (opensource) library on top of socketio to handle chat rooms. But now screensharing works correctly.
Related
I've used this code (reference to source code) where I try to show a stream of video for the user and allow him to take a snapshot, this is working fine on Chrome for example but does not work on Microsoft Edge at all and no errors are shown. Any idea why this is not working and maybe reference a different approach I should take?
I'm pretty sure it does not work on Safari either...
Even the Microsoft's Demo page is not working! here is a screenshot of the error I get:
And my device manager:
EDIT (3 Sep 15): I have turned on "Let apps use my Camera" in my Windows Settings and now this demo works well on all browsers but Safari. Anyone know what is the best approach to capturing an image from a webcam stream in Safari?
You need to open Privacy Settings. Enable Camera and Microphone for Edge, otherwise you will get a permission error.
I tried the Photo Capture using webcam demo on Edge and it is working quite fine. you can check the below screenshot.
You need to use navigator.mediaDevices.getUserMedia. Even though Chrome 45 has navigator.mediaDevices and a getUserMedia function which returns a Promise, it does not accept spec-style constraints.
Note: Make sure to turn on the Camera setting "Let apps use my
camera" and from the list of apps that can use your camera turn on Microsoft Edge as well.
for me #Michael Wanyoike hit it on the head. You have to enable camera permissions. The weird thing is that no prompt requesting permission appeared, simply a black screen. It could be that previously I had click deny but still not a smooth flow.
I'm creating a Audio Player with HTML5, using the MediaSource Object.
My code is similar to MediaSource API Demo
But when executing the line
var ms = new MediaSource();
And exception is throwed on Firefox and Internet Explorer
ReferenceError: MediaSource is not defined
In Firefox Support says that this feature is only enabled to Youtube and Netflix.
There is a way to handle this restriction?
In Chrome, I have not problem!
At time of writing, IE11 only has support when run on Windows 8.1 or above.
Firefox will only enable MSE when about:config param media.mediasource.enabled = true (this restriction will be removed eventually, once the FF implementation is globally stable). There is no way around this, so unless you are YouTube or Netflix, consider Firefox MSE as coming soon.
Firefox has been lagging behind quite badly when it comes to MSE support in their browser. Firefox Nightly build however now seems to be pretty close to working properly. It still has to go through nightly build and beta phase before it's released to the public, so expect a few months.
I am about to develop an application that is to run on Windows 8.1 tablets. An important feature is to be able to click on a button to access the camera to take some pictures. Ideally I would like to create it as a Web application rather than a native application due to a number of reasons (licences, cross-platform, development time: have no experience in native apps, etc.).
I have looked at the options for capturing images from HTML 5 and have found HTML Media Capture which allows me to write:
<input type="file" accept="image/*" capture="camera" />
To get access to the camera. This works great on iPads and on Android tablets, but I can't get it to work on Windows 8 tablets. I have tried using Chrome on the Windows 8 tablet, but still no effect. All it does is that it opens a file dialog in which I can choose a file to upload. What I want to do is to be able to capture a new image. This standard is not supported by IE (an apparently the other browsers cannot access the device's camera either).
I have also stumbled across Media Capture and Streams which seems to be mostly related to showing streams from e.g. the web cam, but probably could be used to capture images and is supported by Chrome and Firefox among other browsers, but still not by Internet Explorer (even IE11). None of the three browsers' implementations seem to work on my Windows 8.1 test machine though. If someone has gotten getUserMedia to work on Windows 8 tablets in any browser I'm interested in hearing about it.
Anyway, my main question is: Is there any way to access the camera on a Windows 8 tablet using HTML5 from a web application? The only working examples I have seen have relied on a prototype implementation for IE using Active X or solutions that use flash.
EDIT: I would very much prefer to keep it in HTML5/javascript as it has to work offline (using HTML5 Application Cache)
I struggled very much for this solution, at the end I find good a solution. But only can use in windows store apps like chrome windows 8 mode (chrome settings -> relaunch chrome in windows 8 mode) then you can use the normal file input tag in html. when you hit "choose file" u see the image below. Then u can choose camera to add take image from camera.
if you can not see camera in the list, u can install app below.
https://www.microsoft.com/en-US/store/apps/Camera-File-Open-Picker/9WZDNCRFJQVN
So I was running into the exactly same issue. My web app is similar, except I have to do some bar code scanning with the tablet's camera.
I'm using the HTML 5 media api as you commented. In order to make it work in chrome in a Windows 8 Surface Pro, I had to do this:
To enable getUserMedia in Chrome type ‘chrome://flags/’ in URL bar and enable “Enable screen capture support in getUserMedia(). Mac, Windows, Linux, Chrome OS” option.
It was working in my laptop but not in the tablet, after making that change and restarting chrome it worked. Good luck.
Here is the code I ended up using to get around this situation... It appears to work in chrome very well however still no support for Internet Explorer which is known not support getUserMedia. Again I wish this wasn't necessary and windows just supported the take picture feature like iOS and android but it works for now.
Credit:
http://davidwalsh.name/browser-camera
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
getUserMedia interface works in Chrome on my Surface 2, prove:
I've implemented solution described here:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
Btw, there is a working example on their site as well:
getUserMedia doesn't work in IE
getUserMedia probably works in FF, but I didn't test
access to the camera from [Browse] button doesn't work in any browser on my Surface 2
EDIT: Just realized, my approach doesn't work on Surface any more. Same story for the html5rocks page, the example given doesn't work on Surface. I guess, new Chrome version stopped to support something. BUT I've found the example which works on Surface for Chrome and Firefox, here you are:
http://www.ceng.metu.edu.tr/~e1559848/demos/qrdecode/index.html
I need to be able to monitor navigation events (such as page loads or switching between active tabs) in browsers running on a Windows PC. So far, I can get this to work in IE and Firefox by loading a DLL into all running apps via a call to SetWindowsHookEx, then asking for either the IHTMLDocument2 (in IE) or nsIWebProgress (in Firefox) interface from the application. I can use the appropriate interface to request a callback from the application when an event of interest happens.
Is there a way to do this in Chrome? I have read a little about Chrome extensions, but I have not found any documentation on an API exposed by Chrome that is analogous to COM in IE or XPCOM in Firefox. Will a similar approach work or will I need to do something completely different? (I am working in C++.)
I would appreciate it if someone could at least point me in the right direction.
Thanks.
With Chrome extensions API you can register some events handlers for changing state of tab like when document state is changed (loading or loaded), when new tab is added/removed from window or when user switch between tabs.
More about tabs events You find on http://code.google.com/chrome/extensions/tabs.html#event-onActiveChanged
I am attempting to use the HTML5 method 'postMessage'. I know this method only works in 'modern' browsers, but for my customer base, that is good enough.
Here is my situation:
A browser window on domain 'abc.com' opens a new window on domain 'xyz.com'. I own both domains, and I can put any javascript I need to on either side. From what I can tell, I should be able to use 'postMessage' to send messages between the two windows. This works in Chrome, but not in IE 9. I am unable to get a reference to the parent window from the child or vice-versa. If both windows are on the same domain, I do not have a problem.
So, is this a bug ("feature") of IE's implementation of 'postMessage'? Is there any way I can accomplish what I am trying to do?
Many thanks!
Unfortunately, IE's postMessage implementation only works between windows and iframes and frames. Trying it with a window.open will result in a No such interface error when postMessage is called, even though the debugger clearly shows the method existing.