更新检测脚本; 分数增加因子系数

src/app.vue

@@ -2,15 +2,17 @@
   <Topbar />
   <Banner />
   <Modules />
+  <Copyright />
 </template>
 
 <script>
 import Topbar from './components/topbar.vue'
 import Banner from './components/banner.vue'
+import Copyright from './components/footer.vue'
 import Modules from './views/main.vue'
 
 export default {
-  components: { Topbar, Banner, Modules }
+  components: { Topbar, Banner, Modules, Copyright }
 }
 </script>
 

src/components/banner.vue

@@ -18,8 +18,7 @@
       </section>
 
       <section class="scores">
-        你当前浏览器的得分为 <span class="num">{{ $store.scores }}</span
+        你当前浏览器的得分为 <span class="num">{{ $store.scores }}</span>
-        >/<span class="num total">{{ $store.total }}</span>
       </section>
     </div>
 

src/components/footer.vue

@@ -0,0 +1,12 @@
+<template>
+  <footer class="copyright">&copy; Powered by yutent. 2023</footer>
+</template>
+
+<style lang="scss" scoped>
+.copyright {
+  display: flex;
+  justify-content: center;
+  margin-top: 32px;
+  padding: 16px 0;
+}
+</style>

src/lib/checks.js

@@ -0,0 +1,27 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/07/18 19:11:01
+ */
+
+// 用canvas检测图形/图象的支持
+export function checkCanvas(type) {
+  try {
+    var canvas = document.createElement('canvas')
+    var ctx = canvas.getContext(type)
+    return ctx ? 1 : 0
+  } catch (err) {
+    console.log(err)
+    return 0
+  }
+}
+
+export function checkMedia(type, isAudio = true) {
+  let ctx = isAudio ? new Audio() : document.createElement('video')
+  let res = ctx.canPlayType(type)
+  console.log(isAudio, res)
+  if (res === 'maybe' || res === 'probably') {
+    return 1
+  }
+  return 0
+}

src/store.js

@@ -1,20 +1,9 @@
 import { reactive } from 'vue'
 
 import * as env from '@/lib/env.js'
-
+import { checkCanvas, checkMedia } from '@/lib/checks.js'
-function checkCanvas(type) {
-  try {
-    var canvas = document.createElement('canvas')
-    var ctx = canvas.getContext(type)
-    return ctx ? 1 : 0
-  } catch (err) {
-    console.log(err)
-    return 0
-  }
-}
 
 const store = reactive({
-  total: 100,
   scores: 80,
   useragent: navigator.userAgent,
   env,
@@ -23,7 +12,16 @@ const store = reactive({
     {
       name: '音频支持',
       total: 0,
-      scores: [!!window.AudioContext ^ 0, 1, 1, 1, 1, 1, 1],
+      factor: 80,
+      scores: [
+        !!window.AudioContext ^ 0,
+        checkMedia('audio/wav'),
+        checkMedia('audio/mpeg'),
+        checkMedia('audio/flac'),
+        checkMedia('audio/aac'),
+        checkMedia('audio/ogg'),
+        checkMedia('audio/webm')
+      ],
       items: [
         'Web Audio API',
         'pcm audio support',
@@ -39,7 +37,15 @@ const store = reactive({
     {
       name: '视频支持',
       total: 0,
-      scores: [0, 1, 1, 1, 1, 1],
+      factor: 80,
+      scores: [
+        checkMedia('video/mp4; codecs="mp4v.20.8"', 0),
+        checkMedia('video/mp4', 0),
+        checkMedia('video/mp4; codecs="hev1"', 0),
+        checkMedia('video/ogg', 0),
+        checkMedia('video/webm; codecs="vp8"', 0),
+        checkMedia('video/webm; codecs="vp9"', 0)
+      ],
       items: [
         'MPEG-4 ASP support',
         'H.264 support',
@@ -53,6 +59,7 @@ const store = reactive({
       name: '流媒体',
       total: 0,
       scores: [1, 1, 0, 0],
+      factor: 100,
       items: [
         'Media Source extensions',
         'DRM support',
@@ -63,6 +70,7 @@ const store = reactive({
     {
       name: '自定义组件',
       total: 0,
+      factor: 80,
       scores: [
         !!window.customElements ^ 0,
         !!document.body.attachShadow ^ 0,
@@ -73,6 +81,7 @@ const store = reactive({
     {
       name: '图形图象支持',
       total: 0,
+      factor: 120,
       scores: [
         checkCanvas('2d'),
         checkCanvas('webgl'),
@@ -85,6 +94,7 @@ const store = reactive({
     {
       name: '网络',
       total: 0,
+      factor: 60,
       scores: [
         !!window.EventSource ^ 0,
         !!window.WebSocket ^ 0,
@@ -102,8 +112,7 @@ const store = reactive({
 })
 
 store.modules.forEach(it => (it.total = it.items.length))
-store.scores = store.modules.map(it => it.scores.sum()).sum()
+store.scores = store.modules.map(it => it.scores.sum() * it.factor).sum()
-store.total = store.modules.map(it => it.total).sum()
 
 export default function (app) {
   app.config.globalProperties.$store = store