video-vue3

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

使用方式

推荐使用 cnpm cnpm install video-vue2

main.js

import VideoVue2 from "video-vue2";

app.use(VideoVue2);

test.vue

	<template>
		<div id="app">
			<video-vue2 ref="videoVue2" :config="config" :customStyle="customStyle" @status="handleStatus" />
		</div>
	</template>
<script>
		import Vue from "vue";
		import VideoVue2 from "video-vue2";
		Vue.use(VideoVue2);
		export default {
			name: "app",
			data() {
				return {
					config: {
						roomId: 111,
						userId: "75",
						userSig:
							"eJyrVgrxCdZLrSjILEpVsrIwMzEw0AELlaUWKVkpGekZKEH4xSnZiQUFmSlKVoZANeYGRqZGRhCZzJTUvJLMtEywBnNTmPrMdCDXN8Q0uyKozM0kPcusLEs72Dc3MMPUvNQ9TN8pvTTY1bKiwjLYp6zKL8rb1RaqsSQzF*gSQzMLY0MLI0Njo1oAApsvLg__",
							sdkAppId: 1400702522,
						showLocal: "true",
						showRemote: "true",
						showDevice: "true",
						showMic: false,
    				showCamera: true
					},
					customStyle: {
						width: "",
						height: "",
						localStreamWidth: "",
						localStreamHeight: "",
						remoteStreamWidth: "",
						remoteStreamHeight: "",
						mode: ""
					}
				};
			},
			mounted() {
				this.$refs["videoVue2"].handleJoin();//加载
				setTimeout(() => {
						this.$refs["videoVue2"].handleReload()//重新加载 当status返回msg等于ERROER,表示本地流/本地流/客户端程序出现不可恢复的错误可以尝试使用该放法
					this.$refs["videoVue2"].handleLeave();//离开
				}, 10000);
			},
				methods:{
					 handleWatchStatus(val) {
							console.log(val)
						}
				}
		};
	</script>

config 和 customStyle 参数说明

config={//必填
    roomId: "",//房间号，两端相同
    sdkAppId: ,//appid
    userId: "",//userid 两端不能相同
    userSig:"",//通过接口换取的身份密钥，
    showLocal: true, //是否显示自己视频
    showRemote: true, //是否显示对方视频
    showDevice: true, //是否显示设备切换按钮
		showCamera: true,//是否显示摄像头切换按钮 ，showDevice为true时有效 按钮位置相对于本地流底部10px
    showMic: true,//是否显示麦克风切换按钮，showDevice为true时有效 按钮位置相对于本地流底部10px
}
customStyle={
    width: "", //整个video的宽 单位px 默认300px
    height: "", //整个video的高单位px 默认300px
    localStreamWidth: "", //本地流宽度px 默认80px
    localStreamHeight: "", //本地流高度px 默认80px
    remoteStreamWidth: "", //远端流宽度px 默认300px
    remoteStreamHeight: "", //远端流高度px 默认300px
    mode: "", //around----常规   symmetry-L/symmetry-R  横向， vertical-L/vertical-R  上下  ，默认aroud
}
	status=	{
			type:'local', //local,remote,other,client
			msg:'localStream-play-success'
		}
		//远端流状态-unpublish远端离开房间停止推流
	//error 当出现不可恢复错误后，会抛出此事件
	//client-banned 被动退出房间事件
	//join-fail 加入房间失败
	//localStream-play-success 本地流播放成功
	//localStream-failed-to-play 本地流播放失败
	//remoteStream-failed-to-play 远端流播放失败
	//remoteStream-play-success 远端流播放成功
	//getDevices fail  获取麦克风摄像头权限失败
	//NotFoundError 找不到满足请求参数的媒体类型（包括：音频、视频、屏幕分享）。例如：PC 没有摄像头，但是请求浏览器获取视频流，则会报此错误。
	//NotAllowedError  用户拒绝了当前的浏览器实例的访问音频、视频、屏幕分享请求。
	//NotReadableError 尽管用户已经授权使用相应的设备，但是由于操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。
	//OverconstrainedError cameraId/microphoneId 参数的值无效
	//AbortError 由于某些未知原因导致设备无法被使用
	//connection-state-changed:DISCONNECTED	和腾讯服务连接断开
	//connection-state-changed:CONNECTING  	和腾讯服务正在连接中
	//connection-state-changed:CONNECTED	和腾讯服务已连接
	//connection-state-changed:RECONNECTING	和腾讯服务自动重连中