< template >
< v -container fill -height >
< PdfShare v -if = " sharePdf " :streamer ="streamer" :username ="username" :opaque-id ="opaqueId" :room ="1234" :janus-init ="janusInit" > < / PdfShare >
< v -dialog
v - model = "mozillaAlert"
max - width = "600"
>
< v -card >
< v -card -title class = "headline" > Share whole screen or a window ? < / v - c a r d - t i t l e >
< v -card -text >
Firefox handles screensharing in a different way : are you going to share the whole screen , or would you rather pick a single window / application to share instead ?
< / v - c a r d - t e x t >
< v -card -actions >
< v -spacer > < / v - s p a c e r >
< v -btn @click ="shareScreenStart('screen')" > Share a screen < / v-btn >
< v -spacer > < / v - s p a c e r >
< v -btn @click ="shareScreenStart('window')" > Share a window < / v-btn >
< v -spacer > < / v - s p a c e r >
< / v - c a r d - a c t i o n s >
< / v - c a r d >
< / v - d i a l o g >
< v -dialog
v - model = "chromeAlert"
max - width = "600"
>
< v -card >
< v -card -title class = "headline" > Chrome Extension Error < / v - c a r d - t i t l e >
< v -card -text >
You 're using Chrome but don' t have the screensharing extension installed : click < b > < a href = 'https://chrome.google.com/webstore/detail/janus-webrtc-screensharin/hapfgfdkleiggjjpfpenajgdnfckjpaj' target = '_blank' > here < / a > < / b > to do so
< / v - c a r d - t e x t >
< / v - c a r d >
< / v - d i a l o g >
< v -dialog
v - model = "deviceSelectDialog"
max - width = "290"
>
< v -card >
< v -card -title class = "headline" > Configuration < / v - c a r d - t i t l e >
< v -card -text >
< v -row >
< v -col md = "12" cols = "12" >
< v -select
label = "Please select video device"
v - model = "selectedVideo"
: items = "videoDevices"
item - value = "deviceId"
item - text = "label"
> < / v - s e l e c t >
< v -checkbox label = "No Video" v-model ="noVid" > < / v-checkbox >
< / v - c o l >
< v -col md = "12" cols = "12" >
< v -select
label = "Please select audio device"
: items = "audioDevices"
v - model = "selectedAudio"
item - value = "deviceId"
item - text = "label"
> < / v - s e l e c t >
< / v - c o l >
< / v - r o w >
< / v - c a r d - t e x t >
< v -card -actions >
< v -spacer > < / v - s p a c e r >
< v -btn
color = "green darken-1"
text
@ click = "deviceSelectDialog = false"
>
Disagree
< / v - b t n >
< v -btn
color = "green darken-1"
text
@ click = "selectDevice"
>
Agree
< / v - b t n >
< / v - c a r d - a c t i o n s >
< / v - c a r d >
< / v - d i a l o g >
< div v-show ="remoteViewNew" >
< div style = "width: 100%;height: 100%;background: #ccc;position: absolute;top:0;left:0" > < / div >
< v -row >
< v -col cols = "12" md = "10" > < / v - c o l >
< v -col cols = "12" md = "2" >
< v -row >
< v -col cols = "12" md = "12" v-for ="remoteStream in remoteStreams" :key="remoteStream.id" >
< RemoteFeed v -if = " remoteViewNew " @kick ="kickUser" @rtp ="$emit('rtp',remoteStream.id)" :creator ="creator" :talking ="remoteStream.talking" :opaqueId ="opaqueId" :mypvtid ="mypvtid" :feedid ="remoteStream.id" :remote-stream ="remoteStream" :janusInit ="janusInit" :room ="1234" > < / RemoteFeed >
< / v - c o l >
< / v - r o w >
< / v - c o l >
< / v - r o w >
< / div >
< v -row v-show ="!remoteViewNew" >
< v -col cols = "12" :md ="mdsize" >
< div width = "100%" height = "100%" style = "position: relative" >
< video ref = "ownstream" v -if = " streamer " class = "rounded centered" id = "myvideo" width = "100%" height = "100%" autoplay
playsinline muted = "muted" / >
< video ref = "ownstream" v -if = " ! streamer " class = "rounded centered" id = "myvideo" width = "100%" height = "100%" autoplay
playsinline muted = "muted" / >
< v -btn icon v-if ="ownmuted" @click="muteMe" > < v -icon > mdi - volume - mute < / v - i c o n > < / v - b t n >
< v -btn icon v-if ="!ownmuted" @click="muteMe" > < v -icon > mdi - volume - high < / v - i c o n > < / v - b t n >
< / div >
< / v - c o l >
< v -col cols = "12" :md ="mdsize" >
< video ref = "ownstreamscreen" class = "rounded centered" id = "myvideo2" width = "100%" height = "100%" autoplay
playsinline muted = "muted" / >
< / v - c o l >
< v -col cols = "12" :md ="mdsize" v-for ="remoteStream in remoteStreams" :key="remoteStream.id" >
< RemoteFeed v -if = " ! remoteViewNew " @kick ="kickUser" @rtp ="$emit('rtp',remoteStream.id)" :creator ="creator" :talking ="remoteStream.talking" :opaqueId ="opaqueId" :mypvtid ="mypvtid" :feedid ="remoteStream.id" :remote-stream ="remoteStream" :janusInit ="janusInit" :room ="1234" > < / RemoteFeed >
< / v - c o l >
< / v - r o w >
< v -speed -dial
v - model = "fab"
bottom
left
direction = "top"
open - on - hover
>
< template v -slot : activator >
< v -btn
v - model = "fab"
color = "blue darken-2"
dark
fab
>
< v -icon v-if ="fab" > mdi -cog -outline < / v-icon >
< v -icon v-else > mdi -cog -outline < / v-icon >
< / v - b t n >
< / template >
< v -tooltip right >
< template v -slot : activator = "{ on }" >
< v -btn
v - on = "on"
fab
dark
small
@ click = "sharePdf=true"
>
< v -icon > mdi - pdf - box < / v - i c o n >
< / v - b t n >
< / template >
< span > Toggle Share PDF < / span >
< / v - t o o l t i p >
< v -tooltip right >
< template v -slot : activator = "{ on }" >
< v -btn
v - on = "on"
fab
dark
small
@ click = "$vuetify.theme.dark=!$vuetify.theme.dark"
>
< v -icon > mdi - compare < / v - i c o n >
< / v - b t n >
< / template >
< span > Toggle Theme < / span >
< / v - t o o l t i p >
< v -tooltip right >
< template v -slot : activator = "{ on }" >
< v -btn
v - on = "on"
fab
dark
small
@ click = "remoteViewNew = !remoteViewNew"
>
< v -icon > mdi - compare < / v - i c o n >
< / v - b t n >
< / template >
< span > Toggle View < / span >
< / v - t o o l t i p >
< v -tooltip right >
< template v -slot : activator = "{ on }" >
< v -btn
v - on = "on"
fab
dark
small
@ click = "deviceSelectDialog = true"
>
< v -icon > mdi - camera - outline < / v - i c o n >
< / v - b t n >
< / template >
< span > Toggle Camera < / span >
< / v - t o o l t i p >
< v -tooltip right >
< template v -slot : activator = "{ on }" >
< v -btn
v - on = "on"
fab
: dark = "!screenShareStarted"
small
@ click = "screenShareSwitch"
>
< v -icon > mdi - monitor - screenshot < / v - i c o n >
< / v - b t n >
< / template >
< span > Toggle Share Screen < / span >
< / v - t o o l t i p >
< / v - s p e e d - d i a l >
< / v - c o n t a i n e r >
< / template >
< script >
import RemoteFeed from "@/lib/RemoteFeed" ;
import PdfShare from "@/lib/PdfShare" ;
import WebRTCAdaptor from "@/lib/webrtc_adaptor" ;
export default {
components : { PdfShare , RemoteFeed } ,
props : {
server : String ,
room : Number ,
stream : Boolean ,
username : String ,
creator : Boolean ,
streamer : Boolean
} ,
data ( ) {
return {
janusInit : null ,
antwrtc : null ,
opaqueId : null ,
pluginHandle : null ,
mystream : null ,
myid : '' ,
mdsize : 6 ,
ownmuted : false ,
mypvtid : '' ,
selectedVideo : null ,
selectedAudio : null ,
started : false ,
mozillaAlert : false ,
sharePdf : false ,
remoteViewNew : false ,
janusScreenShareHandle : null ,
chromeAlert : false ,
videoDevices : [ ] ,
capture : '' ,
audioDevices : [ ] ,
deviceSelectDialog : false ,
noVid : false ,
fab : true ,
shareScreenId : null ,
remoteStreams : [ ] ,
screenShareStarted : false ,
antwrtcScreen : false
}
} ,
name : "VueJanus" ,
mounted ( ) {
this . janusInit = new this . $janus ( {
success : this . janusSuccess ,
server : this . server ,
error : function ( error ) {
this . $janus . error ( error ) ;
} ,
webrtcState : this . webrtcState ,
destroyed : function ( ) {
window . location . reload ( ) ;
}
} )
} ,
methods : {
kickUser ( user ) {
this . $emit ( 'kick' , user )
} ,
muteMe ( ) {
this . ownmuted = ! this . ownmuted
if ( ! this . ownmuted ) {
this . pluginHandle . unmuteAudio ( )
} else {
this . pluginHandle . muteAudio ( )
}
} ,
stopSharePdf ( ) {
this . sharePdf = false ;
} ,
webrtcState ( on ) {
this . pluginHandle . send ( { "message" : { "request" : "configure" , "bitrate" : 128 * 1000 } } ) ;
console . log ( on , "webrt" )
} ,
webrtcState2 ( on ) {
this . pluginHandle . send ( { "message" : { "request" : "configure" , "bitrate" : 128 * 1000 } } ) ;
console . log ( on , "webrt" )
//this.antwrtc.publish(this.username, "null");
} ,
janusPluginSuccessScreen ( pluginHandle ) {
this . janusScreenShareHandle = pluginHandle
this . $janus . log ( "Plugin attached! (" + this . pluginHandle . getPlugin ( ) + ", id=" + this . pluginHandle . getId ( ) + ")" ) ;
this . $janus . log ( " -- This is a publisher/manager" ) ;
var register = { "request" : "join" , "room" : 1234 , "ptype" : "publisher" , "display" : this . username + " - Share Screen" } ;
pluginHandle . send ( { "message" : register } ) ;
} ,
castStart ( jsep ) {
var publish = { "request" : "configure" , "audio" : false , "video" : true } ;
this . janusScreenShareHandle . send ( { "message" : publish , "jsep" : jsep } ) ;
} ,
streamerScreenShare ( stream ) {
let websocketURL = "wss://live.ozgurkon.org/LiveApp/websocket"
var mediaConstraints = {
video : { width : 1280 , height : 720 } ,
audio : false
} ;
var pc _config = null ;
var sdpConstraints = {
OfferToReceiveAudio : false ,
OfferToReceiveVideo : false
} ;
if ( this . streamer ) {
var tt = this
this . antwrtcScreen = new WebRTCAdaptor ( {
websocket _url : websocketURL ,
mediaConstraints : mediaConstraints ,
peerconnection _config : pc _config ,
sdp _constraints : sdpConstraints ,
janusScreen : stream ,
localVideoId : "myvideo2" ,
debug : true ,
callback : function ( info , obj ) {
if ( info == "initialized" ) {
console . log ( "initialized" ) ;
tt . antwrtcScreen . publish ( tt . username + "-desktop" , "null" ) ;
// start_publish_button.disabled = false;
// stop_publish_button.disabled = true;
} else if ( info === "publish_started" ) {
//stream is being published
console . log ( "publish started" ) ;
// start_publish_button.disabled = true;
// stop_publish_button.disabled = false;
// startAnimation();
} else if ( info == "publish_finished" ) {
//stream is being finished
console . log ( "publish finished" ) ;
// start_publish_button.disabled = false;
// stop_publish_button.disabled = true;
} else if ( info == "screen_share_extension_available" ) {
// screen_share_checkbox.disabled = false;
// console.log("screen share extension available");
// install_extension_link.style.display = "none";
} else if ( info == "screen_share_stopped" ) {
console . log ( "screen share stopped" ) ;
} else if ( info == "closed" ) {
//console.log("Connection closed");
if ( typeof obj != "undefined" ) {
console . log ( "Connecton closed: " + JSON . stringify ( obj ) ) ;
}
} else if ( info == "pong" ) {
//ping/pong message are sent to and received from server to make the connection alive all the time
//It's especially useful when load balancer or firewalls close the websocket connection due to inactivity
} else if ( info == "refreshConnection" ) {
this . startPublishing ( ) ;
} else if ( info == "updated_stats" ) {
//obj is the PeerStats which has fields
//averageOutgoingBitrate - kbits/sec
//currentOutgoingBitrate - kbits/sec
console . log ( "Average outgoing bitrate " + obj . averageOutgoingBitrate + " kbits/sec"
+ " Current outgoing bitrate: " + obj . currentOutgoingBitrate + " kbits/sec" ) ;
}
} ,
callbackError : function ( error , message ) {
//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError
console . log ( "error callback: " + JSON . stringify ( error ) ) ;
var errorMessage = JSON . stringify ( error ) ;
if ( typeof message != "undefined" ) {
errorMessage = message ;
}
if ( error . indexOf ( "NotFoundError" ) != - 1 ) {
errorMessage = "Camera or Mic are not found or not allowed in your device" ;
} else if ( error . indexOf ( "NotReadableError" ) != - 1 || error . indexOf ( "TrackStartError" ) != - 1 ) {
errorMessage = "Camera or Mic is being used by some other process that does not let read the devices" ;
} else if ( error . indexOf ( "OverconstrainedError" ) != - 1 || error . indexOf ( "ConstraintNotSatisfiedError" ) != - 1 ) {
errorMessage = "There is no device found that fits your video and audio constraints. You may change video and audio constraints"
} else if ( error . indexOf ( "NotAllowedError" ) != - 1 || error . indexOf ( "PermissionDeniedError" ) != - 1 ) {
errorMessage = "You are not allowed to access camera and mic." ;
} else if ( error . indexOf ( "TypeError" ) != - 1 ) {
errorMessage = "Video/Audio is required" ;
}
alert ( errorMessage ) ;
}
} ) ;
}
} ,
janusMessageScreen ( msg , jesp ) {
var event = msg [ "videoroom" ]
console . log ( jesp )
if ( event === "joined" ) {
this . janusScreenShareHandle . createOffer (
{
media : { video : this . capture , audioSend : false , videoRecv : false } , // Screen sharing Publishers are sendonly
simulcast : true ,
simulcast2 : true ,
success : this . castStart ,
error : function ( error ) {
console . log ( "WebRTC error:" , error ) ;
// bootbox.alert("WebRTC error... " + JSON.stringify(error));
}
} ) ;
}
if ( jesp !== undefined && jesp !== null ) {
// Janus.debug("Handling SDP as well...");
// Janus.debug(jsep);
this . janusScreenShareHandle . handleRemoteJsep ( { jsep : jesp } ) ;
}
} ,
onlocalstreamScreen ( stream ) {
if ( this . screenShareStarted )
this . screenShareStarted = true ;
this . streamerScreenShare ( stream )
this . $refs . ownstreamscreen . srcObject = stream
} ,
screenShareSwitch ( ) {
if ( this . screenShareStarted ) {
this . screenShareStop ( )
} else {
this . screenShare ( )
}
} ,
shareScreenStart ( capture ) {
this . capture = capture
this . janusInit . attach (
{
plugin : "janus.plugin.videoroom" ,
opaqueId : this . opaqueId ,
success : this . janusPluginSuccessScreen ,
consentDialog : this . consentDialog ,
error : this . janusPluginError ,
mediaState : this . mediaState ,
webrtcState : this . webrtcState2 ,
onmessage : this . janusMessageScreen ,
onlocalstream : this . onlocalstreamScreen
}
)
this . mozillaAlert = false ;
this . chromeAlert = false ;
} ,
screenShareStop ( ) {
var srcObject = this . $refs . ownstreamscreen . srcObject ;
for ( const track of srcObject . getTracks ( ) ) {
track . stop ( ) ;
}
var unpublish = { request : 'unpublish' } ;
this . janusScreenShareHandle . send ( { message : unpublish } ) ;
this . janusScreenShareHandle . detach ( ) ;
this . screenShareStarted = false ;
} ,
screenShare ( ) {
if ( ! this . $janus . isExtensionEnabled ( ) ) {
this . chromeAlert = true
return ;
}
if ( navigator . mozGetUserMedia ) {
// Firefox needs a different constraint for screen and window sharing
this . mozillaAlert = true
return ;
}
this . shareScreenStart ( 'screen' )
} ,
janusPluginError ( error ) {
console . log ( error )
} ,
consentDialog ( on ) {
// this.$janus.debug("Consent dialog should be " + (on ? "on" : "off") + " now");
console . log ( on )
} ,
janusPluginSuccess ( pluginHandle ) {
this . pluginHandle = pluginHandle
this . $janus . log ( "Plugin attached! (" + this . pluginHandle . getPlugin ( ) + ", id=" + this . pluginHandle . getId ( ) + ")" ) ;
this . $janus . log ( " -- This is a publisher/manager" ) ;
this . $janus . listDevices ( this . initDevices ) ;
} ,
initDevices ( devices ) {
console . log ( devices )
devices . forEach ( device => {
if ( device . kind === 'videoinput' ) {
this . videoDevices . push ( device )
}
if ( device . kind === 'audioinput' ) {
this . audioDevices . push ( device )
}
} )
this . deviceSelectDialog = true
} ,
genRemoteFeed ( ) {
this . remoteStreams . forEach ( item => {
this . createRemoteFeed ( item )
} )
} ,
offerSend ( jsep ) {
console . log ( 'vid offer' )
console . log ( jsep )
var publish = { "request" : "configure" , "audio" : true , "video" : true } ;
this . pluginHandle . send ( { "message" : publish , "jsep" : jsep } ) ;
} ,
controlPublishers ( msg ) {
if ( msg [ "publishers" ] . length > 12 ) {
this . mdsize = 1
} else {
var size = parseInt ( 18 / ( msg [ "publishers" ] . length + 1 ) )
if ( size < 6 ) {
this . mdsize = size
} else {
this . mdsize = size / 2
}
if ( this . mdsize > 6 ) this . mdsize = 6
this . mdsize = parseInt ( this . mdsize )
}
msg [ "publishers" ] . forEach ( item => {
var has = false
item . talking = false
this . remoteStreams . forEach ( rm => {
if ( item . id === rm . id ) has = true
} )
if ( ! has ) {
if ( this . username + " - Share Screen" !== item . display ) this . remoteStreams . push ( item )
}
} )
} ,
janusMessage ( msg , jsep ) {
console . log ( msg ) ;
var event = msg [ "videoroom" ] ;
if ( event !== undefined ) {
if ( event === "talking" ) {
this . remoteStreams . forEach ( item => {
if ( item . id === msg [ 'id' ] ) item . talking = true
} )
}
if ( event === "stopped-talking" ) {
this . remoteStreams . forEach ( item => {
if ( item . id === msg [ 'id' ] ) item . talking = false
} )
}
if ( event === "joined" ) {
this . myid = msg [ "id" ] ;
this . mypvtid = msg [ "private_id" ] ;
this . $janus . log ( "Successfully joined room " + msg [ "room" ] + " with ID " + this . myid ) ;
this . restartDevices ( )
if ( msg [ "publishers" ] !== undefined && msg [ "publishers" ] !== null ) {
this . controlPublishers ( msg )
}
} else if ( event === "event" ) {
if ( msg [ "publishers" ] !== undefined && msg [ "publishers" ] !== null ) {
this . controlPublishers ( msg )
} else if ( msg [ "leaving" ] !== undefined && msg [ "leaving" ] !== null ) {
console . log ( "leaving" )
this . remoteStreams . forEach ( item => {
if ( item . id === msg [ 'leaving' ] ) this . remoteStreams . splice ( this . remoteStreams . indexOf ( item ) , 1 )
} )
}
}
}
if ( jsep !== undefined && jsep !== null ) {
console . log ( "Handling SDP as well..." ) ;
console . log ( jsep ) ;
this . pluginHandle . handleRemoteJsep ( { jsep : jsep } ) ;
var audio = msg [ "audio_codec" ] ;
if ( this . mystream && this . mystream . getAudioTracks ( ) && this . mystream . getAudioTracks ( ) . length > 0 && ! audio ) {
console . log ( "Our audio stream has been rejected, viewers won't hear us" ) ;
}
}
} ,
onlocalstream ( stream ) {
this . mystream = stream
console . log ( this . $refs )
console . log ( this . $refs [ "ownstream" ] )
this . $refs . ownstream . srcObject = this . mystream
} ,
restartDevices ( ) {
this . deviceSelectDialog = false
var media = {
audioRecv : false , videoRecv : false , audioSend : true , videoSend : ! this . noVid ,
simulcast : true ,
simulcast2 : true ,
audio : {
deviceId : {
exact : this . selectedAudio
}
} ,
// replaceAudio: true, // This is only needed in case of a renegotiation
video : {
deviceId : {
exact : this . selectedVideo ,
width : 1280 ,
height : 720
} ,
width : 1280 ,
height : 720
} ,
// replaceVideo: true,
} ;
this . pluginHandle . createOffer (
{
media : media ,
success : this . offerSend ,
error : function ( error ) {
// An error has occurred ...
console . log ( error )
}
} )
} ,
mediaState ( medium , on ) {
this . $janus . log ( "Janus " + ( on ? "started" : "stopped" ) + " receiving our " + medium ) ;
} ,
changeDevice ( ) {
this . $refs . ownstream . setSinkId ( this . selectedVideo )
this . $refs . ownstream . setSinkId ( this . selectedAudio )
} ,
selectDevice : function ( ) {
if ( ! this . started ) {
console . log ( this . selectedVideo )
console . log ( this . selectedAudio )
this . started = true
var register = {
"request" : "join" ,
"room" : 1234 ,
"ptype" : "publisher" ,
"display" : this . username
} ;
this . pluginHandle . send ( { "message" : register } ) ;
let websocketURL = "wss://live.ozgurkon.org/LiveApp/websocket"
var mediaConstraints = {
video : { width : 1280 , height : 720 } ,
audio : true
} ;
var pc _config = null ;
var sdpConstraints = {
OfferToReceiveAudio : false ,
OfferToReceiveVideo : false
} ;
if ( this . streamer ) {
this . antwrtc = new WebRTCAdaptor ( {
websocket _url : websocketURL ,
mediaConstraints : mediaConstraints ,
peerconnection _config : pc _config ,
sdp _constraints : sdpConstraints ,
localVideoId : "myvideo" ,
debug : true ,
callback : function ( info , obj ) {
if ( info == "initialized" ) {
console . log ( "initialized" ) ;
// start_publish_button.disabled = false;
// stop_publish_button.disabled = true;
} else if ( info == "publish_started" ) {
//stream is being published
console . log ( "publish started" ) ;
// start_publish_button.disabled = true;
// stop_publish_button.disabled = false;
// startAnimation();
} else if ( info == "publish_finished" ) {
//stream is being finished
console . log ( "publish finished" ) ;
// start_publish_button.disabled = false;
// stop_publish_button.disabled = true;
} else if ( info == "screen_share_extension_available" ) {
// screen_share_checkbox.disabled = false;
// console.log("screen share extension available");
// install_extension_link.style.display = "none";
} else if ( info == "screen_share_stopped" ) {
console . log ( "screen share stopped" ) ;
} else if ( info == "closed" ) {
//console.log("Connection closed");
if ( typeof obj != "undefined" ) {
console . log ( "Connecton closed: " + JSON . stringify ( obj ) ) ;
}
} else if ( info == "pong" ) {
//ping/pong message are sent to and received from server to make the connection alive all the time
//It's especially useful when load balancer or firewalls close the websocket connection due to inactivity
} else if ( info == "refreshConnection" ) {
this . startPublishing ( ) ;
} else if ( info == "updated_stats" ) {
//obj is the PeerStats which has fields
//averageOutgoingBitrate - kbits/sec
//currentOutgoingBitrate - kbits/sec
console . log ( "Average outgoing bitrate " + obj . averageOutgoingBitrate + " kbits/sec"
+ " Current outgoing bitrate: " + obj . currentOutgoingBitrate + " kbits/sec" ) ;
}
} ,
callbackError : function ( error , message ) {
//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError
console . log ( "error callback: " + JSON . stringify ( error ) ) ;
var errorMessage = JSON . stringify ( error ) ;
if ( typeof message != "undefined" ) {
errorMessage = message ;
}
if ( error . indexOf ( "NotFoundError" ) != - 1 ) {
errorMessage = "Camera or Mic are not found or not allowed in your device" ;
} else if ( error . indexOf ( "NotReadableError" ) != - 1 || error . indexOf ( "TrackStartError" ) != - 1 ) {
errorMessage = "Camera or Mic is being used by some other process that does not let read the devices" ;
} else if ( error . indexOf ( "OverconstrainedError" ) != - 1 || error . indexOf ( "ConstraintNotSatisfiedError" ) != - 1 ) {
errorMessage = "There is no device found that fits your video and audio constraints. You may change video and audio constraints"
} else if ( error . indexOf ( "NotAllowedError" ) != - 1 || error . indexOf ( "PermissionDeniedError" ) != - 1 ) {
errorMessage = "You are not allowed to access camera and mic." ;
} else if ( error . indexOf ( "TypeError" ) != - 1 ) {
errorMessage = "Video/Audio is required" ;
}
alert ( errorMessage ) ;
}
} ) ;
}
} else {
this . restartDevices ( )
}
} ,
janusSuccess ( ) {
this . opaqueId = "videoroomtest-" + this . $janus . randomString ( 12 ) ;
this . janusInit . attach (
{
plugin : "janus.plugin.videoroom" ,
opaqueId : this . opaqueId ,
success : this . janusPluginSuccess ,
consentDialog : this . consentDialog ,
error : this . janusPluginError ,
mediaState : this . mediaState ,
webrtcState : this . webrtcState ,
onmessage : this . janusMessage ,
onlocalstream : this . onlocalstream
}
)
}
}
}
< / script >
< style scoped >
< / style >