- 博客(16)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 WebRTC-前端分析端到端延迟
通过解析googTimingFrameInfo的内容，我们可以分析端到端的过程中，具体是哪一个环节导致了延迟变大。通过分析结果，才能进行有效的优化。
2024-10-14 14:06:05
418
原创 前端监听CPU使用情况
在前端的业务场景中，很多情况都需要根据用户的电脑使用情况，使用不同的策略，比如电脑卡顿的时候，需要做一些降级的处理。但是浏览器又不支持获取电脑的cpu使用率。很多场景下都会比较难处理(之前在网上有看到过使用计时器统计时差，比如100ms的计时器，偏差越大表示cpu的利用率越高，但是个人测试下来不是特别好用)。Chrome在125版本中推出了新的API，支持获取当前电脑的cpu使用情况。可以根据不同的状态针对业务做一些降级，用于改善用户体验。
2024-05-29 20:25:17
698
原创 websaaembly 环境搭建(C++编译成wasm)
最近工作的项目中，有部分的逻辑和native端是一致的，所以希望能够复用native端的C++代码，这样既减少了开发的工作量，在后面的更新中，只要C++代码更新了，前端只需要重新编译更新一下wasm就可以了。
2024-05-26 12:21:40
329
原创 WebRTC接收端动态控制jitterBufferTarget
jitterBuffer是抖动缓冲器。简单的理解就是缓冲器越大，网络抖动的时候越不容易卡顿、延迟越大。反之缓冲器越小，网络抖动的时候越容易卡顿、延迟越低。
2024-04-08 10:29:24
1344
3
原创 WebRTC动态修改编码器
新版本的WebRTC支持在已经建立连接的情况下，推流端动态修改编码器。在Chrome119版本中可以体验这个功能了。可以在chrome 119版本，通过两个网页进行webrtc通信，使用chrome://webrtc-internals来查看使用的编码器。在RTCPeerConnection建立连接之后，在推流端通过RTPSender.setParameters方法，可以支持动态切换编码器步骤使用WebRTC建立连接的部分可以参考: 前端使用WebRTC———局域网内单向通信。本文的代码就是在这个代码的
2023-11-02 20:37:59
465
原创 Chrome117废弃getStats的非标准用法
非标方法可以统计到一些标准方法统计不到的信息，比如codec的名字(可以用于判断当前解码是软解还是硬解)等信息。所以要注意Chrome的此次更新，可能会导致每次getStats都失败，影响线上数据统计和收集。
2023-10-09 19:59:39
122
1
原创 requestPointerLock的用法和坑
在一些游戏场景中，需要素萍鼠标指针，比如射击类游戏，就需要锁定鼠标指针以获得更好的游戏体验。浏览器提供了方法来实现此功能，通过来解除鼠标指针的锁定。
2023-08-25 09:44:39
511
1
原创 前端使用WebRTC———DataChannel
在中介绍了如何在局域网内使用浏览器进行1v1视频通话。现在我们介绍一下如何在前端使用WebRTC进行消息通信。
2023-08-23 11:08:35
1015
1
原创 前端如何统计视频的渲染帧率
在前端多媒体方向中，不论是点播、直播还是webrtc卡顿率都是一个很重要的指标。那前端如何统计卡顿率呢？在比较早的时候是通过Video的waiting和playing消息来判断当前视频播放是否卡顿的。但是现在浏览器支持了一个新的接口：requestVideoFrameCallback。当每一次有新的视频帧渲染的时候，都会触发一次这个回调。
2023-08-04 10:47:34
610
1
原创 前端使用WebRTC——局域网内1v1视频通话
在中，介绍了局域网内的单项通信。这次我们再进一步，进行一个局域网内的1v1视频通话，可以相互看到对方并进行语音交流。
2023-07-14 13:18:59
477
1
原创 前端使用WebRTC———局域网内单向通信
在我们跑通了一个简单的WebRTCDemo，相当于WebRTC中的HelloWorld。在同一个页面中进行WebRTC通信，比较难看出效果，这次我们再进一步，进行一个局域网内的单向通信。一个页面推流，一个页面拉流。
2023-07-12 13:06:53
1317
1
原创 前端使用WebRTC———HelloWorld
借助 WebRTC，您可以将实时通信功能添加到基于开放标准运行的应用程序。它支持在对等点之间发送视频、语音和通用数据，允许开发人员构建强大的语音和视频通信解决方案.重点: 点对点发送视频、语音和数据。先尝试跑通这个简单的Demo，可以看从页面中看到本地预览、推拉流的效果。如果你是第一次接触webrtc，上面的流程中有很多看不懂的名字和方法可以先忽略它们。代码。
2023-07-05 13:59:24
668
1
原创 网页中视频内容自动播放
目前主流的浏览器中已经禁止带声音的媒体自动播放。具体内容在这里chrome自动播放策略(可能国内网络访问不了)。此处重点是带声音的媒体自动播放。里面也说明了集中播放的方式静音播放。只要将video设置为muted，然后就可以自动播放了。引导用户点击后再进行播放。此处的点击是只要用户点击过页面的任何位置，然后就可以调用video.play()进行播放了。不是一定要点击视频部分，但是一定是要用户在此页面进行了交互.在pc上，已经超过了用于的“媒体参与度索引"阈值，这意味着该用户以前曾播放带声音的视频，
2021-03-16 20:20:43
13881
1
原创 浏览器获取摄像头、麦克风和屏幕共享(二)
关于浏览器中获取设备和屏幕共享的基本接口在上一篇中已经介绍过浏览器获取摄像头、麦克风和屏幕共享(一)，可以通过浏览器API来获取麦克风和摄像头，可是在业务场景中，我们可能不仅仅是需要获取设备，如果用户有多个摄像头和麦克风设备，我们可能需要获取指定的设备，还可能是指定的分辨率或者帧率。获取设备列表通过浏览器API来获取设备列表navigator.mediaDevices.enumerateDevices().then((list) => { console.log("list:", list);
2021-03-07 11:48:49
2389
3
原创 获取浏览器麦克风、摄像头和屏幕共享(一)
浏览器API浏览器使用设备的限制需要使用https协议才能访问设备，并且浏览器会弹窗询问用户是否允许使用设备，大多数浏览器在同一个域名下只要询问一次就会记住，也有个别浏览器每次访问都需要询问(说的就是Safari)。如果是http，只有在127.0.0.1和localhost下可以访问设备。浏览器获取麦克风通过浏览器的API来获取麦克风<audio id="localAudio" ></audio>navigator.mediaDevices.g.
2021-03-03 20:11:54
3762
12
原创 浏览器获取摄像头和麦克风
浏览器是可以通过api获取用户的摄像头、麦克风和屏幕共享的使用权限的。为了方便使用，将其封装成设备管理库，方便使用。其中提供了几个接口getCameraList // 获取摄像头列表 getMicList // 获取麦克风列表 getAudioTrack // 获取音频轨道 getVideoTrack // 获取视频轨道 getScreenTrack // 获取屏幕共享内容点击demo，可以直接体验...
2021-02-24 17:52:56
1169
1
C语言做的系统（源代码）
2008-09-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人