EasyMedia播放rtsprtmp视频流（flvhls）

news2025/2/25 7:21:39

学习链接

MisterZhang/EasyMedia - gitee地址

EasyMedia转码rtsp视频流flv格式，hls格式，H5页面播放flv流视频

EasyMedia播放rtsp视频流（vue2、vue3皆可用）

EasyMedia转码rtsp视频流flv格式，hls格式，H5页面播放flv流视频

flv.js直播点播，播放flv视频时快进、重连、卡死、延迟等问题

banmajio/RTSPtoHTTP-FLV - gitee 使用JavaCV开发的rtsp流转http-flv(rtmp也支持但不建议)流并进行推流的流媒体服务

Java中使用FFmpeg拉取RTSP流

rtsp-flv-spring-boot-starter

zzhua/IPCLiveServer

nginx+ffmpeg+springboot+vue+西瓜视频-播放海康摄像头

Springboot实现Netty-websocket+rstp+ffmpeg+jsmpeg.js实现视频播放支持ws和http模式

xgc/easy-flv - 这个测试过了海康的rtsp可以播放，它没有使用netty，用的javacv，AsyncContext异步请求，代码量小

endless/red5-rtmp-push - java版天网人脸识别系统，获取视频流 进行人脸识别后推送到流媒体服务器实时展示

huangfei1987xx/监控视频流转换

三人行/cubic-video

aizuda/zlm4j - 开源流媒体框架ZLMediaKit C API JAVA实现，打造属于自己的流媒体服务

  • 胖虎/j-media-server - 开源流媒体服务器ZLMediaKit Java Api实现实例项目
  • ZLM4J开发指北
  • ZLMediaKit 文档

[webrtc-streamer]

  • 史上最详细的webrtc-streamer访问摄像机视频流教程
  • vue实现rtsp视频流浏览器实时播放
  • VUE3 播放RTSP实时、回放(NVR录像机)视频流（使用webrtc-streamer）
  • vue项目中播放rtsp视频流

文章目录

  • 学习链接
  • 介绍
    • 前言
    • 理解
  • 步骤
    • easydarwin启动rtsp服务，ffmpeg推送摄像头（模拟rtsp视频流）
    • nginx添加rtmp支持模块，obs推送本地桌面（模拟rtmp视频流）
    • 启动EasyMedia
    • 添加流
    • 效果
      • 演示FLV
      • testFlv.html
      • testFlv2.html
      • 演示hls
      • testHls.html
      • testHls2.html
  • 播放海康rtsp视频
  • EasyMedia文档
    • 如何运行
      • flv播放
      • hls播放
      • 参数使用
      • 页面功能
      • restful api
      • 云台功能

介绍

Springboot、netty实现的http-flv、websocket-flv直播点播，支持rtsp、h264、h265、rtmp等多种源，h5纯js播放（不依赖flash），不需要nginx等第三方拉流服务，低延迟（支持识别h264、aac编码自动转封装）

前言

首先，浏览器无法直接播放rtsp或rtmp格式的视频流，就比如之前 nginx搭建直播推流服务中，我们通过obs把流推送到nginx的rtmp服务，此时可以通过vlc直接通过rtmp的url链接直接播放rtmp视频流，但是浏览器不能直接使用这个rtmp的url链接，因此就通过nginx的rtmp模块插件配置到http服务开启flv_live，这样浏览器就访问这个http服务来播放视频了。

因此，要在浏览器播放rtmp和rtsp视频流，需要对这些视频流做转换。java提供了javacv库可以做到这个，easyMedia使用了JavaCV库实现流媒体播放。

理解

1、EasyMedia通过Netty启动8866媒体服务端口用来处理获取视频数据的 http请求和ws请求，并且维护这些http客户端和ws客户端
2、拉取视频流数据，然后将视频流数据写给http客户端和ws客户端实现视频播放
3、拉取视频流数据的方式，在EasyMedia中有2种：ffmpeg实现 和 JavaCV实现
4、ffmpeg实现：客户端连接上来，指定要播放的视频源，本地会启动1个客户端服务，并监听1个端口，然后调用ffmpeg的命令将视频源数据推送到启动的客户端服务中，这样客户端服务就拿到了ffmpeg推送过来的数据，然后客户端服务就将数据发给对应的http客户端和ws客户端
5、JavaCV实现：客户端连接上来，指定要播放的视频源，通过拉流器获取到视频数据，然后通过推流录制器将视频帧数据发送给对应的http客户端和ws客户端
6、拉取到视频流数据之后，查看是否还存在需要该视频流数据的客户端，如果还有就继续拉取，如果没有，就停止拉取。

7、EasyMedia还支持hls，对某个视频源开启hls时，会调用ffmpeg的命令将视频源转换得到ts视频数据和m3u8视频播放数据，并且这个ffmpeg命令会将这些数据都会发送http请求到EasyMedia服务的接口，然后将数据保存到Map内存中。播放时就直接从内存中去找，拿对应的数据。关闭hls就销毁process。

步骤

easydarwin启动rtsp服务，ffmpeg推送摄像头（模拟rtsp视频流）

启动easydarwin，可以参考：EasyDarwin搭建直播推流服务，注意到rtsp服务端口是10054
在这里插入图片描述
把摄像头捕捉的视频推过去

ffmpeg -f dshow -i video="Integrated Camera" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:10054/test

在这里插入图片描述
此时可以通过vlc打开此流查看是否能够正常查看到视频 rtsp://127.0.0.1:10054/test
在这里插入图片描述

nginx添加rtmp支持模块，obs推送本地桌面（模拟rtmp视频流）

nginx添加rtmp支持模块参考：nginx搭建直播推流服务

obs设置推送目的地，在来源添加显示器采集

在这里插入图片描述
在这里插入图片描述
同样通过vlc查看是否推送成功，rtmp://192.168.134.3:8002/flv/test
在这里插入图片描述

启动EasyMedia

拉下easymedia的代码，本地启动

...
--------------------------------------------------------- 
	 EasyMedia is running! Access address: 
	 media port at : 	 8866 
	 http port at : 	 8888 
	 web Local: 	 http://localhost:8888 
	 web External: 	 http://192.168.134.5:8888 
	 httpflv: 	 http://192.168.134.5:8866/live?url={您的源地址} 
	 wsflv: 	 ws://192.168.134.5:8866/live?url={您的源地址} 
	 hls(m3u8): 	 http://192.168.134.5:8888/hls?url={您的源地址} 
	 h2-database: 	 http://192.168.134.5:8888/h2-console 
---------------------------------------------------------

添加流

在这里插入图片描述

效果

演示FLV

点击四分屏，选择1个屏，然后选择流，点击播放。
在这里插入图片描述

  • ws://localhost:8866/live?url=rtsp://127.0.0.1:10054/test
  • ws://localhost:8866/live?url=rtmp://192.168.134.3:8002/flv/test
    在这里插入图片描述
  • 把桌面和本地文件配置上去
    在这里插入图片描述

testFlv.html

访问：localhost:8888/testFlv.html

在这里插入图片描述
testFlv.html是项目中已经存在的文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>xgplayer</title>
    <style type="text/css">
      html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
    </style>
  </head>
  <body>
    <div id="mse"></div>
    <script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.4/browser/index.js" charset="utf-8"></script>
      <script src="//cdn.jsdelivr.net/npm/xgplayer-flv.js/browser/index.js" charset="utf-8"></script><script>
      let player = new FlvJsPlayer({
		"id": "mse",
		"playsinline": true,
		"whitelist": [
				""
		],
		"url": "ws://localhost:8866/live?url=rtsp://127.0.0.1:10054/test"
      });
      
          </script>
  </body>
</html>

testFlv2.html

访问：localhost:8888/testFlv2.html
在这里插入图片描述

在static目录下新建testFlv2.html，验证是否可以播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FLV Stream Player</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
</head>
<body>
    <video id="videoElement" controls></video>
    <script>
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: 'http://localhost:8866/live?url=rtsp://127.0.0.1:10054/test'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>
</html>

演示hls

（注意，要先开启切片。支持hls内存切片（不占用本地磁盘，只占用网络资源））

首先，点击开启切片，会发出这个请求：http://localhost:8888/startHls?url=rtsp:%2F%2F127.0.0.1:10054%2Ftest，后台执行命令：C:\Users\zzhua195\.javacpp\cache\ffmpeg-4.4-1.5.6-windows-x86_64.jar\org\bytedeco\ffmpeg\windows-x86_64\ffmpeg.exe -i rtsp://127.0.0.1:10054/test -r 25 -g 25 -c:v libopenh264 -c:a aac -f hls -hls_list_size 1 -hls_wrap 6 -hls_time 1 -hls_base_url /ts/c9b5fc1f5dabc7615e14c901028fc0fb/ -method put http://localhost:8888/record/c9b5fc1f5dabc7615e14c901028fc0fb/out.m3u8
在这里插入图片描述
可以看到一直请求http://localhost:8888/hls?url=rtsp://127.0.0.1:10054/test，请求返回的是m3u8内容。然后请求对应的ts文件，达到了直播的效果，延迟比flv要高。
在这里插入图片描述

testHls.html

在这里插入图片描述
项目中已存在的文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>xgplayer</title>
    <style type="text/css">
      html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
    </style>
  </head>
  <body>
    <div id="mse"></div>
    <script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.4/browser/index.js" charset="utf-8"></script>
      <script src="//cdn.jsdelivr.net/npm/xgplayer-hls.js/browser/index.js" charset="utf-8"></script><script>
      let player = new HlsJsPlayer({
		"id": "mse",
		// "url": "http://localhost:8889/playback?cameraId=22&beginTime=2021-04-02 17:25:43&endTime=2021-04-02 17:26:08",
		// "url": "http://localhost:8889/playback",
		// "url":"http://localhost:8888/hls?url=rtsp://admin:VZCDOY@192.168.2.120:554/Streaming/Channels/101",
		"url":"http://localhost:8888/hls?url=rtsp://127.0.0.1:10054/test",
		"playsinline": true,
		"whitelist": [
				""
		]
      });
	  
	  console.log(player)
      
          </script>
  </body>
</html>

testHls2.html

可以看到也是不断的请求http://localhost:8888/hls?url=rtsp://127.0.0.1:10054/test，然后请求对应的ts文件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HLS Stream Player</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
    <video id="videoElement" controls></video>
    <script>
        if (Hls.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var hls = new Hls();
            hls.loadSource('http://localhost:8888/hls?url=rtsp://127.0.0.1:10054/test');
            hls.attachMedia(videoElement);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                videoElement.play();
            });
        }
        // For Safari, which supports HLS natively
        else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
            videoElement.src = 'http://localhost:8888/hls?url=rtsp://127.0.0.1:10054/test';
            videoElement.addEventListener('loadedmetadata', function () {
                videoElement.play();
            });
        }
    </script>
</body>
</html>

播放海康rtsp视频

在这里插入图片描述

EasyMedia文档

如何运行

java -jar EasyMedia-0.0.1-SNAPSHOT.jar
还可以这样改端口
java -jar -Dserver.port=页面端口 -Dmediaserver.port=媒体端口 EasyMedia-0.0.1-SNAPSHOT.jar

flv播放

#播放url规则，easymedia启动后，直接将此链接用flv播放器就能放
http://localhost:8866/live?url={您的源地址}
ws://localhost:8866/live?url={您的源地址}

例如rtsp：
http://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102
ws://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102

本地文件（支持格式参照ffmpeg支持的格式）：
http://localhost:8866/live?url=d:/flv/testVideo.mp4
ws://localhost:8866/live?url=d:/flv/testVideo.mp4

电脑桌面投影（url改成desktop即可）：
http://localhost:8866/live?url=desktop
ws://localhost:8866/live?url=desktop

hls播放

#用hls播放器播放，必须要通过页面或者api开启切片后才能放，这功能是最近新增内容，后期会做优化
# （支持hls内存切片（不占用本地磁盘，只占用网络资源））
#注意此处是http端口8888，后期将统一使用媒体端口
http://localhost:8888/hls?url={您的源地址}

参数使用

#参数
autoClose=false（无人观看一分钟后自动关闭推流，默认true开启自动关闭，false不关闭）
ffmpeg=true （true为强制使用ffmpeg，否则默认使用javacv）


#永久播放
http://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&autoClose=false
ws://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&autoClose=false

#ffmpeg方式推流（遇到不支持的流可以使用此参数，强制使用ffmpeg）
http://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&ffmpeg=true
ws://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&ffmpeg=true

#可以多个参数一起，只需参数前面增加&&&
http://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&autoClose=false&&&ffmpeg=true
ws://localhost:8866/live?url=rtsp://admin:VZCDOY@192.168.2.84:554/Streaming/Channels/102&&&autoClose=false&&&ffmpeg=true

页面功能

访问 http://localhost:8888

restful api

新增流 http://localhost:8888/add?url={您的源地址}&remark={备注}
停止并删除 http://localhost:8888/del?url={您的源地址}
停止flv推流 http://localhost:8888/stop?url={您的源地址}
开启flv推流 http://localhost:8888/start?url={您的源地址}
开启hls切片 http://localhost:8888/startHls?url={您的源地址}
停止hls切片 http://localhost:8888/stopHls?url={您的源地址}
查看保存的流 http://localhost:8888/list

云台功能

目前支持海康相机，大华待更新
http://localhost:8888/hk/ctrl?ip=192.168.2.120&op=left&username=admin&password=VZCDOY
ip 相机ip
op 操作，up、down、left、right、left_up、left_down、right_up、right_down、big、small
username 相机用户名
password 相机密码
port 控制端口（可不传）

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux C/C++编程中的多线程编程基本概念

Linux C/C++编程中的多线程编程基本概念

【图书推荐】《Linux C与C一线开发实践&#xff08;第2版&#xff09;》_linux c与c一线开发实践pdf-CSDN博客《Linux C与C一线开发实践&#xff08;第2版&#xff09;&#xff08;Linux技术丛书&#xff09;》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com…
阅读更多...
FPGA工作原理、架构及底层资源

FPGA工作原理、架构及底层资源

FPGA工作原理、架构及底层资源 文章目录 FPGA工作原理、架构及底层资源前言一、FPGA工作原理二、FPGA架构及底层资源 1.FPGA架构2.FPGA底层资源 2.1可编程输入/输出单元简称&#xff08;IOB&#xff09;2.2可配置逻辑块2.3丰富的布线资源2.4数字时钟管理模块(DCM)2.5嵌入式块 …
阅读更多...
C语言程序设计P5-3【应用函数进行程序设计 | 第三节】——知识要点：函数的嵌套调用和递归调用

C语言程序设计P5-3【应用函数进行程序设计 | 第三节】——知识要点：函数的嵌套调用和递归调用

知识要点&#xff1a;函数的嵌套调用和递归调用 视频 目录 一、任务分析 二、必备知识与理论 三、任务实施 一、任务分析 本任务要求用递归法求 n!。 我们知道n!n(n-1)(n-2)……1n(n-1)!递归公式为&#xff1a; 1.上面公式分解为n!n(n-1)!&#xff0c;即将求n!的问题变为…
阅读更多...
word实践：正文/标题/表图等的共用模板样式设置

word实践：正文/标题/表图等的共用模板样式设置

说在前面 最近使用word新建文件很多&#xff0c;发现要给大毛病&#xff0c;每次新建一个word文件&#xff0c;标题/正文的字体、大小和间距都要重新设置一遍&#xff0c;而且每次设置这些样式都忘记了参数&#xff0c;今天记录一下&#xff0c;以便后续方便查看使用。现在就以…
阅读更多...
【工具变量】上市公司企业劳动密集度数据（2008-2023年）

【工具变量】上市公司企业劳动密集度数据（2008-2023年）

一、测算方式&#xff1a; 参考《数量经济技术经济研究》陈勇兵&#xff08;2023&#xff09;老师的做法&#xff0c;使用员工数量与销售收入的比值作为劳动密集度的度量标准* o/ b% C( e* U我们做的比他完善&#xff0c;分为四类大家可以做核心变量或者稳健性检验Labor1&…
阅读更多...
YOLOv11修改推理图片的标签字体大小

YOLOv11修改推理图片的标签字体大小

先打开ultralytics/utils/plotting.py&#xff0c;并搜索font scale(vscode快捷键ctrlF): 在这行代码动手脚&#xff0c;例如调小分母就是把字改大&#xff1a; self.sf self.lw 完成&#xff0c;可以正常运行&#xff1a;
阅读更多...
TCP Analysis Flags 之 TCP Spurious Retransmission

TCP Analysis Flags 之 TCP Spurious Retransmission

前言 默认情况下&#xff0c;Wireshark 的 TCP 解析器会跟踪每个 TCP 会话的状态&#xff0c;并在检测到问题或潜在问题时提供额外的信息。在第一次打开捕获文件时&#xff0c;会对每个 TCP 数据包进行一次分析&#xff0c;数据包按照它们在数据包列表中出现的顺序进行处理。可…
阅读更多...
在paddle中安装python-bidi出错

在paddle中安装python-bidi出错

翻看网上解决方式&#xff0c;是由于系统中缺少 Rust 及其包管理器 Cargo。python-bidi 依赖 Rust 来编译其扩展&#xff0c;如果没有安装 Rust 和 Cargo&#xff0c;安装过程将无法继续。 解决方式 curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh但是我的终端…
阅读更多...
自动化测试工具Ranorex Studio（五十四）-CSV文件

自动化测试工具Ranorex Studio（五十四）-CSV文件

CSV文件 你也可以通过选择CSV文件数据连接器来使用CSV文件为你的测试套件提供数据。在添加了CSV数据连接器后&#xff0c;管理数据源的对话框将被打开。 你可以在表色标示部分编辑数据连接器的名字&#xff0c;也可以在绿色标示的部分选择你要用的CSV文件。选择或者取消蓝色标示…
阅读更多...
Flume基础概念

Flume基础概念

目录 作用组件构成ClientFlowAgentSourceSinkEvent 和Log4j的区别与定位事务传出流程输入到sourcesource端输入Channel 接收输入到SinkSink输出 作用 Flume可以从各种来源&#xff08;如日志文件、消息队列、网络数据、文件系统、数据库等&#xff09;收集数据&#xff0c;并将…
阅读更多...
FPGA实战篇（IP核之MMCM/PLL实验）

FPGA实战篇（IP核之MMCM/PLL实验）

1.MMCM/PLL IP 核简介 锁相环作为一种反馈控制电路&#xff0c;其特点是利用外部输入的参考信号控制环路内部震荡信号的频率和相位。因为锁相环可以实现输出信号频率对输入信号频率的自动跟踪&#xff0c;所以锁相环通常用于闭环跟踪电路。 锁相环在工作的过程中&#xff0c;当…
阅读更多...
Numpy基础练习

Numpy基础练习

import numpy as np 1.创建一个长度为10的一维全为0的ndarray对象,然后让第5个元素等于1 n np.zeros(10,dtypenp.int32) n[4] 12.创建一个元素从10到49的ndarray对象 n np.arrange(10,50)3.将第2题的所有元素位置反转 n[::-1]使用np.random.random创建一个10*10的ndarray对象…
阅读更多...
Probabilistic Face Embeddings 论文阅读

Probabilistic Face Embeddings 论文阅读

Probabilistic Face Embeddings 论文阅读 Abstract1. Introduction2. Related Work3. Limitations of Deterministic Embeddings4. Probabilistic Face Embeddings4.1. Matching with PFEs4.2. Fusion with PFEs4.3. Learning 5. Experiments5.1. Experiments on Different Bas…
阅读更多...
基于SSM框架企业人事管理系统的设计与实现

基于SSM框架企业人事管理系统的设计与实现

系统合集跳转 源码获取链接 一、系统环境 运行环境: 最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 IDE环境&#xff1a; Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以 tomcat环境&#xff1a; Tomcat 7.x,8.x,9.x版本均可 操作系统…
阅读更多...
云数据库 MongoDB

云数据库 MongoDB

MongoDB 是一个基于文档的 NoSQL 数据库&#xff0c;它与传统的关系型数据库不同&#xff0c;采用的是灵活的文档结构&#xff08;类似 JSON 格式&#xff09;。MongoDB 是开源的&#xff0c;且高度可扩展&#xff0c;通常用于处理大量的非结构化或半结构化数据。 云数据库 Mon…
阅读更多...
AcWing 3496. 特殊年份

AcWing 3496. 特殊年份

文章目录 前言代码思路 前言 写简单题没啥。反正都是要写的&#xff0c;先把能拿到的分数拿了&#xff0c;之后有机会再去啃一啃硬骨头。啃不下来就算了。 代码 #include<bits/stdc.h> using namespace std; char a1[10],a2[10],a3[10],a4[10],a5[10]; int main(){cin…
阅读更多...
Vite+Vue3项目实战：组件化开发与通信指南

Vite+Vue3项目实战：组件化开发与通信指南

一、典型的ViteVue3项目结构 续上文成功创建Vue3项目的脚手架&#xff0c;通过visual Studio Code软件打开刚刚创建的文件夹&#xff0c;将会看到这样一个项目结构。 使用Vite构建Vue3项目时&#xff0c;项目结构通常遵循一定的组织规则&#xff0c;以保持代码的清晰和可维护性…
阅读更多...
Html笔记（）蜘蛛纸牌之卡牌吸附

Html笔记（）蜘蛛纸牌之卡牌吸附

目的 蜘蛛纸牌中要实现牌组的连接&#xff0c;就需要吸附功能。从效果图中可以看出我们把一张牌拖到另一张卡牌上的时候&#xff0c;它会自动吸附过去并且左对齐。 效果 代码 <!DOCTYPE html> <html><head><style>body {display: flex;justify-cont…
阅读更多...
CDC YAML 在阿里云的最佳实践

CDC YAML 在阿里云的最佳实践

摘要&#xff1a;本文投稿自阿里云开源大数据平台数据通道团队&#xff0c;主要介绍了 Flink CDC YAML 在实时计算Flink版的最佳实践。内容分为以下五个部分&#xff1a; CDC YAML 简介CDC YAML 核心能力CDC YAML 应用场景阿里云 Flink CDC 企业级功能十分钟在阿里云免费实现一…
阅读更多...
在21世纪的我用C语言探寻世界本质——字符函数和字符串函数(2)

在21世纪的我用C语言探寻世界本质——字符函数和字符串函数(2)

人无完人&#xff0c;持之以恒&#xff0c;方能见真我&#xff01;&#xff01;&#xff01; 共同进步&#xff01;&#xff01; 文章目录 一、strncpy函数的使用二、strncat函数的使用三、strncmp函数的使用四、strstr的使用和模拟实现五、strtok函数的使用六、strerror和pe…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023