使用canvas来实时播放RTSP视频

2023-05-25,,

HTML5的标签可以用使用下来面的方式来播放静态视频

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

但目前桌面版本的chrome,firefox,ie却无法播放实时视频流。但在移动端可以使用HLS来播放实时视频。

除了Video可以播放视频外还可以使用canvas来播放视频。原理是使用websocket来取视频,然后解码成图片,渲染到canvas上。

在npm上可以使用node-rstp-stream来转码RTSP视频流

github地址:https://github.com/phoboslab/jsmpeg

使用canvas来实时播放RTSP视频的相关教程结束。

《使用canvas来实时播放RTSP视频.doc》

下载本文的Word格式文档,以方便收藏与打印。