Vue.js 跨域视频流拉取及播放解决方案: CORS 错误处理与代码示例

解决这个问题的步骤如下：\n\n1. 在 Vue 项目中，通常会使用 axios 这样的库来进行 HTTP 请求。由于视频流请求是跨域的，需要在 axios 请求中添加跨域配置。\n\n2. 在项目的 main.js（或其他入口文件）中引入 axios，并配置跨域：\n\njavascript\nimport axios from 'axios';\n\naxios.defaults.baseURL = 'http://192.168.30.134:554'; // 视频流的 IP 地址和端口\naxios.defaults.headers.common['Authorization'] = 'Basic YWRtaW46aGJ6dzIwMjM='; // 视频流的用户名和密码，需进行 Base64 编码\n\n// 添加跨域配置\naxios.defaults.withCredentials = true;\naxios.defaults.crossDomain = true;\n\n\n3. 在需要拉取视频流的组件中，使用 axios 发起 GET 请求：\n\njavascript\nimport axios from 'axios';\n\nexport default {\n // ...\n methods: {\n getVideoStream() {\n const url = 'http://192.168.30.134:554/cam/realmonitor?channel=1&subtype=0'; // 视频流的 URL\n\n axios.get(url, {\n responseType: 'arraybuffer', // 设置响应类型为 arraybuffer\n }).then(response => {\n const videoData = new Uint8Array(response.data); // 将返回的数据转为 Uint8Array 类型\n\n // 处理视频数据\n // ...\n }).catch(error => {\n console.error('Error fetching video stream:', error);\n });\n },\n },\n // ...\n};\n\n\n4. 在组件的模板中添加一个 <video> 元素，将视频数据绑定到 <video> 的 src 属性上：\n\nhtml\n<template>\n <div>\n <video ref="videoPlayer" controls></video>\n </div>\n</template>\n\n\n5. 在组件的生命周期钩子函数中，将视频数据绑定到 <video> 元素上：\n\njavascript\nexport default {\n // ...\n mounted() {\n this.getVideoStream(); // 获取视频流数据\n\n // 在视频数据更新时，将数据绑定到 <video> 元素上\n this.$watch('videoData', () => {\n const videoPlayer = this.$refs.videoPlayer;\n\n if (videoPlayer) {\n const videoBlob = new Blob([this.videoData], { type: 'video/mp4' });\n const videoUrl = URL.createObjectURL(videoBlob);\n\n videoPlayer.src = videoUrl;\n }\n });\n },\n // ...\n};\n\n\n通过以上步骤，你应该可以在 Vue 项目中成功拉取视频流并显示在 <video> 元素上了。请根据你的具体情况进行相应的修改和调试。