h5 播放摄像头视频（转）

最新推荐文章于 2025-06-20 15:17:34 发布

yournevermore

最新推荐文章于 2025-06-20 15:17:34 发布

阅读量1.5k

点赞数

分类专栏：前端

前端专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何利用HTML5的canvas元素和JSMPEG库实现网页上的实时视频流播放。通过WebSocket连接到Node.js服务器，再由服务器通过ffmpeg获取视频源，实现了从前端到后端的完整视频流解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：https://blog.youkuaiyun.com/u011365831/article/details/78133165

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

npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm install ws -g

添加 NODE_PATH 和path 环境变量，路径是modules模块儿的所在路径，注意用户模块和全局安装模块儿的路径不同，根据需要选择，不设置服务器报错找不到模块module

node D:\lang\nodejs\node_modules\jsmpeg-master\websocket-relay.js 123456 8981 8982

ffmpeg -i rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov -f mpegts -codec:v mpeg1video -bf 0 -codec:a mp2 -r 120 -q 2 http://localhost:8981/123456/640/480/

ffmpeg -i rtsp://218.204.223.237:554/live/1/66251FC11353191F/e7ooqwcfbqjoo80j.sdp -f mpegts -codec:v mpeg1video -bf 0 -codec:a mp2 -r 120 -q 2 http://localhost:8981/123456/640/480/

海康：
rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream

rtsp://admin:12345@192.0.0.64:554/h264/ch1/main/av_stream

大华：
rtsp://username:password@ip:port/cam/realmonitor?channel=1&subtype=0