---

因为HTML5不能直接播放RTSP视频，所以需要进行转换为可供web加载的websocket形式，展示在canvas上，这个node-rtsp-stream包的作用就是调用ffmpeg程序，对视频流进行转换

yarn add node-rtsp-stream

main.js中引入模块

const Stream = require('node-rtsp-stream');

然后开启本地的流转化，通过ffmpeg将rtsp转换为websocket形式展示在canvas中

stream = new Stream({
    name: 'name',
    streamUrl: 'rtsp://admin:admin@192.168.1.105/h264/ch1/av_stream',
    wsPort: 9999
});

index.html中引入jsmpeg包

<script src="https://cdn.bootcss.com/jsmpeg/0.2/jsmpg.min.js"></script>

在放置视频的地方：

<canvas id="videoCanvas" width="550" height="360" style="width:550px; height: 360px;"></canvas>

加载本地转换后的视频流：

// 加载视频
setTimeout(function(){
    client = new WebSocket('ws://localhost:9999');
    var canvas = document.getElementById('videoCanvas');
    var player = new jsmpeg(client, {canvas:canvas, autoplay:true, loop:true});
}, 6000)

这里给出了一个6秒的延时（我运行的时候不加延时视频不能正常加载，控制台再刷新一下才行，可能的原因是启动ffmpeg.exe转化视频流需要些时间）

最后，不要忘记下载ffmpeg: https://www.ffmpeg.org/download.html 把下载得到的windows平台下的ffmpeg.exe放置在项目根目录即可