Vue 调取本地视频相关

目前已知问题谷歌又问题不能直接使用http调取，如果使用需要进行一下配置
1 打开谷歌浏览器，在地址栏输入：
chrome://flags/#unsafely-treat-insecure-origin-as-secure
2 按回车键，配置如下信息。多个地址用逗号隔开

image.png

如使用iframe嵌入聊天页面，需原来需要增加 allow属性
属性值为： microphone;camera;midi;encrypted-media;

具体代码

    var _this = this
    this.thisCancas =this.$refs.canvasCamera

    this.thisContext = this.thisCancas.getContext('2d')

    this.thisVideo = this.$refs.videoCamera

    // 旧版本浏览器可能根本不支持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 || navigator.msGetUserMedia || navigator.getUserMedia

        // 有些浏览器不支持，会返回错误信息

        // 保持接口一致

        if (!getUserMedia) {

          return Promise.reject(new Error('此浏览器中未实现getUserMedia,不能调用摄像头'))

        }

        // 否则，使用Promise将调用包装到旧的navigator.getUserMedia

        return new Promise(function (resolve, reject) {

          getUserMedia.call(navigator, constraints, resolve, reject)

        })

      }

    }

    var constraints = {

      audio: false,

      video: {width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)'}

    }

    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {

      // 旧的浏览器可能没有srcObject

      if ('srcObject' in _this.thisVideo) {

        _this.thisVideo.srcObject = stream

      } else {

        // 避免在新的浏览器中使用它，因为它正在被弃用。

        _this.thisVideo.src = window.URL.createObjectURL(stream)

      }

      // _this.thisVideo.onloadedmetadata = function (e) {

      //   _this.thisVideo.play()

      // }

      _this.thisVideo.play()

    }).catch(err => {

      console.log(err)

    })