navigator.mediaDevices.getUserMedia 与 http 服务器

Question

How can I make navigator.mediaDevices.getUserMedia work on a http server for all browsers. Is it possible and how?

This is my code that didn't work with http but worked with a https server

navigator.mediaDevices.getUserMedia({ video: true, audio: false })
         .then(function(stream) {
             video.srcObject = stream;
             video.play();
            })
         .catch(function(err) {
            console.log("An error occurred! " + err);
            });

  video = document.getElementById('video');
  video.addEventListener('canplay', function(ev){
  if (!streaming) {
    
    height = video.videoHeight / (video.videoWidth/width);
  
    video.setAttribute('width', width);
    video.setAttribute('height', height);
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    streaming = true;
  }
}, false);

Answer 1

It seems that Google Chrome and Mozilla Firefox only allow navigator.mediaDevices over a secure https connections. You can override this option on Chrome using the startup flag:
--unsafely-treat-insecure-origin-as-secure="http://example.com"

You can find more information here:

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

Answer 2

you can simply open this link on your chrome browser. chrome://flags/#unsafely-treat-insecure-origin-as-secure. And just enable the insecure origin and also put your testing link in the box given next to the insecure origin option.