video-vue3

本插件基于腾讯云 TRTC 二次开发

使用方式

推荐使用 cnpm cnpm install video-vue3

main.js

import videoVue3 from "video-vue3"; import "video-vue3/dist/style.css"; app.use(videoVue3);

test.vue

<template>
<videoVue3
    :config="config"
    :customStyle="customStyle"
    ref="videoForVue3"
  ></videoVue3>
</template>
	<script setup>
	import { onMounted, ref } from "vue";
	const config = ref({
	roomId: null,
	userId: "",
	userSig:
			"",
		showLocal: "true",
		showRemote: "true",
		showDevice: "true",
		sdkAppId: null,
	});
	const customStyle = ref({
		width: "",
		height: "",
		localStreamWidth: "",
		localStreamHeight: "",
		remoteStreamWidth: "",
		remoteStreamHeight: "",
		mode: "",
	});
	const videoForVue3 = ref()
	onMounted(async () => {
			videoForVue3.value.handleJoin()
		});
	const leave = ()=>{
			videoForVue3.value.handleLeave()
		}
	</script>

config 和 customStyle 参数说明

config={//必填
    roomId: "",//房间号，两端相同
    sdkAppId: ,//appid
    userId: "",//userid 两端不能相同
    userSig:"",//通过接口换取的身份密钥，
    showLocal: "", //是否显示自己视频
    showRemote: "", //是否显示对方视频
    showDevice: "", //是否显示设备切换按钮
}
customStyle={
    width: "", //整个video的宽 单位px 默认300px
    height: "", //整个video的高单位px 默认300px
    localStreamWidth: "", //本地流宽度px 默认80px
    localStreamHeight: "", //本地流高度px 默认80px
    remoteStreamWidth: "", //远端流宽度px 默认300px
    remoteStreamHeight: "", //远端流高度px 默认300px
    mode: "", //around----对方在前，自己在后   symmetry-横向各一半， vertical-上下模式 symmetry时，不能展示设备切换按钮 默认aroud
}