Vue中接入萤石等直播视频(更新中ing)

一、萤石:

1. 萤石云开发文档: https://open.ys7.com/help/31

2、安装: npm install ezuikit-js --save

3、在文件中引用:import EZUIKit from 'ezuikit-js'

4、具体代码:

获取accessToken:https://open.ys7.com/help/81?h=https://open.ys7.com/api/lapp/token/get
javascript 复制代码
<template>
	<div id="video1" class="video-item"></div>
</template>
<script lang="ts">
import { defineComponent, nextTick, reactive, toRefs, watch } from 'vue'
// 引入萤石云
import EZUIKit from 'ezuikit-js'

export default defineComponent({
  	name: 'VideoDialog',
    setup (props, { emit }) {
    	const YingShiYunVideoPlay = () => {
			const player = new EZUIKit.EZUIKitPlayer({
			  id: 'video1',
			  accessToken: '根据appKey和secret获取的accessToken',
			  url: '拿到的直播链接,以 ezopen:// 开头',
			  template: 'standard',
			  width: 278,
			  height: 156
			})
			player.play()
			// player.stop() // 停止播放
		}
	}
})
</script>

二、乐橙:

https://www.cnblogs.com/why-cn/p/17247548.html

https://www.jianshu.com/p/3d36d5261750

相关推荐
梨想橙汁13 小时前
Git 分支详解:创建切换、合并分支、冲突解决实战
前端·git
雪芽蓝域zzs13 小时前
Vue3 defineProps` / `defineEmits` 是编译器宏,不需要手动 import 导入
前端·javascript·vue.js
whyweplay13 小时前
Elpis:从Json Schema 到 页面
前端·javascript
大牧师13 小时前
Nest.js 微服务入门教程
开发语言·javascript·后端·微服务·node.js·nest.js·nest
做萤石二次开发的哈哈13 小时前
海康班班通交互一体机技能接入实战:ISAPI透传+OTAP双协议封装,Web/App/小程序教学管理应用一站生成
前端·物联网·小程序·交互·萤石开放平台·蓝海aiot一站式工作台·aiot开发
计算机魔术师13 小时前
Anthropic一次性锁死十年算力,5170亿美元买什么
前端
IT_陈寒13 小时前
Redis的订阅丢失消息?你可能忘了这个配置
前端·人工智能·后端
头茬韭菜13 小时前
第 3 篇:「Pydantic 即 Schema」—— 工具生态三层解剖
前端·chrome·ai·openmanus
低代码布道师13 小时前
外包项目管理平台全栈实战课02搭建数据底座:Next.js + PostgreSQL + Prisma 7
开发语言·javascript·postgresql·全栈开发