1. Run the installation command

npm install agora-rtc-sdk
Copy the code

2. Introduce an SDK into the project

import AgoraRTC from 'agora-rtc-sdk'
Copy the code

3. Define variables

export default {
    data () {
        return {
            rtc: {
                client: null.joined: false.published: false.localStream: null.remoteStreams: [].params: {},
                playingStreamList: []},option: {
                appID: "".// Process.env.sw_appid can be placed in config
                channel: "".uid: null.token: null}}}}Copy the code

4. Initialize a client object to join a room

// First add a joinRoom () {} method to methods
joinRoom () {
    let $this = this;
    // Use mode: "live"
    $this.rtc.client = AgoraRTC.createClient({mode: "live".codec: "h264"});
    if ($this.rtc.joined) {
        console.log("Your already joined");
        return;
    }
  	$this.rtc.params = $this.option;
    // Listen for binding events
    this.handleEvents();
    // Initialize the client object
    $this.rtc.client.init($this.option.appID, function () {
        // setClientRole This method sets the user role 'host' to be the anchor and 'audience' to be the audience
        $this.rtc.client.setClientRole('audience');
        // Join the channel
        $this.rtc.client.join($this.option.token, $this.option.channel, $this.option.uid ? +$this.option.uid : null.function (uid) {
            $this.rtc.joined = true;
            $this.rtc.params.uid = uid;
            // getTransportStats gets statistics about the connection status between the local client and the gateway
            $this.agoraRTTTimer = setInterval(() = > {
                $this.rtc.client.getTransportStats((stats) = > {
                  	$this.agoraRTT = stats.RTT
                });
            }, 3000)},function(err) {
            console.log("client join failed, please open console see more detail")
            console.log("Client connection failed", err)
        })
    }, (err) = > {
        console.log("client init failed, please open console see more detail")
        console.log('Client initialization failed', err);
    });
}
Copy the code

5. Create listener events

handleEvents () {
      var $this = this
      // Occurs when an error message is reported and requires error handling.
      $this.rtc.client.on("error".(err) = > {
          console.log(err)
      })
      // Listen for the "peer-leave" event, listen to leave the room
      $this.rtc.client.on("peer-leave".function(evt) {
          var remoteStream = evt.stream;
          var id = remoteStream.getId();
          remoteStream.stop("remote_video_" + id);
          $this.rtc.remoteStreams = $this.rtc.remoteStreams.filter(function (stream) {
          returnstream.getId() ! == id }) $this.removeView(id); });// Listen for the "stream-added" event and subscribe to a stream when a remote stream is added.
      $this.rtc.client.on("stream-added".function (evt) {  
          var remoteStream = evt.stream;
          var id = remoteStream.getId();
          if(id ! == $this.rtc.params.uid) { $this.rtc.client.subscribe(remoteStream,function (err) {
              console.log("stream subscribe failed", err); }}}));// Listen for the "stream-subscribed" event to play the remote stream when the subscription is successful.
      $this.rtc.client.on("stream-subscribed".function (evt) {
          var remoteStream = evt.stream;
          var id = remoteStream.getId();
          // The stream ID is captured
          $this.addView(id);
          // Play stream ID
          remoteStream.play("remote_video_" + id, function(err) {
          if(err && err.status ! = ="aborted") {// Playback failed, usually blocked by the browser policy. Guide the user to use gestures to trigger the resumption of playback
              $this.playStatus = true$this.rtc.playingStreamList.push(remoteStream); }}); })// Listen for the "stream-removed" event, when the remote stream is removed
      $this.rtc.client.on("stream-removed".function (evt) {
          var remoteStream = evt.stream;
          var id = remoteStream.getId();
          remoteStream.stop("remote_video_" + id);
          $this.rtc.remoteStreams = $this.rtc.remoteStreams.filter(function (stream) {
          		return stream.getId() !== id
          })
          $this.removeView(id);
      })
  }
Copy the code

6. Create an ID stream and delete the ID stream

addView(id) {
    let domIntro = document.createElement('div')
    domIntro.setAttribute('id'.'remote_video_' + id)
    document.getElementById("audio").appendChild(domIntro)
    // Add the interaction action after the specified ID stream. }removeView(id) {
    let removedom = document.getElementById("remote_video_" + id)
    removedom.remove()
    // Delete the interaction after the specified stream ID. }Copy the code

7. Exit the room

The leave method can be directly connected to the Destroyed hook. If the page is opened separately by the webView in APP, you need to interact with the client when exiting the room

destroyed () {
    this.rtc.client.leave(function() {
      console.log("client leaves channel");
    }, function(err) {
      console.log("client leave failed ", err);
    });
}
Copy the code

Fill in the correct channel, token, appID to run, please go to the official website to learn more API