HTML5 Webcam Case: Add server certificate to trusted in Chrome

In the previous post we created a self-signed certificate on the server. But Google Chrome still shows the certificate as not trusted on the client side.

All steps will be applied at client side with Google Chrome browser.

Click the lock icon near the https url. In popup it says "Server's certificate is not trusted".

Click "Certificate Information" link and the go to "Details" tab.

 Click "Copy to File...". You will see Certificate Export Wizard window.

 Click Next and enter a path for the file including filename.

 Complete the wizard and you will see "The export was successful" message.

Go to Chrome settings and find "Manage certificates" button.

 Go to "Trusted Root Certification Authorities" tab and click "Import..." button. We will import the certificate which we exported in the previous steps.

 You will see "Certificate Import Wizard" window. Click Next and select certificate file you exported.

 Here we are adding the certificate to the "Trusted Root Certification Authorities". Complete the wizard.

You will see "The import was successful" message. Now you will not see error lock icon near the https url in Chrome. Also related with our previous post, you can save your webcam access permission for the later use. You can create an app link in Chrome and whenever app window opened webcam will be active.

Read More

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. 

• Download & Install Internet Information Services (IIS) 6.0 Resource Kit Tools 
• Run the SelfSSL tool 
• Run command  SelfSSL /N:CN=computer-name /V:365  Parameters; CN is your server name and V is for validity days. If you don't specify site-id then its the first site by default.

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 

Read More