HTML5实时显示摄像头视频

最新推荐文章于 2025-07-10 12:10:04 发布

王彦清

最新推荐文章于 2025-07-10 12:10:04 发布

阅读量1.3w

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： HTML5 node 摄像头视频

本文链接：https://blog.youkuaiyun.com/u011365831/article/details/78133165

本文介绍了如何利用HTML5与Node.js结合，实现实时显示摄像头视频流。首先，展示了页面HTML代码，然后讲解了在Node环境下安装和配置jsmpeg以及WebSocket-relay.js的过程。此外，还提供了ffmpeg命令示例，用于从不同RTSP源推流到本地HTTP服务器。最后，列举了海康和大华摄像头的RTSP连接格式。

1、页面HTML代码：

<canvas id="video-canvas" style="width: 100%; height: 387px;"></canvas>

<script type="text/javascript" src="<%=basePath%>resources/js/jsmpeg-master/jsmpeg.min.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById('video-canvas');								
	var url = 'ws://' + document.location.hostname + ':' + port + '/';	
	port = port + 2;
	var player = new JSMpeg.Player(url, {
		canvas : canvas
	});
</script>

2、需要Node做服务端，下载jsmpeg-master

http://download.youkuaiyun.com/download/wr751811032/9403310