Webcam Capture is a new feature of WordPress File Upload plugin to capture screenshots or video from the device’s camera and upload it to the website.
This is an experimental feature, because it is not yet supported by all browsers. For the moment it is supported by the latest versions of Firefox, Chrome, Edge and Opera. Latest mobile versions of Firefox and Chrome also support it but partially. Unfortunately Safari does not yet. Mac and iPhone users will have to wait until it is implemented for Safari as well.
When Webcam option is enabled using the visual editor of the plugin, live feed from the webcam will show up on the page.
Overlay buttons enable webcam actions, such as screenshot capturing, video recording and playback. Depending on the Capture Mode defined by the administrator, the users can:
- record video using the red button
at the bottom-left cornerof the webcam window - take a screenshot using the yellow button
at the bottom-right corner of the webcam window - turn the webcam on and off by using the white button
at the top-right corner of the webcam window.
Video Recording
When recording video, the red button flashes while a stop button also appears, together with a timer showing the recording time. When recording stops, playback buttons appear so that the user can review the recorded video. In addition, the Upload Media button below the webcam window is enabled, allowing the user to upload the captured video:
The user can either preview the video by using the playback buttons, upload it using the Upload Media button or return back to the live feed.
Through the plugin settings,administrators can define the following settings for webcam capture:
- if audio will be included or not
- the preferred video width
- the preferred video height
- the preferred video aspect ratio
- the preferred video frame rate
- the maximum recording time
- the camera source (front or back camera if supported by the device)
It is noted that preferred settings will be applied only if they are supported by the camera.
Screenshot Capturing
When pressing the yellow ‘aperture’ button the live feed freezes and Upload Media button below the webcam window is enabled. If pressed, the screenshot will be uploaded to the website as an image (PNG) file.
For any questions or information about webcam capture, please contact us.
The Iptanus Team
Pingback: Webcam Capture with WordPress File Upload Plugin | WordPress Plugin News
Where do I get this feature? I installed WP File Upload and its not there.
Hi, here is a link explaining how to use the webcam.
Regards
Nickolas
Hello,
I figured out how to set up this feature. It only works in Opera that I’ve been able to successfully upload the webcam image and video. You have to change the file name to datetimestamp or else the same named upload will give a warning.
Is there something I need to do or set so that it works in Google Chrome, Edge, or Firefox?
Thanks in advance for your reply.
It should also work on Chrome and Firefox, but the website has to be https. Is your website https?
Nickolas
yes, we have it enabled at https://rainbowrosescholarship.org/webcam-services/
Thank you for your reply. I can’t get this page to work in chrome or firefox. It shows a control with the message that this browser doesn’t support webcam campture…
I have not set the site on the https preload list yet, could that be why?
Many thanks! Ed Sanders
Did you fix it? I see the website is https. I opened the page with chrome and webcam is loading.
Nickolas
How did you get it working? I tested right now and it’s working. I am not able to capture image through this plugin. in none of the browser.
[wordpress_file_upload singlebutton=”true” createpath=”true” adminmessages=”true” medialink=”true” postlink=”true” webcam=”true” webcammode=”both” audiocapture=”true”]
this is the shortcode that is genreated
Hi, can I try myself? what is the URL of the page?
Regards
Nickolas
Strange, it’s not working for me, only in opera. I took a screenshot of what it’s doing…
Firefox:
https://rainbowrosescholarship.org/wp-content/uploads/2018/05/rainbowrose-screenshot-webcam-not-working….png
Chrome:
https://rainbowrosescholarship.org/wp-content/uploads/2018/05/rainbowrose-screenshot-webcam-not-working-chrome.png
Thank you for looking at it. Regards, Ed Sanders
Hi, while you see this message, press F12 either on Chrome or Firefox to invoke Dev Console. Go to Console tab and see if there are any messages there.
Regards
Nickolas
sorry first link was wrong:
firefox: https://rainbowrosescholarship.org/wp-content/uploads/2018/05/rainbowrose-screenshot-firefox-1.png
After clearing the cache I also find it’s working in Chrome. Thanks for looking. If I can get firefox to work that would be great too.
Regards, Ed
clearing the cache shows it working in firefox as well. Not sure what I did to enable it but it’s working.
Many thanks for your trouble. Regards, Ed
ok good, then disregard my previous message.
Nickolas
As per “stackoverflow.com /questions/52677448/typeerror-argument-1-is-not-valid-for-any-of-the-1-argument-overloads-of-url-cr” it might be worth updating this plugin to use the more acceptable language. At this moment, is is only working in Opera browsers.
Yes you are right. I will issue an update as soon as possible.
Regards
Nickolas
Hi,
I am trying to use the Webcam service on my website but unfortunately it doesn’t appear on my page no matter what setting I put. i tried it on Edge, Opera and Chrome, on localhost and on live.
No error in the console, nothing.
Can you help me?
Thank you!
Hi, is your website secure (https)? Browsers require this to allow webcam to show up.
Regards
Nickolas
Dear Nickolas, I am having issues with the video / webcam feature (full plug-in version). It sure does record alright and upload to the server, yet when I try and open the file, I am having troubles reading the file in my media players. It looks as though it has something to do with the audio recording. When I record just video, my media players play the file just fine.
Also I am having trouble using it with Chrome Version 74.0.3729.131 (that is my current version).
Can you help, since this is a great feature and much needed!
Thank you.
Hi which players do you use? It seem to be working fine with VLC.
In addition, what do you mean that you cannot use it with Chrome?
Regards
Nickolas
Hi Nickolas,
I am using different players. Indeed it works in VLC, but not in Windows Media Player, nor in the new win10 player, nor in quicktime nor in (that is my main problem) any editing software (using Premiere and Resolve). Quicktime gives me an error 2048 (codec error) as does premiere. When you look up the media information of the file, you notice, there is no codec information attached, maybe that is the problem. I cannot figure out what codec it is, even VLC won’t give me any information on that. I think it may be that the file does not reveal its codec in the first place, so players don’t know how to decode the file. Without the ability to edit the footage, and with only VLC to play it, this functionality seems pretty restricted. As I said, when you turn of the audio recording, the file is handeled much better. So maybe therein lies the problem. Thank you for checking.
Further: i use chrome with all blockers deactivated and the general webcam recognized and turned on for in page recording (settings tab). Still my chrome gives me a “Your browser does not support webcam capture!”. This is no general problem (other sites like https://webcamera.io) work fine. Maybe because I am still not on http and not https (waiting on the final domain for that site to activate my SSL) but other than that, I am at a loss.
Thank you for your help and patience.
Small update: chrome is ok now, the SSL did the trick. So FYI chrome does not engage the webcam with sites that are not encrypted (as it should).
Hi, yes indeed Chrome requires https (and other browsers I think).
The problem with the codecs maybe has to do with the way browsers generate the video file. I have configured the plugin so that mp4 files are generated. However I have read some reports that Chrome will always create webm video files (a web video format) encapsulated in mp4. There is not much detail online about this.
Nevertheless I will make some experimentations to increase compatibility with common video players and get back to you.
By the way, there are some codecs that can be installed in your computer and make Windows Media Player (and probably others) play unsupported video files.
Regards
Nickolas
Dear Nickolas,
thank you for taking care about this issue. I have tried the video picture with various browsers, they all show the same issue. And believe me when I say this is no issue with my codecs, since as a video editor I have a vast collection of codecs on my machine. There definitively is an issue with the encapsulation of the video and the audio. As I told you, the file works much better when audio is not recorded (still not in my video editing software though). Can you tell me what function you are using for the capture, maybe I can heal and search the web too…
I really hope you will solve this issue because this would really make the plugin very valuable and usable for me.
Thank you again for caring about your customers needs, not every developer does.
Enkidu
Hi,
Do you have an issue for safari browser please?
Thanks in advance for your support.
Tan
Hi Nicolas,
Webcam is not working on safari browser. Do you have an issue please?
Thanks for your help.
Hi, no particular issues. What is the problem?
Regards
Nickolas
Hi, the Webcam doesn’t work on latest chrome (79.0.3945.130). it gives me the “Your browser does not support webcam capture!” error.
Hi, is your website secure (https)? This is a requirement imposed by browsers for using the webcam.
Regards
Nickolas
How to make it work with contact form 7.
Click a button to open camera, capture image and save the file on submitting the form.
I want to use this with my ip camera. Where do I input the ip:port?
Hi Lynn, you cannot use the plugin with an ip camera. It works with embed webcams or cameras connected through USB (which the operating system can identify).
Regards
Nickolas
Hi, Thank you for a very nice plugin!
I want to ask regarding mobile – camera function.
I did setup this plugin successfully via desktop, but when I want to view via mobile, the camera in blank mode and not functioned.Is it not compatible via mobile?
FYI, i am using Safari and Chrome at my Iphone.
Thanks
Ely
Hi Ely, some mobile browsers do not support webcam. Which iPhone do you have? New iPhones with iOS 14.5 and later should be ok.
Regards
Nickolas
Hi Nickolas,
Thank you for the reply.
I’m using iOS 14.6 or am I setting the shortcode wrongly?
and I’m using Elementor.
If you want to try for yourself, this is the link: https://dxplore.apptv8.com/selfietrial
Successfuly setting in desktop, but blank-black screen in mobile view
btw, for mobile, I tried with this 4 browser: Chrome, Firefox, Safari and Opera
I tried it from an Android device with Chrome and seems to be working fine. Maybe iOS still has problems with webcam feature. Do you have Capture Audio enabled?
Nickolas
Hello,
I just installed this in an experimental website and the camera feature does not show. I only have 4 options in the settings area: Main – Settings – file Browser – View Log – Maintenance Actions. The webcam settings are no where to be found. Can you assist?