vue项目使用乐橙云播放轻应用直播SDK imouplayer.js

乐橙云轻应用组件开发
为什么使用乐橙云
①幼教场景，提供视频实时预览，家长通过移动端app或微信轻应用远程实时观看孩子所在区域件；实时视频预览支持高、标清切换，快速出流，播放无卡顿；
②食品安全场景, 结合食药监“明厨亮灶”实施方案，餐饮商家可针对操作间、凉菜间等关键部位和餐饮制作等重点环节推出实时视频展示功能，让顾客对餐饮店后厨“可视、可感、可知”；
③ 智能家居场景，主要是大华系的家居硬件如智能摄像机、指纹锁、报警器、AI智能设备等通过移动端app或微信轻应用远程实时观看家中监控视频；支持高、标清音视频实时预览切换，快速出流，播放无卡顿；
④、新零售商店，实时巡店、定时巡店、图片巡店、录像回放；联动各类智能设备的报警事件，及时推送消息和事件抓图。如红外感应报警、动检报警、一键呼叫报警、遮挡报警、徘徊报警等报警事件；

下载资源
引入资源
方法一：把下载的资源放在与入口文件同级的位置

在index.html中引入

<script src="./imouplayer.js"></script>

使用

<template><div id="app"><div class="video"><div id="player"></div></div></div>
</template><script>
export default {name: 'App',components: {},data () {return {myplayer: null,}},mounted() {this.$nextTick(() => {this.createVideo()})},methods: {createVideo () {/* eslint-disable */// 添加DOM容器const player = new ImouPlayer('#player');// 播放器初始化player.setup({src: [{url: 'imou://open.lechange.com/6J0F45BPAJE3A50/0/1?streamId=1', // url拼接说明请见：2.2.3 轻应用播放地址说明kitToken: 'Kt_53527d5fd0384b3fada31e89aa4e006e', // 播放Token，通过接口getKitToken获取，具体请见：2.2.4 getKitToken接口协议说明}], // 播放地址width: 760, // 播放器宽度height: 400, // 播放器高度poster: '', // 封面图urlautoplay: true,controls: true, // 是否展示控制栏});// // 播放player.play()}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

方法二
与src同级的位置创建static文件夹放乐橙云资源，imouplayer.js文件与引用同级

在使用的页面引入imouplayer.js文件

<template><div id="app"><div class="video"><div id="player"></div></div></div>
</template><script>
import './imouplayer'
export default {name: 'App',components: {},data () {return {myplayer: null,ImouToken: 'Kt_c780d1f5c2f0498398fe2491e9895c9f'}},mounted() {this.$nextTick(() => {this.createVideo()})},methods: {createVideo () {/* eslint-disable */// 添加DOM容器const player = new ImouPlayer('#player');// 播放器初始化player.setup({src: [{url: 'imou://open.lechange.com/6J0F45BPAJE3A50/0/1?streamId=1', // url拼接说明请见：2.2.3 轻应用播放地址说明kitToken: 'Kt_c780d1f5c2f0498398fe2491e9895c9f', // 播放Token，通过接口getKitToken获取，具体请见：2.2.4 getKitToken接口协议说明}], // 播放地址width: 760, // 播放器宽度height: 400, // 播放器高度poster: '', // 封面图urlautoplay: true,controls: true, // 是否展示控制栏});// // 播放player.play()}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

方法三
修改imouplayer.js文件中引入资源的路径为存储静态类的地址

z = ["/store/imou_static/public.js", "/store/imou_static/md5.js", "/store/imou_static/mp4remux.js", "/store/imou_static/videoMediaSource.js", "/store/imou_static/WebsocketServer.js", "/store/imou_static/Sylvester.js", "/store/imou_static/WebGLCanvas.js", "/store/imou_static/audioPlayer.js", "/store/imou_static/workerManager.js", "/store/imou_static/streamDrawer.js", "/store/imou_static/playerControl.js", "/store/imou_static/ivs.js"],
w = ["/store/imou_static/video.min.js", "/store/imou_static/videojs-flash.js", "/store/imou_static/videojs-contrib-hls.min.js"];

注意workerManager.js中也有引用也要进行修改

使用

<template><div id="app"><div class="video"><div id="player"></div></div></div>
</template><script>
import '@/components/imouplayer'
export default {name: 'App',components: {},data () {return {}},mounted() {this.$nextTick(() => {this.createVideo()})},methods: {createVideo () {/* eslint-disable */// 添加DOM容器const player = new ImouPlayer('#player');// 播放器初始化player.setup({src: [{url: 'imou://open.lechange.com/6J0F45BPAJE3A50/0/1?streamId=1', // url拼接说明请见：2.2.3 轻应用播放地址说明kitToken: 'Kt_c780d1f5c2f0498398fe2491e9895c9f', // 播放Token，通过接口getKitToken获取，具体请见：2.2.4 getKitToken接口协议说明}], // 播放地址width: 760, // 播放器宽度height: 400, // 播放器高度poster: '', // 封面图urlautoplay: true,controls: true, // 是否展示控制栏});// // 播放player.play()}}
}
</script>

vue项目使用乐橙云播放轻应用直播SDK imouplayer.js相关推荐

vue项目乐橙云轻应用直播SDK imouplayer.js
官网案例:https://open.imoulife.com/book/light/sdk.html 文档: https://open.imou.com/developDoc/31 1,下载对应的资 ...
vue项目乐橙云（imouplayer.js）--轻应用直播SDK demo案例（保姆级）
vue项目乐橙云(imouplayer.js)--轻应用直播SDK demo测试案例(保姆级) 一.所用到的资源(参数) 1.appId (控制台-我的应用-应用信息中获取) 2.appSecret ...
在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...
vue项目乐橙云（imouplayer.js）--轻应用直播SDK demo案例
乐橙云(imouplayer.js) 这边使用的是轻应用直播SDC 实现案例之前,前提我们有2个参数了 player.setup({src: [{url: 'imou://open.lechange. ...
在vue项目中使用阿里云播放器
在官方文档中分为HTML5和Flash两种播放模式我用的是html5的播放模式,下面是阿里云官方文档阿里云播放器的使用说明_视频点播-阿里云帮助中心首先在index.html文件中引入 <l ...
工作407-启动vue项目出现Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: I
This dependency was not found:* !!vue-style-loader!css-loader?{"sourceMap":true}!../../nod ...
vue项目使用chimee搭建网络监控环境---直播m3u8
一.安装chimee插件,以下三步 npm i chimee npm i chimee-plugin-controlbar npm i chimee-plugin-danmu 二.在需要的文件中引入c ...
Vue项目开发目录结构和引用调用关系
本文精华总结:在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件 ...
vue项目打包出错：Unexpected token arrow «=＞», expected punc «,» [static/js/chunk-1558f5a0.b64bfa00.js:626,2
vue项目打包出错:Unexpected token arrow «=>», expected punc «,» [static/js/chunk-1558f5a0.b64bfa00.js:62 ...

vue项目使用乐橙云播放轻应用直播SDK imouplayer.js

vue项目使用乐橙云播放轻应用直播SDK imouplayer.js相关推荐

最新文章

热门文章

vue项目使用乐橙云播放 轻应用直播SDK imouplayer.js

vue项目使用乐橙云播放 轻应用直播SDK imouplayer.js相关推荐

最新文章

热门文章

vue项目使用乐橙云播放轻应用直播SDK imouplayer.js

vue项目使用乐橙云播放轻应用直播SDK imouplayer.js相关推荐