java 视频监控 分屏ui_视频监控网页ActiveX视频分屏播放控件开发

最近在搞视频监控项目,需要在网页上显示实时视频,于是网上找了很多资料研究如何在网页上播放视频,一种实现方式就是开发activex控件嵌入到网页中。

如下我将介绍如何开发一个可以分屏播放视频的activex控件 (部分内容也是从网上抄的,感谢各位劳动人民:))

1.创建ActiveX工程(使用VS2008)

1.选择“文件”菜单,然后选择“新建”->“项目”。

2.在“新建项目”对话框中,如下图1所示,选择“VisualC++”分类下的“MFC”。然后选择“MFC ActiveX控件”作为项目模板。

3.将新项目命名为“TVWallAX”,然后选择项目的保存目录,最后点击“确定”按钮,关闭“新项目”对话框,进入“MFC ActiveX控件”向导。

4.在“MFC ActiveX控件”向导中,如下图2所示,选择左侧的“控件设置”,进入控件参数设置页面。

5.在“Create control based on”下拉列表中选择“STATIC”。这表示我们使用的是一个静态控件,因为我们仅仅是显示输出而不接收输入。

6.在下面的“Additional features”的所有选项中,我们确认选中“Activates when visible”和“Flicker-free activation”这两个选项,同时确认“Has an About box dialog”选项没有被选中。

f2e56df4dce09f3e27fc3a6c75eb90e6.png

7.点击“Finish”按钮关闭整个“MFC ActiveX控件向导”对话框,然后向导就会为我们创建整个项目的源代码。默认情况下,向导创建的项目是使用共享MFC DLL的,这里我们需要改变这一设置。因为如果目标机器上没有安装MFC DLL,那么ActiveX控件就不会运行。我们常常看到一些网页上的ActiveX控件被显示为红色的叉叉,很多都是这个原因造成的。为了解决这个问题,我们使用静态的MFC DLL。从Visual Studio的菜单中选择“项目”->“属性”,然后切换到“配置属性”->“普通”,在配置页面中的“Use of MFC ”下拉列表中,将“use MFC in a shared DLL”切换成“Use MFC in a Static Library”就可以了。

以上步骤就完成了控件的基本框架。

2.设计分屏控件

接下来我们需要编写一个可以16分屏的控件,用户可以选择1分屏、4分屏、6分屏、9分屏、16分屏。如下:

722720a6f9c117b76c82d3d3af4c2082.png

设计3个类CPlayerItem、CPlayer、CPlayerGroup

0fbde7ec307d324dc9059758093725b5.png

CPlayerItem放在CPlayer上面,主要用来显示视频。CPlayerItem是CPlayer的子控件,比CPlayer尺寸小4个像素。

CPlayer放在CPlayerGroup上面,主要用来显示鼠标选中播放视频窗口(CPlayer)后的矩形框。

22c04bac381767c427f452056eea48b9.png

CPlayerGroup主要用来管理16个CPlayer。

CPlayerItem实现OnEraseBkgnd消息显示黑色背景

BOOL CPlayerItem::OnEraseBkgnd(CDC* pDC)

{

CRect rcWindow;

GetWindowRect(&rcWindow);

rcWindow.OffsetRect(-rcWindow.TopLeft());

pDC->FillSolidRect(&rcWindow,RGB(0,0,0));

return TRUE;

}

CPlayer实现OnEraseBkgnd消息显示用户选择当前播放窗口后的焦点框

BOOL CPlayer::OnEraseBkgnd(CDC* pDC)

{

CRect rt;

GetClientRect(rt);

pDC->FillSolidRect(rt,RGB(0,0,0));

DrawEdge(pDC);

return TRUE;

}

void CPlayer::DrawEdge(CDC *dc)

{

CRect rcWindow;

CRect rcTemp;

GetWindowRect(&rcWindow);

rcWindow.OffsetRect(-rcWindow.left,-rcWindow.top);

rcTemp=rcWindow;

// Draw edge

CPen cpEdge(PS_SOLID,1,m_clrEdge);

CPen *cpTemp;

cpTemp=dc->SelectObject(&cpEdge);

rcTemp.DeflateRect(1,1);

dc->Draw3dRect(&rcTemp,m_clrEdge,m_clrEdge);

dc->SelectObject(cpTemp);

}

3.CPlayerGroup分屏实现

CPlayerGroup中定义16个CPlayer,需要实现如下功能:

1.按用户选择的画面数显示对应个数的CPlayer。

2.正确布局当前所有CPlayer。

3.当窗口尺寸变化是调整CPlayer位置及尺寸。

4.把用户当前鼠标操作反馈给主界面,如用户点选视频播放窗口、用户最大化视频播放窗口等。

用户选择对应的画面数目就需要对各个CPlayer重新布局即重新计算在CPlayerGroup中对应的坐标位置。

voidCPlayerGroup::RecalWndPos()

{

CRectrcWindow;

GetClientRect(rcWindow);

intnWidth;

intnHeight;

intnPos;

//清空所有CRect

for(nPos=0;nPos

{

m_rcWnd[nPos]=CRect(0,0,0,0);

m_player[nPos].rcWnd=CRect(0,0,0,0);

}

//得到最大化CRect

m_rcWndMax=rcWindow;

//计算各个显示数量时的CRect

if(m_nCount==PlayCount1)

{

rcWindow.InflateRect(0,0,0,0);

m_rcWnd[0]=rcWindow;

}

elseif(m_nCount==PlayCount4)

{

nWidth    =rcWindow.Width()/2;

nHeight   =rcWindow.Height()/2;

m_rcWnd[0]=CRect(0,0,nWidth,nHeight);

m_rcWnd[1]=CRect(nWidth,0,rcWindow.Width(),nHeight);

m_rcWnd[2]=CRect(0,nHeight,nWidth,rcWindow.Height());

m_rcWnd[3]=CRect(nWidth,nHeight,rcWindow.Width(),rcWindow.Height());

}

elseif(m_nCount==PlayCount6)

{

nWidth    =rcWindow.Width()       /3;

nHeight   =rcWindow.Height()      /3;

m_rcWnd[0]=CRect(0,0,nWidth*2,nHeight*2);

m_rcWnd[1]=CRect(nWidth*2,0,rcWindow.Width(),nHeight);

m_rcWnd[2]=CRect(nWidth*2,nHeight,rcWindow.Width(),nHeight*2);

m_rcWnd[3]=CRect(nWidth*2,nHeight*2,rcWindow.Width(),rcWindow.Height());

m_rcWnd[4]=CRect(0,nHeight*2,nWidth,rcWindow.Height());

m_rcWnd[5]=CRect(nWidth,nHeight*2,nWidth*2,rcWindow.Height());

}

elseif(m_nCount==PlayCount8)

{

nWidth    =rcWindow.Width()       /4;

nHeight   =rcWindow.Height()      /4;

m_rcWnd[0]=CRect(0,0,nWidth*3,nHeight*3);

m_rcWnd[1]=CRect(nWidth*3,0,rcWindow.Width(),nHeight);

m_rcWnd[2]=CRect(nWidth*3,nHeight,rcWindow.Width(),nHeight*2);

m_rcWnd[3]=CRect(nWidth*3,nHeight*2,rcWindow.Width(),nHeight*3);

m_rcWnd[4]=CRect(nWidth*3,nHeight*3,rcWindow.Width(),rcWindow.Height());

m_rcWnd[5]=CRect(0,nHeight*3,nWidth,rcWindow.Height());

m_rcWnd[6]=CRect(nWidth,nHeight*3,nWidth*2,rcWindow.Height());

m_rcWnd[7]=CRect(nWidth*2,nHeight*3,nWidth*3,rcWindow.Height());

}

elseif(m_nCount==PlayCount9)

{

nWidth    =rcWindow.Width()       /3;

nHeight   =rcWindow.Height()      /3;

intx,y;

for(y=0;y<3;y++)

{

for(x=0;x<3;x++)

{

if(y==2)

{

if(x==2)

{

m_rcWnd[x+3*y]=CRect(x*nWidth,y*nHeight,

rcWindow.Width(),rcWindow.Height());

}

else

{

m_rcWnd[x+3*y]=CRect(x*nWidth,

y*nHeight(x+1)*nWidth,rcWindow.Height());

}

}

else

{

if(x==2)

{

m_rcWnd[x+3*y]=CRect(x*nWidth,y*nHeight,

rcWindow.Width(),(y+1)*nHeight);

}

else

{

m_rcWnd[x+3*y]=CRect(x*nWidth,

y*nHeight(x+1)*nWidth,(y+1)*nHeight);

}

}

}

}

}

elseif(m_nCount==PlayCount16)

{

nWidth    =rcWindow.Width()       /4;

nHeight   =rcWindow.Height()      /4;

intx,y;

for(y=0;y<4;y++)

{

for(x=0;x<4;x++)

{

if(y==3)

{

if(x==3)

{

m_rcWnd[x+4*y]=CRect(x*nWidth,y*nHeight,

rcWindow.Width(),rcWindow.Height());

}

else

{

m_rcWnd[x+4*y]=CRect(x*nWidth,

y*nHeight(x+1)*nWidth,rcWindow.Height());

}

}

else

{

if(x==3)

{

m_rcWnd[x+4*y]=CRect(x*nWidth,y*nHeight,

rcWindow.Width(),(y+1)*nHeight);

}

else

{

m_rcWnd[x+4*y]=CRect(x*nWidth,

y*nHeight(x+1)*nWidth,(y+1)*nHeight);

}

}

}

}

}

我们还需要重写CPlayerGroup对应的OnSize(UINT nType, int cx, int cy)消息处理函数,当窗口尺寸改变后需要重新对CPlayer布局。

最后把CPlayerGroup 类放到CTVWallAXCtrl上就完成分屏控件了。

dbb9412b3b7f4723d1f0d8c0b0255264.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/308423.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于.NetCore3.1系列 —— 日志记录之日志核心要素揭秘

前言在上一篇中&#xff0c;我们已经了解了内置系统的默认配置和自定义配置的方式&#xff0c;在学习了配置的基础上&#xff0c;我们进一步的对日志在程序中是如何使用的深入了解学习。所以在这一篇中&#xff0c;主要是对日志记录的核心机制进行学习说明。说明在上一篇中&…

listview在java中的使用_我的Android开发之路——ListView的使用

在Android开发过程中&#xff0c;遇到需要列表显示的时候&#xff0c;这时候就会用到listview。1.首先创建一个ListViewTest项目&#xff0c;选择empty activity类型。修改activity_main.xml的布局文件&#xff0c;添加listview控件&#xff0c;设置宽高和id等属性此时通过预览…

如何利用NLog输出结构化日志,并在Kibana优雅分析日志?

上文我们演示了使用NLog向ElasticSearch写日志的基本过程(输出的是普通文本日志)&#xff0c;今天我们来看下如何向ES输出结构化日志、在Kibana中分析日志。什么是结构化日志&#xff1f;当前互联网、物联网、大数据突飞猛进&#xff0c;软件越复杂&#xff0c;查找任何给定问题…

java打印设备集中管理_Kafka+Log4j实现日志集中管理

记录如何使用KafkaLog4j实现集中日志管理的过程。引言前面写的《SpringLog4jActiveMQ实现远程记录日志——实战分析》得到了许多同学的认可&#xff0c;在认可的同时&#xff0c;也有同学提出可以使用Kafka来集中管理日志&#xff0c;于是今天就来学习一下。特别说明&#xff0…

7-27 家谱处理 (30 分)(详解+map做法)map真香啊

一&#xff1a;题目 人类学研究对于家族很感兴趣&#xff0c;于是研究人员搜集了一些家族的家谱进行研究。实验中&#xff0c;使用计算机处理家谱。为了实现这个目的&#xff0c;研究人员将家谱转换为文本文件。下面为家谱文本文件的实例&#xff1a; John Robert Frank Andr…

微软开源基于 Envoy 的服务网格 Open Service Mesh

原文地址&#xff1a;https://techcrunch.com/2020/08/05/microsoft-launches-open-service-mesh/Open Service Mesh&#xff08;OSM&#xff09;是一个轻量级的、可扩展的、云原生的服务网格&#xff0c;它允许用户对高度动态的微服务环境进行统一管理、安全保护&#xff0c;并…

java servlet jsp javabean关系图_Servlet+JSP+JavaBean开发模式(MVC)介绍

好伤心...写登陆注册之前看见一篇很好的博文&#xff0c;没有收藏&#xff0c;然后找不到了。前几天在知乎上看见一个问题&#xff0c;什么时候感觉最无力。前两天一直想回答&#xff1a;尝试过google到的所有solve case&#xff0c;结果bug依然在。今天想回答&#xff1a;明明…

7-28 搜索树判断 (25 分)(思路加详解) just easy!

一&#xff1a;题目 对于二叉搜索树&#xff0c;我们规定任一结点的左子树仅包含严格小于该结点的键值&#xff0c;而其右子树包含大于或等于该结点的键值。如果我们交换每个节点的左子树和右子树&#xff0c;得到的树叫做镜像二叉搜索树。 现在我们给出一个整数键值序列&…

Azure DevOps+Docker+Asp.NET Core 实现CI/CD(一 .简介与创建自己的代理池)

前言本文主要是讲解如何使用Azure DevOpsDocker 来实现持续集成Asp.NET Core项目(当然 也可以是任意项目).打算用三个篇幅来记录完整的全过程觉得有帮助的朋友~可以左上角点个关注,右下角点个推荐CI/CD简介首先,我们先来简单的介绍一下什么是CI/CDCI全拼Continuous Integration…

7-31 笛卡尔树(25分)(题目分析+简单算法+详解+思路)

一&#xff1a;题目 7-31 笛卡尔树 (25 分) 笛卡尔树是一种特殊的二叉树&#xff0c;其结点包含两个关键字K1和K2。首先笛卡尔树是关于K1的二叉搜索树&#xff0c;即结点左子树的所有K1值都比该结点的K1值小&#xff0c;右子树则大。其次所有结点的K2关键字满足优先队列&#…

不仅性能秒杀Hadoop,现在连分布式集群功能也开源了

就在昨天&#xff08;2020年8月3日&#xff09;&#xff0c;涛思数据团队正式宣布&#xff0c;物联网大数据平台TDengine集群版开源。此次开源&#xff0c;我们在GitHub上传了23.9万行源代码&#xff0c;1198个源文件&#xff0c;包含我自己疫情期间写的一万余行C代码&#xff…

7-32 哥尼斯堡的“七桥问题” (25 分)(思路+详解+题目分析)两种做法任选其一

一&#xff1a;题目&#xff1a; 哥尼斯堡是位于普累格河上的一座城市&#xff0c;它包含两个岛屿及连接它们的七座桥&#xff0c;如下图所示。 可否走过这样的七座桥&#xff0c;而且每桥只走过一次&#xff1f;瑞士数学家欧拉(Leonhard Euler&#xff0c;1707—1783)最终解…

一次简单的服务器 cpu 占用率高的快速排查实战

前两天&#xff0c;朋友遇到一个线上 cpu 占用率很高的问题&#xff0c;我们俩一起快速定位并解决了这个问题。在征求朋友同意后&#xff0c;特发此文分享整个过程。本文以对话的形式展开&#xff0c;加上我的内心独白。文中对话与实际对话略有出入。友&#xff1a; 在吗&#…

7-33 地下迷宫探索 (30 分)(思路加详解)

一&#xff1a;题目 7-33 地下迷宫探索 (30 分)地道战是在抗日战争时期&#xff0c;在华北平原上抗日军民利用地道打击日本侵略者的作战方式。地道网是房连房、街连街、村连村的地下工事&#xff0c;如下图所示。 我们在回顾前辈们艰苦卓绝的战争生活的同时&#xff0c;真心钦…

联通定时休眠5G基站 戳破皇帝的新衣

近年来&#xff0c;5G被欧美政客、大公司、媒体连番炒作&#xff0c;在公开舆论上&#xff0c;5G成为了“科技制高点”&#xff0c;成为决定国家命运的“外星科技”&#xff0c;个别明星企业家还声称&#xff0c;“5G改变社会”&#xff0c;“5G应用后美国将成为落后国家”。但…

java中的线程不安全和实例解析

一&#xff1a;引言&#xff08;特指单核&#xff09; 所谓线程不安全&#xff0c;就是在共享数据时&#xff0c;不同的线程在执行时&#xff0c;出现数据的不准确&#xff0c;&#xff08;以模拟抢票和模拟银行取钱为例&#xff09;&#xff0c;那么我们的线程不安全具体指的…

记近一年线上项目经验及架构变更记录

简介M 项目, 是一个电子社保业务系统&#xff0c;2019.8 月团队接手了这个项目的开发工作&#xff0c;到 2020.7 月客户的业务量翻了&#xff14;倍&#xff0c;工作日同时在线员工数量&#xff14;&#xff10;人&#xff0c;以下记录总结 2019.8-至今项目的架构变化&#xff…

拓扑排序C++实现+实例解析(详解 兄弟们冲呀呀呀呀呀呀呀)

一&#xff1a;引言 既然是一种排序&#xff0c;那么肯定是按照某种规则进行排序&#xff0c;那么这么想的话&#xff0c;先了解基本知识&#xff0c;再来实战演练 1. AOV网&#xff08;Activity On Vertex Network)【顶点——表示活动】 是一个——有向无回路的图 顶点——表…

7-34 任务调度的合理性 (25 分)(思路加详解+兄弟们冲呀)

一&#xff1a;题目 假定一个工程项目由一组子任务构成&#xff0c;子任务之间有的可以并行执行&#xff0c;有的必须在完成了其它一些子任务后才能执行。“任务调度”包括一组子任务、以及每个子任务可以执行所依赖的子任务集。 比如完成一个专业的所有课程学习和毕业设计可…

.NET和.NET Core Web APi FormData多文件上传

【导读】最近因维护.NET和.NET Core项目用到文件上传功能&#xff0c;虽说也做过&#xff0c;但是没做过什么对比&#xff0c;借此将二者利用Ajax通过FormData上传文件做一个总结&#xff0c;通过视图提交表单太简单&#xff0c;这里不做阐述&#xff0c;希望对有需要的童鞋能有…