声网的视频直播与屏幕共享

视频直播

以下是操作步骤

1. 获取当前设备的 麦克风 摄像头 扬声器 等数据
2. 创建直播实例
3. 给当前实例绑定事件
4. 初始化频道
5. 加入频道
6. 创建本地流
7. 初始化本地流
8. 发布本地流

重中之中 引入声网的SDK，会用到jquery 也先引入

import AgoraRTC from 'agora-rtc-sdk'
import $ from 'jquery'

获取当前设备的 麦克风 摄像头 扬声器 等数据 --（AgoraRTC.getDevices）

AgoraRTC.getDevices((items) => {
        items.filter((item) => {
          return ["audioinput", "videoinput", "audiooutput"].indexOf(item.kind) !== -1
        })
        .map((item) => {
          return {
          name: item.label,
          value: item.deviceId,
          kind: item.kind,
          }
        })
        var videos = []
        var audios = []
        var speaker = []
        for (var i = 0; i < items.length; i++) {
          var item = items[i]
          if ("videoinput" == item.kind) {
            var name = item.label
            var value = item.deviceId
            if (!name) {
              name = "camera-" + videos.length
            }
            videos.push({
              name: name,
              value: value,
              kind: item.kind
            })
          }
          if ("audioinput" == item.kind) {
            var name = item.label
            var value = item.deviceId
            if (!name) {
              name = "microphone-" + audios.length
            }
            audios.push({
              name: name,
              value: value,
              kind: item.kind
            })
          }
          if ("audiooutput" == item.kind) {
            var name = item.label
            var value = item.deviceId
            if (!name) {
              name = "speaker-" + speaker.length
            }
            speaker.push({
              name: name,
              value: value,
              kind: item.kind
            })
          }
        }
      })

创建直播实例 – (AgoraRTC.createClient)

AgoraRTC.createClient({mode: option.mode, codec: option.codec})
// mode 频道场景: "live"直播场景 | "rtc" 通信场景
// codec  览器使用的编码格式，"vp8": 浏览器使用 VP8 编码 "h264": 浏览器使用 H.264 编码

给当前实例绑定事件 client.on

// client 为当前实例 可在创建实例的时候 用变量接收
// 绑定的事件可以有多个 具体见下地址
// 在添加远程流时发生。
client.on("stream-added", (evt) => {
})

声网 — 直播的事件绑定

初始化频道 Client.init 与 加入频道 Client.join

// agoraAppId 注册声网后的appid
Client.init(agoraAppId, () => {
         // token 为空时传 null
         // channel 频道名称
         // videoUid 视频的uid
        Client.join(token ? token : null, this.channel, videoUid ? .videoUid : null, (uid) => {
          // 这里回调会返回一个uid 我这里作为主播的 videoUid 是固定的 方便判断 其他观众用户的 videoUid是使用的 这里返回的uid
          // 写加入后的逻辑，如 创建本地流 发布本地流
        }, (err) => {
          console.error("加入失败", err)
        })
      }, (err) => {
        console.error('初始化频道失败', err)
      })

**创建本地流 AgoraRTC.createStream

AgoraRTC.createStream({
        streamID: videoUid, // 加入频道后返回的uid
        audio: true,
        video: true,
        screen: false,
        microphoneId: this.microphoneId, // 第一步获取的设备数据
        cameraId: this.cameraId // 第一步获取的设备数据
      })

初始化本地流 stream.init 与 发布 本地流 Client.publish

	  // Stream 是创建的本地流， 可以用变量接收后使用 
      // init local stream 初始化本地流
      Stream.init( () => {
        // 播放具有html元素ID“ local_stream”的流
        Stream.play("local_stream")
        // 发布本地流
        Client.publish(Stream, (err) => {
	       console.log("发布本地流失败", err)
	    })
      }, (err) => {
        this.$Message.error("发布本地流失败！")
        console.error("发布本地流失败！ ", err)
      })

屏幕共享

以下是屏幕共享的操作步骤

创建实例
初始化频道
加入频道

创建屏幕共享实例 – (AgoraRTC.createClient)

AgoraRTC.createClient({mode: option.mode, codec: option.codec})
// mode 频道场景: "live"直播场景 | "rtc" 通信场景
// codec  览器使用的编码格式，"vp8": 浏览器使用 VP8 编码 "h264": 浏览器使用 H.264 编码

给当前实例绑定事件 client.on — 如果是屏幕共享与视频直播同时存在，只需要绑定一个实例的事件即可，避免触发多次

// client 为当前实例 可在创建实例的时候 用变量接收
// 绑定的事件可以有多个 具体见下地址
// 在添加远程流时发生。
client.on("stream-added", (evt) => {
})

声网 — 直播的事件绑定

初始化频道 Client.init 与 加入频道 Client.join

// agoraAppId 注册声网后的appid
Client.init(agoraAppId, () => {
         // token 为空时传 null
         // channel 频道名称
         // videoUid 视频的uid
        Client.join(token ? token : null, this.channel, videoUid ? .videoUid : null, (uid) => {
          // 这里回调会返回一个uid 我这里作为主播的 videoUid 是固定的 方便判断 其他观众用户的 videoUid是使用的 这里返回的uid
          // 写加入后的逻辑，如 创建本地流 发布本地流
        }, (err) => {
          console.error("加入失败", err)
        })
      }, (err) => {
        console.error('初始化频道失败', err)
      })

**创建本地流 AgoraRTC.createStream

AgoraRTC.createStream({
        streamID: videoUid, // 加入频道后返回的uid
        audio: true,
        video: true,
        screen: false,
        microphoneId: this.microphoneId, // 第一步获取的设备数据
        cameraId: this.cameraId // 第一步获取的设备数据
      })

初始化本地流 stream.init 与 发布 本地流 Client.publish

	  // Stream 是创建的本地流， 可以用变量接收后使用 
      // init local stream 初始化本地流
      Stream.init( () => {
        // 播放具有html元素ID“ local_stream”的流
        Stream.play("local_stream")
        // 发布本地流
        Client.publish(Stream, (err) => {
	       console.log("发布本地流失败", err)
	    })
      }, (err) => {
        this.$Message.error("发布本地流失败！")
        console.error("发布本地流失败！ ", err)
      })