WEB端播放华为海康大华视频方案

类似标题：谷歌浏览器播放华为海康大华视频方案

方案

以下方案相当于给需要播放视频的WEB系统做了一个专用的浏览器，通过专用浏览器的CS客户端组件播放视频，当然，这个专用浏览器是需要安装的

1. 使用WPF编写一个客户端程序，嵌入CefSharp浏览器控件，除了浏览器之外无其它界面元素，客户端窗体也没有边框和标题栏，如效果图所示
2. 浏览器加载WEB系统，WEB系统登录后把Token传给WPF客户端，客户端使用Token可以请求WEB系统的接口，获取数据。
3. WEB系统需要播放实时视频或录像回放时，使用nanoid.js为播放器生成一个唯一标识，计算播放器在浏览器中的位置、长宽，然后把播放器唯一标识、位置、长宽、摄像机设备ID集合通过JS调用C#方法传给客户端，客户端根据位置、长宽显示播放器组件。

说明

1. WEB端为Vue开发的系统，WEB系统内有Tab页，如果有子系统跳转，或window.open，客户端会打开新窗体加载跳转页

效果图

效果图说明

1. 页面为BS页面，视频弹窗是用layui做的，也是BS的，视频播放是CS控件，WPF通过WindowsFormsHost加载的Winform控件播放视频
2. 当BS弹窗最大化、还原、移动时，通过JS调用C#方法更新视频播放CS控件的位置、长宽
3. BS弹窗最小化时隐藏视频播放CS控件，还原时显示
4. BS弹窗关闭时，释放视频播放CS控件占用的资源
5. 视频播放CS控件，全屏功能正常，单视频全屏功能正常，单视频仅在视频播放CS控件中最大化显示功能正常

WEB端测试页面代码

    

    
    
    

    
    
    

    

    



    

        
    
    

        测试输入框：
    
    

        
    
    

        
    

    

        
        
        
    
    

        
        
        
        
        
    
    

        
    

    
    

        
            这是一个BS组件，视频能把我挡住
        
        

        
            这是一个BS组件，视频能把我挡住
        
        

        
            这是一个BS组件，视频能把我挡住