diff --git a/src/app.vue b/src/app.vue
index f01c08f..3b00038 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -2,15 +2,17 @@
+
diff --git a/src/components/banner.vue b/src/components/banner.vue
index 9a4fc9b..4acd392 100644
--- a/src/components/banner.vue
+++ b/src/components/banner.vue
@@ -18,8 +18,7 @@
- 你当前浏览器的得分为 {{ $store.scores }}/{{ $store.total }}
+ 你当前浏览器的得分为 {{ $store.scores }}
diff --git a/src/components/footer.vue b/src/components/footer.vue
new file mode 100644
index 0000000..c1ddc29
--- /dev/null
+++ b/src/components/footer.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
diff --git a/src/lib/checks.js b/src/lib/checks.js
new file mode 100644
index 0000000..4ff824c
--- /dev/null
+++ b/src/lib/checks.js
@@ -0,0 +1,27 @@
+/**
+ * {}
+ * @author yutent
+ * @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
+}
diff --git a/src/store.js b/src/store.js
index 2cfbce1..9a0e402 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,20 +1,9 @@
import { reactive } from 'vue'
import * as env from '@/lib/env.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
- }
-}
+import { checkCanvas, checkMedia } from '@/lib/checks.js'
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.total = store.modules.map(it => it.total).sum()
+store.scores = store.modules.map(it => it.scores.sum() * it.factor).sum()
export default function (app) {
app.config.globalProperties.$store = store