vue中实现视频直播（萤石云）/实时视频:

文章目录

法一:使用ezuikit-js插件(accessToken+url)
- 1. 安装
- 2. 使用:
- 3.初始化时可传参数:
- 4.可调用的方法:
- 5.萤石云:
- 6.最终效果:
法二:使用ezuikit.js文件(链接)
- 1、[官网下载js包](https://open.ys7.com/mobile/download.html)
- 2、（把下载好的ezuikit.js js包）放进vue 的 static 下
- 3、public在index.html引入
- 4、使用:
法三:后端只给设备号

法一:使用ezuikit-js插件(accessToken+url)

适用情况：

1. 安装

  npm install ezuikit-js --save

2. 使用:

<template><div id="video-container"></div>
</template><script>
import  EZUIKit from 'ezuikit-js';
export default {name: '',data() {return {player:null,}},created(){this.getVideoData()},methods:{getVideoData(){....this.player = new EZUIKit.EZUIKitPlayer({id: 'video-container', // 视频容器IDaccessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',url: 'ezopen://open.ys7.com/203751922/1.live',audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启autoplay: true,width: 408,height: 237})},},beforeDestroy() {this.player && this.player.stop() //销毁并停止直播视频}
}
</script>

3.初始化时可传参数:

参数名	类型	描述	是否必选
id	String	播放器容器DOM的id	Y
accessToken	String	授权过程获取的access_token	Y
url	String	视频ezopen协议播放地址	Y
audio	int	是否默认开启声音 1：打开（默认） 0：关闭	N
width	int	视频宽度，默认值为容器容器DOM宽度	N
height	int	视频高度，默认值为容器容器DOM高度	N
templete	string	播放器模板，可以通过选定模板，使用内置的播放器样式，组件 simple：极简版;standard：标准版;security：安防版(预览回放);vioce：语音版	N
header	Array	视频头部可选UI组件，可选值：capturePicture：截图,save：录像保存,zoom：电子放大	N
footer	Array	视频底部部可选UI组件，可选值：talk：对讲,broadcast：语音播报,hd：高清标清切换,fullScreen：全屏	N
plugin	Array	按需加载插件，可选值： talk：对讲	N
handleSuccess	function	播放成功回调	N
handleError	function	播放错误回调	N
openSoundCallBack	function	开启声音回调	N
closeSoundCallBack	function	关闭回调	N
startSaveCallBack	function	开始录像回调	N
stopSaveCallBack	function	结束录像回调	N
capturePictureCallBack	function	截图回调	N
fullScreenCallBack	function	全屏回调	N
getOSDTimeCallBack	function	获取OSD时间回调	N

4.可调用的方法:

方法名	类型	描述	使用示例
play	function	开始播放	player.play()
stop	function	结束播放	player.stop()
openSound	String	开启声音	player.openSound()
closeSound	String	关闭声音	player.closeSound()
startSave	int	开始录像	player.startSave()
stopSave	int	结束录像	player.stopSave()
capturePicture	function	视频截图	player.capturePicture()
fullScreen	function	全屏	player.fullScreen()
getOSDTime	function	获取播放时间回调	player.getOSDTime()
startTalk	function	开始对讲	player.startTalk()
stopTalk	function	结束对讲	player.stopTalk()

5.萤石云:

官网

开发文档

使用方法

6.最终效果:

法二:使用ezuikit.js文件(链接)

优点：不需要做控件按钮功能

适用情况：

1、官网下载js包

https://open.ys7.com/mobile/download.html

资源地址:https://download.csdn.net/download/weixin_53791978/86512096

2、（把下载好的ezuikit.js js包）放进vue 的 static 下

这里报错ezuikit is not undefined,就放到public下

3、public在index.html引入

<script src="static/ezuikit.js"></script>

4、使用:

<video id="videoCamera"style="object-fit: fill; width: 100%; height: 100%; background: #000;":src="formData.videoCamera" autoplay="true" controls playsInline webkit-playsinline>
</video>  //记得给宽高<script>
export default{data(){return{formData:{},palyer:null,// 页面跳转时注意关闭视频流，vue跳转原有任务不会停止或者在beforeDestroy销毁掉}},mounted(){},methods:{//获取播放地址getVideoCameraAddr(id, index) {const This = thislet param = {id: id}videoCameraAddr(param).then(res => {if (res.data.code == 0) {This.formData.videoCamera = res.data.dataThis.palyer = nullsetTimeout(function () {This.player = new EZUIKit.EZUIPlayer('videoCamera')}, 0)} else {This.$message.error('获取视频监控摄相机播放地址失败' + res.data.msg)}})},},beforeDestroy(){this.palyer = null}
}
</script>

法三:后端只给设备号

相关JS文件：https://download.csdn.net/download/weixin_53791978/87231692

<section class="sectionVideo"><div class="video_warp_item" v-for="(item, index) in liveAddress" :key="index"><video :id=item.tdh :src="item.url" autoplay muted controls playsInline webkit-playsinline></video></div>
</section>

<script>
import { videoCameraId } from '@/api/manage/videoAPI.js'
import $ from 'jquery'  //  npm i jqueryexport default {name: 'dashboard',data() {return {accessToken: '',liveAddress: [],diveType: '',players: [],}},methods: {// 获取磅点摄像头ID列表getbagndianID() {const This = this// 获取萤石云的accessToken$.ajax({"url": 'https://open.ys7.com/api/lapp/token/get',"type": 'POST',"dataType": "json","data": {appKey: '412f919adde14fe3af396d5bef2c6db1', //String   appKey  YappSecret: '7566546bfc7adc4f55b86af93703599c' // String  appSecret   Y},"cache": false,"success": function (response) {This.accessToken = response.data.accessToken;}})let param = {deptId: This.formData.deptId,stationId: This.formData.stationId,pageNum: "1", // string  true    当前页数pageSize: "100", //   string  true    每页条数}videoCameraId(param).then(res => {if (res.success) {// 根据列表长度获取播放地址if (res.result.list.length <= 0) {This.$message.error('暂无数据,磅点摄相机列表为空' + res.data.msg)} else {res.result.list.forEach((item, index) => {this.getDeviceInfo(item.id, index, item.deviceNumber, This.accessToken);})}} else {This.$message.error('获取视频监控摄相机ID列表失败' + res.data.msg)}})},// 查询设备类型getDeviceInfo(id, indexer, deviceNum, accessToken) {const that = this$.ajax({"url": 'https://open.ys7.com/api/lapp/device/info',"header": {'Content-Type': 'application/x-www-form-urlencoded'},"type": 'POST',"dataType": "json","data": {accessToken: accessToken, //    String  授权过程获取的access_token YdeviceSerial: deviceNum, // G66585615  J29276929},"success": function (res) {if (res.code == 200) {if (res.data.model.indexOf('IPC') >= 0) { //摄像机this.diveType = 1;that.liveAddress = []this.getUrl(accessToken, deviceNum, 1);setTimeout(() => {if (that.liveAddress.length > 0) {that.players = [];that.liveAddress.forEach((item, i) => {let player = new EZUIKit.EZUIPlayer(item.tdh)that.players.push(player);})}}, 500)} else { //录像机this.diveType = 2;let tdS = [];// 获取设备通道号$.ajax({"url": 'https://open.ys7.com/api/lapp/device/camera/list',"header": {'Content-Type': 'application/x-www-form-urlencoded' //multipart/form-data text/plain},"type": 'POST',"dataType": "json","data": {accessToken: accessToken, // String  授权过程获取的access_token YdeviceSerial: deviceNum},"success": function (response) {response.data.forEach((item) => {if (item.status == 1) { tdS.push(item) }})that.liveAddress = []tdS.forEach((item) => {that.getUrl(accessToken, deviceNum, item.channelNo);})setTimeout(() => {if (that.liveAddress.length > 0) {that.players = [];that.liveAddress.forEach((item, i) => {let player = new EZUIKit.EZUIPlayer(item.tdh)that.players.push(player);})}}, 500)}})}}},});},// 获取视频播放地址getUrl(accessToken, id, typeId) {const that = this$.ajax({"url": 'https://open.ys7.com/api/lapp/v2/live/address/get',"type": 'POST',"data": {accessToken: accessToken, //  String  授权过程获取的access_token YdeviceSerial: id,protocol: 2,channelNo: typeId,},"dataType": "json","success": function (res) {let item = {tdh: 'm' + res.data.id,url: res.data.url}that.liveAddress.push(item)}})},},//销毁视频destroyed() {for (var j = 0; j < this.players.length; j++) {this.players[j].stop();}}
}
</script>

vue中实现视频直播（萤石云）/实时视频:相关推荐

微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签前言萤石云开放平台微信开发者工具前言因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实 ...
vue实现rtsp视频直播流
实现摄像头的直播功能其实有许多方案,像是安装vlc插件.rtsp转rtmp然后使用videojs通过flash播放rtmp**(由于chrome已经不使用flash所以放弃使用videojs,并且vi ...
VUE中集成H5直播点播播放器LivePlayer过程
基于VUE和webpck的前端工程这里可以参考 https://github.com/livegbs/GB28181-Server 1.安装@liveqing/liveplayer npm -i @ ...
IM,小视频, 直播几大云平台对比选择
2019独角兽企业重金招聘Python工程师标准>>> 1. IM 云平台比较 IM比较腾讯IM 网易 IM 自有实践腾讯QQ, 微信用户量最大易信后期发展腾讯核心产品,持 ...
vue项目中的视频直播插件
所用插件vue-video-player 这是一款基于video.js的视频播放器插件插件的使用: 安装: npm install vue-video-player --save 全局引入 impo ...
vue上传视频到华为云obs
公司做的后台,需要上传视频,但是视频会非常的大,动不动就到了1G.后端接口上传肯定是非常慢的,公司决定使用华为云直传. 我看到有两种方法一个是npm下载,第二个就是github下载文件引入,今天讲的是 ...
基于阿里云直播实现视频推流(ffmpeg)/拉流(Django2.0)以及在线视频直播播放(支持http/https)功能
由于5g网络的光速推广,视频业务又被推上了风口浪尖,在2019年初我们还在谈论照片,短视频等关键字,而进入2020年,我们津津乐道的就只有视频,视频,还是视频,普通人拿起手机做直播早已不是奢望,去年我 ...
uni-app 使用 webview运行到小程序，打开萤石云视频
由于微信小程序特殊性,导致APP和h5适应的它都适应不了,因此,不得不对小程序做一些特殊的处理. 问题一:微信小程序无法打开web-view 的URL 相对于APP和H5而言,微信小程序比较严格,对于 ...
视频直播云新趋势打造终端+云端一体化
[51CTO.com原创稿件]互联网时代的发展,使得越来越多的与互联网相关的行业蓬勃发展,最近几年直播成为了互联网行业发展的一个代表,从最早的体育赛事直播,到游戏直播的发展,再到现在的"全民 ...
视频直播源码在ThinkPHP设置时区功能中的实现方式
在开发直播软件的过程中,视频直播源码起到了决定性作用.而在PHP开发过程中,不同国家或地区服务器时间不一致的原因大概有以下几点: 1.如果服务器分布在不同的地区或者国家,存在有些应用所在的服务器和访问 ...

vue中实现视频直播（萤石云）/实时视频:

文章目录

法一:使用ezuikit-js插件(accessToken+url)

1. 安装

2. 使用:

3.初始化时可传参数:

4.可调用的方法:

5.萤石云:

6.最终效果:

法二:使用ezuikit.js文件(链接)

1、官网下载js包

2、（把下载好的ezuikit.js js包）放进vue 的 static 下

3、public在index.html引入

4、使用:

法三:后端只给设备号

vue中实现视频直播（萤石云）/实时视频:相关推荐

最新文章

热门文章