[JavaScript知识库]vue h5stream 使 rtsp 视频流在浏览器中播放

一、在官网中下载文件 https://linkingvision.cn/product/h5stream



下载 release 最新版本
二、解压后 第一次运行
文件， 只在刚安装时运行一次。
三、如需修改端口请找到 conf/h5ss.conf 这个文件。

四、运行 h5ss.bat 文件启动服务。
五、访问网址 ： http://localhost:8081 能访问到登录页安装成功。 admin 12345
六、引入文件

https://github.com/linkingvision/h5svue/tree/master/src/assets

h5splayer.js
h5splayerhelper.js

七、登录后查看接口api

八、调用登录 获取 strSession
九、登录成功后调用 AddSrcRTSP 接口添加流地址。
十、根据添加的 token 播放视频流

<div class="h5videowrapper h5container">
  <video class="h5video" id="h5sVideoid" controls></video>
</div>

export default {
  name: 'video-player',
  data() {
    return {
      // 视频参数
      videoid: this.h5videoid,
      h5handler: undefined,
      currtoken: undefined,
      ptzshow: false,
      proto: 'WS',
      strSession : undefined,
      http_video : undefined,
    }
  },
  created() {
    // 设置 rtsp 转码请求地址
    this.$data.http_video = axios.create({
      baseURL : 'http://localhost/:8081',
      timeout : '6000',
    })
  },
  // 页面销毁前执行
  beforeDestroy() {
    if (this.h5handler !== undefined) {
      this.h5handler.disconnect()
      delete this.$data.h5handler
      this.$data.h5handler = undefined
    }
    this.$data.currtoken = undefined
  },
  methods: {
    // 点击连接直播
    connectClick() {
    		// 获取转码服务器 session
           if (!this.$data.strSession) {
              this.$data.http_video.get('/api/v1/Login?user=admin&password=' + md5('12345')).then((res) => {
                if (res.status === 200) {
                  this.$data.strSession = res.data.strSession;
                  this.connectController('rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov')
                }
              }).catch((err) => {
                this.$message({
                  type: 'error',
                  message: '操作失败，请稍后重试！'
                })
              });
            } else {
              this.connectController('rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov')
            }
    },
    connectController(rtsp) {
      let str = 自定义token;
      this.$data.http_video.get('/api/v1/DelSrc?token='+str+'&session='+this.$data.strSession).then((res) => {
        this.$data.http_video.get('/api/v1/AddSrcRTSP?name='+str+'&token='+str+'&user=admin&password='+ md5('12345') +'&url=' + rtsp).then((res) => {
          if (res.status === 200) {
            this.PlayVideo(str);
          }
        });
      });
    },
    PlayVideo(token) {
      if (this.h5handler !== undefined) {
        this.h5handler.disconnect()
        delete this.h5handler
        this.h5handler = undefined
      }
      this.currtoken = token
      var root = process.env.API_ROOT
      var wsroot = process.env.WS_HOST_ROOT
      if (root === undefined) {
        root = window.location.protocol + '//' + window.location.host + window.location.pathname
      }
      if (wsroot === undefined) {
        wsroot = window.location.host
      }
      var conf1 = {
        videoid: 'h5sVideoid',
        protocol: window.location.protocol, //'http:' or 'https:'
        // host: window.location.host, //'localhost:8080'
        host: 'localhost:8081', //'localhost:8080'
        rootpath: '/', // '/' or window.location.pathname
        token: token,
        hlsver: 'v1', //v1 is for ts, v2 is for fmp4
        session: this.$data.strSession //session got from login
      }

      this.h5handler = H5sPlayerCreate(conf1)
      //this.h5handler = new H5sPlayerRTC(conf);

      this.h5handler.connect()
    },
  }
}