一、录制分类

  • 在音视频会议、在线教育等系统中，录制是一个特别重要的功能

  • 录制一般分为服务端录制和客户端录制

  • 服务端录制：优点是不用担心客户因自身电脑问题造成录制失败（如磁盘空间不足），也不会因录制时抢占资源（CPU 占用率过高）而导致其他应用出现问题等；缺点是实现的复杂度很高。

  • 客户端录制：优点是方便录制方（如老师）操控，并且所录制的视频清晰度高，实现相对简单。但是它对内存、硬盘的要求 比较高

  • 它们各有优劣，因此大系统一般会同时支持客户端录制与服务端录制。

二、录制思考

  • 第一：录制后音视频流的存储格式是什么呢？是直接录制原始数据，还是录制成某种多媒体格式（如 MP4 ）

  • 第二：录制下来的音视频流如何播放？是使用普通的播放器播放，还是使用私有播放器，如果你的业务是多人互动类型，且回放时也要和直播时一样，那么你就必须使用私有播放器，因为普通播放器是不支持同时播放多路视频的

  • 第三：启动录制后多久可以回放呢？录制完立即回放？边录边看？录完后过一段时间可观看？

  • 录制完立即回放当然体验性最好，但是清晰度却不行，在平时的直播中应该有所体验；录完一段时间再观看，可以对视频进行转码获得更好的清晰度，但是对用户的体验却不好，不能实时观看。

三、录制音视频

  • WebRTC 录制音视频流之后，最终是通过 Blob 对象将数据保存成多媒体文件的

  • Blob（Binary Large Object）是 JavaScript 的大型二进制对象类型 var aBlob = new Blob(array, options);

  • WebRTC 中提供了 MediaRecorder 类去录制本地音视频 var mediaRecorder = new MediaRecorder(stream[, options]);

  • stream：通过 getUserMedia 获取的本地视频流或通过 RTCPeerConnection 获取的远程视频流

  • options：可选项，指定视频格式、编解码器、码率等相关信息，如 mimeType: 'video/webm;codecs=vp8'

  • MediaRecorder 对象还有一个特别重要的事件，即 ondataavailable 事件。当 MediaRecoder 捕获到数据时就会触发该事件。通过它，我们才能将音视频数据录制下来

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>video of WebRTC</title>

</head>

<body>

    <button onclick="startRecord()">Start Record</button>

</body>

<script>

    var buffer;

    function startRecord() {

        buffer = [];

        // 设置录制下来的多媒体格式

        var options = {

            mimeType: 'video/webm;codecs=vp8'

        }

        // 判断浏览器是否支持录制

        if (!MediaRecorder.isTypeSupported(options.mimeType)) {

            console.error(`${options.mimeType} is not supported!`);

            return;

        }

        try {

            // 创建录制对象

            mediaRecorder = new MediaRecorder(window.stream, options);

        } catch (e) {

            console.error('Failed to create MediaRecorder:', e);

            return;

        }

        // 当有音视频数据来了之后触发该事件

        mediaRecorder.ondataavailable = handleDataAvailable;

        // 开始录制

     		// 在开启录制时，可以设置一个毫秒级的时间片，这样录制的媒体数据会按照你设置的

     		// 值分割成一个个单独的区块，否则默认的方式是录制一个非常大的整块内容。

     		// 分成一块一块的区块会提高效率和可靠性，如果是一整块数据，随着时间的推移，数据块越来越大

     		// 读写效率就会变差，而且增加了写入文件的失败率

        mediaRecorder.start(10);

    }

    // 当该函数被触发后，将数据压入到 blob 中

    function handleDataAvailable(e) {

        if (e && e.data && e.data.size > 0) {

            buffer.push(e.data);

        }

    }

</script>

</html>

四、回放录制视频

  • 通过上面的方法录制好内容 压入到 blob 以后

  • 首先根据 buffer 生成 Blob 对象

  • 然后，根据 Blob 对象生成 URL，并通过 <video> 标签将录制的内容播放出来了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>video of WebRTC</title>

</head>

<body>

    <video id="recvideo"></video>

    <button onclick="recplay()" disabled>Play</button>

</body>

<script>

    var buffer;

    function recplay() {

        var blob = new Blob(buffer, {type: 'video/webm'});

        recvideo.src = window.URL.createObjectURL(blob);

        recvideo.srcObject = null;

        recvideo.controls = true;

        recvideo.play();

    }

</script>

</html>

五、下载录制视频

  • 也是先创建一个 Blob 对象，并根据 Blob 对象创建 URL；

  • 然后再创建一个 <a> 标签，设置 a 标签的 href 和 download 属性

  • 这样当用户点击该标签之后，录制好的文件就下载下来了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>video of WebRTC</title>

</head>

<body>

    <button onclick="download()" disabled>Download</button>

</body>

<script>

    var buffer;

    function download() {

        var blob = new Blob(buffer, {type: 'video/webm'});

        var url = window.URL.createObjectURL(blob);

        var a = document.createElement('a');

        a.href = url;

        a.style.display = 'none';

        a.download = '下载的视频.webm';

        a.click();

    }

</script>

</html>

3┃音视频直播系统之浏览器中通过 WebRTC 直播视频实时录制回放下载的更多相关文章

  1. 4┃音视频直播系统之浏览器中通过 WebRTC 进行桌面共享

    一.共享桌面原理 共享桌面在直播系统中是一个必备功能 共享者:每秒钟抓取多次屏幕,每次抓取的屏幕都与上一次抓取的屏幕做比较,取它们的差值,然后对差值进行压缩:如果是第一次抓屏或切幕的情况,即本次抓取的 ...

  2. 1┃音视频直播系统之浏览器中通过WebRTC访问摄像头

    一.WebRTC的由来 对于前端开发小伙伴而言,如果用 JavaScript 做音视频处理 在以前是不可想象的,因为首先就要考虑浏览器的性能是否跟得上音视频的采集 但是 Google 作为国际顶尖科技 ...

  3. 2┃音视频直播系统之浏览器中通过 WebRTC 拍照片加滤镜并保存

    一.拍照原理 好多人小时候应该都学过,在几张空白的纸上画同一个物体,并让物体之间稍有一些变化,然后连续快速地翻动这几张纸,它就形成了一个小动画,音视频播放器就是利用这样的原理来播放音视频文件的 播放器 ...

  4. win10系统IE浏览器中无法显示Java国际化的问题

    http://jingyan.baidu.com/article/656db918e37914e381249c9f.html?qq-pf-to=pcqq.c2c 自从装上Win10系统后,跟随前些IE ...

  5. 最简单的基于FFmpeg的直播系统开发移动端例子：IOS 视频解码器

    本文记录IOS平台下基于FFmpeg的视频解码器.该示例C语言的源代码来自于<最简单的基于FFMPEG+SDL的视频播放器>.相关的概念就不再重复记录了. 源代码 项目的目录结构如图所示. ...

  6. 轻松构建基于 Serverless 架构的弹性高可用音视频处理系统

    前言 随着计算机技术和 Internet 的日新月异,视频点播技术因其良好的人机交互性和流媒体传输技术倍受教育.娱乐等行业青睐,而在当前, 云计算平台厂商的产品线不断成熟完善, 如果想要搭建视频点播类 ...

  7. 浏览器中JavaScript执行原理

    本章我们讨论javascript在浏览器中是如果工作的,包括:下载.解析.执行的全过程.javascript的这些讨人嫌的地方我们是知道的: i.需要串行下载 ii.需要解析 iii.需要串行执行 而 ...

  8. webrtc之视频捕获模块--video_capture

    webrtc的video_capture模块,为我们在不同端设备上采集视频提供了一个跨平台封装的视频采集功能,如下图中的webrtc的video_capture源码,现webrtc的video_cap ...

  9. 5┃音视频直播系统之 WebRTC 中的协议UDP、TCP、RTP、RTCP详解

    一.UDP/TCP 如果让你自己开发一套实时互动直播系统,在选择网络传输协议时,你会选择使用UDP协议还是TCP协议 假如使用 TCP 会怎样呢?在极端网络情况下,TCP 为了传输的可靠性,将会进行反 ...

随机推荐

  1. OpenCV - Add Noise的一些方法

    噪声常用有两种:一种椒盐噪声,一种高斯噪声. import numpy as np def pepper_and_salt(src, proportion): """ : ...

  2. int 越界处理

    在程序运行中,如果运算结果太大超出了所定义的类型,那么可能会影响整个程序的运行结果,甚至是程序出错. 因此,在编写程序时,加入越界处理就显得一起重要了. 用整型 int 来举个例子吧,int型占四个字 ...

  3. PWA 时代的移动端图片优化新思路

    图片通常是移动端网页中最占流量的资源.在很多类型的网站中(比如电商.社区),图片占据了网页的大部分空间.优化图片的质量和加载速度成为提高用户体验的重要途径. 传统方案的弊端 目前有一些被广泛应用的方案 ...

  4. 开源HTML5游戏引擎Kiwi.js 1.0正式发布

    Kiwi.js是由GameLab开发的一款全新的开源HTML5 JavaScript游戏引擎.在经过一年多的开发和测试之后,终于在日前正式发布了Kiwi.js 1.0版本. 其创始人Dan Milwa ...

  5. 论文阅读总结-Patient clustering improves efficiency of federated machine learning to predict mortality and hospital stay time using distributed electronic medical records

    一.论文提出的方法: 使用进入ICU前48h的用药特征作为预测因子预测重症监护患者的死亡率和ICU住院时间. 用到了联邦学习,自编码器,k-means聚类算法,社区检测. 数据集:从50家患者人数超过 ...

  6. 动态修改svg的颜色，svg做背景色时候修改颜色

    svg修改背景色可以使用fill属性来修改,但是我现在需要动态改变svg的颜色,例如我hover的时候 现在发现一种兼容性还不错的方法是css属性mask 类似于给路径填充上颜色,结合backgrou ...

  7. C语言类型(上)

    前提说明 格式说明:以[signed] int 为例 表明该类型的完整表达是 signed int 只不过signed可以省略 所以 int 也代表 signed int 类型 signed和unsi ...

  8. redis集群在线迁移第一篇（数据在线迁移至新集群）实战一

    迁移背景:1.原来redis集群在A机房,需要把其迁移到新机房B上来.2.保证现有环境稳定.3.采用在线迁移方式,因为原有redis集群内有大量数据.4.如果是一个全新的redis集群搭建会简单很多. ...

  9. 二进制免安装方式，配置mysql

    mysql 5.7.22版本 二进制包安装方法 环境标准化采样: 检查系统内是否有其他mysqlrpm -qa | grep mysql 是否存在mysql用户和用户组grep mysql /etc/ ...

  10. springboot jar包方式部署

    打好jar包后上传到 linux 执行命令 java -jar /root/vhr-web-0.0.1-SNAPSHOT.jar > /root/log.txt & 1.java -ja ...