Webcam Capture is a feature of WordPress File Upload plugin to capture screenshots or video from the device’s camera and upload it to the website.

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 camera switching, screenshot capturing, video recording and playback. Depending on the Capture Mode defined by the administrator, the users can:

  • record video using the red button screenshot86 at the bottom-left corner of the webcam window
  • take a screenshot using the yellow button screenshot87 at the bottom-right corner of the webcam window
  • switch between front and rear camera using the white button screenshot197 at the top-left corner of the webcam window
  • turn the webcam on and off by using the white button screenshot85 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:

It is noted that preferred settings will be applied only if they are supported by the camera.

Allow File Selection

When Allow File Selection setting is enabled, the user can also select a file using the Select File button, as shown below:

The user can select only a single file. Multiple files selection is disabled in this case.

If the user selects a file using Select File button and the file is an image, it will be previewed inside the capture window:

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.

Switch Camera Button

When Switch Camera Button setting is enabled, the user can switch between the front and rear camera of their device using the button screenshot197 at the top-left corner of the capture window.

There is also environment variable Webcam Switch Camera Mode in the Dashboard area of the plugin, in Advanced tab. This variable controls what happens when Switch Camera button is pressed. It takes two values, ‘side’ and ‘device’ as follows:

  • ‘side’. This is the default mode. The device switches between front and rear camera (if it is supported by the device).
  • ‘device’. The device switches between all available cameras. So if the device is a mobile phone with a front and a rear camera, it will behave like ‘side’ mode. If the phone has more cameras (e.g. a second rear camera), it may also switch to the second rear camera.

The mode ‘device’ is particularly useful on laptops or desktop computers, where the user can have many USB cameras connected. The only way to switch between these cameras is through this mode.

For any questions or information about webcam capture, please contact us.

The Iptanus Team

Webcam Capture with WordPress File Upload Plugin

42 thoughts on “Webcam Capture with WordPress File Upload Plugin

  • 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.

    1. 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

    1. Did you fix it? I see the website is https. I opened the page with chrome and webcam is loading.

      Nickolas

    2. 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

    1. 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

  • 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

    1. 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

  • 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.

  • 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!

    1. 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.

    1. 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

      1. 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.

      2. 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).

        1. 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

          1. 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

    1. Hi Nicolas,

      Webcam is not working on safari browser. Do you have an issue please?
      Thanks for your help.

  • 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.

    1. 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.

    1. 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

    1. 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

          1. 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?

  • Hi I have managed to configure this plugin to work in the way I wish and it is working as expected on Android devices.

    On iOS devices I can see the image from the camera but I dont have any options to capture/record.(the icons are missing on iOS) Tested on safari/Chrome

    Any help with this?

  • Is there a way to have the camera off by default? I have allowed my browser to enable the webcam, but every time I visit the page, it defaults to “on” and I would like it to be “off” by default.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.