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.

screenshot80

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 screenshot86 at the bottom-left cornerof the webcam window
  • take a screenshot using the yellow button screenshot87 at the bottom-right 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:

screenshot81

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)

screenshot84

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.

screenshot80

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

The Iptanus Team

Webcam Capture with WordPress File Upload Plugin

28 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

    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

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

  • 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

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.