整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

WEB页面页面播放实时视频流


务述求

	需要在WEB端实时查看现场的视频监控(公司选型的是大华摄像机)
1

技术方案选型

1.  ffmpeg通过rtsp协议拉取视频流
2.  使用vlc media player 组件拉取视频流,在web端显示
3.  使用h5Stream在线对视频流拉取
123

实现大方向

  1. 把局域网内的摄像头地址做穿刺暴露给外网,并更具响应的视频拉取协议映射好端口
  2. 安装相应的组件,对相应视频流进行拉取
  3. 在WEB对通过中间件中转,显示到页面

实现细节

局域网内摄像头配置

公司选型的大华摄像机,所有摄像机出厂统一IP是192.168.1.108 
这个IP是可变的,可配置,但是前提这个IP可以访问到摄像头才允许更改
12

在地址栏输入192.168.1.108,第一次登陆默认账号密码都为admin,默认端口37777,第一次登陆会提醒你更改账号密码,记得不要忘记,后面视频拉取的需要用到,进入摄像头更具自己需要做个性化的配置。相关协议端口开放如下:

摄像头的ip地址穿刺

  1. 登录公司路由器,做端口映射
  2. 使用花生壳做穿刺。

使用路由器映射的方法,需要拿到路由器的账号密码,这个得跟公司的运维沟通下。
用花生壳做穿刺,会免费赠送一个域名,但是端口是不固定的,如果配置固定的端口,花生壳需要免费收费

在百度上输入本地IP会出现公司路由的外网IP。测试下两种方式是否可以通过外网IP来访问。

拉取视频流

我选用的的是rtsp协议来拉取视频流,大华摄像机的rtsp地址格式如下:

rtsp://[账号]:[密码]@[IP]:[端口]/cam/realmonitor?channel=1&subtype=0channel=1,此属性值对应渠道。subtype=0对应使用主码流还是辅码流

不管大华摄像机也好,还是海康威视摄像机,他们官网都提供本地局域网内的摄像头管理软件。进入官网,导航找到技术支持,里面有工具软件。比如大华的可以用smartPss,海康威视的有iVMS,视频流通过可以通过多个渠道来传输,所以channel要和本地软件中输出通道一致

比如的本地地址:rtsp://admin:Aa517518@192.168.0.108:554/cam/realmonitor?channel=1&subtype=0本地摄像头IP地址做穿刺后,把账号密码换成公网的ip和端口即可。

使用h5Stream拉取视频流

h5Stream网上的配置文档很多,不做一一赘述,其主要配置文件为:conf目录下的h5ss.conf文件。

我这里用的是rtsp协议,根据自己的需要配置,一般配置一个空闲的端口即可。

在web端的显示,在h5stream安装目录里, www目录下有相关的使用样例。

优点:配置简单,实时视频同步延迟小,画面清晰。firefox,chrom,ie都可以使用缺点:web页面操作相对复杂,在使用多个摄像头,配置清单驳长,h5stream为收费软件,h5stream为收费软件,h5stream为收费软件,重要的事情说三遍原免费版,会在实时视频流播放一个小时后断流,且当前暂时没有找到破解版。我在官网找到电话,打电话过去咨询,收费是100块钱一个摄像头,具体的价格可以再谈。

vlc media player 拉取

省事儿的话先下载vlc media player安装,也可以单独下载相应的控件。下载完成后:

把rtsp地址copy进地址栏,测试是否可正常显示,若不正常请检查网络是否通畅,账号密码是否正确,ip端口是否正确,通道是否一致而在web端是根据相关的标签来的:实例如下:

<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
    <param name="autostart" value="true" />
    <param name="allowfullscreen" value="false" />
</object>
1234

链接: vlc使用操作文档.

优点:测试简单,操作简单,WEB页面操作最简单,视频清晰度无损,延迟级小。缺点:谷歌只支持43版本及其更早,现在都70+版本了。火狐更直接,直接提示不支持。现在通过安装谷歌应用程序可以解决,但是面向客户的时候,客户不会使用体验版,所以注定就不会使用面就不会广

ffmpeg拉取视频流

首先ffmpeg是十分强大,且无比灵活,使用命令行来操作,相对来说就复杂得多,网上有很多安装ffmpeg介绍和ffmpeg命令介绍,这里就不做一一赘述。ffmpeg对视频流进行拉取,转成我们需要的视频码流,比如我们使用的rtsp协议,可以转成rtmp协议或者HLS(m3u8)协议。本文着重介绍此两种,其它的协议格式,原理上相同,只是转码后页面显示的细节不同。ffmpeg允许截图:

  1. 使用HLS(m3u8)协议
    也就是ffmpeg把拉取的rtsp转成HLS的视频流。
    命令实例:
    ffmpeg -i "rtsp://admin:Aa517518@192.168.0.108:554/cam/realmonitor?channel=1&subtype=0" -c copy -f hls -hls_time 2.0 -hls_list_size 1 -hls_wrap 15 D:/workspace/nginx-1.8.1/html/hls/test.m3u8
  2. 1

NGINX并不是一定要用,只要能读取到此今天文件即可。我是通过nginx吧request请求,定向到此文件,当然web项目比较灵活,可以通过web来做访问。生成的文件如下:

静态资源只要支持hls协议,使用今天资源,访问test.m38u文件即可引入video.js,我使用的是7.4.1

<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay width="960" height="400">
    <source src="http://192.168.0.118:1935/hls/test.m38u" type='rtmp/flv'>
</video>
123

缺点:此方法对网络依赖要求比较高,延迟高,容易卡顿

  1. rtmp协议
    命令样例:
    ffmpeg -rtsp_transport tcp -i "rtsp://admin:Aa517518@192.168.0.108:554/cam/realmonitor?channel=1&subtype=0" -f flv -r 25 -s 1280*720 -an "rtmp://192.168.0.118:1935/hls/mystream" 1其中把rtsp视频流转成rtmp视频流,通过video.js 直接在页面播放<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay width="960" height="400"> <source src="rtmp://192.168.0.118:1935/hls/mystream" type='rtmp/flv'> </video> 123

使用ffmpeg优缺点:优点:谷歌火狐IE都可以用。缺点: ffmpeg很强大,使用命令很灵活,很多细节问题需要琢磨,比如清晰度的问题,比如帧数的问题。ffmpeg比h5stream和vlc使用上确实麻烦许多,而且清晰度不如以上两种,延迟相对也高一下。需要建立相对完善的管理机制,因为全部使用命令,在客户页面关闭视频流时,后台还在不停的拉取视频流,造成极大的资源浪费。

不足与思考

  1. 不足
    单个的视频播放,注定应用面相对狭窄,相当于只写了一半的功能,在很多应用场景单个摄像头是不能满足业务需求的,一般需要拉取多个视频流,这个就很需要好好的思考的。
    多个摄像头,如果不在同一个局域网,那么拉取视频流占用较大的资源就无法避免
  2. 思考
    如果在同一的局域网,使用本地的工具,比如电视墙功能,组播功能,在多个镜头信息直接完成一个视频流拉取多个摄像头信息
    如果是不同的局域网,那么就需要使用ffmpeg的组播功能,vlc和h5stream的支持并不是很友好
    视频流并不是24小时拉取,如果使用ffmpeg的话,在空闲时间并不能主动停止拉取,在WINDOWS下也很难精确地停止某个视频流的拉取进程,在linux下会相对好一些,可以shell脚本找到相对于的pid并KILL

器之心报道

机器之心编辑部

在读取语言之后,脑机接口也可以实时读取人类脑中的画面了。

由俄罗斯脑机接口公司 Neurobotics、莫斯科物理技术学院(MIPT)研发的一种全新脑机接口算法最近被公之于众,它可以利用人工神经网络和脑电图将人类大脑中的图像实时显示在计算机屏幕上。而且,与马斯克脑机接口公司研发的「大脑缝纫机 」不同,这种脑机接口无需开颅植入电极,在临床和日常生活中应用更加广泛。

一位被试正在使用该脑机接口。右下角是被试观看实时画面,右上角是通过脑机接口重建的画面。

今年 7 月,Facebook 与加州大学旧金山分校(UCSF)有关脑机接口实时读取人类语言的研究刚刚登上《Nature》子刊,其快速解码的机器学习算法效果令人惊叹。

现在看来,我们不仅有望实现「意念打字」,或许还可以使用人眼这一「精度超高」的摄像头来进行录像,实现科幻影视作品描绘的图景。不过,这篇莫斯科物理技术学院的论文还没有经过同行评审。

英剧《黑镜》一集中的男主角过海关时被要求回放自己通过某种设备肉眼录下的视觉记忆。

对于研究者来说,新成果使得构建由脑信号控制的中风后康复装置成为可能。研究团队在 bioRxiv 上发表了相关研究论文,还发布了一段他们「读心」系统的效果视频。虽然画面比较模糊,但我们依然可以分辨出画面中的大致场景类别(如人、瀑布、车景)。

视频中原始图像和神经网络处理 EEG 信号重建的图像对比(由于版权原因,人像原图被替换了)。

为了构建这一设备,神经生物学家需要理解大脑如何编码信息。其中一个关键方面是,研究人们在观看视频时感知视觉信息的大脑活动过程。

现有的解决方案是,要么使用功能磁共振成像来提取观察到的图像,要么通过植入物直接分析来自神经元的信号。两种方法在临床和日常生活中的应用都非常有限。

俄罗斯研究者开发的这种脑机接口依赖的是人工神经网络和脑电图(EEG),后者是一种可以通过非侵入式电极(无需手术植入)记录脑电波的技术。通过分析大脑活动,该系统可以实时重现人类看到的图像。

「我们正在进行国家技术计划(National Technology Initiative)神经网络辅助技术项目,该项目致力于构建一种脑机接口,让中风患者控制手臂外骨骼、瘫痪患者驾驶电动轮椅等,最终目标是让健康的人也能提高神经控制的准确率,」MIPT Neurorobotics 实验室负责人 Vladimir Konyshev 表示。

技术细节

该脑机接口的构建实验共分为两个阶段。

在第一阶段,神经生物学家让健康的人观看一些 10 秒的 YouTube 视频片段,总共 20 分钟。研究团队随机选择了 5 个视频类别:抽象形态、瀑布、人脸、移动的装置和汽车运动。

通过分析脑电图数据,研究者发现,每一类视频的脑电波是不同的。这使得研究小组能够实时分析大脑对于视频的反应。

在实验的第二阶段,研究者从五个类别中随机选择了三个类别并开发了一个本地反馈(native feedback)模型,反馈模型的核心思想是将脑机接口分类器的预测结果以自然图像的形式呈现出来,而且要尽可能与实际观察到的图像接近。

该模型分为两个神经网络:一个用于从「噪声」中生成随机特定类别图像,另一个根据脑电图生成类似的「噪声」。接下来,该团队训练这两个网络协同工作,将脑电图信号转换为与被试观看内容相似的实际图像。

论文中提到的本地反馈模型如下图所示。

图 2:本地反馈模型的总体方案。

将降维后得到的 20 维脑电图特征向量映射到预先训练好的图像自编码器的潜在空间中,这个自编码器能够重建几个预学习类别的自然图像。图像解码器不依赖于任何神经生理学数据,仅考虑一组刺激图像即可进行预训练。特征映射器是单独训练的,因为它既需要脑电图特征库,也需要一个训练好的图像解码器。

图像解码器

图像解码器(ID)是图像到图像卷积自编码器模型的一部分。编码器部分基于预训练的 VGG-11 模型。解码器部分由全连接输入层组成,用于维度增强,然后是 5 个解卷积块,每个解卷积块包含一个解卷积层,然后是 ReLU 激活。最后的解卷积块包含双曲正切激活层。解码器生成 192×192×3 维的彩色图像(见图 3a)。

图 3. 图像解码器.a)模型结构;b)常规训练

除了图像重建之外,解码器还有一个特定的潜在空间分布。他们通过引入一个图 3(b)所示的训练过程来解决这个问题。

脑电图特征映射器

脑电图特征映射器的目标是将脑电图特征域的数据转换成图像解码器潜在空间域。在理想状态下,观察到的图像和此时的脑电图记录最终会转换为同一个潜在空间矢量图,因此解码器能够根据刚才看到或想象的场景去生成一个正确的视觉图像。

另一个问题是如何应对嘈杂的数据:由于存在未检测到的伪像,或者被摄对象分散注意力,实时记录场景中的脑电图信号属性可能会发生显著变化。此时反馈系统应避免出现混乱的图像切换,以免给观察对象太多的压力。

人类脑中的图像是连续数据,所以使用循环神经网络就变得顺理成章了——新的算法使用了 LSTM 组件作为循环单元。此外,研究人员还整合了注意力机制。

图 4,脑电图特征映射。a)模型结构;b)训练方法。

测试结果

为了测试该系统呈现头脑活动的能力,研究者选了一些同一类的以前看过的视频。正如他们看到的那样,脑电图被记录下来,然后反馈给神经网络。系统通过了测试,生成了具有可信度的图像,90% 都可以很轻松地进行分类。

和大多数 AI 算法一样,研究人员提出的神经网络模型是用 Python 实现的,运行的计算机也只需普通台式机:英特尔 i7 处理器,英伟达 GeForce 1050Ti 显卡。在读取的过程中,算法可以处理每秒 3 帧图像。通常,在分类上约有 90% 的重建图像是可识别的程度。

「此外,我们可以把这个当作实时脑机接口的基础。在当前的技术条件下,Elon Musk 那样的侵入式接口存在手术性质复杂和快速退化的问题——基本上几个月内就失效了。我们希望可以最终设计出更实用也不需要植入的神经接口。」研究者补充道。

论文:https://www.biorxiv.org/content/10.1101/787101v2

参考内容:https://techxplore.com/news/2019-10-neural-network-reconstructs-human-thoughts.html

交易数据的实时统计是电商网站一个核心功能,可以帮助用户实时统计网站的整体销售情况,快速验证“新销售策略”的效果。我们今天介绍一个基于表格存储(Tablestore)实现交易数据的实时计算,给大家提供一个新使用方式。

Tablestore作为在线的结构化数据库,提供了毫秒级的访问延时和丰富的查询方式,能高效的支撑交易数据的存储和查询,同时Tablestore已经原生支持阿里云的流计算框架Flink/Blink,可以实现数据的实时计算。

架构

示例设计

基本场景

注意:示例是模拟一个电商网站的交易数据的存储和实时计算,目的是为了展示Tablestore + Blink的使用流程。

用户通过SDK将网站交易数据实时的存储(PutRow/BatchWrite/TableStoreWriter)到Tablestore的source_order表中,Tablestore通过Tunnel服务,将实时增量的数据流入到Flink/Blink中,每5秒进行一次聚合计算,并将计算的结果重新写回Tablestore的sink_order表中。最后提供给“大屏”实时读取(GetRange)展示。

Source表(源表)- source_order

source表是原始数据表,存储了所有交易记录。

Sink表(结果表)- sink_order

Flink SQL

DDL参考

https://help.aliyun.com/document_detail/62515.html

注意:当前Blink在支持Tablestore source上还有些限制,只能运行ProcessingTime的方式,未来会支持EventTime模式,按照用户数据参数的时间进行计算。

-- Source 源表创建
CREATE TABLE ots_input (
 metering VARCHAR,
 orderid VARCHAR,
 price DOUBLE,
 byerid BIGINT,
 sellerid BIGINT,
 productid BIGINT,
 primary key(metering,orderid),
 ts AS PROCTIME()
) WITH (
 type = 'ots',
 instanceName = 'ordertest',
 tableName = 'source_order',
 accessId = '******************',
 accessKey = '******************',
 endpoint = 'http://ordertest.cn-zhangjiakou.vpc.tablestore.aliyuncs.com',
 tunnelName = 'blink_agg'
);
-- Sink 结果表创建
CREATE TABLE ots_output (
 metering VARCHAR,
 ts BIGINT,
 price DOUBLE,
 ordercount BIGINT,
 primary key(metering,ts)
) WITH (
 type = 'ots',
 instanceName = 'ordertest',
 tableName = 'sink_order',
 accessId = '******************',
 accessKey = '******************',
 endpoint = 'http://ordertest.cn-zhangjiakou.vpc.tablestore.aliyuncs.com',
 valueColumns = 'price,ordercount'
);
-- 计算
INSERT INTO ots_output
SELECT 
 DISTINCT metering as metering,
 CAST(TUMBLE_START(ots_input.ts, INTERVAL '5' SECOND) AS BIGINT) AS ts,
 SUM(price) as price,
 COUNT(orderid) as ordercount
FROM ots_input
GROUP BY TUMBLE(ts, INTERVAL '5' SECOND),metering;

实战

第一步:准备账户与开服

准备表格存储实例,可以参考《表格存储实例创建》

https://help.aliyun.com/document_detail/55211.html

准备Flink/Blink项目,可以参考《Blink如何购买》

https://help.aliyun.com/document_detail/62458.html

第二步:创建资源

表格存储资源

表格存储控制台入口,创建表格存储实例ordertest (用户自定义即可,下面对于参数位置更换为自定义的实例名),并记录实例的VPC地址

同时在控制台创建Source表和Sink表, 并为Source表(source_order)开启一个Tunnel服务blink_agg

图三 Source表(source_order)

图四 Sink表(sink_order)

图五 源表和目标表

图六 创建通道

Blink资源

Blink控制台入口,创建一个Blink项目(独享模式要创建集群之后才能创建项目),分别创建一个作业,agg_order,并将上面的Flink SQL粘贴到窗口中,上线服务

在运维窗口中启动该任务

第三步:压入数据 并 实时获取结算结果

1 准备配置文件

程序默认会从'~/tablestoreConf.json'获取配置

vim ~/tablestoreConf.json
# 内容
{
 "endpoint":"http://ordertest.cn-zhangjiakou.ots.aliyuncs.com",
 "accessId":"************",
 "accessKey":"************",
 "instanceName":"ordertest"
}

2 构建源码

mvn install
cd target
tar xzvf stream-compute-1.0-SNAPSHOT-release.tar.gz

3 启动压力器和模拟大屏

可以直接下载工具包:stream-compute-1.0-SNAPSHOT-release.tar.gz

# 窗口1
./bin/mock_order_generator
# 窗口2
./bin/data_show_screen

4 效果

源码

源码:https://github.com/aliyun/tablestore-examples/tree/master/demos/StreamCompute

附件下载:https//:yq.aliyun.com/attachment/download/?id=6940​

作者:chen1255