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.
Related
I have automated ui-tests that test a web application in chrome using https://theintern.io/
The application offers a barcode scanner using the device camera (https://github.com/zxing/zxing).
To test this feature, a fake barcode is shown to the application, this has worked until chrome version 90/91 (not quite sure anymore).
Since this version I can not access the fake video anymore.
Chrome-options I have set:
use-fake-device-for-media-stream
use-fake-ui-for-media-stream
`use-file-for-fake-video-capture=${fakeVideoFilePath}`
I can reproduce this outside of the application if I use the chrome window configured with selenium and go to
https://webcamtests.com/
This loads forever - same thing happens inside the application.
The webcam name is the path to the video the camera is supposed to show.
Any hints on what is causing this problem or how it can be solved?
Thanks!
Fixed with Chrome 93.
After the update it is just working again.
I used this nifty feature that chrome had for quite a while called "canvas inspector". It was an experimental dev feature that had to manually be enabled.
It was quite helpful when working with webgl via something like THREE.js where you can easily create a bunch of undesired draw calls by accident.
Also, it worked on any website, you could simply take a snapshot and see whats going on in the canvas.
It... miraculously disappeared one day, and google does not give any insight.
I've tried some extensions but they dont feel nearly as good, or i couldn't even get them to work. Is there another way to get this back into chrome?
Apparently it was doing some cheeky stuff that they didn't want in the main project so it was removed in this issue: DevTools: make Canvas profiler an extension
We can make it an extension though. This bug is for tracking removal of the canvas profiler from the DevTools. There will be a separate initiative of porting the code being removed into github and publishing it as a Chrome extension.
According to that issue they might move it to an extension in the future but I haven't found any traces of it as of now. They haven't responded to a question in the above issue about where the new issue could be tracked.
Chrome and Firefox have both removed their Canvas inspectors...
Original Answer:
This is not exactly what the question asks for, but Firefox has a canvas inspector integrated:
https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/
You can enable it in the settings of the normal inspector
EDIT: (2019)
The Canvas Inspector has been removed as of Firefox 67:
Mozilla deprecated listing
Bug report with reasoning
Alternative:
spector.js - Recommended alternative by Mozilla
Canvas inspection was just removed!
You can download an old version of Chromium here like Chromium_OSX_43.0.2357.81.dmg. (Provided by freesmug)
Happy Canvas Inspection!
This is the best extension inspector I’ve seen so far.
https://spector.babylonjs.com
First go into
chrome://flags
Then enable
Developer Tools experiments
Then after restarting your browser, open the devlopers tools by hitting f12, then in the top right corner is a gear. Click on it, go to experiments, then find "canvas inspection". It's unstable, but usable.
This is the weirdest bug.
For some reason, the ctrl-click context menu has stopped appearing only on Chrome - localhost. I can view localhost in Safari and get a context menu and I can even view the exact same site I am developing on it's url in Chrome and get a context menu. Any other site I view in Chrome will also generate a context menu.
The context menu stopped appearing recently, it had been working fine up until this point.
I haven't been able to find any information on why this is happening.
I found this help in chrome
I hope it helps you
Re-enable the possibility to use the context menu on sites that overrides it.
This extension re-enables the context menu.
Indeed, many sites prohibit the right-click on images, pretending to protect their content. I think it is illegitimate.
(This extension is AD supported. If you don't wish to support me you may disable it in the settings.)
Unfortunately, Google Chrome does not have advanced options for what javascript is allowed to do (on the contrary of Konqueror, Opera or firefox). If you think it should, please star (don't add a "me too" comment)
In the meantime, this extension provides a workaround, by resetting the oncontextmenu to its default behaviour on many elements of the page. Oh, as a bonus, it works for Flickr and Youtube html5 videos too!
If a site is not supported, please report it in the bug tracker, not in the comments.
If a site is broken by the extension, please report it in the bug tracker, not in the comments.
However, a nice comment is always welcome :-)
I think chrome introduced this in 57 or 58 .. A perhaps simpler workaround is to add an entry to your system's hosts file and access your server using that.
i.e.:
127.0.0.1 server.local
then, instead of http://localhost/ , use http://server.local/ (and/or https, and/or port number, etc. as the case may be)
Bam! Chrome gives you your context menu back!
This is a question about debugging a project, not about writing the code.
I am on the final stages of developing an HTML5 web app. Fairly last minute, our client tells us it should run on IE8. Since I use the HTML5-canvas in the app, this required the addition of Google Chrome Frame. Once installed and testing, however, IE8's developer console no longer prints any data, and the HTML viewer never loads. Is this a bug? Is there a way to fix it? It will really suck if I need to debug with alerts...
From Google Chrome Frame documentation:
You can use the Web Inspector in GCF just as you would in the Google Chrome browser. To use it, right-click and choose "Inspect Element". Logging is available via the console.log method, and you can set breakpoints and inspect network activity.
I use jquery post function to go to server and bring the link to file download.
When the func returns the link, I try to open a popup or iframe with link source, to popup save/open file window
I tried this
window.open(data.link,'Download','top=20,width=3,height=3,left=20');
and
document.getElementById('download').src=data.link;
It works in Firefox , but in Internet Explorer it shows the message : "To Help Protect Your Security, Internet Explorer Blocked.."
How do I get over this?
EDIT:
If I do it from direct link from the page it does not show me this message
This is due to IE's security settings. By default, IE automatically blocks any automatic downloads. There's no (legit anyway) way you can get around that except by changing the security settings of the browser. The user will be able to download the file by clicking on the bar that it displays, and click download file.
Well that looks like the popup blocker sort of behavior to me. I don't think you can do anything about this except use an alternative method to fetch the URL.
By the way, visitors are used to the Yellow bar and right clicking on it to get the correct download.
So I don't think you need to panic too much.
Edit:
You're not going to be able to change the security settings of everybody's browser. So either give up, or get by.