<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[fjqgx的专栏]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/fjqgx</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; fjqgx]]></copyright><item><title><![CDATA[前端别再计算文件的MD5了]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/156679319</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/156679319</guid><author>fjqgx</author><pubDate>Wed, 07 Jan 2026 11:03:28 +0800</pubDate><description><![CDATA[文章摘要：本文探讨了文件上传时进行唯一性校验的最佳实践。通过对比测试发现，使用浏览器原生支持的SHA-256算法（耗时44ms/10MB）比第三方MD5库（102-377ms）性能更优，且更安全可靠。测试数据表明，SHA-256凭借硬件优化优势，计算速度更快，同时无需引入额外依赖。建议前端开发者在文件校验场景优先采用SHA-256算法，兼顾性能与安全性。（149字）]]></description><category></category></item><item><title><![CDATA[前端控制摄像头焦距&灯光]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/153327710</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/153327710</guid><author>fjqgx</author><pubDate>Wed, 15 Oct 2025 15:07:04 +0800</pubDate><description><![CDATA[本文介绍了在浏览器中控制摄像头焦距和灯光的方法。通过getSupportedConstraints和getCapabilities接口检测设备是否支持变焦和闪光灯功能，使用applyConstraints动态调整参数。代码示例展示了如何通过滑块控制摄像头缩放（zoom）和复选框控制闪光灯（torch），并处理可能出现的兼容性问题。需要注意的是，闪光灯功能通常仅在后置摄像头下生效。文中提供了完整的HTML实现代码，包括设备选择、参数调节和状态反馈功能。]]></description><category></category></item><item><title><![CDATA[前端使用ProtoBuf]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/148573939</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/148573939</guid><author>fjqgx</author><pubDate>Wed, 11 Jun 2025 08:30:12 +0800</pubDate><description><![CDATA[Protobuf（Protocol Buffers）是Google开发的高效结构化数据序列化机制，相比XML/JSON具有更小、更快的特点。性能测试显示Protobuf耗时仅9ms且压缩后25B，远优于JSON+gZip的483ms/75B。使用步骤：1)定义.proto文件描述数据结构；2)通过protobufjs工具静态编译生成JS代码。支持前端到服务端全平台使用，通过encode/decode方法实现数据压缩/解压，具有良好的扩展兼容性。适合分布式系统和微服务间的数据交换。]]></description><category></category></item><item><title><![CDATA[前端音频降噪-RNNoise]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/148222517</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/148222517</guid><author>fjqgx</author><pubDate>Mon, 26 May 2025 10:53:14 +0800</pubDate><description><![CDATA[上面只是简单的使用了RNNoise，设置了音频采样率时48000。可以多了解一下RNNoise的用法，相信降噪效果还能有进一步提升。]]></description><category></category></item><item><title><![CDATA[前端使用WebRTC———开启OPUS的DTX功能]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/148054960</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/148054960</guid><author>fjqgx</author><pubDate>Mon, 19 May 2025 08:59:10 +0800</pubDate><description><![CDATA[Opus编解码器中的DTX（Discontinuous Transmission，不连续传输）功能是一种优化技术，旨在通过动态调整数据传输以节省带宽和功耗。]]></description><category></category></item><item><title><![CDATA[WebRTC-前端分析端到端延迟]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/142916895</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/142916895</guid><author>fjqgx</author><pubDate>Mon, 14 Oct 2024 14:06:05 +0800</pubDate><description><![CDATA[通过解析googTimingFrameInfo的内容，我们可以分析端到端的过程中，具体是哪一个环节导致了延迟变大。通过分析结果，才能进行有效的优化。]]></description><category></category></item><item><title><![CDATA[前端监听CPU使用情况]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/139304941</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/139304941</guid><author>fjqgx</author><pubDate>Wed, 29 May 2024 20:25:17 +0800</pubDate><description><![CDATA[在前端的业务场景中，很多情况都需要根据用户的电脑使用情况，使用不同的策略，比如电脑卡顿的时候，需要做一些降级的处理。但是浏览器又不支持获取电脑的cpu使用率。很多场景下都会比较难处理(之前在网上有看到过使用计时器统计时差，比如100ms的计时器，偏差越大表示cpu的利用率越高，但是个人测试下来不是特别好用)。Chrome在125版本中推出了新的API，支持获取当前电脑的cpu使用情况。可以根据不同的状态针对业务做一些降级，用于改善用户体验。]]></description><category></category></item><item><title><![CDATA[websaaembly 环境搭建(C++编译成wasm)]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/139213071</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/139213071</guid><author>fjqgx</author><pubDate>Sun, 26 May 2024 12:21:40 +0800</pubDate><description><![CDATA[最近工作的项目中，有部分的逻辑和native端是一致的，所以希望能够复用native端的C++代码，这样既减少了开发的工作量，在后面的更新中，只要C++代码更新了，前端只需要重新编译更新一下wasm就可以了。]]></description><category></category></item><item><title><![CDATA[WebRTC接收端动态控制jitterBufferTarget]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/137471340</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/137471340</guid><author>fjqgx</author><pubDate>Mon, 08 Apr 2024 10:29:24 +0800</pubDate><description><![CDATA[jitterBuffer是抖动缓冲器。简单的理解就是缓冲器越大，网络抖动的时候越不容易卡顿、延迟越大。反之缓冲器越小，网络抖动的时候越容易卡顿、延迟越低。]]></description><category></category></item><item><title><![CDATA[WebRTC动态修改编码器]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/134190630</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/134190630</guid><author>fjqgx</author><pubDate>Thu, 02 Nov 2023 20:37:59 +0800</pubDate><description><![CDATA[新版本的WebRTC支持在已经建立连接的情况下，推流端动态修改编码器。在Chrome119版本中可以体验这个功能了。可以在chrome 119版本，通过两个网页进行webrtc通信，使用chrome://webrtc-internals来查看使用的编码器。在RTCPeerConnection建立连接之后，在推流端通过RTPSender.setParameters方法，可以支持动态切换编码器
步骤
使用WebRTC建立连接的部分可以参考: 前端使用WebRTC———局域网内单向通信。本文的代码就是在这个代码的]]></description><category></category></item><item><title><![CDATA[Chrome117废弃getStats的非标准用法]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/133714071</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/133714071</guid><author>fjqgx</author><pubDate>Mon, 09 Oct 2023 19:59:39 +0800</pubDate><description><![CDATA[非标方法可以统计到一些标准方法统计不到的信息，比如codec的名字(可以用于判断当前解码是软解还是硬解)等信息。所以要注意Chrome的此次更新，可能会导致每次getStats都失败，影响线上数据统计和收集。]]></description><category></category></item><item><title><![CDATA[requestPointerLock的用法和坑]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/132482439</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/132482439</guid><author>fjqgx</author><pubDate>Fri, 25 Aug 2023 09:44:39 +0800</pubDate><description><![CDATA[在一些游戏场景中，需要素萍鼠标指针，比如射击类游戏，就需要锁定鼠标指针以获得更好的游戏体验。浏览器提供了方法来实现此功能，通过来解除鼠标指针的锁定。]]></description><category></category></item><item><title><![CDATA[前端使用WebRTC———DataChannel]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/132447888</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/132447888</guid><author>fjqgx</author><pubDate>Wed, 23 Aug 2023 11:08:35 +0800</pubDate><description><![CDATA[在中介绍了如何在局域网内使用浏览器进行1v1视频通话。现在我们介绍一下如何在前端使用WebRTC进行消息通信。]]></description><category></category></item><item><title><![CDATA[前端如何统计视频的渲染帧率]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/132099300</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/132099300</guid><author>fjqgx</author><pubDate>Fri, 04 Aug 2023 10:47:34 +0800</pubDate><description><![CDATA[​在前端多媒体方向中，不论是点播、直播还是webrtc卡顿率都是一个很重要的指标。那前端如何统计卡顿率呢？在比较早的时候是通过Video的waiting和playing消息来判断当前视频播放是否卡顿的。但是现在浏览器支持了一个新的接口：requestVideoFrameCallback。当每一次有新的视频帧渲染的时候，都会触发一次这个回调。]]></description><category></category></item><item><title><![CDATA[前端使用WebRTC——局域网内1v1视频通话]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/131721272</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/131721272</guid><author>fjqgx</author><pubDate>Fri, 14 Jul 2023 13:18:59 +0800</pubDate><description><![CDATA[在中，介绍了局域网内的单项通信。这次我们再进一步，进行一个局域网内的1v1视频通话，可以相互看到对方并进行语音交流。]]></description><category></category></item><item><title><![CDATA[前端使用WebRTC———局域网内单向通信]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/131679147</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/131679147</guid><author>fjqgx</author><pubDate>Wed, 12 Jul 2023 13:06:53 +0800</pubDate><description><![CDATA[在我们跑通了一个简单的WebRTCDemo，相当于WebRTC中的HelloWorld。在同一个页面中进行WebRTC通信，比较难看出效果，这次我们再进一步，进行一个局域网内的单向通信。一个页面推流，一个页面拉流。]]></description><category></category></item><item><title><![CDATA[前端使用WebRTC———HelloWorld]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/131554090</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/131554090</guid><author>fjqgx</author><pubDate>Wed, 05 Jul 2023 13:59:24 +0800</pubDate><description><![CDATA[借助 WebRTC，您可以将实时通信功能添加到基于开放标准运行的应用程序。它支持在对等点之间发送视频、语音和通用数据，允许开发人员构建强大的语音和视频通信解决方案.重点: 点对点发送视频、语音和数据。先尝试跑通这个简单的Demo，可以看从页面中看到本地预览、推拉流的效果。如果你是第一次接触webrtc，上面的流程中有很多看不懂的名字和方法可以先忽略它们。代码。]]></description><category></category></item><item><title><![CDATA[网页中视频内容自动播放]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/114897772</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/114897772</guid><author>fjqgx</author><pubDate>Tue, 16 Mar 2021 20:20:43 +0800</pubDate><description><![CDATA[目前主流的浏览器中已经禁止带声音的媒体自动播放。具体内容在这里chrome自动播放策略(可能国内网络访问不了)。此处重点是带声音的媒体自动播放。
里面也说明了集中播放的方式

静音播放。只要将video设置为muted，然后就可以自动播放了。
引导用户点击后再进行播放。此处的点击是只要用户点击过页面的任何位置，然后就可以调用video.play()进行播放了。不是一定要点击视频部分，但是一定是要用户在此页面进行了交互.
在pc上，已经超过了用于的“媒体参与度索引"阈值，这意味着该用户以前曾播放带声音的视频，]]></description><category></category></item><item><title><![CDATA[浏览器获取摄像头、麦克风和屏幕共享(二)]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/114480997</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/114480997</guid><author>fjqgx</author><pubDate>Sun, 07 Mar 2021 11:48:49 +0800</pubDate><description><![CDATA[关于浏览器中获取设备和屏幕共享的基本接口在上一篇中已经介绍过浏览器获取摄像头、麦克风和屏幕共享(一)，可以通过浏览器API来获取麦克风和摄像头，可是在业务场景中，我们可能不仅仅是需要获取设备，如果用户有多个摄像头和麦克风设备，我们可能需要获取指定的设备，还可能是指定的分辨率或者帧率。
获取设备列表
通过浏览器API来获取设备列表
navigator.mediaDevices.enumerateDevices().then((list) =&gt; {
 console.log("list:", list);]]></description><category></category></item><item><title><![CDATA[获取浏览器麦克风、摄像头和屏幕共享(一)]]></title><link>https://blog.youkuaiyun.com/fjqgx/article/details/114332523</link><guid>https://blog.youkuaiyun.com/fjqgx/article/details/114332523</guid><author>fjqgx</author><pubDate>Wed, 03 Mar 2021 20:11:54 +0800</pubDate><description><![CDATA[浏览器API

浏览器使用设备的限制

需要使用https协议才能访问设备，并且浏览器会弹窗询问用户是否允许使用设备，大多数浏览器在同一个域名下只要询问一次就会记住，也有个别浏览器每次访问都需要询问(说的就是Safari)。

如果是http，只有在127.0.0.1和localhost下可以访问设备。



浏览器获取麦克风

通过浏览器的API来获取麦克风


&lt;audio id="localAudio" &gt;&lt;/audio&gt;


navigator.mediaDevices.g.]]></description><category></category></item></channel></rss>