效果截图：

HTML代码：

<video class="bg" autoplay="autoplay"></video>

CSS代码：

.bg {
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0; 
    right: 0;
    display: block;
    width: 100%; 
    height: 100%;
    background: #000;
}

JS代码：

// 兼容
window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);

// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
      navigator.mediaDevices = {};
}

// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia 
// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
      navigator.mediaDevices.getUserMedia = function(constraints) {
        // 首先，如果有getUserMedia的话，就获得它
        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
        if (!getUserMedia) {
              return Promise.reject(new Error('此浏览器中未实现getUserMedia'));
        }
        // 否则，为老的navigator.getUserMedia方法包裹一个Promise
        return new Promise(function(resolve, reject) {
              getUserMedia.call(navigator, constraints, resolve, reject);
        });
      }
}

var options = {
    audio: true, 
    video: true
}

navigator.mediaDevices.getUserMedia(options).then(function(stream) {
      var video = document.querySelector('video');
      // 旧的浏览器可能没有srcObject
      if ("srcObject" in video) {
        video.srcObject = stream;
      } else {
        // 防止再新的浏览器里使用它，应为它已经不再支持了
        video.src = window.URL.createObjectURL(stream);
      }
      video.onloadedmetadata = function(e) {
        video.play();
      };
}).catch(function(err) {
      console.log(err.name + ": " + err.message);
});