Agora.io VideoSDKの画面共有(ScreenSharing)実装例（その2）

<div>        
      <div>
       <select name="microphoneId" id="microphoneId"></select>
      </div>
      <div>
       <select name="cameraId" id="cameraId"></select>
      </div>
    </div>
    

<button class="btn btn-raised btn-primary waves-effect waves-light" id="camera_join">CAMERA_JOIN</button>
    <button class="btn btn-raised btn-primary waves-effect waves-light" id="camera_leave">CAMERA_LEAVE</button>
    <button class="btn btn-raised btn-primary waves-effect waves-light" id="screensharing">SCREENSHARING</button>
    
    

  $("#camera_join").on("click", function (e) {
        e.preventDefault();
        console.log("camera_join")
        const params = serializeFormData();
        if (validator(params, fields)) {
           rtc.camera_join(params);
        }
      })
    
      $("#camera_leave").on("click", function (e) {
        e.preventDefault();
        console.log("camera_leave")
        const params = serializeFormData();
        if (validator(params, fields)) {
           rtc.camera_leave();
        }
      })
    
      $("#screensharing").on("click", function (e) {
        e.preventDefault();
        console.log("screensharing")
        const params = serializeFormData();
        if (validator(params, fields)) {
          rtc.screensharing(params);
        }
      })
    
    

  camera_join(data){
        console.log("camera_join");
    
         this._client2 = AgoraRTC.createClient({mode: data.mode, codec: data.codec});   
         this._params2 = data;
    
         // init client
         this._client2.init(data.appID, () => {
         console.log("init success");
         this._client2.join(data.token ? data.token : null, data.channel, data.uid ? data.uid : null, (uid) => {
           this._params2.uid = uid;
           this._uid2 = uid;
           Toast.notice("join channel: " + data.channel + " success, uid: " + uid);
           console.log("join channel: " + data.channel + " success, uid: " + uid);
           this._joined2 = true;
    
           console.log(data.microphoneId);
           console.log(data.cameraId);
    
              this._localStream2 = AgoraRTC.createStream({streamID: uid, audio: true, cameraId: data.cameraId, microphoneId: data.microphoneId, video: true, screen: false});
    
              this._localStream2.setVideoProfile('720p_3');
              // The user has granted access to the camera and mic.
              this._localStream2.on("accessAllowed",() => {
                console.log("accessAllowed");
              });
    
              // The user has denied access to the camera and mic.
              this._localStream2.on("accessDenied", () => {
                console.log("accessDenied");
              });
    
              this._localStream2.init (() => {
              console.log("getUserMedia successfully");
              this._localStream2.play("local_stream", {fit: "cover"})
              this._client2.publish(this._localStream2,  (err) => {
                console.log("Publish local stream error: " + err);
              });
              this._client2.on('stream-published',  (evt) => {
                console.log("Publish local stream successfully");
              });
            }, (err) => {
              console.log("getUserMedia failed", err);
            })
          }, (err) => {
            Toast.error("client join failed, please open console see more detail")
            console.error("client join failed", err)
          })
        }, (err) => {
          Toast.error("client init failed, please open console see more detail")
          console.error(err);
        });
    
      }
    
    

  camera_leave () {
        this._client2.leave(() => {
          // close stream
          this._localStream2.close();
          // stop stream
          this._localStream2.stop();
          while (this._remoteStreams.length > 0) {
            const stream = this._remoteStreams.shift();
            const id = stream.getId()
            stream.stop();
            removeView(id);
          }
          this._localStream2 = null;
          this._remoteStreams = [];
          this._client2 = null;
          console.log("client2 leaves channel success");
          Toast.notice("leave success")
        }, (err) => {
          console.log("channel leave failed");
          Toast.error("leave success")
          console.error(err);
        })
      }
    

  screensharing(data){
        console.log("screensharing start");
    
        // create local stream
        const streamSpec = {
          streamID: this._params.uid,
          audio: false,
          video: false,
          screen: true,
          microphoneId: data.microphoneId,
          cameraId: data.cameraId
        }
    
        // Your firefox need use support mediaSource at least
        if (isFirefox()) {
          streamSpec.mediaSource = 'window';
        } else if (!isCompatibleChrome()) {
          // before chrome 72 need install chrome extensions
          // You can download screen share plugin here https://chrome.google.com/webstore/detail/agora-web-screensharing/minllpmhdgpndnkomcoccfekfegnlikg
          streamSpec.extensionId = 'minllpmhdgpndnkomcoccfekfegnlikg';
        }
    
        this._localStream = AgoraRTC.createStream(streamSpec);
    
        // set screen sharing video resolution
        if (data.screenShareResolution != 'default') {
          this._localStream.setScreenProfile(data.screenShareResolution);
          console.log("set screen profile", data.screenShareResolution);
        }
    
        // Occurs when sdk emit error 
        this._localStream.on("error", (evt) => {
          Toast.error("error", JSON.stringify([evt]))
        })
    
        // Occurs when a you stop screen sharing
        this._localStream.on("stopScreenSharing", (evt) => {
          this._localStream.stop();
          this._showProfile = false;
          Toast.notice("stop screen sharing")
        })
    
        // init local stream
        this._localStream.init(() => {
          console.log("init local stream success");
          // play stream with html element id "local_stream"
          this._localStream.play("local_stream", {fit: "cover"})
          // run callback
          resolve();
        }, (err) =>  {
          Toast.error("stream init failed, please open console see more detail")
          console.error("init local stream failed ", err);
          if (isFirefox()) {
            console.error('Failed to start screen sharing, maybe firefox not support mediaSource, please upgrade your firefox to latest version')
            return;
          }
          if (!isCompatibleChrome()) {
            console.error('Failed to start screen sharing, maybe chrome extension was not installed properly, you can get it from https://chrome.google.com/webstore/detail/minllpmhdgpndnkomcoccfekfegnlikg');
            return;
          }
        })
        console.log("screensharing success");
        return;
      }