处理海康H5视频流中断与取流失败的解决方案

​🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来Vue篇专栏内容:处理海康H5视频流中断与取流失败的解决方案

前言

在现代Web应用中，视频流的稳定性和可靠性是用户体验的重要组成部分。尤其是在使用海康威视的H5视频流时，流中断和取流失败的问题时常出现，给用户带来不便。本文将通过分析Vue 3中与海康H5视频流相关的代码，探讨如何有效处理这些问题，并提供相应的解决方案。

代码分析与解决方案

1. 视频流控制

在Vue 3中，我们通过定义点击事件来控制视频流的切换。以下是左侧和右侧视频切换的代码片段：

const leftVideoClick = () => {
    videoType.value = videoType.value - 1;
    if (videoType.value < 1) {
        videoLeft.value = false;
        return;
    }
    videoLeft.value = true;
    updateTitle(videoType.value);
    getvideo(videoType.value);
};
​
const rightVideoClick = () => {
    videoType.value = videoType.value + 1;
    if (videoType.value > 3) {
        videoRight.value = false;
        return;
    }
    videoRight.value = true;
    updateTitle(videoType.value);
    getvideo(videoType.value);
};

在这段代码中，我们通过videoType来控制当前视频的类型，并在点击左右按钮时更新视频流。若videoType超出范围，则相应的按钮会被禁用。

2. 获取视频流

获取视频流的逻辑在getvideo函数中实现。该函数会根据当前的videoType请求视频数据，并随机选择四条唯一记录：

const getvideo = (type) => {
    let params1 = { type: type };
    const getRandomUniqueVideos = (results, count) => {
        const shuffled = results.sort(() => 0.5 - Math.random());
        return [...new Set(shuffled.slice(0, count))];
    };
    
    getHomeVideo(params1).then((res) =