(资料图)

LiveKit在Vue中的使用

1 LiveKit的详情介绍

2 硬件要求

2.1 http释放权限的操作

实例图片

3 LiveKit需要在Vue里面自定义编写

3.1 首先安装插件

yarn安装

npm安装

3.2 在Vue中进行使用

推荐方法

定义具体的方法

// 默认是否开启 room.localParticipant.setMicrophoneEnabled(fasle) // 按钮控制是否开启开启声音    SpeakOne() {      this.SpeakStatus = !this.SpeakStatus      // 设置静音      room.localParticipant.setMicrophoneEnabled(this.SpeakStatus)    }

// 默认开启摄像头room.localParticipant.setCameraEnabled(true)

// 可以进行消息指令的发送 async SendMessage() {      const strData = JSON.stringify({Video: true})      const encoder = new TextEncoder()      const data = encoder.encode(strData);      await room.localParticipant.publishData(data, DataPacket_Kind.RELIABLE)    }

// 第一步开启接收的消息      room.on(RoomEvent.DataReceived, this.DataReceived)    // 接受数据    DataReceived(payload) {      const decoder = new TextDecoder()      const strData = decoder.decode(payload)     // 这里就是接收的消息      console.log(JSON.parse(strData))    },

对应代码

<template>  <div class="hello">    <!--  显示自己的视频框  -->    <div ref="video_one_me" class="me_style"></div>    <!--显示的视频-->    <div ref="video_one" class="user_style"></div>  </div></template><script>import {  createLocalTracks,  DataPacket_Kind,  LogLevel,  Room,  RoomEvent,  setLogExtension,  Track,  VideoPresets} from "livekit-client";export default {  name: "HelloWorld",  props: {    msg: String  },  async mounted() {    try {      const livekit = require("livekit-client");      // 初始化房间      const room = new livekit.Room({        // automatically manage subscribed video quality        adaptiveStream: true,        // optimize publishing bandwidth and CPU for published tracks        dynacast: true,        videoCaptureDefaults: {          resolution: VideoPresets.hd.resolution,        },      });      const strData = JSON.stringify({some: "data"})      const encoder = new TextEncoder()      // publishData takes in a Uint8Array, so we need to convert it      const data = encoder.encode(strData);      // publish to everyone in the room      room.localParticipant.publishData(data, DataPacket_Kind.RELIABLE)      // publish to specific participants      room.localParticipant.publishData(data, DataPacket_Kind.LOSSY, ["participant_sid"])      // 设置房间的参数      room          // 轨道订阅          .on(RoomEvent.TrackSubscribed, this.handleTrackSubscribed)          // 取消订阅          .on(RoomEvent.TrackUnsubscribed, this.handleTrackUnsubscribed)          // 活动扬声器已更改          .on(RoomEvent.ActiveSpeakersChanged, this.handleActiveSpeakerChange)          // 断开的          .on(RoomEvent.Disconnected, this.handleDisconnect)          // 音频播放状态已更改          .on(RoomEvent.AudioPlaybackStatusChanged, () => {            console.log("Audio playback status changed to", room.canPlaybackAudio)          })          // 跟踪静音          .on(RoomEvent.TrackUnmuted, (res) => {            console.log("Track muted", res)          })          //轨迹静音          .on(RoomEvent.TrackMuted, (res) => {            console.log("TrackMuted muted", res)          })          // 房间元数据已更改          .on(RoomEvent.RoomMetadataChanged,(res)=>{            console.log("RoomMetadataChanged muted", res)          })          // 跟踪流状态已更改          .on(RoomEvent.TrackStreamStateChanged,(res)=>{            console.log("RoomMetadataChanged muted", res)          })          // 轨道出版          .on(RoomEvent.TrackPublished, this.TrackPublished)          // 收到的数据          .on(RoomEvent.DataReceived, this.DataReceived)          // 本地曲目未发布          .on(RoomEvent.LocalTrackUnpublished, this.handleLocalTrackUnpublished);      const url = "wss://xxxxxx"      const token = ""      // connect to room      await room.connect(url, token);      console.log("connected to room", room.name);      // 房间的状态      // eslint-disable-next-line no-undef,no-unused-vars      // publish local camera and mic tracks      await room.localParticipant.enableCameraAndMicrophone();      const p = room.localParticipant;      // await p.setScreenShareEnabled(true);      // 禁用摄像头使其静音，当静音时，用户的摄像头指示灯将关闭      const track = p.getTrack(Track.Source.Camera);      if (track?.isSubscribed) {        const videoElement = track.videoTrack?.attach();        // do something with the element        videoElement.style.width = "400px"        videoElement.style.height = "400px"        this.$refs.video_one_me.append(videoElement);      }      console.log(room.track)      // 在创建房间之前创建轨道      await createLocalTracks({        audio: true,        video: true,      });      // 列出所有麦克风设备      const devices = await Room.getLocalDevices("audioinput");      // 选择最后一个设备      const device = devices[devices.length - 1];      // 在当前房间中，切换到所选设备并将      // 设置为将来的默认音频输入。      await room.switchActiveDevice("audioinput", device.deviceId);      // 设置日志      setLogExtension((level, msg, context) => {        const enhancedContext = {...context, timeStamp: Date.now()};        if (level >= LogLevel.debug) {          console.log(level, msg, enhancedContext);        }      });    } catch (e) {      console.log(e);    }  },  methods: {    // eslint-disable-next-line no-unused-vars    handleTrackSubscribed(track, publication, participant) {      if (track.kind === Track.Kind.Video || track.kind === Track.Kind.Audio) {        // attach it to a new HTMLVideoElement or HTMLAudioElement        const element = track.attach();        element.style.width = "200px"        element.style.height = "200px"        // 进行视频播放元素的操作        this.$refs.video_one.append(element);      }    },    // eslint-disable-next-line no-unused-vars    handleTrackUnsubscribed(track, publication, participant,) {      // remove tracks from all attached elements      console.log(track);      console.log(publication);      console.log(participant);      track.detach();    },    // eslint-disable-next-line no-unused-vars,no-undef    handleLocalTrackUnpublished(track, participant) {      console.log(track);      console.log(participant);      // when local tracks are ended, update UI to remove them from rendering      track.detach();    },    // eslint-disable-next-line no-unused-vars    handleActiveSpeakerChange(speakers) {      console.log(speakers);      // show UI indicators when participant is speaking    },    handleDisconnect() {      console.log("disconnected from room");    },    TrackEventCallbacks(audioPlaybackFailed) {      console.log(audioPlaybackFailed)    },    TrackPublished(track, publication, participant) {      console.log(track)      console.log(publication)      console.log(participant)    },    DataReceived(payload, participant, kind) {      const decoder = new TextDecoder()      const strData = decoder.decode(payload)      console.log(strData)      console.log(participant)      console.log(kind)    }  }}</script>

有问题：欢迎关注公众号[shrkPH]

关键词：