实践分享 | 工程师“云招聘”，视频面试也能在线编程

// 编辑器import React from 'react';import VSCode from './VSCode';
class CodeEditor extends React.Component {  render() {    const { width, height, style, onInit } = this.props;    return (      <div        style={{          width: width || '100%',          height: height || '100%',          position: 'absolute',          top: 0,          left: 0,          right: 0,          bottom: 0,          ...style        }}      >        <VSCode {...this.props} onInit={onInit} />      </div>    )  }}
export default CodeEditor;

// 编辑器设置
class Setting extends React.Component {  static contextType = Context  bindVaue = key => {    const { setting, dispatch } = this.context;    return {      value: setting[key],      setValue: value => dispatch(settingUpdate({ key, value })),    }  }  render() {    const { isOpen } = this.props;
    return (      <Modal        isOpen={isOpen}        onRequestClose={this.props.closeModal}        style={modalStyle}      >        <div className="setting">          <h3>Settings</h3>          <SettingItem            title="Line numbers"            type="boolean"            {...this.bindVaue('lineNumbers')}          />          <SubDescription>            Controls whether to show line numbers. Defaults to true.          </SubDescription>          <Split />
          <SettingItem            title="Auto Indent"            type="boolean"            {...this.bindVaue('autoIndent')}          />          <SubDescription>            Enable auto indentation adjustment. Defaults to false.          </SubDescription>          <Split />
          <SettingItem            title="Tab Size"            type="number"            {...this.bindVaue('tabSize')}          />          <SubDescription>            Number of spaces per indentation level. Inherited by all formatters.          </SubDescription>          <Split />
          <SettingItem            title="Font Size"            type="number"            {...this.bindVaue('fontSize')}          />          <SubDescription>            Controls the font size in pixels          </SubDescription>
        </div>      </Modal>    )  }}

// REPLfunction dockerExec(lang, isPty) {  const containerId = get('containerId');  let execParams = [];
  execParams.push('exec');  if (isPty) {    execParams.push('-it');  } else {    execParams.push('-t');  }  execParams.push('-w', ws, containerId);  if (isDynamic(lang) && isPty) {    execParams.push(...replParams(lang)); // 动态语言运行  } else {    execParams.push(...replParams(lang, true)); // 动态语言运行  }  if (isDynamic(lang) && isPty) { // 动态语言需要pty    return nodePty.spawn('docker', execParams);  } else { // 不需要pty，直接执行    return spawn('docker', execParams);  }}

//音视频实时通讯  initVideo() {    const { sandbox: { _id }, app: { token } } = this.props;
    if(!AgoraRTC.checkSystemRequirements()) {      alert("Your browser does not support WebRTC!");    }
    AgoraRTC.getDevices(devices => {      var defaultAudio, defaultVideo;      let localStream;
      defaultAudio = _.head(_.filter(devices, function(v) {        return v.kind === 'audioinput';      }));      defaultVideo = _.head(_.filter(devices, function(v) {        return v.kind === 'videoinput';      }));      this.client.init(appId, () => {        //加入频道        console.log('token > ', token, _id, this.uid)        this.client.join(token, _id/* channel id */, this.uid, uid => {          const localStream = AgoraRTC.createStream({            streamID: uid,            audio: true,            cameraId: defaultVideo.deviceId,            microphoneId: defaultAudio.deviceId,            video: true, // 是否开启视频            screen: false          });          this.stream = localStream;          localStream.setVideoProfile('480p');          localStream.init(() => {            localStream.play("preview");            // 如果创建者自动开启发布流            // 发布视频流到SD-RTN            this.client.publish(localStream, (err) => {              console.error("发布视频流错误: " + err);            });          });
        })      })    });  }  

Run dependencies docker, mongodb, nodejs to make sure you have installed the above software normally• Rename .env.example to .env and fill in the values according to the configuration in the prompt• npm i installer dependencies• Start a console and run npm run build• Start another console and run npm run serverVisit the browser http: // localhost: 3000 and log in using github to create it.