最近公司项目中遇到过这样的需求场景，要解决以下问题：

  1. 将前端的采集传感器数据收集分析，并以TCP Client的方式推送到某 TCP Server
  2. 在浏览器（包含手机浏览器）实时显示传感器数据 （Picture, Video, Data）

本次分享的内容主要是如何实现实时视频播放。

可能要掌握的知识：

ffmpeg

link:( http://trac.ffmpeg.org/ )

FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec，为了保证高可移植性和编解码质量，libavcodec里很多code都是从头开发的。

WebSocket

什么是WebSocket？

WebSocket 是一种在单个TCP连接上进行全双工通讯的协议

浏览器客户端 通过发起HTTP请求，在header信息中附加上"Upgrade: WebSocket"，将连接升级为WebSocket，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，即可进行全双工长连接通讯

JSMpeg

摘录一些关于JSMpeg的简介：

link:( https://jsmpeg.com/)

What's JSMpeg?

JSMpeg is a Video Player written in JavaScript. It consists of an MPEG-TS Demuxer, MPEG1 Video & MP2 Audio Decoders, WebGL & Canvas2D Renderers and WebAudio Sound Output. JSMpeg can load static files via Ajax and allows low latency streaming (~50ms) via WebSocktes.

JSMpeg can decode 720p Video at 30fps on an iPhone 5S, works in any modern browser (Chrome, Firefox, Safari & Edge) and comes in at 20kb gzipped.

Why Use JSMpeg?

HTTP Live Streaming (HLS) or MPEG-DASH add at least 5 seconds of latency.

WebRTC is not supported on iOS.

Not all browsers can decode H264; not all browsers can decode VP8.

WebRTC is tremendously complex. Try setting up a WebRTC broadcast server and you'll find yourself in a mess of STUN, TURN, signaling and media servers while trying to setup and compile a whooping 4GB git repository with custom tooling just to end up with what is essentially a black box that you can't possibly understand within your lifetime (well, I can't).

简单的翻译与理解：
1.JSMpeg是一个用JavaScript实现的前端解码器
2.以WebSocket作为触媒/中继（表述可能有误，起到的是一个桥梁的作用）
3.接收ffmpeg推送的stream，处理后输出 binary MPEG-TS data 数据并推送至WebSocket流

uploading-image-339559.png

如何使用：

// Use the websocket-relay to serve a raw MPEG-TS over WebSockets. You can use
// ffmpeg to feed the relay. ffmpeg -> websocket-relay -> browser
// Example:
// node websocket-relay yoursecret 8081 8082
// ffmpeg -i -f mpegts http://ip:port/yoursecret

因此，要搭建起整套工程需要：

程序：

  1. ffmepg （部署于Windows/Linux系统皆可，官网有对应的安装包，用于推流需要播放的视频资源）
  2. JSMpeg （部署于Windows/Linux系统皆可，运行环境为Node.js 视频流网络中转，根据协商的Secret，接收FFmpeg推送的流数据，以WebSocket服务的方式推送至浏览器）
  3. Http Server （用于部署发布您的网页程序）

网络端口：

  1. Stream流端口 （根据实际场景决定是否需要NAT映射，如果FFmpeg程序与JSMpeg程序在同一个局域网环境下不需要映射）
  2. WebSocket端口 （浏览器客户端进行连接的WebSocket服务端口）

关于页面实现

https://github.com/phoboslab/jsmpeg

官方demo有简易的实现，不做介绍

vue，webpack 推荐以下控件：jsmpeg-player