feat: 直播上传到阿里云oss

package.json

@@ -27,6 +27,7 @@
     "@vue-flow/core": "^1.39.0",
     "@vueuse/components": "^13.3.0",
     "@vueuse/core": "^13.3.0",
+    "ali-oss": "^6.23.0",
     "axios": "^1.9.0",
     "blueimp-md5": "^2.19.0",
     "crypto-js": "^4.2.0",
@@ -51,6 +52,7 @@
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",
+    "@types/ali-oss": "^6.16.13",
     "@types/blueimp-md5": "^2.18.2",
     "@types/crypto-js": "^4.2.2",
     "@types/file-saver": "^2.0.7",
@@ -59,7 +61,6 @@
     "@vue-macros/reactivity-transform": "^1.1.6",
     "@vue/eslint-config-typescript": "^14.1.3",
     "@vue/tsconfig": "^0.5.1",
-    "ali-oss": "^6.21.0",
     "chalk": "^5.3.0",
     "eslint": "^9.14.0",
     "eslint-plugin-vue": "^9.30.0",

src/modules/live/test/components/Live.vue

@@ -12,6 +12,7 @@ import md5 from 'blueimp-md5'
 import dayjs from 'dayjs'
 import { useLiveChat } from '../composables/useLiveChat'
 import { useSpeechTranscriber } from '../composables/useSpeechTranscriber'
+import { appendUpload } from '@/utils/oss'
 
 const props = defineProps({
   orderCount: { type: Number, default: 0 },
@@ -65,6 +66,9 @@ const { start: startSpeechTranscriber, stop: stopSpeechTranscriber } = useSpeech
   onSentenceEnd: props.onSentenceEnd,
 })
 
+const isOSSUpload = true
+let ossResult = null
+
 const {
   stream,
   start: startLive,
@@ -84,13 +88,18 @@ const {
   },
   onRecord: async (blob) => {
     if (props.isLocalUpload) return
-    const base64Data = await readBlobAsBase64(blob)
-    const jsonData = JSON.stringify({
-      type: 'send',
-      sso_id: ssoId,
-      data: { type: 'video_rtc', channel: 'rtc', data: { video: base64Data, file_name: fileName.value } },
-    })
-    send(jsonData)
+    if (isOSSUpload) {
+      ossResult = await appendUpload(blob, ossResult?.nextAppendPosition, `${fileName.value}.mp4`)
+      fileUrl.value = ossResult.url
+    } else {
+      const base64Data = await readBlobAsBase64(blob)
+      const jsonData = JSON.stringify({
+        type: 'send',
+        sso_id: ssoId,
+        data: { type: 'video_rtc', channel: 'rtc', data: { video: base64Data, file_name: fileName.value } },
+      })
+      send(jsonData)
+    }
   },
   onStop: (blob) => {
     console.log('结束直播')

src/modules/live/test/composables/useLive.ts

@@ -93,7 +93,7 @@ export function useLive({ enabledUserMedia = true, onStart, onRecord, onStop }:
   const start = () => {
     if (!mediaRecorder) initializeMediaRecorder()
     recordedChunks.value = []
-    mediaRecorder?.start(100) // 每100ms触发一次dataavailable事件
+    mediaRecorder?.start(1000) // 每100ms触发一次dataavailable事件
   }
 
   // 停止录制

src/utils/oss.ts

+import OSS from 'ali-oss'
+import md5 from 'blueimp-md5'
+import { getToken } from '@/api/base'
+
+export const prefix = 'upload/saas-dml-live/'
+
+let store: OSS | null = null
+
+export async function getTokenInfo() {
+  const response: any = await getToken()
+  return {
+    accessKeyId: response.Credentials.AccessKeyId,
+    accessKeySecret: response.Credentials.AccessKeySecret,
+    stsToken: response.Credentials.SecurityToken,
+  }
+}
+
+export async function createStore() {
+  if (store) return store
+  const response = await getTokenInfo()
+  return (store = new OSS({
+    bucket: 'webapp-pub',
+    region: 'oss-cn-beijing',
+    accessKeyId: response.accessKeyId,
+    accessKeySecret: response.accessKeySecret,
+    stsToken: response.stsToken,
+    refreshSTSToken: () => getTokenInfo(),
+    cname: true,
+    endpoint: 'https://webapp-pub.ezijing.com',
+  }))
+}
+
+export function generateObjectName(file: Blob | File, objectName?: string) {
+  if (objectName) return `${prefix}${objectName}`
+  let fileType = 'png'
+  if (file instanceof File && file.name) {
+    const matches = file.name.match(/\.(\w+)$/)
+    if (matches) {
+      fileType = matches[1]
+    }
+  } else if (file.type) {
+    const mimeType = file.type.split('/').pop()
+    if (mimeType) {
+      fileType = mimeType
+    }
+  }
+  return `${prefix}${md5(new Date().getTime() + Math.random().toString(36).slice(-8))}.${fileType}`
+}
+
+// 上传
+export async function putUpload(file: Blob | File, objectName?: string) {
+  const store = await createStore()
+  return store.put(generateObjectName(file, objectName), file)
+}
+
+// 追加上传
+export async function appendUpload(file: Blob | File, position = '', objectName?: string) {
+  const store = await createStore()
+  let options = {}
+  if (position) options = { position }
+  return store.append(generateObjectName(file, objectName), file, options)
+}