关于在Vue项目中 使用rtsp视频监控的方法(采用h5c).亲测可用！！！

废话不多说，一共六步........

第一步：.https://linkingvision.cn/download/h5stream/  下载最新版本的h5s

第二步：解压后 修改压缩包中的文件 ../conf/h5ss.conf

如下图：

 

第三步：运行根目录下的regservice.bat文件，这个文件只要运行一次就行，以后不需要运行.

第四步：运行h5ss.bat文件，运行后不要关闭，浏览器输入网址http://localhost:8080/demo.html可以查看效果

第五步：在VUE项目中的使用 需要引入两个js文件 h5splayer.js,h5splayerhelper.js 并且这两个js文件必须向外暴露。完整的JS文件 请参考https://github.com/linkingvision/h5svue/tree/master/src/assets

第六步：下面是在VUE中的代码

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

<script>
    import {H5sPlayerWS,H5sPlayerHls,H5sPlayerRTC} from '../../store/camera/h5splayer.js'
    import {H5siOS,H5sPlayerCreate} from '../../store/camera/h5splayerhelper.js'
    export default {
        name: 'liveplayer',
        props:['h5id', 'h5videoid'],
        data () {
            return {
                videoid: this.h5videoid,
                h5handler: undefined,
                currtoken: undefined,
                ptzshow: false,
                proto: 'WS'
            }
        },
        activated() {
            console.log(this.h5id, "activated");
        },
        deactivated() {
            console.log(this.h5id, "deactivated");
        },
        beforeDestroy() {
            console.log(this.h5id, "beforeDestroy");
            if (this.h5handler != undefined)
            {
                this.h5handler.disconnect();
                delete this.h5handler;
                this.h5handler = undefined;
            }
            this.currtoken = undefined;
        },
        destroyed() {
            console.log(this.h5id, "destroyed");
        },
        mounted() {
            this.PlayVideo('token1');
        },
        methods: {
            PlayVideo(token)
            {
                if (this.h5handler != undefined)
                {
                    this.h5handler.disconnect();
                    delete this.h5handler;
                    this.h5handler = undefined;
                }
                this.currtoken = token;
                console.log("play ", 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:8089', //'localhost:8080'
                    rootpath:'/', // '/' or window.location.pathname
                    token:token,
                    hlsver:'v1', //v1 is for ts, v2 is for fmp4
                    session:'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
                };

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

                this.h5handler.connect();
            },
            CloseVideo(event)
            {
                var $container = $("#"+this.h5id);
                var $controls = $container.children(".h5controls");
                var $rtcbutton = $controls.children(".rtcbutton");
                if (this.h5handler != undefined)
                {
                    $rtcbutton.css("display", "none");
                    this.h5handler.disconnect();
                    delete this.h5handler;
                    this.h5handler = undefined;
                    this.$Notice.info({
                        title: "Stop successfully"
                    })
                }

            }
        }
    }
    //fill scale-down
</script>

<style scoped>

  .h5video{
    width: 80%;
    height: 50%;
    background: black;
  }
</style>

注意根据自己的情况 修改h5splayer.js,h5splayerhelper.js 的文件路径，代码中的host端口目前是写死的  这个端口需要和第2步骤h5ss.conf文件中的nHTTPPort保持一致