看完你也做了一个视频面试应用，可以在线编程，
时间：2023-04-02 14:07:55
HTML
春招开始了。今年的春招，从以往的跪坐，变成了视频连线。一些招聘平台还推出了“视频面试”功能。事实上，大多数职位的视频面试与视频通话没有太大区别。根据我们的官方教程，很容易实现。但是，如果工程师进行视频面试，还需要通过技术面试。以前有一些在线答疑系统，我们可以把两者结合起来。在去年SoundNet举办的RTC2019ProgrammingChallenge上，参赛团队“CoderLane”实现了一款支持在线编程的视频面试应用。以下是CoderLane团队编写分享的实践经验。（文末有源码~）项目介绍CoderLane是一个在线实时编程环境，其目的是解决在线多人实时编程环境的难题。希望通过各种技术手段提升在线编程的体验。立项的初衷源于一个朋友的网上面试经历。面试官给他发了一个链接，面试题目很简单：字符串去重，对应字符后面跟一个字符的重复次数。给定的时间是30分钟，但我的朋友花了整整15分钟才弄清楚如何使用他们的工具。最终虽然完成了面试题，但由于时间紧迫，后续无法对算法进行优化。最终，两边都没有机会了。想想现在的面试场景，不难发现会存在以下几个方面的问题：应聘者的简历不能真实反映实际技能。传统线下面试缺乏可执行环节，给候选人带来困扰（往往因为对一些问题的相互理解存在差异，面试无法有效获得对候选人的准确判断，或者候选人的表现低于预期）电话无法有效评估应聘者的实际技能，所以我开始构想一个更有用的。在线编程工具无障碍，使用简单现场面试会带来更多的时间、成本等。全是草书。不能运行，也很难看清上面写的是什么。）根据个人爱好，我开始构思一个更好的在线编程工具，无障碍，简单易用。一次偶然的机会，了解到声网Agora的AgoraSDK，觉得可以在之前的想法基础上增加音视频功能，让面试官在CodeLane中有更多的实时体验。所以我借比赛的机会打磨自己的作品。主要功能CoderLane目前主要有以下几个主要功能：支持20+种语言强大的代码编辑器高效的实时音视频交流面试过程回放下面我们来深入分析几个主要功能细节，看看它是如何实现的：一个现代的IDE，通过集成Monaco编辑器，您可以拥有非常完整的编辑体验。//编辑器importReactfrom'react';importVSCodefrom'./VSCode';classCodeEditorextendsReact.Component{render(){const{width,height,style,onInit}=this.props;return(
)}}exportdefaultCodeEditor;自定义编辑器，您可以通过设置自定义编辑器的基本设置。快速创建，仅需5秒即可创建数十种在线编程语言环境：//editorsettingclassSettingextendsReact.Component{staticcontextType=ContextbindVaue=key=>{const{setting,dispatch}=this.context;return{value:setting[key],setValue:value=>dispatch(settingUpdate({key,value})),}}渲染(){const{isOpen}=this.props;return(
设置
控制是否显示行号。默认为true。启用自动缩进调整。默认为假。每个缩进级别的空格数。由所有格式化程序继承。以像素为单位控制字体大小 )}}高保真控制台（REPL），它将连接到REPL语言，可用于调试和其他高级操作：//REPLfunctiondockerExec(lang,isPty){constcontainerId=get('容器ID');让execParams=[];execParams.push('exec');如果（isPty）{execParams.push('-it');}else{execParams.push('-t');}execParams.push('-w',ws,containerId);如果(isDynamic(lang)&&isPty){execParams.push(...replParams(lang));//以动态语言运行}else{execParams.push(...replParams(lang,true));//以动态语言运行}if(isDynamic(lang)&&isPty){//动态语言需要ptyreturnnodePty.spawn('docker',execParams);}else{//不需要pty，returnspawn('docker',execParams);}}实时音视频，我们通过声网AgoraSDK来实现：//音视频实时通信initVideo(){const{sandbox:{_id},app:{token}}=this.道具;if(!AgoraRTC.checkSystemRequirements()){alert("您的浏览器不支持WebRTC！");}AgoraRTC.getDevices(devices=>{vardefaultAudio,defaultVideo;letlocalStream;defaultAudio=_.head(_.filter(devices,function(v){returnv.kind==='audioinput';}));defaultVideo=_.head(_.filter(devices,function(v){returnv.kind==='videoinput';}));this.client.init(appId,()=>{//加入频道console.log('token>',token,_id,this.uid)this.client.join(token,_id/*频道id*/,this.uid,uid=>{constlocalStream=AgoraRTC.createStream({streamID:uid,audio:true,cameraId:defaultVideo.deviceId,microphoneId:defaultAudio.deviceId,video:true,//是否开启视频画面:false});this.stream=localStream;localStream.setVideoProfile('480p');localStream.init(()=>{localStream.play("preview");//如果创建者自动打开发布流//发布视频流到SD-RTNthis.client.publish(localStream,(err)=>{console.error("发布视频流时出错："+err);});});})})});}Follow计划目前在设置里有快捷键提示的补全功能，目前支持的语言比较少（browser、chai、jquery、ecma、jquery、react、underscore），以后会添加更多语言希望CoderLane作为一款在线编程工具，能给大家带来更便捷的体验，并且永远免费，直到无法承担运营成本。项目开源上线体验：https://coderlane.net/作者：江竹，主要工作是做前端，稍微了解一下后端，偶尔做产品。作者主页：https://github.com/monsteroooo开源地址：https://github.com/AgoraIO-Co...编译指南：运行依赖docker、mongodb、nodejs确保你已经正常安装了以上软件?将.env.example重命名为.env并根据提示中的配置填写值npmiinstallerdependencies启动一个控制台并运行npmrunbuild启动另一个控制台并运行npmrunserver访问浏览器http://localhost:3000并使用github登录创建它。RTC2020编程挑战赛报名开始！RTC2020春季编程挑战赛报名现已开放！本次大赛报名、组队、拓展时间为3月10日至4月21日，参赛作品提交时间为4月22日至4月24日，颁奖时间为4月25日，全程线上进行。本次比赛准备了丰厚的奖品，赶快邀请你的朋友报名吧！传送门：https://segmentfault.com/page...
