video、webgl canvas推拉流及多媒体流协议

video、webgl canvas推拉流及多媒体流协议

不经常接触智慧城市项目，直播项目，安全项目的人，可能了解的不够多！做这些项目的也会根据公司技术深度学到更深的的知识！
先看一张图片！
下图所使用的视频流的技术你用到过哪些？

上来一眼是不是看懵了！咱们细细说来！

1、flv

网上有说flv是 Adobe 公司开发的！有的说是sorenson公司的压缩算法！我比较倾向于Adobe 公司开发！
还记得早些年的qq空间装扮，全是Flash 装扮的！又跑题了！切入正题flv 全称是Flash Video，flash在早前是比较火的，当时video播放器还没兴起，flash撑起web的视频半边天！flash不只能看视频，还能玩游戏！当时可谓风靡一时！使得安装有浏览器的计算机终端不需要另外安装播放器，这也是 FLV 格式广为流行的原因之一。
HTTP-FLV: 基于HTTP流式IO传输FLV，依赖浏览器支持播放FLV。
它所使用的协议：
1、http-flv协议 也就是http流，就经常听到H264格式。有http-flv你可能想到肯定有https-flv对接下来就是
2、https-flv协议 是https流 是H265格式。

优点：高并发，延迟低

flash几乎看不到了！为什么，主要是占用内存太大！和多种原因被抛弃！但是它传输数据的格式优点很多被沿用了下来，目前所接触到的播放模式是H5的H.264视频编码格式，Flash的H264已经不在更新。

2、fmp4

MP4(MPEG-4 Part 14)是在“ISO/IEC 14496-14”标准文件中定义的，属于MPEG-4的一部分，是“ISO/IEC 14496-12(MPEG-4 Part 12 ISO base media file format)”标准中所定义的媒体格式的一种实现，后者定义了一种通用的媒体文件结构标准。MP4是一种描述较为全面的容器格式，被认为可以在其中嵌入任何形式的数据，包含各种编码的视频、音频等，我们常见的大部分的MP4文件存放的AVC(H.264)或MPEG-4(Part 2)编码的视频和AAC编码的音频。MP4格式的官方文件后缀名是“.mp4”。

3、hls

HLS (HTTP Live Streaming)是Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件，TS媒体分片文件和key加密串文件。
HLS 协议由三部分组成：HTTP、M3U8、TS。这三部分中，HTTP 是传输协议，M3U8 是索引文件，TS 是音视频的媒体信息。上边ts部分略过。

4、待写

播放器：

flvjs

B站开源 https://github.com/bilibili/flv.js
官方demo：http://bilibili.github.io/flv.js/demo/
支持的协议：http-flv、https-flv、ws-flv、wss-flv
渲染的方式：video标签
使用方法：
1、npm install --save flv.js
2、非压缩cdn https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js
压缩cdn https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js

  <script>
       if (flvjs.isSupported()) { // 判断当前浏览器是否支持flv。
             var videoElement = document.getElementById('videoElement'); 
             var flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    // isLive: true,
                    // hasAudio: false,
                    url:'http://127.0.0.1:8000/live/abc.flv'
              });
              flvPlayer.attachMediaElement(videoElement); // 挂载video标签。
              flvPlayer.load(); 
              flvPlayer.play(); // 播放
        }
  </script>

在react体系里使用react flv.js 组件reflv 快速实现。
先安装npm i reflv，再写代码：

import React, { PureComponent } from 'react';
import Reflv from 'reflv';

export class HttpFlv extends PureComponent {
  render() {
    return (
      <Reflv
        url={`http://localhost:7001/live/test.flv`}
        type="flv"
        isLive
        cors
      />
    )
  }
}

模式操作原生的video节点

Aliplayerjs

阿里云播放器SDK（ApsaraVideo Player SDK）
Web播放器
Android播放器
iOS播放器
Flutter播放器
Windows播放器
需要选择对应的sdk

下载Demo
您可以扫描二维码，下载安装Demo进行体验。

注意 系统支持：iOS 9及以上、Android 4.3及以上。

支持的协议：
1、FLV、HLS、MP4、MP3、RTMP等常见的音视频点播、直播格式
2、支持HLS、多码率HLS、标准AES-128加密HLS视频流播放。
3、支持标准协议的DASH视频流播放，例如：SegmentBase 、SegmentTemplate。
渲染方式：video 标签
使用方法：
1、

 <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.20/skins/default/aliplayer-min.css" />  
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.20/aliplayer-h5-min.js">script>

2、npm i aliplayer-react
npm install vue-aliplayer -S

实测ts、flv、m3u8、hls可以播放，webrtc的不行，使用信令服务的传输会出现异常，能显示，不支持rtmp、rtsp、stream

//示例是react模板--------------------------------------
//npm i aliplayer-react
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Player from 'aliplayer-react';

const config = {
    source: "//player.alicdn.com/video/aliyunmedia.mp4",
    width: "100%",
    height: "500px",
    autoplay: true,
    isLive: false,
    rePlay: false,
    playsinline: true,
    preload: true,
    controlBarVisibility: "hover",
    useH5Prism: true,
    components: [
        {
            name: "RateComponent",
            type: Player.components.RateComponent,
        }
    ]
};

class App extends Component {
    state = {
        instance: null,  // player instance, e.g: player.stop();
    }
    render() {
        return <div>
            <Player
                config={config}
                onGetInstance={instance => this.setState({ instance })}
                // Optional: custom cdn url
                // sourceUrl={'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'}
            />
        </div>
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

//以下示例是vue用法---------------------------------------------------------------------------
//npm install vue-aliplayer -S
import VueAliplayer from 'vue-aliplayer'
 
export default {
  components: {
    'ali-player': VueAliplayer
  }
}


//普通用法------------------------------------------------------------------------------
<script>
  var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '直播路径',
    isLive: true,
    },function(player){
      console.log('The player is created.')
    });
</script>

vue的模板参数查看：https://www.npmjs.com/package/vue-aliplayer
react模板参数查看：https://npmmirror.com/package/aliplayer-react
官方地址：https://help.aliyun.com/document_detail/125570.html

EasyPlayer.js、EasyWasmPlayer.js

这俩插件是一个，前边这个名字很多人应该用过，是青犀视频出的开源的插件
支持的协议：
1、HTTP、
2、HTTP-FLV、
3、HLS（m3u8）
4、rtmp
5、视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。
使用方法：
1、npm i @easydarwin/easyplayer 地址：https://www.npmjs.com/package/@easydarwin/easyplayer
2、目前没找到这个插件的cdn 可以npm 下载下来再根据对应的文件单独拿出来使用
实测支持m3u8、fmp4，不支持ts、rtsp、rtmp、flv、starem

<easy-player
  live
  muted
  autoplay
  :video-url="camera.videoSrc"
  style="width: 100%;height: 200px"
  @error="restartPlayer"
/>

//...... ...... import EasyPlayer from '@easydarwin/easyplayer'; ......
components: { EasyPlayer }

简单的展示，确切的参考这个地址 https://www.npmjs.com/package/@easydarwin/easyplayer

video.js

这个使用的协议比较少目前就hls，m3u8是一种基于HTTP Live Streaming文件视频格式(直播流)，它主要是存放整个视频的基本信息和分片(Segment)组成。目前由Apple.inc率先提出的HLS协议在Mac的Safari上原生支持【苹果提出HLS协议】；故其本身不兼容浏览器(如谷歌、IE等)播放；而video.js支持多平台播放，而且其下插件videojs-contrib-hls可对m3u8进行兼容浏览器播放处理；即videojs配合videojs-contrib-hls.js可以实现调用flash播放器播放hls。
支持的协议：hls
渲染方式：video标签
使用方法：
1、cdn引入

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>videoJstitle>
 
      
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js">script>


<link href="https://unpkg.com/[email protected]/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/video.min.js">script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js">script>

    head>
    <body>
        <section id="videoPlayer">
            <video
    			id="my-player"
    			class="video-js"
    			controls
    			preload="auto"
    			poster="//vjs.zencdn.net/v/oceans.png"
    			data-setup='{}'
    		>
  				  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">source>
                  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">source>
                  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">source>
                  <p class="vjs-no-js">
                     To view this video please enable JavaScript, and consider upgrading to a
                  web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank">
                    supports HTML5 video
                    a>
                p>
         video>

        section>
      <script src="https://vjs.zencdn.net/7.6.6/video.js">script>
        <script type="text/javascript">
            var options = {};

			var player = videojs('my-player', options, function onPlayerReady() {
  				videojs.log('Your player is ready!');

  			// In this context, `this` is the player that was created by Video.js.
  				this.play();

  			// How about an event listener?
  				this.on('ended', function() {
    			videojs.log('Awww...over so soon?!');
 			 	});
			});

        script>
    body>
html>

2、npm install video.js --save
　　npm install videojs-contrib-hls --save
　　最新版的好像不需要下边这条指令了！
　　video就不在实测了，他只支持m3u8，如果这个他在不支持，我就笑了
插件的使用：

<template>
	

Jessibuca.js

这如果对于视频展示需求小于等于6个视频框的实例，可以使用，超过将不支持展示，webgl内存消耗和显卡消耗内存较大（没有实测，有实测且与我说的不符的可通知我修改）！
支持的协议：flv
渲染方式：默认是通过 canvas标签 webgl进行渲染的，jessibuca pro 支持对video渲染，这个渲染方式消耗较小
pro版本jessibuca pro： http://jessibuca.monibuca.com/player-pro.html
pro版本是支持WebRTC，如果对于webRTC比较陌生，请查看这里：https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API/Protocols
使用方法：
在这贴上非常多的功能，有需求的可以去看看
地址：http://jessibuca.monibuca.com/demo.html
下载地址：https://jessibuca.com/dist.zip

<div id="container" style="width:800px;height:600px">div>
<script src="./renderer.js">script>
<button onclick="play">播放button>
<script>
  var container = document.getElementById("container");
  var jessibuca = new Jessibuca({ container, decoder: "ff.js" ,videoBuffer:0.2});
  function play(){
    jessibuca.play("ws://localhost/live/user1")
  }
script>

jmspegjs

目前测试最大开启视频9个，电脑损耗比较严重，比较吃带宽，可以直接连接nvr和单个摄像头，需要信令服务器中转，将视频切成帧，一片一片webgl渲染！
支持的协议：rtsp rtsps
渲染方式：canvas 标签
使用方法:
1、npm install jsmpeg -s
如果是npm安装方式：
他支持flv格式

import JSMpeg from 'jsmpeg'

如果是使用源码：

import JSMpeg from 'xx/jsmpeg.min.js'

使用创建实例方式：

let player = new JSMpeg.Player('ws://xxxx',{ ... })

自动识别方式：
    jsmpeg.js会自动识别docment中所有class包含jsmpeg的元素，并获取data-url属性后把该元素当做播放器容器，html如下

<div class="jsmpeg" data-url="ws://xxxx">div>

playease.js

playease.js: 一款html5播放器，支持flv、mp4、rtmp、dash、hls，以及html5原生支持的格式webm、mpeg-4系列、ogg等，兼容IE8+。该播放器可自动解析url，过滤有效地址，并切换相应的render进行播放，比如url为rtmp协议或浏览器为IE8时，会自动启用flash。源码采用mvc结构，自定义事件系统，易于阅读和扩展。
支持视频格式：http-flv、websocket-flv、websocket-fmp4、mpeg-dash、rtmp stream、hls等
渲染方式：暂无测试，测试完毕再修改此处，以以前经验，使用div作为容器的渲染成ifram或者canvas可能比较大！应该属于耗费gpu 使用webgl渲染的插件
这个插件的资料少之又少！好像原名称叫odd.playease.js,貌似是个人开发的！有兴趣的可以去了解一下！
使用方法：

<div id='playwrap' style='margin: 0 auto; width: 100%; max-width: 640px; top: 0; left: 0;'>

    <div id='player'>div>

div>
<script>
var pw = document.getElementById('playwrap');
var events = playease.events;
var player = playease('player');
player.addEventListener(events.PLAYEASE_FULLPAGE, onFullpage);
player.addEventListener(events.RESIZE, onResize);
player.setup({
    width: 640,
    height: 400,
    aspectratio: '16:9',
    file: '/vod/sample.flv',  //视频地址
    /*sources: [{
        file: 'http://127.0.0.1/live/sample.flv',
        type: 'flv',
        label: 'HTTP-FLV'
    }, {
        file: 'ws://127.0.0.1/live/sample.flv',
        type: 'flv',
        label: 'WS-FLV'
    }, {
        file: 'ws://127.0.0.1/live/sample',
        type: 'rtmpmate',
        label: 'WS-RTMPMATE'
    }, {
        file: 'ws://127.0.0.1/live/sample',
        type: 'wss',
        label: 'WS-fMP4'
    }, {
        file: 'http://127.0.0.1/live/sample/manifest.mpd',
        type: 'dash',
        label: 'MPEG-DASH'
    }, {
        file: 'rtmp://127.0.0.1/live/sample',
        type: 'flash',
        label: 'RTMP-STREAM'
    }, {
        file: 'http://127.0.0.1/live/sample/index.m3u8',
        type: 'def'
    }],*/
    mode: 'vod',
    controls: true,
    autoplay: false,
    //poster: 'sample.png',
    //report: true,
    loader: {
        name: 'xhr-chunked-loader',
        chunkSize: 2 * 1024 * 1024,
        mode: 'cors'
    },
    logo: {
        file: 'logo.png'  //logo地址
    },
    bulletscreen: {
        enable: true,
        visible: true
    },
    /*fullpage: {
        visible: true
    },*/
    render: {
        name: 'def',
        bufferLength: 4 * 1024 * 1024,
        swf: '../swf/playease.swf'
    }
});
function onFullpage(e) {
    pw.style.margin = e.exit ? '0 auto' : '0';
    pw.style.height = e.exit ? '' : '100%';
    pw.style.position = e.exit ? '' : 'fixed';
    pw.style.maxWidth = e.exit ? '640px' : '100%';
    pw.style.zIndex = e.exit ? '' : '99';
}
function onResize(e) {
    // x5-playsinline
    if (playease.utils.isAndroid() && playease.utils.isQQBrowser()) {
        var video = document.getElementById('player').firstChild.lastChild;
        video.style.width = window.innerWidth + 'px';
        video.style.height = window.innerHeight + 'px';
        video.style['object-position'] = 'center top';
        var controlbar = document.getElementById('player').childNodes[1];
        controlbar.style.top = e.height - 40 + 'px';
        controlbar.style.position = 'absolute';     
        var next = document.getElementById('others');
        next.style.top = e.height + 'px';
        next.style.bottom = '0px';
        next.style.position = 'absolute';
        next.style.zIndex = 999;
    }   
    // Something else

}

script>

最终测试结果出炉：阿里的播放器 Aliplayerjs，支持格式最多！如果不是工业化项目，是娱乐直播，这个播放器足够！当然你也可以根据对应的选择上述几款对应的播放器！
其中有些如果想体验的
有兴趣的可以去看看我搭建ffmpeg webscoket信令服务器的博客以及搭建webTRC服务器的博客，后续继续更新，这章写了一下午！实在不容易！