vue实时调用监控视频,vue调用摄像头直播
本文主要介绍了某视频剪辑软件实现监控视频直播的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
要想使用视频我们势必是需要安装视频的，而且在生产环境中我们也需要依赖它，所以如下
npm: npm安装video.js -S
新公共管理安装videojs-flash videojs-contrib-HLS-S
我们打开某视频剪辑软件工程中的主入口主页。射流研究…进行引入
//引入视频
从" video.js "导入视频；
进口video.js/dist/video-js.css；
Vue.prototype. $ video=Video
从" videojs-contrib-hls "导入HLS
vue。使用(HLS)；//要播放流媒体流
创建监控视频九宫格
模板
div class=cell
div class=手机玩家
div:class= cell class(I) v-for= I in cell count :key= I
播放视频：video= video info[I] v-if= cell count！=6 /播放视频
播放视频：video= video info[I] v-if= cell count==6i！=2 i！=3 /播放视频
模板v-if=cellCount==6 i==2
div class=cell-player-6-2-cell
播放视频：video= video info[I]/播放视频
播放视频：video= video info[I]/播放视频
/div
/模板
/div
/div
div class=单元格工具
div class=bk-button-group
！-El-button @ click=单元格计数=1 size= small 1/El-button-
El-button @ click= cell count=4 size= small 4/El-button
！-El-button @ click=单元格计数=6 size= small 6/El-button-
El-button @ click= cell count=9 size= small 9/El-button
！-El-button @ click= cell count=16 size= small 16/El-button-
/div
/div
/div
/模板
脚本
从" @/查看/测试/播放视频"导入播放视频
导出默认值{
名称："仪表板",
组件：{
播放视频
},
data() {
返回{
视频信息：[
{url: ，索引：0,名称：测试1},
{ URL: 3358 HLS 01打开。ys7。com/open live/699 a 3134 f 0864d 81 a 72 S5 d 84 ded 3180d 81。m3 u 8 ，索引：1,名称：测试1},
{ URL: 3358 HLS 01打开。ys7。com/open live/699 a 3134 f 0864d 81 a 725 SD 84 ded 3180d 81。m3u 8 ，索引：2,名称：测试2},
{ URL: 3358 HLS 01打开。ys7。com/open live/699 a 3134 f 0864d 81 a 7s 25d 84 de 3180d 81。m3 u 8 ，索引：3,名称：测试3},
{ URL: 3358 HLS 01打开。ys7。DDB 22 bs 4a 12 e 843 a 3131。m3 u 8 ，索引：10,名称：测试4},
{ URL: 3358 HLS 01打开。ys7。com/open live/699 a 3134 f 0864d 81 a7s 2s 5d 84 ded 3180d 8。m3 u 8 ，索引：4,名称：测试5},
{ URL: 3358 HLS 01打开。ys7。com/open live/699 a 3134 f 0864d 81 a 725 SD 84 ded 3180d 8。m3u 8 ，索引：5,名称：测试6},
{ URL: 3358 HLS 01打开。ys7。com/open live/699 a 3134 f 0864d 81 a 725 SD 84 ded 31280d 8。m3u 8 ，索引：6,名称：测试7},
{ URL: 3358 HLS 01打开。ys7。com/open live/699 a 3134 f 0864d 81 a 725 SD 84 ded 33180d 8。m3u 8 ，索引：7,名称：测试8},
{ URL: 3358 HLS 01打开。ys7。com/open live/699 a 3134 f 0864d 81 a 725 SD 84 ded 31480d 8。m3u 8 ，索引：8,名称：测试9},
],
细胞数量：9
}
},
方法：{},
计算值：{
cellClass() {
返回函数（索引){
开关(this.cellCount) {
案例1:
return [cell-player-1]
案例4:
return [cell-player-4]
案例6:
if (index==1)
return [cell-player-6-1]
if (index==2)
return [cell-player-6-2]
if (index==3)
return [cell-player-6-none]
return [cell-player-6]
案例9:
return [cell-player-9]
案例16:
return [cell-player-16]
默认值：
打破；
}
}
},
},
}
/脚本
风格。单元格工具{
高度：40px
行高：30px
填充：0 7px
}。手机玩家{
flex:1；
显示器：flex
柔性包装：缠绕；
justify-content:space-between；
}。cell-player-4 {
宽度：50%;
身高：50%!重要；
框大小：边框-框；
}。细胞-播放器-1 {
宽度：100%;
框大小：边框-框；
}。细胞-球员-6-1 {
宽度：66.66%;
身高：66.66%!重要；
框大小：边框-框；
}。cell-player-6-2 {
宽度：33.33%;
身高：66.66%!重要；
框大小：边框-框；
显示器：flex
伸缩方向：列；
}。单元格-玩家-6-无{
显示：无；
}。cell-player-62 cell {
宽度：100%;
身高：50%!重要；
框大小：边框-框；
}。cell-player-6 {
宽度：33.33%;
身高：33.33%!重要；
框大小：边框-框；
}。cell-player-9 {
宽度：33.33%;
身高：33.33%!重要；
框大小：边框-框；
}。细胞-播放器-16岁
宽度：25%;
身高：25%!重要；
框大小：边框-框；
}。单元格{
显示器：flex
伸缩方向：列；
身高：100%;
}
/风格
创建视频容器
虽然是遍历视频容器组件，但是监控视频只播放第一个，所以这里创建视频容器时，需要保证容器编号不一致。
模板
div class=" player "
div{{video.name}}/div
video :id=A video.index
style= width:100%；
video-js vjs-default-skin vjs-big-play-居中/video
/div
/模板
脚本
导出默认值{
名称："播放视频",
道具：{
视频：{
url: ，
指数：0,
}
},
data() {return {}，
已安装(){
这个。init video player()；
},
方法：{
initVideoPlayer() {
变那个=这个
var id= # A this。视频。指数；
const currentInstance=that .$ video(文档。查询选择器(id)，{
自动播放：没错，
控件：真
}).src({
src: that.video.url，
类型：应用程序/x-mpegURL ，
})
},
}
}
/脚本
样式范围。玩家{
背景色：黑色；
宽度：100%;
身高：100%;
边框：1px纯白；
颜色：白色；
文本对齐：居中；
}
/风格
到此这篇关于某视频剪辑软件实现监控视频直播的示例代码的文章就介绍到这了，更多相关某视频剪辑软件监控视频直播内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。