cyberfly
3/29/2020 - 11:38 AM
Jitsi with Vue component
API reference: https://github.com/jitsi/jitsi-meet/blob/master/doc/examples/api.html#L7
Placement reference: https://codepen.io/anon/pen/BvKPxN
React: https://meetrix.io/blog/webrtc/integrate-jitsi-meet-to-react-app.html
<template>
<div>
<div ref="scriptHolder"></div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { mapActions } from 'vuex'
export default {
created() {
this.conversation_id = 'conversation_123';
},
mounted() {
// jitsi video
var scriptNode= document.createElement('script');
scriptNode.innerHTML = 'var parentElement = document.getElementById("video_consult"); var domain = "meet.jit.si"; var options = { roomName: "RemediPrivateVideoConsultation", width: 700, height: 400, parentNode: parentElement, configOverwrite: {}, interfaceConfigOverwrite: {filmStripOnly: true } }; var api = new JitsiMeetExternalAPI(domain, options);';
this.$refs.scriptHolder.appendChild(scriptNode);
},
props: {
},
data() {
return {
}
},
computed: {
},
methods: {
},
}
</script>
<style>
.video_consult {
}
</style><template>
<div>
<div id="video_consult" class="video_consult">
<video-consult-component></video-consult-component>
</div>
<div id="chat_consult" class="chat_consult">
<chat-consult-component></chat-consult-component>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { mapActions } from 'vuex'
export default {
created() {
this.conversation_id = 'conversation_123';
},
mounted() {
},
props: {
messages_mu: {
type: Array,
required: false
}
},
data() {
return {
}
},
computed: {
},
methods: {
},
}
</script>
<style>
.video_consult {
text-align: center;
margin-bottom: 20px;
}
.chat_consult {
}
</style>