web端加密获取视频监控播放和获取监控图片（获取视频、图片携带token方式请求）

这里我们选择flv插件，项目背景为vue，接下来我们来描述具体得视频流开发步骤

因为视频和图片需要相关插件，现进行安装插件；如本地项目有插件，可以跳过这些安装步骤

一、安装各类所需要的插件依赖包；

1、先安装flv.js

npm install --save flv.js

2、安装less-loader

npm install less-loader  --save-dev

3、安装jq

npm install jquery --save

4、安装v-auth-image 一个显示有认证机制的图片的vue2指令，不依赖axios、含有加载成功或失败回调、可设置默认图片、无限制headers。

npm i v-auth-image

5、安装style-loader

npm install style-loader

二、视频代码

1、父级页面

playVideo(){

            var row=this.selectData;

            let videodlg=this.$refs["videoDlg"];

            var token=sessionStorage.getItem("token")

            var xhr = new XMLHttpRequest();

            xhr.open('GET','https://xxxxx.com.cn/api/v1/start-stream/'+row[0].hostName, true);

            //设置请求头参数的方式,如果没有可忽略此行代码

            xhr.setRequestHeader("Authorization",token);

            //关键部分

            xhr.send();

           // 处理响应数据

            xhr.onreadystatechange = function() {

                if (xhr.readyState === 4) {

                   let flvdata=JSON.parse(xhr.response);

                   console.log(flvdata.flv)

                   this.flvVideo=flvdata.flv

                    console.log(this.flvVideo)

                    this.titlename=this.flvVideo.hostName;

                let streamInfos={

                    StreamID:'111',

                    SMSID:'',

                    DeviceID:'111',

                    ChannelID:'111',

                    ChannelName:'111',

                    WEBRTC:'webrtc/base/socketaddress.h',

                    FLV:this.flvVideo,

                    // WS_FLV:res.data.stream,

                    // RTMP:res.data.stream,

                    // HLS:res.data.hls,

                    Transport:'TCP',

                    StartAt:'20201010',

                    Duration:2,

                    SourceVideoCodecName:'111',

                    SourceVideoWidth:200,

                    SourceVideoHeight:200,

                    SourceVideoFrameRate:1,

                    SourceAudioCodecName:'111',

                    SourceAudioSampleRate:10,

                    RTPCount:100,

                    RTPLostCount:20,

                    RTPLostRate:10,

                    VideoFrameCount:1,

                    AudioEnable:true,

                    Ondemand:true,

                    InBytes:1,

                    InBitRate:1,

                    OutBytes:1,

                    NumOutputs:1,

                    CascadeSize:1,