html5 video p2p research

2020-12-17 10:55:48

一、背景

节约带宽，减少缓冲时间，提升服务质量，处理峰值流量, 视频观看的人越多，播放越流畅。

二、p2p是什么？


通俗的解释：点对点播放，无中心服务器，依靠用户群交换信息。


三、如何实现？

1 、 Server ?

2、Client ：

html5 WebRTC & Media Source Extensions

3、Supported Browsers & Plantforms


从上可知ios目前还无法实现p2p播放


4. webRTC 网络实时通信，主要是来让浏览器实时获取和交换视频，音频数据。

webRTC提供的api

getUserMedia 获取媒体数据

RTCPeerConnection 浏览器之间点对点的连接

RTCDataChanne 浏览器用于点对点的数据通信


四、解决方案？

The Serverless P2P CDN For Video Live Streaming


五、参考文章

slideshare.net/SPOTITV/

MediaSource

w3.org/TR/media-source/#

Getting Started with WebRTC - HTML5 Rocks

HTML5新特性之WebRTC - 草根程序猿 - 博客园（webrtc demo）

WebRTC现状及优缺点，音视频通信必看的开源项目 - 专家观点 - CTI论坛-中国领先的ICT行业网站（WebRTC 优缺点）

WebRTC Videos | WebRTC （chrome webrtc 视频介绍）


  • 精彩推荐

  • 2020-01-13 11:30:56

    解决Uncaught SyntaxError: Unexpected token <

    今天写代码的时候发现了"Uncaught SyntaxError: Unexpected token <" <html>的js错误，而且还是html的第一行，我就蒙了，这第一行有啥问题啊，还有一个“<”符号，我以为是我的网页标签没有闭包，所以检查了一下，都不是啊！错误如图。

  • 2020-01-13 14:53:51

    sass中使用calc计算表达式变量问题

    calc（）是css的一个函数，可用于元素计算长度，比如div宽度想要减去一个固定宽度后并自适应，可以写为calc(100% - 60px) 注意“-”两边有空格 sass已经是常用的预编译语言，允许使用变量等规则，如果上边写到60px是一个变量，这个表达怎么写呢

  • 2020-01-13 21:01:04

    vue路由的异步加载(懒加载)方法

    vue本身不多介绍。直接说问题，因为vue的所有路由都是加载在一个app.js里的，如果项目巨大，那么首页加载会是灾难。所以我们就需要把某些路由用异步加载(懒加载)的方式进行加载.

  • 2020-01-13 21:56:45

    Ant Design Pro nginx配置

    Ant Design Pro nginx配置 今天看了下Ant和nginx的配置 给大家分享下 下边的配置可以直接使用 修改为自己的域名和文件夹目录就可以

  • 2020-01-13 23:36:35

    webpack之externals详解（精华）

    官网文档解释的很清楚，就是webpack可以不处理应用的某些依赖库，使用externals配置后，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

  • 2020-01-14 00:12:22

    webpack externals详解

    在众多的webpack配置教程中，对externals这个配置选项，总是一带而过，把文档中提到的几种方式都复述一遍，但是对于开发者而言，根本没法完全理解。本文试图通过一整篇文章，详细的对externals这个参数进行讲解。

  • 2020-01-14 01:06:37

    webpack externals 深入理解

    按照官方文档的解释，如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用。