前端多媒体

背景 最近需要做视频上传的功能，很自然的就想到要对文件做唯一性校验。避免同一个文件反复上传。在用户选择文件后，先在前端计算文件的唯一值，然后发送到服务端用来判断这个文件是否上传过，如果上传过，就可以直

在前端使用webrtc的场景中，偶尔就会遇到反馈噪声大，没有原生的效果好，背景杂音都被麦克风收音了等情况。而前端的API中只有几个开启降噪、开启回音消除等几个参数可以设置，默认都是开启的，让人感觉无从

什么是DTX功能 Opus编解码器中的DTX（Discontinuous Transmission，不连续传输）功能是一种优化技术，旨在通过动态调整数据传输以节省带宽和功耗。 工作原理 语音活动检测（

在某些WebRTC业务场景中对延迟非常敏感。对于前端来说WebRTC是黑盒的，发生问题时排查原因非常困难。好在WebRTC提供了googTimingFrameInfo这个字段来用于分析端到端的分段延迟

在前端的业务场景中，很多情况都需要根据用户的电脑使用情况，使用不同的策略，比如电脑卡顿的时候，需要做一些降级的处理。但是浏览器又不支持获取电脑的cpu使用率。很多场景下都会比较难处理(之前在网上有看到

新版本的WebRTC支持在已经建立连接的情况下，接收端支持动态调整自己的jitterBufferTarget。在Chrome124版本中可以体验这个功能了。通过两个网页进行webrtc通信，具体效果见

新版本的WebRTC支持在已经建立连接的情况下，推流端动态修改编码器。在Chrome119版本中可以体验这个功能了。可以在chrome 119版本，通过两个网页进行webrtc通信，使用chrome:

Chrome 117在2023年9月6号开始推送更新。在这个版本中废弃了getStats的非标准用法 Chrome117 在chrome 117版本中运行以上代码，得到结果是 可以看到新版本的Chro

在一些游戏场景中，需要素萍鼠标指针，比如射击类游戏，就需要锁定鼠标指针以获得更好的游戏体验。 浏览器提供了requestPointerLock方法来实现此功能，通过exitPointerLock来解除

在上一篇中介绍了如何在局域网内使用浏览器进行1v1视频通话。现在我们介绍一下如何在前端使用WebRTC进行消息通信。 简单的Demo 通过PeerConnection让两个浏览器建立连接，并进行相互发

在前端多媒体方向中，不论是点播、直播还是webrtc卡顿率都是一个很重要的指标。那前端如何统计卡顿率呢？在比较早的时候是通过Video的waiting和playing消息来判断当前视频播放是否卡顿的。

在上一篇中，介绍了局域网内的单项通信。这次我们再进一步，进行一个局域网内的1v1视频通话，可以相互看到对方并进行语音交流 效果 效果如上图 左侧是chrome浏览器 页面中左侧Video是自己的画面，

在上一篇我们跑通了一个简单的WebRTCDemo，相当于WebRTC中的HelloWorld。在同一个页面中进行WebRTC通信，比较难看出效果，这次我们再进一步，进行一个局域网内的单向通信。一个页面

前端使用WebRTC 前端多媒体 借助 WebRTC，您可以将实时通信功能添加到基于开放标准运行的应用程序。它支持在对等点之间发送视频、语音和通用数据，允许开发人员构建强大的语音和视频通信

在网页中播放视频，可以通过几种方式实现: 通过video标播放视频 通过webassembly对视频数据解码，然后渲染到canvas上面 WebCodec 这次主要介绍一下WebCodec，需要Chr

在前端开发的工作中，我们总是有些数据需要统计，比如统计当前客户的浏览器分布，操作系统分布或者在前端音视频的兼容性处理中，总是有些特殊的浏览器需要一些特别的处理。所以难免需要区分浏览器类型和版本之类的工

浏览器是可以通过api获取用户的摄像头、麦克风和屏幕共享的使用权限的。为了方便使用，将其封装成设备管理库，方便使用。 需要使用https协议才能访问设备，并且浏览器会弹窗询问用户是否允许使用设备，大多数浏览器在同一个域名下只要询问一次就会记住，也有个别浏览器每次访问都需要询问(…

需要使用https协议才能访问设备，并且浏览器会弹窗询问用户是否允许使用设备，大多数浏览器在同一个域名下只要询问一次就会记住，也有个别浏览器每次访问都需要询问(说的就是Safari)。 ，只有在127.0.0.1和localhost下可以访问设备。 如果点击允许，会进入到the…

关于浏览器中获取设备和屏幕共享的基本接口在上一篇中已经介绍过浏览器获取摄像头、麦克风和屏幕共享(一)，可以通过浏览器API来获取麦克风和摄像头，可是在业务场景中，我们可能不仅仅是需要获取设备，如果用户有多个摄像头和麦克风设备，我们可能需要获取指定的设备，还可能是指定的分辨率或者…

目前主流的浏览器中已经禁止带声音的媒体自动播放。具体内容在这里chrome自动播放策略(可能国内网络访问不了)。此处重点是带声音的媒体自动播放。 静音播放。只要将video设置为muted，然后就可以自动播放了。 引导用户点击后再进行播放。此处的点击是只要用户点击过页面的任何位…