Tuesday, December 15, 2015

HTML5 Webcam Case: Create a self-signed certificate

Thanks to HTML5 which gives us the opportunity to use native HTML for some features. Without Flash or Silverlight we can use webcam. The new getUserMedia() function is used for capturing and video tag for displaying webcam content. 

Target

Assume that we have a web client in a kiosk and we want to run our webpage by opening a Chrome window. Creating a shortcut is easy part but you'll see Chrome asks for permission to enable webcam each time. This is a problem because someone has to allow webcam after a restart for example.

Solution

Running your website in HTTPS environment can solve this. Then Chrome will remember your preference for that page. If you allow webcam then each time it will gives permission automatically.

Self-signed Certificate

If you don't have an authorized certificate for the HTTPS then you can create a self-signed certificate in IIS. 

You can enter big numbers for validity days like 1000 (which is 3+years) but for some security reasons Chrome will give warnings for that. In our case use smaller numbers like 365days.
Now you can see the certificate in IIS > Server Certificates section.
In IIS go to your Website > Bindings and select your certificate in HTTPS type.

Now your server is ready for HTTPS call and client can see your page's url in "https://your-server-name/..." format.

But still not finished. Chrome will say it the certificate is not verified. This is a self-signed certificate and we need to add it to Trusted Certificates in client side. See the next post 

0 comments: