![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端音视频
文章平均质量分 81
豆包啊啊
这个作者很懒,什么都没留下…
展开
-
前端监听CPU使用情况
在前端的业务场景中,很多情况都需要根据用户的电脑使用情况,使用不同的策略,比如电脑卡顿的时候,需要做一些降级的处理。但是浏览器又不支持获取电脑的cpu使用率。很多场景下都会比较难处理(之前在网上有看到过使用计时器统计时差,比如100ms的计时器,偏差越大表示cpu的利用率越高,但是个人测试下来不是特别好用)。Chrome在125版本中推出了新的API,支持获取当前电脑的cpu使用情况。可以根据不同的状态针对业务做一些降级,用于改善用户体验。原创 2024-05-29 20:25:17 · 577 阅读 · 0 评论 -
WebRTC接收端动态控制jitterBufferTarget
jitterBuffer是抖动缓冲器。简单的理解就是缓冲器越大,网络抖动的时候越不容易卡顿、延迟越大。反之缓冲器越小,网络抖动的时候越容易卡顿、延迟越低。原创 2024-04-08 10:29:24 · 1233 阅读 · 3 评论 -
WebRTC动态修改编码器
新版本的WebRTC支持在已经建立连接的情况下,推流端动态修改编码器。在Chrome119版本中可以体验这个功能了。可以在chrome 119版本,通过两个网页进行webrtc通信,使用chrome://webrtc-internals来查看使用的编码器。在RTCPeerConnection建立连接之后,在推流端通过RTPSender.setParameters方法,可以支持动态切换编码器步骤使用WebRTC建立连接的部分可以参考: 前端使用WebRTC———局域网内单向通信。本文的代码就是在这个代码的原创 2023-11-02 20:37:59 · 368 阅读 · 0 评论 -
Chrome117废弃getStats的非标准用法
非标方法可以统计到一些标准方法统计不到的信息,比如codec的名字(可以用于判断当前解码是软解还是硬解)等信息。所以要注意Chrome的此次更新,可能会导致每次getStats都失败,影响线上数据统计和收集。原创 2023-10-09 19:59:39 · 106 阅读 · 1 评论 -
requestPointerLock的用法和坑
在一些游戏场景中,需要素萍鼠标指针,比如射击类游戏,就需要锁定鼠标指针以获得更好的游戏体验。浏览器提供了方法来实现此功能,通过来解除鼠标指针的锁定。原创 2023-08-25 09:44:39 · 440 阅读 · 1 评论 -
前端使用WebRTC———DataChannel
在中介绍了如何在局域网内使用浏览器进行1v1视频通话。现在我们介绍一下如何在前端使用WebRTC进行消息通信。原创 2023-08-23 11:08:35 · 750 阅读 · 1 评论 -
前端使用WebRTC——局域网内1v1视频通话
在中,介绍了局域网内的单项通信。这次我们再进一步,进行一个局域网内的1v1视频通话,可以相互看到对方并进行语音交流。原创 2023-07-14 13:18:59 · 416 阅读 · 1 评论 -
前端使用WebRTC———局域网内单向通信
在我们跑通了一个简单的WebRTCDemo,相当于WebRTC中的HelloWorld。在同一个页面中进行WebRTC通信,比较难看出效果,这次我们再进一步,进行一个局域网内的单向通信。一个页面推流,一个页面拉流。原创 2023-07-12 13:06:53 · 1127 阅读 · 1 评论 -
前端使用WebRTC———HelloWorld
借助 WebRTC,您可以将实时通信功能添加到基于开放标准运行的应用程序。它支持在对等点之间发送视频、语音和通用数据,允许开发人员构建强大的语音和视频通信解决方案.重点: 点对点发送视频、语音和数据。先尝试跑通这个简单的Demo,可以看从页面中看到本地预览、推拉流的效果。如果你是第一次接触webrtc,上面的流程中有很多看不懂的名字和方法可以先忽略它们。代码。原创 2023-07-05 13:59:24 · 553 阅读 · 1 评论 -
网页中视频内容自动播放
目前主流的浏览器中已经禁止带声音的媒体自动播放。具体内容在这里chrome自动播放策略(可能国内网络访问不了)。此处重点是带声音的媒体自动播放。里面也说明了集中播放的方式静音播放。只要将video设置为muted,然后就可以自动播放了。引导用户点击后再进行播放。此处的点击是只要用户点击过页面的任何位置,然后就可以调用video.play()进行播放了。不是一定要点击视频部分,但是一定是要用户在此页面进行了交互.在pc上,已经超过了用于的“媒体参与度索引"阈值,这意味着该用户以前曾播放带声音的视频,原创 2021-03-16 20:20:43 · 13499 阅读 · 1 评论 -
浏览器获取摄像头、麦克风和屏幕共享(二)
关于浏览器中获取设备和屏幕共享的基本接口在上一篇中已经介绍过浏览器获取摄像头、麦克风和屏幕共享(一),可以通过浏览器API来获取麦克风和摄像头,可是在业务场景中,我们可能不仅仅是需要获取设备,如果用户有多个摄像头和麦克风设备,我们可能需要获取指定的设备,还可能是指定的分辨率或者帧率。获取设备列表通过浏览器API来获取设备列表navigator.mediaDevices.enumerateDevices().then((list) => { console.log("list:", list);原创 2021-03-07 11:48:49 · 2270 阅读 · 3 评论 -
获取浏览器麦克风、摄像头和屏幕共享(一)
浏览器API浏览器使用设备的限制需要使用https协议才能访问设备,并且浏览器会弹窗询问用户是否允许使用设备,大多数浏览器在同一个域名下只要询问一次就会记住,也有个别浏览器每次访问都需要询问(说的就是Safari)。如果是http,只有在127.0.0.1和localhost下可以访问设备。浏览器获取麦克风通过浏览器的API来获取麦克风<audio id="localAudio" ></audio>navigator.mediaDevices.g.原创 2021-03-03 20:11:54 · 3573 阅读 · 12 评论 -
浏览器获取摄像头和麦克风
浏览器是可以通过api获取用户的摄像头、麦克风和屏幕共享的使用权限的。为了方便使用,将其封装成设备管理库,方便使用。其中提供了几个接口getCameraList // 获取摄像头列表 getMicList // 获取麦克风列表 getAudioTrack // 获取音频轨道 getVideoTrack // 获取视频轨道 getScreenTrack // 获取屏幕共享内容点击demo,可以直接体验...原创 2021-02-24 17:52:56 · 1133 阅读 · 1 评论