保姆级教程：vue2项目如何引用webrtc-streamer播放rtsp流视频

1、创建rtsp流视频

因为某些开发环境是没有可以用的摄像头的，但是又不知道自己写的是否能用，所以需要再本地创建 rtsp流视频，测试

1、下载VLC播放器

打开VLC的官网，官网的下载地址如下
vlc下载地址
进入官网后直接点击下载即可

2、安装VLC

①下载后的VLC是一个exe安装程序，双击打开

②这一步选择语言，按照自己喜好选择即可，然后点击OK

③然后点击下一步

④然后继续点击下一步

⑤这一步需要注意，勾选删除偏好设置与缓存
勾选后点击下一步

⑥下载地址选择
个人建议不要放在C盘，其他的都可以，我一般是直接把C改成D，选择完地址后直接点击安装

⑦等待一会安装完成，然后出现如下界面，直接点击完成就会自动打开软件

安装程序到此就结束了，然后下面是重要的点，要造rtsp视频流了

3、创造rtsp流

①点击媒体-> 流

②添加一个MP4文件

③然后点击串流，不要更改，直接点击串流字符

④出现这个界面就点击下一个

⑤这一步很重要，首先勾选再本地显示，然后选择rtsp，最后点击添加按钮

⑥这里输入名称，随意自定义即可，个人建议输入字母或者数字，方便记忆，我这里就输入的888，输入完成后就点击下一个就好

⑦这一步也非常重要，千万要仔细对待，出现这个界面后，点击红框选中的按钮

⑧视频编码器，勾选视频，然后编码参数这里选择H264

⑨音频编解码器，这里需要更改的地方比较多，勾选音频，然后编解码器选择Opus,码率输入64，声道输入1，采样率选择48000，

⑩然后输入这个自定义名称，也自定义即可，我一般喜欢输入的简单一些，输入完后点击创建即可

①① 点完创建后就回到这个页面了，然后配置文件选择刚刚的，我刚刚创建的自定义名称是888，大家选择自己创建的就好，选择完成后点击下一个

①② 然后到这个界面，直接点击流就好
到这一步，rtsp流地址就已经出来了，地址拼接方式如下

rtsp://IP:端口/名称

①③ 到这一步，视频就出来了，但是你会发现特别卡顿，

①④ 这里再点击工具->偏好设置，
输入/编解码器，这里的硬件加速解码选择视频加速这个选项，然后你就会发现视频不卡顿了

①⑤到这里，就知道我的rtsp视频流地址了，
rtsp://192.168.110.89/8554/888,这里的端口是8554，是固定不变的，只需要更改自己的IP和文件名称就好
有人不知道自己电脑的IP地址，我也顺便给大家说一下，电脑按下win+r键，输入cmd

然后再弹出来的终端中输入

ipcong
红框勾选的地方就是自己电脑的IP地址了

4、搭建webrtc-streamer环境

①下载webrtc-streamer
下载地址

②选择这一个下载

③下载后的解压文件，里面的内容是这样的

④打开bin目录，里面只有一个exe文件，双击打开，打开后会出现一个终端页面，这个页面不要关闭，缩小就好

2、项目使用

1、项目引入webrtc-streamer

①打开这个share文件夹

②再进入webrtc-streamer这个文件夹，再进入里面的html文件夹，路径如下

把html里面的webrtcstreamer.js这个文件，还有libs里面的这个adapter.min.js文件，放到自己的项目的public文件下

③然后项目里面的index.html引入这两

2、项目使用

①新建一个video，尺寸大小自己随便来

  <div class="hello">
    <video id="videoElement" autoplay muted controls class="box"></video>
  </div>

②编写加载方法
首先定义两个地址，一个是视频服务的地址，刚刚启动的那个终端，地址是IP+8000端口，8000是固定的，rtsp流视频地址也再上文中教过了，往上翻翻看如何生成

     const videoServer = 'http://192.168.110.89:8000' // 服务地址
      const rtspUrl = 'rtsp://192.168.110.89:8554/888' // rtsp流地址

然后将盒子加入到new的对象中去，注意，这里的videoElement是ID

      this.webRtcStreamer = new WebRtcStreamer('videoElement', videoServer);

然后就是connect方法，传入的参数很简单，前两个一样，中间跟着我的设置来，rtsp_transport这个是避免视频里加载的特别慢的，

   this.webRtcStreamer.connect(
        rtspUrl,     // ✅ videourl
        rtspUrl,      // ✅ audiourl
        {
          rtsp_transport: "tcp",
          timeout: 60
        },
        null,              // ✅ localstream
        null               // ✅ prefmime
      );

然后整个方法就是这样的

   init () {
      const videoServer = 'http://192.168.110.89:8000'
      const rtspUrl = 'rtsp://192.168.110.89:8554/888'
      this.webRtcStreamer = new WebRtcStreamer('videoElement', videoServer);

      this.webRtcStreamer.connect(
        rtspUrl,     // ✅ videourl
        rtspUrl,      // ✅ audiourl
        {
          rtsp_transport: "tcp",
          timeout: 60
        },
        null,              // ✅ localstream
        null               // ✅ prefmime
      );
    }

然后再mounted里面引入这个方法

  mounted () {
    this.init();
  },

这个适合打开页面，就能看到视频已经加载出来了，而且加载的很快，

这里有个前提是,vlc播放的源视频要一直再播放，项目中才能播放，我这里用了一分钟的mp4视频，然后点击了循环播放，就可以一直推rtsp流了

3、效果图