@ -1,6 +1,37 @@
< template >
< v -container >
< v -btn @ click = "deviceSelectDialog = true" > change < / v - b t n >
< v -btn @click ="screenShare" > share a screen < / v-btn >
< v -dialog
v - model = "mozillaAlert"
max - width = "290"
>
< 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 -btn @click ="shareScreenStart('screen')" > Share a screen < / v-btn >
< v -btn @click ="shareScreenStart('window')" > Share a window < / v-btn >
< / 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 - d i a l o g
v - model = "chromeAlert"
max - width = "290"
>
< 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"
@ -58,6 +89,10 @@
< video ref = "ownstream" class = "rounded centered" id = "myvideo" width = "100%" height = "100%" autoplay
playsinline muted = "muted" / >
< / v - c o l >
< v -col cols = "12" md = "3" style = "display: none" >
< 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 = "3" v-for ="remoteStream in remoteStreams" :key="remoteStream.id" >
< RemoteFeed :opaqueId ="opaqueId" :mypvtid ="mypvtid" :feedid ="remoteStream.id" :janusInit ="janusInit" :room ="room" > < / RemoteFeed >
< / v - c o l >
@ -85,10 +120,15 @@
selectedVideo : null ,
selectedAudio : null ,
started : false ,
mozillaAlert : false ,
janusScreenShareHandle : null ,
chromeAlert : false ,
videoDevices : [ ] ,
capture : '' ,
audioDevices : [ ] ,
deviceSelectDialog : false ,
noVid : false ,
shareScreenId : null ,
remoteStreams : [ ]
}
} ,
@ -107,7 +147,69 @@
} ,
methods : {
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" : this . room , "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 } ) ;
} ,
janusMessageScreen ( msg , jesp ) {
var event = msg [ "videoroom" ]
console . log ( jesp )
if ( event === "joined" ) {
this . janusScreenShareHandle . createOffer (
{
media : { video : this . capture , audioSend : false , videoRecv : false } , / / S c r e e n s h a r i n g P u b l i s h e r s a r e s e n d o n l y
success : this . castStart ,
error : function ( error ) {
console . log ( "WebRTC error:" , error ) ;
/ / b o o t b o x . a l e r t ( " W e b R T C e r r o r . . . " + J S O N . s t r i n g i f y ( e r r o r ) ) ;
}
} ) ;
}
if ( jesp !== undefined && jesp !== null ) {
/ / J a n u s . d e b u g ( " H a n d l i n g S D P a s w e l l . . . " ) ;
/ / J a n u s . d e b u g ( j s e p ) ;
this . janusScreenShareHandle . handleRemoteJsep ( { jsep : jesp } ) ;
}
} ,
onlocalstreamScreen ( stream ) {
this . $refs . ownstreamscreen . srcObject = stream
} ,
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 . webrtcState ,
onmessage : this . janusMessageScreen ,
onlocalstream : this . onlocalstreamScreen
}
)
} ,
screenShare ( ) {
if ( ! this . $janus . isExtensionEnabled ( ) ) {
this . chromeAlert = true
return ;
}
if ( navigator . mozGetUserMedia ) {
/ / F i r e f o x n e e d s a d i f f e r e n t c o n s t r a i n t f o r s c r e e n a n d w i n d o w s h a r i n g
this . mozillaAlert = true
return ;
}
this . shareScreenStart ( 'screen' )
} ,
janusPluginError ( error ) {
@ -157,7 +259,7 @@
if ( item . id === rm . id ) has = true
} )
if ( ! has ) {
this . remoteStreams . push ( item )
if ( this . username + " - Share Screen" !== item . display ) this . remoteStreams . push ( item )
}
} )