js 检测系统信息,显示设备，摄像头信息，录音设备

<template>
  <div class="container">
    <div class="decrease">
      <h2>系统信息检测</h2>
      <el-button type="primary"
                 @click="goback()">返回</el-button>
    </div>
    <div class="info">
      <el-table v-loading="loading"
                element-loading-text="检测中..."
                element-loading-spinner="el-icon-loading"
                :data="tableData"
                style="width: 100%">
        <el-table-column align="center"
                         prop="item"
                         label="测试项目">
        </el-table-column>
        <el-table-column align="center"
                         label="测试结果">
          <template slot-scope="scope">
            <div v-html="scope.row.result">
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="support"
                         label="平台支持">
          <template slot-scope="scope">
            <i class="el-icon-success"
               v-if="scope.row.support"
               style="color: green;"></i>
            <i class="el-icon-error"
               v-else
               style="color: red;"></i>
          </template>

        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
var platform = require('platform')
export default {
  data() {
    return {
      bound: false,
      urlValue: '',
      tableData: [
        {
          item: '系统信息',
          result: '',
          support: false,
        },
        {
          item: '显示设备',
          result: '',
          support: false,
        },
        // {
        //   item: '录音设备',
        //   result: '',
        //   support: false
        // },
        {
          item: '浏览器信息',
          result: '',
          support: false,
        },
        //  {
        //   item: '网速检测',
        //   result: 'https://www.speedtest.cn/',
        //   support: false,
        // },
        // {
        //   item: '摄像头信息',
        //   result: '',
        //   support: false
        // }
      ],
      loading: true,
      recordInfo: '',
      ifRecord: false,
      ifRecordss: false,
    }
  },
  created() {
    let myCanvasObject = document.createElement('Canvas')
    let webgl = myCanvasObject.getContext('experimental-webgl')
    setTimeout(async () => {
      await this.hasRecord()
      await this.hasRecordss()
      this.tableData = []
      this.tableData.push(
        {
          item: '系统信息',
          result: platform.os.toString(),
          support: true,
        },
        {
          item: '显示设备',
          result: webgl ? 'WebGL' : '不支持WebGL',
          support: Boolean(webgl),
        },
        {
          item: '录音设备',
          result: this.ifRecord ? '录音功能正常' : this.recordInfo,
          support: this.ifRecord,
        },
        {
          item: '网速检测',
          result: `<a href="https://www.speedtest.cn/" target="_blank" >开始检测</a>`,
          support: true,
        }

        // {
        //   item: '摄像头设备',
        //   result: this.ifRecordss ? '摄像头功能正常' : this.recordInfo,
        //   support: this.ifRecordss,
        // },
        // {
        //   item: '浏览器信息',
        //   result: platform.name + ' ' + platform.version,
        //   support: this.versionDetection(),
        // }
      )
      this.loading = false
    }, 2000)
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    versionDetection() {
      if (platform.name.toLowerCase().search(/(chrome)|(opera)/) !== -1) {
        let version = platform.version.split('.')[0]
        if (Number(version) <= 49) {
          return false
        } else {
          return true
        }
      } else if (platform.name.toLowerCase().search(/(safari)/) !== -1) {
        return true
      } else if (platform.name.toLowerCase().search(/(firefox)/) !== -1) {
        return true
      } else {
        return false
      }
    },
    async hasRecord() {
      let res
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        res = await navigator.mediaDevices
          .getUserMedia({ audio: true })
          .catch((err) => {
            this.recordInfo = err.message
          })
      } else {
        this.recordInfo = '系统版本过低'
        res = false
      }
      this.ifRecord = Boolean(res)
    },
    async hasRecordss() {
      let res
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        res = await navigator.mediaDevices
          .getUserMedia({
            video: {
              width: { min: 1024, ideal: 1280, max: 1920 },
              height: { min: 576, ideal: 720, max: 1080 },
            },
          })
          .catch((err) => {
            this.recordInfo = err.message
          })
      } else {
        this.recordInfo = '系统版本过低'
        res = false
      }
      this.ifRecordss = Boolean(res)
    },
  },
}
</script>
<style lang="scss" scoped>
.decrease {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-bottom: 10px;
}
.container {
  max-width: 960px;
  min-height: calc(100vh - 220px);
  margin: 50px auto;
  h2 {
    text-align: center;
    margin-bottom: 10px;
  }
  .info {
    width: 100%;
  }
  i {
    font-size: 25px;
  }
}
</style>