From time to time API customers are experiencing an issue with our HTML5 camera API when webcam access should be granted by the browser of the client device. The most common cause for this is that the site the camera is embedded on is served on a HTTP connection.

The way this issue presents itself most often in the wild is the following: When a user clicks on the embedded video recorder button on your website for the first time and the enable access message appears, if your site is served on an unsecured HTTP connection then some browsers simply stop the webcam access process and never ask the user to allow access to the camera. This can happen in Chrome but also in other browsers such as Firefox.

When the user then closes the video recording window (popup) and clicks the embedded recording button a 2nd time, the Clipchamp API opens a normal browser window and enabling the webcam works in that case. However if the user closes this browser window and then clicks the recording button again, no recording user interface will likely appear.

As briefly mentioned above, the reason for this erratic behaviour is that your website is most likely served on a HTTP connection, not HTTPS as some browsers block access to the user device's webcam on unsecured (http://...) sites as a default browser policy.

The 2 ways to solve this are the following:

  • Obviously the best approach is to secure your website, ie., put it behind an https://... URL. This is the recommended solution and will also lead to the JavaScript camera working as expected.
  • If using HTTPS is not an option in your scenario, you can add the force-popout flag to the experimental parameter array in the API's <script> (and remove the no-popout flag from the enable parameter array in case you are currently using it). This will launch the Clipchamp recording widget inside a popup window that is served from an https://... address, hence it will not be subject to the aforementioned browser limitation/policy.
Did this answer your question?