随笔分类 - Web
摘要：codec：编码译码器，编解码器。它是一个程序，也可以是算法，或者设备，用于编码（encode）和解码（decode）数据流。 WebRTC能让两个web或者app之间建立音视频通信。通信过程中，数据流的格式必须被两边的设备支持。 WebRTC提供了接口查询支持的codec，并且可以设置要使用的co
阅读全文
摘要：网络延迟是一种比较常见的情况。在本地网页上，我们可以建立多个RTCPeerConnection，增加转发次数，来模拟出网络延迟的效果。 建立通话后，再往后面增加本地转发节点。 准备 页面准备，方便我们后面调试 <div id="container"> <h1><a href="https://an.
阅读全文
摘要：我们有时候在音频通话过程中，想要改成视频通话。如果挂断当前通话再重新发起视频通话就会显得比较麻烦。 因此很多app提供了将音频通话升级成视频通话的功能，同时也有将视频通话降为音频通话的功能。 本文演示的是在本地模拟音频通话，并且将音频通话升级为视频通话。 准备 界面很简单，2个video加上几个按钮
阅读全文
摘要：WebRTC打开麦克风，获取音频，在网页上显示音量。 播放示例音频 先从播放音频入手。准备一个现成的音频文件。 界面上放一个audio元素，提前准备好一个音频文件，路径填入src <audio id="sample-audio" src="God_knows_01.mp3" controls aut
阅读全文
摘要：前面我们能够打开摄像头。getUserMedia()时会传入参数，在参数里我们可以指定宽高信息。通过宽高参数控制输出的视频分辨率。 html 在页面上摆放一些元素，下面是主要部分 <div id="container"> <div id="buttons"> <button id="stop">停止
阅读全文
摘要：WebRTC有分享屏幕的功能。使用的是getDisplayMedia方法。用户同意分享屏幕后，可以拿到视频流。 再结合MediaRecorder和Blob，把视频流数据存下来，就能得到录制屏幕的视频。 html 照例先来摆放一些元素在界面上 <div id="container"> <h3>WebR
阅读全文
摘要：前面我们能打开本地摄像头，并且在网页上看到摄像头的预览图像。 本文我们使用MediaRecorder来录制视频。在网页上播放录制好的视频，并能提供下载功能。 html 首先创建一个html界面，放上一些元素 <video id="v1" playsinline autoplay muted></vi
阅读全文
摘要：我们知道了如何使用WebRTC打开摄像头，可以截取视频帧并且用canvas显示出来。 本文将滤镜与视频结合。给视频加上一层滤镜。主要使用到的是filter属性。 canvas与滤镜 先来看filter与canvas的使用。先把canvas放好，显示一张本地的图片。 <canvas id="sampl
阅读全文
摘要：WebRTC从摄像头获取图片传入canvas 前面我们已经能够利用WebRTC的功能，通过浏览器打开摄像头，并把预览的图像显示在video元素中。 接下来我们尝试从视频中截取某一帧，显示在界面上。 html 先准备一下界面，摆上控件。下面是关键部分的代码。 <video playsinline au
阅读全文
摘要：本文使用WebRTC的功能，打开电脑上的摄像头，并且把摄像头预览到的图像显示出来。 纯网页实现，能支持除IE外的多数浏览器。手机浏览器也可用。 引入依赖 我们需要引入adapter-latest.js <script src="https://webrtc.github.io/adapter/ada
阅读全文
摘要：WebRTC WebRTC（Web Real-Time Communication）。Real-Time Communication，实时通讯。 WebRTC能让web应用和站点之间选择性地分享音视频流。在不安装其它应用和插件的情况下，完成点对点通信。 WebRTC背后的技术被实现为一个开放的Web
阅读全文
摘要：an.rustfisher.com有很多内容，很多页面。如果用一个树状图把所有页面展示出来会是什么效果？ 第一时间想到了ECharts。 最后效果： https://an.rustfisher.com/an-tree.html 数据处理 数据来源于配置文件。我们只需要把内容读出来，整理成EChart
阅读全文
