最新web端 无插件 实时视频预览(1)，2024年冲刺年薪40w

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

项目需要在web上对相机采集的图片进行编码成视频，然后进行实时预览。以前调研的方案有以下两种：

1，客户端安装ocx插件，浏览器调用插件进行解码，渲染。但是浏览器支持有限，只有ie支持，并且还要安装插件，稍嫌麻烦。

2，将视频转成hls或者flv又或者webrtc 等浏览器支持的协议。但是这个需要服务端进行转换，用过webrtc协议，效果很好，延时很低。

最近又发现一种方案，利用websocket协议，服务端将h264裸流发送给web，web利用js进行解码，然后用webgl进行渲染，经测试效果特别好，又省去了多余的服务。

二，方案

三，注意点

1编码器 参数设置 pAVCodecContext->flags |= AV_CODEC_FLAG2_LOCAL_HEADER;

否则AVPacket 不是标准的h264单元，web无法解析

四，涉及的开源项目

1，websocket 服务  -》simple_broadcast_server.cpp

GitHub - zaphoyd/websocketpp: C++ websocket client/server library

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】