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

Reviewed-on: xcoder/projectx#1

src/lib/RemoteFeed.vue

@@ -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(() => {
+                setInterval(this.feedInterval,1000)
-                    console.log(this.remoteFeed.getBitrate())
+            },
+            feedInterval () {
                 this.bitrate = this.remoteFeed.getBitrate()
-                },1000)
             },
             feedResponse (jsep) {
                 var body = { "request": "start", "room": this.room }

src/lib/VueJanus.vue

@@ -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)
                     }
 
                 })