procyberian
/
projectx
Archived
forked from Albatross/projectx
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request 'screen share system completed. but we need stop sharing button' (#1) from screen-share into master

Browse Source 
Reviewed-on: xcoder/projectx#1
share-pdf
Mustafa Yontar 5 years ago
parent 69e1dfc223 5e8a5788c2
commit c09e15ad51
2 changed files with 108 additions and 5 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      src/lib/RemoteFeed.vue
  2. 104
      src/lib/VueJanus.vue

7
src/lib/RemoteFeed.vue
Unescape View File

@ -64,6 +64,7 @@
},
onSuccess (pluginHandle) {
this.remoteFeed = pluginHandle;
alert(pluginHandle.id)
this.remoteFeed.simulcastStarted = false;
console.log('Remote feed success')
var subscribe = { "request": "join", "room": this.room, "ptype": "subscriber", "feed": this.feedid, "private_id": this.mypvtid };
@ -78,10 +79,10 @@
console.log('stream is strarted')
this.$refs.feed_video.srcObject = stream
setInterval(() => {
console.log(this.remoteFeed.getBitrate())
setInterval(this.feedInterval,1000)
},
feedInterval () {
this.bitrate = this.remoteFeed.getBitrate()
},1000)
},
feedResponse (jsep) {
var body = { "request": "start", "room": this.room }

104
src/lib/VueJanus.vue
Unescape View File

@ -1,6 +1,37 @@
<template>
<v-container>
<v-btn @click="deviceSelectDialog = true">change</v-btn>
<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-card-title>
<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-card-text>
<v-card-actions>
<v-btn @click="shareScreenStart('screen')">Share a screen</v-btn>
<v-btn @click="shareScreenStart('window')">Share a window</v-btn>
</v-card-actions>
</v-card>
</v-dialog><v-dialog
v-model="chromeAlert"
max-width="290"
>
<v-card>
<v-card-title class="headline">Chrome Extension Error</v-card-title>
<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-card-text>
</v-card>
</v-dialog>
<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-col>
<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-col>
<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-col>
@ -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}, // Screen sharing Publishers are sendonly
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) {
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) {
// Firefox needs a different constraint for screen and window sharing
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)
}
})