All Projects → Cheney925 → cordova-plugin-tencent-liteav

Cheney925 / cordova-plugin-tencent-liteav

Licence: other
A cordova plugin for video playing with Tencent's LiteAV SDK. Support RTMP/HLS/FLV/MP4.

Programming Languages

java
68154 projects - #9 most used programming language
objective c
16641 projects - #2 most used programming language
javascript
184084 projects - #8 most used programming language
shell
77523 projects

Projects that are alternatives of or similar to cordova-plugin-tencent-liteav

Livego
live video streaming server in golang
Stars: ✭ 7,312 (+30366.67%)
Mutual labels:  hls, livestream, rtmp, flv
Node Media Server
A Node.js implementation of RTMP/HTTP-FLV/WS-FLV/HLS/DASH/MP4 Media Server
Stars: ✭ 4,433 (+18370.83%)
Mutual labels:  hls, livestream, rtmp, flv
Media Server
RTSP/RTP/RTMP/FLV/HLS/MPEG-TS/MPEG-PS/MPEG-DASH/MP4/fMP4/MKV/WebM
Stars: ✭ 1,363 (+5579.17%)
Mutual labels:  hls, rtmp, flv, m3u8
Monibuca
🧩 Monibuca is a Modularized, Extensible framework for building Streaming Server
Stars: ✭ 307 (+1179.17%)
Mutual labels:  hls, livestream, rtmp, flv
tms
tms(toy media server) is a toy media server for myself learning media develop. Just for fun.
Stars: ✭ 29 (+20.83%)
Mutual labels:  hls, livestream, rtmp, flv
mock-hls-server
Fake a live/event HLS stream from a VOD one. Useful for testing. Supports looping.
Stars: ✭ 61 (+154.17%)
Mutual labels:  hls, vod, m3u8
Owncast
Take control over your live stream video by running it yourself. Streaming + chat out of the box.
Stars: ✭ 5,382 (+22325%)
Mutual labels:  hls, livestream, rtmp
ZLMediaKit
WebRTC/RTSP/RTMP/HTTP/HLS/HTTP-FLV/WebSocket-FLV/HTTP-TS/HTTP-fMP4/WebSocket-TS/WebSocket-fMP4/GB28181/SRT server and client framework based on C++11
Stars: ✭ 7,790 (+32358.33%)
Mutual labels:  hls, rtmp, flv
Starrysky
🔥A Powerful and Streamline MusicLibrary(一个丰富的音乐播放封装库,支持多种音频格式,完美解决你的问题。)
Stars: ✭ 1,022 (+4158.33%)
Mutual labels:  hls, rtmp, m3u8
sms
rtmp server and super media server whith golang.
Stars: ✭ 65 (+170.83%)
Mutual labels:  hls, rtmp, flv
Lal
🔥 Golang live stream lib/client/server. support RTMP/RTSP/HLS/HTTP[S]-FLV/HTTP-TS, H264/H265/AAC, relay, cluster, record, HTTP API/Notify, GOP cache. 官方文档见 https://pengrl.com/lal
Stars: ✭ 480 (+1900%)
Mutual labels:  hls, rtmp, m3u8
hls-downloader
Download all video files from HLS (HTTP Live Streaming) VoD (Video on Demand) m3u8 playlist for local playback
Stars: ✭ 121 (+404.17%)
Mutual labels:  hls, vod, m3u8
P2p Cdn Sdk Javascript
Free p2p cdn github javascript sdk to reduce video streaming costs of live and on demand video using webrtc by upto 90% and improve scalability by 6x - 🚀 Vadootv 🚀
Stars: ✭ 158 (+558.33%)
Mutual labels:  hls, livestream, m3u8
p2p-cdn-sdk-android
Free p2p cdn android github sdk to reduce video streaming costs of live and on demand video using webrtc by upto 90% and improve scalability by 6x - 🚀 Vadootv 🚀
Stars: ✭ 39 (+62.5%)
Mutual labels:  hls, vod, m3u8
Zlmediakit
WebRTC/RTSP/RTMP/HTTP/HLS/HTTP-FLV/WebSocket-FLV/HTTP-TS/HTTP-fMP4/WebSocket-TS/WebSocket-fMP4/GB28181 server and client framework based on C++11
Stars: ✭ 5,248 (+21766.67%)
Mutual labels:  hls, rtmp, flv
Html5 Dash Hls Rtmp
🌻 HTML5播放器、M3U8直播/点播、RTMP直播、低延迟、推流/播流地址鉴权
Stars: ✭ 1,805 (+7420.83%)
Mutual labels:  hls, rtmp, m3u8
Blss
NGINX-based Live Media Streaming Server
Stars: ✭ 187 (+679.17%)
Mutual labels:  hls, livestream, rtmp
Radium
Synced stream and video playback with VOD capabilities utilizing HLS. Developed for movie nights but has many use cases.
Stars: ✭ 172 (+616.67%)
Mutual labels:  hls, rtmp, vod
smart rtmpd
RTMP server, smart, compact, high performance(c, c++), high concurrency, easy to maintain, easy to deploy, (supports multiple operating systems Windows and Linux, ARM, FreeBSD)
Stars: ✭ 159 (+562.5%)
Mutual labels:  hls, rtmp, m3u8
docker-wyze-bridge
RTMP/RTSP/LL-HLS bridge for Wyze cams in a docker container
Stars: ✭ 1,146 (+4675%)
Mutual labels:  hls, rtmp

cordova-plugin-tencent-liteav

腾讯小直播LiteAV SDK Cordova插件

npm taobaonpm

安装 Installation

cordova plugin add cordova-plugin-tencent-liteav

使用 Usage

直播/播放视频 CLiteAV.startPlay()

CLiteAV.startPlay(options, successCallback, errorCallback)

  • options 播放参数,包含url, playType, playMode

  • options.url 视频流播放地址

  • options.playType 视频流类型,参考CLiteAV.PLAY_TYPE

     PLAY_TYPE = {
       LIVE_RTMP:     0, // 传入的URL为RTMP直播地址
       LIVE_FLV:      1, // 传入的URL为FLV直播地址
       VOD_FLV:       2, // 传入的URL为RTMP点播地址
       VOD_HLS:       3, // 传入的URL为HLS(m3u8)点播地址
       VOD_MP4:       4, // 传入的URL为MP4点播地址
       LIVE_RTMP_ACC: 5, // 低延迟连麦链路直播地址(仅适合于连麦场景)
       LOCAL_VIDEO:   6  // 手机本地视频文件
     }
    
  • options.playMode 播放模式,0为横屏,1为竖屏

  • successCallback 播放成功回调

  • errorCallback 播放失败回调

调用startPlay方法时,需要将前端网页的背景颜色设置为透明,并保证没有多余的元素,否则会遮挡住播放器。这是因为WebView层在原生播放器层的上层,如果WebView有背景色,就会挡住下面的层。这么做也是为了方便前端可以在上层添加一些播放控件,如播放、暂停、全屏、进度条。可以参考Ionic Demo:https://github.com/Cheney925/ionic-for-cordova-plugin-tencent-liteav

参照以下设置:

body.video-play {
	background-color: transparent !important;
	ion-app {
		background-color: transparent !important;
		.app-root {
			opacity: 0;
		}
		.ion-page.show-page ~ .nav-decor {
			background-color: transparent !important;
		}
		.content {
			background-color: transparent !important;
		}
	}
}

停止播放 CLiteAV.stopPlay()

停止播放,退出播放器,播放器会被销毁。

CLiteAV.stopPlay(successCallback, errorCallback)

  • successCallback 成功回调
  • errorCallback 失败回调

暂停播放 CLiteAV.pause()

暂停播放,播放器仍然存在,如需销毁,调用stopPlay()。

CLiteAV.pause(successCallback, errorCallback)

  • successCallback 成功回调
  • errorCallback 失败回调

恢复播放 CLiteAV.resume()

CLiteAV.resume(successCallback, errorCallback)

  • successCallback 成功回调
  • errorCallback 失败回调

设置播放模式 CLiteAV.setPlayMode()

CLiteAV.setPlayMode(mode, successCallback, errorCallback)

  • mode 播放模式,可选值: portraitlandscape,前端可通过监听设备横竖屏模式变化时调用这个方法,也可以添加一个控制按钮进行调用
  • successCallback 成功回调
  • errorCallback 失败回调

开启连麦 CLiteAV.startLinkMic()

CLiteAV.startLinkMic(options, successCallback, errorCallback)

  • options options中必须包含连麦推流的地址url参数,暂无其他参数
  • successCallback 成功回调
  • errorCallback 失败回调

关闭连麦 CLiteAV.stopLinkMic()

CLiteAV.stopLinkMic(successCallback, errorCallback)

  • successCallback 成功回调
  • errorCallback 失败回调

获取视频信息 CLiteAV.getNetStatus()

CLiteAV.getNetStatus(successCallback, errorCallback)

  • successCallback 成功回调
  • errorCallback 失败回调

successCallback有回调参数netStatus,包含了播放的视频状态信息

示例如下:

{
	"isTrusted": false,
	"AV_PLAY_INTERVAL": -22,
	"CPU_USAGE_DEVICE": 0.026000000536441803,
	"SERVER_IP": "112.65.220.64:1935", // 连接的服务器IP
	"NET_JITTER": 0,
	"CODEC_CACHE": 1621,
	"AUDIO_INFO": "1|48000,2|48000,1",
	"AUDIO_BITRATE": 32, // 当前流媒体的音频码率,单位 kbps
	"NET_SPEED": 318, // 当前网络数据接收速度
	"VIDEO_HEIGHT": 288, // 视频分辨率 - 高
	"VIDEO_BITRATE": 286, // 当前流媒体的视频码率,单位 kbps
	"V_DEC_CACHE_SIZE": 4,
	"CPU_USAGE": 0.10025062412023544, // 当前瞬时CPU使用率
	"CACHE_SIZE": 1680, // 缓冲区(jitterbuffer)大小,缓冲区当前长度为 0,说明离卡顿就不远了
	"VIDEO_WIDTH": 480, // 视频分辨率 - 宽
	"VIDEO_GOP": 1,
	"AV_RECV_INTERVAL": -41,
	"VIDEO_CACHE_SIZE": 42,
	"VIDEO_FPS": 25, 、// 当前流媒体的视频帧率
	"AUDIO_PLAY_SPEED": 5
}

监听视频信息变化 CLiteAV.onNetStatusChange

document.addEventListener('CLiteAV.onNetStatusChange', function(netStatus) {})

  • netStatusCLiteAV.getNetStatus获取的一致,不同的是通过事件监听可以自动拿到最新的状态信息

播放事件 CLiteAV.onPlayEvent

document.addEventListener('CLiteAV.onPlayEvent', function(data) {})

  • data.eventID 播放事件ID,参考 文档
  • data.params 附加数据

常用播放事件

事件ID 数值 含义说明
PLAY_EVT_CONNECT_SUCC 2001 已经连接服务器
PLAY_EVT_RTMP_STREAM_BEGIN 2002 已经连接服务器,开始拉流(仅播放RTMP地址时会抛送)
PLAY_EVT_RCV_FIRST_I_FRAME 2003 已经网络接收到首个可渲染的视频数据包(IDR)服务器
PLAY_EVT_PLAY_BEGIN 2004 视频播放开始,如果有转菊花什么的这个时候该停了
PLAY_EVT_PLAY_PROGRESS 2005 视频播放进度,会通知当前播放进度、加载进度 和总体时长
PLAY_EVT_PLAY_END 2006 视频播放结束
PLAY_EVT_PLAY_LOADING 2007 视频播放loading,如果能够恢复,之后会有BEGIN事件
PLAY_EVT_GET_MESSAGE 2012 用于接收夹在音视频流中的消息
PLAY_ERR_NET_DISCONNECT -2301 网络断连,且经多次重连亦不能恢复,更多重试请自行重启播放

Change Log

  • v0.3.1 解决[email protected]以上版本lib目录问题
  • v0.3.0 修复android下播放画面不正常的问题
  • v0.2.2 删除依赖插件cordova-plugin-compat
  • v0.2.0 添加视频信息监听CLiteAV.onNetStatusChange和播放事件CLiteAV.onPlayEvent

Demo

基于Ionic 3的Demo:https://github.com/Cheney925/ionic-for-cordova-plugin-tencent-liteav

相关文档 Documents

腾讯云小直播官方文档:https://cloud.tencent.com/document/product/454

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].