这里我们选择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,