web技术分享| React版本 anyRTC示例对等连接

前言

大家好，笔者以往发布过很多关于WebRTC的知识，和很多基于anyRTC WebSDK开发的音视频通讯示例，收获了很多开发人员的一致好评，在以往的示例中笔者是基于Vue框架进行编写，后台有小伙伴私信笔者，希望笔者出一个基于React框架的音视频示例，笔者在收到私信的第一时间就开始着手编写，现在把它发布出来供大家参考。

开发准备

在开始写代码之前还需要做一些准备工作，如果你之前没有使用过 anyRTC Web SDK 这里还需要花几分钟时间准备一下， 详见：开发前期准备

创建React程序

• 全局安装

npm install -g create-react-app

• 通过 create-react-app 项目名称（注:项目名称不能有大写）

create-react-app peerconnection

下载并引入项目依赖

npm install ar-rtc-sdk@4.1.3 -S

• 在App.js文件中引入

import React, {
    Component } from 'react';
import ArRTC from 'ar-rtc-sdk';
import Config from '../anyrtc_config';
import './App.css';

定义初始state数据

export default class App extends Component {
    state = {
        channel: '',
        isLogin: false,
        rtcClient: null,
        videoDevices: null,
        audioDevices: null,
        audioTrack: null,
        videoTrack: null,
        list: []
    }
}

创建rtcClient对象

• 通过 ArRTC.createClient 创建的客户端对象。

componentDidMount() {
    this.createRtcClient();
}

createRtcClient = () => {
    const config