专栏首页EasyNVR如何使用视频流媒体服务器支持HTML5直播?

如何使用视频流媒体服务器支持HTML5直播?

视频直播这么火,再不学就out了!为了紧跟潮流,本文我也将向大家介绍一下视频直播中的基本流程和主要的技术点,包括但仅不限于前端技术。

H5 到底能不能做视频直播?

当然可以了,H5火了这么久,涵盖了各个方面的技术,我们的流媒体服务器就可以支持H5的直播。

对于视频录制,可以使用强大的 WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的技术,缺点是只在PC的chrome上支持较好,移动端支持不太理想。

简单的推流服务器搭建,由于我们上传的视频流都是基于rtmp协议的,所以服务器也必须要支持 rtmp才行,大概需要以下几个步骤:

1 安装一台 nginx 服务器。

2 安装 nginx 的 rtmp 扩展,目前使用比较多的是https://github.com/arut/nginx-rtmp-module。

3 配置 nginx 的 conf 文件:

 rtmp {  

     server {  

         listen 1935;  #监听的端口

         chunk_size 4000;  


         application hls {  #rtmp推流请求路径
             live on;  
             hls on;  
             hls_path /usr/local/var/www/hls;  
             hls_fragment 5s;  
         }  
     }  
 }  

4 重启 nginx,将 rtmp 的推流地址写为 rtmp://ip:1935/hls/mystream,其中 hls_path 表示生成的 .m3u8 和 ts 文件所存放的地址,hls_fragment 表示切片时长,mysteam 表示一个实例,即将来要生成的文件名可以先自己随便设置一个。更多配置可以参考:https://github.com/arut/nginx-rtmp-module/wiki/

根据以上步骤基本上已经实现了一个支持 rtmp 的视频服务器了。

对于视频播放,可以使用 HLS(HTTP Live Streaming)协议播放直播流,iOS 和 Android 都天然支持这种协议,配置简单,直接使用 video 标签即可。

简单来说,直接使用 video 标签即可播放 hls 协议的直播视频:

 <video autoplay webkit-playsinline>  
     <source src="http://10.66.69.77:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" />  
     <p class="warning">Your browser does not support HTML5 video.</p>  
 </video> 

需要注意的是,给 video 标签增加 webkit-playsinline 属性,这个属性是为了让 video 视频在 ios 的 uiwebview 里面可以不全屏播放,默认 ios 会全屏播放视频,需要给 uiwebview 设置 allowsInlineMediaPlayback=YES。业界比较成熟的videojs可以根据不同平台选择不同的策略,例如 iOS 使用 video 标签,pc 使用 flash 等。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 5G边缘计算赋能安防互联网直播行业,青犀视频强力打造云、边、端一体化协同音视频解决方案

    视频项目各种各样,视频方案也是千变万化,可以有多种形式的组合来解决问题,最终选择具体哪一种方案可能会根据成本、效果、可行性等多个方面来综合,那么,有没有一套公式...

    EasyNVR
  • 视频流媒体平台EasyNVR无插件直播如何解决视频播放延时问题?

    Easy系列视频直播主要针对的就是无插件直播,支持所有H5的客户端进行视频直播,由于是视频直播,必然会涉及到直播延时和直播稳定性流畅度问题,本次将重点说明一下直...

    EasyNVR
  • 怎样在视频流媒体服务器里实现RTSP h265转RTMP?

    RTSP H.265到RTMP,首先需要扩展RTMP协议。目前,我国已有相应的推广标准,国内开发商基本上都是按照该协议进行推广的。协议层面的问题已经得到解决。剩...

    EasyNVR
  • 工具系列 | 视频监控RTSP转HLS解决方案

    由于公司业务,需要实现基于WEB访问监控摄像头实时流的预览,经过各种百度,补充了不少相关知识,了解到了很多大神的实现方法,也因为很多过时的帖子,而踩了不少的坑。

    Tinywan
  • Video ++孙兆民:人工智能行业报告——视频内容识别行业分析 | 分享总结 | 雷锋网

    像素的世界已经延伸到图像之外,虽然视频对于机器学习研究人员来说一直都是个挑战,但现在的技术能够使得从视频中提取信息变得跟从图像中提取信息一样简单。人工智能这个新...

    AI研习社
  • 用科技赋能无障碍世界 | Android 中文教学视频

    Android 系统为残疾或有特殊需求的用户提供了很多无障碍服务,这些服务让他们可以使用 Android 平台上的很多应用。

    Android 开发者
  • Wolfram语言12.1版本中的可计算视频功能

    Wolfram语言的12.1版本引入了期待已久的Video对象。Video对象完全是(而且只能是)核外算法,它可以用任何codec编码连接到视频文件的外部列表。...

    WolframChina
  • 开发直播app当务之急先把视频质量提上去

    相关数据显示,我国成年人平均每天在移动设备上花费 2 小时 39 分钟,比 2017 年增长 11%。与此同时,看电视的时间将减少 2%,每天只有 2 小时 3...

    用户4372465
  • 向怡宁:如何做中国人用的可穿戴设备?

    本期跟大家推荐新一期【产品家】视频. 中西文化不同,可穿戴设备的产品思维也应不同。 当下,用于记步的可穿戴设备越来越多,但怎样的计步器才适合中国人穿戴呢?我...

    腾讯大讲堂
  • MXNet Scala 学习笔记 二 ---- 创建新的 Operator

    (比如Python、Scala)采用现有的操作子来组合,比如实现 Selu 激活函数。

    Ldpe2G

扫码关注云+社区

领取腾讯云代金券