maxme-electron/react-sample/src/js/components/presentational/Settings.jsx

The electron wrap of MaxME.

import {Modal, Select, Form, message} from 'antd';
import React, {Component} from 'react';
import VideoRender from '../presentational/VideoRender.jsx';
import PropTypes from 'prop-types';

class Settings extends Component {
  constructor(props) {
    super(props)

    this.state = {
      microphones : maxme.device.microphones,
      speakers :maxme.device.speakers,
      cameras: maxme.device.cameras,
      microphone:maxme.device.usedMicrophone,
      speaker:maxme.device.usedSpeaker,
      camera:maxme.device.usedCamera
    }
  }

  selectCamera(val) {
    const rlt = maxme.device.selectCamera(val);
    if (rlt.errno === 0) {
      this.setState({camera:val});
    } else {
      message.warn(rlt.msg);
    }
  }

  selectMicrophone(val) {
    const rlt = maxme.device.selectMicrophone(val);
    if (rlt.errno === 0) {
      this.setState({microphone:val});
    } else {
      message.warn(rlt.msg);
    }
  }

  selectSpeaker(val) {
    const rlt = maxme.device.selectSpeaker(val);
    if (rlt.errno === 0) {
      this.setState({speaker:val});
    } else {
      message.warn(rlt.msg);
    }
  }

  render() {
    const cameras = this.state.cameras.map((camera, index) =>{ return <Option key={index}>{camera}</Option>});
    const speakers = this.state.speakers.map((speaker, index) => {return <Option key={index}>{speaker}</Option>});
    const microphones = this.state.microphones.map((microphone, index)=>{return <Option key={index}>{microphone}</Option>})
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      }
    };
    return (
      <div onClick={(e)=>{e.stopPropagation();}}>
        <Modal
          footer={null}
          title="设置"
          closable={true}
          visible={true}
          onCancel={this.props.onClose}
          centered
        >
          <Form style={{margin:'0 auto'}}>
            <Form.Item
              {...formItemLayout}
              label="视频预览"
            >
              <VideoRender {...{width:320, height:180, zIndex:1001, stateBar:false}}
                ref={(render)=>{
                  if (render) {
                    render.preview();
                  }
                }}
              />
            </Form.Item>
            <Form.Item
              {...formItemLayout}
              label="摄像头"
            >
              <Select 
                value={this.state.cameras[this.state.camera]}
                onSelect={(val) =>{this.selectCamera(val);}}
                placeholder="请选择所要使用的摄像头"
                style={{width:320}}
              >
                {cameras}
              </Select>
            </Form.Item>
            <Form.Item
              {...formItemLayout}
              label="麦克风"
            >
              <Select 
                value={this.state.microphones[this.state.microphone]}
                onSelect={(val) =>{this.selectMicrophone(val);}}
                placeholder="请选择所要使用的麦克风"
                style={{width:320}}
              >
                {microphones}
              </Select>
            </Form.Item>
            <Form.Item
              {...formItemLayout}
              label="扬声器"
            >
              <Select 
                value={this.state.speakers[this.state.speaker]}
                onSelect={(val) =>{this.selectSpeaker(val);}}
                placeholder="请选择所要使用的扬声器"
                style={{width:320}}
              >
                {speakers}
              </Select>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
};

Settings.propTypes = {
  onClose:PropTypes.func.isrequired
};

export default Settings;