以前的面試，都是促膝而談，現(xiàn)在，大家都開啟了攝像頭，視頻面試。一些招聘平臺也已推出“視頻面試”功能。
大部分職位的視頻面試，都與視頻通話沒有太大差別。不過，面向一些工程師的招聘，還可能要考察技術(shù)能力，有可能是一問一答，考察開發(fā)思路，也能會需要秀一段代碼。以往也有過一些在線答題的系統(tǒng)，所以我們完全可以將兩者結(jié)合。
在去年聲網(wǎng)舉辦的的 RTC 2019 編程挑戰(zhàn)賽上，參賽隊(duì)伍“CoderLane”就實(shí)現(xiàn)了支持在線編程的視頻面試應(yīng)用。以下是由 CoderLane 團(tuán)隊(duì)撰寫分享的實(shí)踐經(jīng)驗(yàn)。他們也已經(jīng)將實(shí)現(xiàn)源碼開放在了 Github 上。如果你想?yún)⒖迹梢栽谖哪┇@取。
同時(shí)，今年由聲網(wǎng) Agora 舉辦的 RTC 創(chuàng)新編程挑戰(zhàn)賽已經(jīng)開賽了！春季賽有兩個(gè)賽題：你可以選擇基于大賽提供的 Demo，為多人視頻通話實(shí)現(xiàn)一個(gè)好看的 UI；也可以基于 Agora SDK，為自己的應(yīng)用增加音視頻互動能力，就像本文這個(gè)獲獎作品一樣。大賽還準(zhǔn)備了豐厚的大獎，拉上小伙伴一起，點(diǎn)擊這里報(bào)名參賽吧！
)
話不多說，我們還是先看看此前的獲獎作品。
項(xiàng)目簡介
CoderLane 是一款在線實(shí)時(shí)編程環(huán)境, 它的目的是為了解決在線多人實(shí)時(shí)編程環(huán)境困難的問題。通過各種技術(shù)手段希望提高在線編程的體驗(yàn)。
項(xiàng)目初心
緣起于一個(gè)朋友的在線面試體驗(yàn)。面試官給他發(fā)了一個(gè)鏈接，面試題目很簡單：字符串去重并在對應(yīng)字符后面跟一個(gè)字符重復(fù)的數(shù)量。給定的時(shí)間是 30 分鐘，但是我的朋友整整花了 15 分鐘才研究明白他們的工具怎么使用。
最終雖然他完成了面試題目，但是由于時(shí)間緊迫算法未來得及優(yōu)化好。最終導(dǎo)致沒有得到二面的機(jī)會。如果我們細(xì)想下目前的面試場景，我們不難發(fā)現(xiàn)會存在以下幾個(gè)方面的困擾：
- 候選人的簡歷不能真實(shí)的反應(yīng)出實(shí)際的技能
- 傳統(tǒng)的線下面試缺少可執(zhí)行環(huán)節(jié)給候選人造成困擾（常因?yàn)橐恍﹩栴}相互理解的差異導(dǎo)致面試無法有效的取得對候選人準(zhǔn)確的判斷，或者候選人表現(xiàn)低于預(yù)期）
- 電話無法有效的評估候選人的實(shí)際技能所以我就開始構(gòu)思做一個(gè)更好用的在線編程工具，使用起來無障礙且足夠簡單
- 現(xiàn)場面試會帶來更多時(shí)間、費(fèi)用等方面的負(fù)擔(dān)（若現(xiàn)場不是上機(jī)測試，給你一張 A4 紙，不久以后你得到的是一張好像寫滿草書的文字。沒辦法運(yùn)行并且也很難看清楚上面寫的是什么。）
基于個(gè)人興趣愛好，我就開始構(gòu)思做一個(gè)更好用的在線編程工具，使用起來無障礙且足夠簡單。機(jī)緣巧合，了解到了聲網(wǎng) Agora SDK，覺得在之前想法的基礎(chǔ)上可以增加音視頻功能，便于面試者能在 CodeLane 有更多的實(shí)時(shí)體驗(yàn)。于是就借著比賽的機(jī)會把作品好好打磨一下。
主要功能
目前 CoderLane 主要有以下幾個(gè)主要功能：
- 支持 20+語言
- 強(qiáng)大的代碼編輯器
- 高效的實(shí)時(shí)音視頻溝通
- 面試過程回放 那現(xiàn)在就幾個(gè)主要功能細(xì)節(jié)點(diǎn)做一下深度解析，看看具體是如何實(shí)現(xiàn)的：
現(xiàn)代化的 IDE, 通過集成 Monaco 編輯器可以擁有非常完善的編輯體驗(yàn)。
// 編輯器
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;
自定義編輯器，通過設(shè)置可以自定義基礎(chǔ)的編輯器設(shè)置。 快速創(chuàng)建，只需要5秒即可創(chuàng)建數(shù)十種在線編程語言環(huán)境：
// 編輯器設(shè)置
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>
)
}
}
高保真控制臺(REPL), 它會連接到語言的REPL可以用于調(diào)試等高級操作:
// REPL
function 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)); // 動態(tài)語言運(yùn)行
} else {
execParams.push(...replParams(lang, true)); // 動態(tài)語言運(yùn)行
}
if (isDynamic(lang) && isPty) { // 動態(tài)語言需要pty
return nodePty.spawn('docker', execParams);
} else { // 不需要pty，直接執(zhí)行
return spawn('docker', execParams);
}
}
實(shí)時(shí)音視頻，我們通過聲網(wǎng) Agora SDK 來實(shí)現(xiàn)：
//音視頻實(shí)時(shí)通訊
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");
// 如果創(chuàng)建者自動開啟發(fā)布流
// 發(fā)布視頻流到SD-RTN
this.client.publish(localStream, (err) => {
console.error("發(fā)布視頻流錯(cuò)誤: " + err);
});
});
})
})
});
}
后續(xù)計(jì)劃
目前有補(bǔ)全功能在設(shè)置里面有快捷鍵提示，現(xiàn)支持的語言較少(browser、chai、jquery、ecma、jquery、react、underscore)，所以后期會再增加支持更多的語言。
希望 CoderLane 作為一個(gè)在線編程工具給大家?guī)砀憬莸捏w驗(yàn)，打算永久免費(fèi)，直到無法負(fù)擔(dān)運(yùn)營成本為止。
項(xiàng)目開源
- 在線體驗(yàn)：coderlane.net/
- 作者：蔣著，主要工作是做前端，懂一點(diǎn)后端，偶爾也做做產(chǎn)品。
- 作者主頁：github.com/monsterooo
- 開源地址：github.com/AgoraIO-Com…
編譯指南：
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 server
Visit the browser http: // localhost: 3000 and log in using github to create it.
RTC 2020 編程挑戰(zhàn)賽報(bào)名開始！
RTC 2020 編程挑戰(zhàn)賽春季賽已經(jīng)開啟報(bào)名了！本次大賽從 3月10日 ~ 4月21日 進(jìn)行報(bào)名、組隊(duì)與開發(fā)，4 月 22 日至 4 月 24 日提交作品，4 月 25 日評獎，全程在線上進(jìn)行。本次大賽準(zhǔn)備了豐厚的大獎，快拉上小伙伴報(bào)名吧！
