怎么做到微信直播,HTML5直播,低延时

html-css08

怎么做到微信直播,HTML5直播,低延时,第1张

功能模块概述

通过obs客户端推流到nginx流媒体服务器上,对流媒体用ffmpeg将流剪切为若干段ts流文件并保存到临时目录中,通过访问m3u8格式拼接ts流文件段来观看直播。

推流端

采用开源工具OBS客户端进行推流

根据项目的推流地址,填入OBS客户端(下载地址)中,并设置场景,保存后重启,便可开始推流。

为更加稳定的推流,建议使用以上链接中的v0.625稳定版本,按提示安装完成后,打开设定.在广播设定中,伺服器统一填写我们项目的流媒体接收流地址:

rtmp://127.0.0.1:1935/hls/

以上这几个数据都是可以更改的。

127.0.0.1——你的流媒体服务器ip

1935——你的rtmp端口号

hls——你的直播nginx配置模块

具体在下文中也有详细介绍

配置地址

回到主界面,右键来源,选择添加视频捕捉设备或获取窗口等(相关设置默认即可),点击开始串流,便可开始直播。

添加场景

图为添加视频捕捉设备后的直播画面:

直播中

流媒体服务器

Nginx接收推流模块

rtmp_auto_push on

rtmp {

server {

listen 1935

application hls {

live on

hls on

hls_path /tmp/hls

on_publish 项目地址/liveOnPublish

on_publish_done 项目地址/liveOnDone

notify_method get

}

}

}

配上我在word上的注解

注解1

Nginx处理直播流模块

http {

server {

listen 80

server_name localhost

location /hls {

secure_link $arg_st,$arg_e

secure_link_md5 key$arg_e

subs_filter .ts '.ts?st=$arg_st&e=$arg_e&clentip=$remote_addr'

subs_filter_types application/vnd.apple.mpegurl

if ($secure_link = "") {

return 402

}

if ($secure_link = "0") {

return 403

}

# Serve HLS fragments

types {

application/vnd.apple.mpegurl m3u8

video/mp2t ts

}

root /tmp

add_header Cache-Control no-cache

}

}

}

注解2

项目部署服务器

流媒体服务器不通过项目服务器,整个直播过程的推流和处理流都在流媒体服务器上进行。项目服务器主要进行直播地址加密处理意见推流开始和结束触发的方法(liveOnPublish(),liveOnDone())已及对直播地址加密.

播放端

直接通过HTML5中的<video>标签设置src来播放直播流。如:

<video src="pro/live.m3u8?st=UM/L8jdfTlY2b1j1F6XSxA==&e=1468548530

" controls="controls"></video>

存在的问题

延迟待测试(不科学的数据是安卓手机普遍在30-40s,苹果手机在20-30s)

并发待测试

掉帧待测试(网速影响大,网络好几乎不掉帧,网络差掉一半,用户体验差)

为什么要用esxi html5 embedded host web console

传统的使用Vsphere Client、VMRC的方式,需要安装软件,会面临不同操作系统,开通不同网络端口等问题。在vcenter5.5U2中,vcenter提供HTML5的控制台,大大提高了控制台的兼容性,这个控制台可以通过预验证拼成的链接直接打开,具体使用方式参照:

How to generate a pre-authenticated HTML5 VM console link in vSphere 5.5 that works on all OSes!

但vcenter升级6.5及以后版本,这个控制台打开方式无法使用,总是跳转到认证页面,那如何使用针对Vcenter 6.X环境,集成打开控制台功能呢?

根据官方的指引,需要使用VMware HTML Console SDK,简单介绍一下这个SDK:

HTMLConsole通讯是websocket协议,支持WS和WSS(secure websocket)方式,HTML Console SDK是一个基于webmks(WMKS)的JS库实现,可以通过浏览器提供鼠标、键盘、触摸屏以及屏幕刷新、鼠标移动等输入处理的SDK。该SDK直接连接vm所在的ESXi物理主机,提供console(控制台)功能,提供多种操作方法来连接和控制远程虚拟机

支持的浏览器有(包括WIN、IOS、Android):

IE 10+、Firefox 24+、Chrome 30+、Safari 6.1+

2、怎么用HTML Console

根据以上分析,通过VMware HTML Console SDK的话,有如下几个问题需要解决

1 首先需要验证SDK怎么用:

验证使用VMware HTML Console SDK

2 由于SDK是直连ESXi主机,并且一般ESXi都在内网,无法在外网或者其他环境直连它,所以需要一个代理去转发这个流量:

配置Nginx反向代理HTML Console

3 同时环境中会存在很多ESXi主机,如何配置一个代理,并根据一定标识,去访问不同的ESXi主机呢:

配置Nginx根据规则选择后台服务器

作者:驴得水。 只做精品

如果是准备学前端,建议你可以看下这篇文章!

2022 年最新 Web 前端学习路线图,我梳理了完整的细节知识点,企业项目开发解决方案所需技术栈,更适合自学 Web 前端开发的同学,路线清晰明确,少走弯路。

零基础学编程,从宏观到微观全面了解

专业、语言选择、行业介绍、技术发展变革 (opens new window)