Giter VIP home page Giter VIP logo

numberwolf / h265web.js Goto Github PK

View Code? Open in Web Editor NEW
1.9K 42.0 328.0 119.82 MB

🔥 作者:常炎隆(Author: ChangYanlong):HEVC/H.265 网页直播/点播播放器 支持硬解! 支持H.265的HttpFLV/HLS/MP4/TS/FLV/M3U8/Websocket播放。 🔥 A HEVC/H.265 Web Player, Support hard-decoding! for LIVE/VOD stream. Support H.265 Codec with HttpFLV/HLS/MP4/TS/FLV/M3U8/Websocket.

Home Page: http://v.yuveye.com/h265web

License: Other

JavaScript 9.95% HTML 0.07% Shell 0.17% CSS 0.02% Vue 0.02% TypeScript 0.01% Makefile 1.17% C 82.24% C++ 0.16% Perl 0.07% Assembly 5.96% Verilog 0.01% Objective-C 0.11% SourcePawn 0.01% Cuda 0.04% Roff 0.01% Awk 0.01% Ruby 0.01% Python 0.02% CMake 0.01%
hevc player wasm web hls m3u8 mp4 1080p h265 live

h265web.js's Introduction

h265web.js - 适配浏览器HEVC硬解码

中文 | English



市场上能找到的支持的能力最多的HEVC/H.265网页播放器.
流媒体服务推荐用 ZLMediaKit(https://github.com/ZLMediaKit/ZLMediaKit) - 更好用的流媒体服务

一个可支持HEVC/H.265编码播放360P、480P、540P、720P、1080P的HEVC播放器

O、接入案例(部分)

拼多多 快手 爱奇艺 百度 百度智能云 北京数通魔方钙瓷 杭州诚智天扬科技 南京一乙
拼多多 快手 爱奇艺 百度集团 百度智能云 北京数通魔方 杭州诚智天扬 南京一乙








山东呢沃尔德workd-group cn 上海联通 西安思华www sihua tech




山东呢尔德 上海联通 西安思华





能力矩阵

Feature Feature Feature Feature
HLS(LIVE) M3u8(VOD) MP4(VOD) FLV(VOD)




HTTP-FLV(LIVE) HTTP-TS(LIVE) WS-FLV(LIVE) WS-TS(LIVE)




MPEG-TS(VOD) MPEG-PS(VOD) AV1(Chrome) MOV(H.265)





HTTP-HEVC WS-HEVC MKV(HEVC) AAC(MAIN/LC)




Multi-Thread
(only:
https+nginx conf)
Single-Thread G711A(HTTP-FLV) G711U(HTTP-FLV)




MediaInfo HEVC/H.265 AVC/H.264 Hardware decoder
硬解码
(FLV/HTTP-FLV/MP4)

入门调试Demo index-debug.html


当前能力

  • 协议
协议 模式 是否支持 说明
mp4 点播 ----
mov 点播 HEVC/H.265
mkv 点播 HEVC/H.265
av1 点播 Chrome
mpeg-ts 点播 ----
mpeg-ps 点播 ----
m3u8 点播 ----
hls 直播 ----
flv 点播 ---
http-flv 直播 CodecID=12
http-ts 直播 ----
http-hevc 直播 ----
http-hevc 点播 ----
websocket-hevc 直播 ----
websocket-flv 直播 ----
websocket-ts 直播 ----
HEVC/H.265 点播 ----
HEVC/H.265 直播 ----
AVC/H.264 点播 ----
AVC/H.264 直播 ----
  • 编码
编码 是否支持 说明
AVC/H.264 ----
HEVC/H.265 ----
AAC ----
G711A HTTP-FLV
G711U HTTP-FLV
AV1 Chrome
  • 能力
能力 是否支持 其他
硬解码 适配Chrome/Safari等
直播 ----
点播 ----
Seek跳转 ----
精准Seek ----
封面图 ----
边下边播 ----
音量调节 ----
播放 ----
暂停 ----
重新播放 ----
暂停截图 ----
1080p播放 ----
720p播放 ----
多路播放 ----
去音频播放 ----
缓冲进度 ----
开启全屏播放 ----
退出全屏播放 ----
逐帧播放 ----
截图 ----
自动播放 HTTP-FLV 265+264
HTTP-TS 265+264
HLS 264
设置缓存长度 MP4 265
多线程解码 (需要HTTPS+配置NGINX支持)
单线程解码 兼容性强
获取 MediaInfo ----
获取 Codec编码 视频&音频
获取 Media Duration 时长 视频&音频
获取 视频尺寸 ----
获取 视频帧率 ----
获取 音频采样率 ----
追帧策略算法 HTTP-FLV(no audio)
倍速调整 H.264/AV1
Resize缩放 ----

全部文档

一、SDK使用文档

二、问题QA指引

三、合作项目

四、关于


捐赠

微信 支付宝 PayPal
TODO

h265web.js's People

Contributors

girlbymirror avatar nonzzz avatar numberwolf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

h265web.js's Issues

played hevc slow?

I played HEVC, but the playback was very slow. Other computers needed to be faster, but it was still very slow. Could you please tell me how to solve it?

var type = "raw265";
var url265raw = "http://172.16.7.114:8080/history/out.hevc";
var config = {
type: type,
player: "glplayer",
width: 960,
height: 540,
accurateSeek : true,
token : token,
extInfo : {
readyShow : true,
rawFps : 30
}
};
var h265Object = makeH265webjsRaw(url265raw, config);

【作者精选 - 错误不使用回调 & 浏览器安全限制自动播放】播放h265文件报错

image
`const PLAYER_CORE_TYPE_DEFAULT = 0; // 默认播放器内核
const PLAYER_CORE_TYPE_CNATIVE = 1; // 实验播放器内核

    const token =
        "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";

    var config = {
        player: "glplayer",
        width: 960,
        height: 540,
        type: "raw265",
        token: token,
        extInfo: {
            moovStartFlag: true
        }
    };

    const url = "test13.h265"
    let playerObj = window.new265webjs(url, config);

    // playerObj.play()
    console.log(playerObj);
    playerObj.do()
    console.log(playerObj);
    setTimeout(() => {
        console.log(playerObj.player);
        playerObj.player.play()
    }, 5000)`

test13.zip

Demo Change

Is there any way you can change the demo to allow an external url? I would like to test your player to ensure it will work with an h265 MP4 video I have. I tried to get everything running locally, but was unable to do so.

移动端无法全屏

场景
问题:移动端播放视频无法全屏
模式:点播

视频URL

-https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8

视频信息
分辨率:1080P
时常:14.48
封装格式:M3U8

问题描述
1)本地播放 、视频自动播放之后、点击全屏失败
3)有报错如下 -->
h265webjs-v20211123.js:168 Uncaught TypeError: Cannot read properties of undefined (reading 'requestFullscreen')
at e.value (h265webjs-v20211123.js:168)
at e.value (h265webjs-v20211123.js:168)
at HTMLAnchorElement.fullScreenBtn.onclick (videoSurveillance2.vue:320)

补充
视频是在线视频(issuse报错图片上传不了)

H265webjsModule.createPlayer(null, config); error

错误提示如下:
h265webjs-v20211120.js:168 Uncaught TypeError: Cannot read properties of null (reading 'search')
at Object.GetUriProtocol (h265webjs-v20211120.js:168)
at new e (h265webjs-v20211120.js:168)
at t.new265webjs (h265webjs-v20211120.js:168)

flv h265问题

你好!我发现个问题,播放h265的mp4是没有问题的,但是播放flv h265视频画面比较卡不清楚什么问题,正常的话应该改demo中的地址就行了吧?

播放视频黑屏

bd ptr:0x654c40 bd size:0, buf_size:0 ERROR EOF

这个是视频的信息
ffmpeg version N-102176-g4e8d22478b Copyright (c) 2000-2021 the FFmpeg developers
built with gcc 10-win32 (GCC) 20210408
configuration: --prefix=/ffbuild/prefix --pkg-config-flags=--static --pkg-config=pkg-config --cross-prefix=x86_64-w64-mingw32- --arch=x86_64 --target-os=mingw32 --enable-gpl --enable-version3 --disable-debug --disable-w32threads --enable-pthreads --enable-iconv --enable-libxml2 --enable-zlib --enable-libfreetype --enable-libfribidi --enable-gmp --enable-lzma --enable-fontconfig --enable-libvorbis --enable-opencl --enable-libvmaf --enable-vulkan --enable-amf --enable-libaom --enable-avisynth --enable-libdav1d --enable-libdavs2 --enable-ffnvcodec --enable-cuda-llvm --enable-libglslang --enable-libgme --enable-libass --enable-libbluray --enable-libmp3lame --enable-libopus --enable-libtheora --enable-libvpx --enable-libwebp --enable-lv2 --enable-libmfx --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librav1e --enable-librubberband --enable-schannel --enable-sdl2 --enable-libsoxr --enable-libsrt --enable-libsvtav1 --enable-libtwolame --enable-libuavs3d --enable-libvidstab --enable-libx264 --enable-libx265 --enable-libxavs2 --enable-libxvid --enable-libzimg --extra-cflags=-DLIBTWOLAME_STATIC --extra-cxxflags= --extra-ldflags=-pthread --extra-libs=-lgomp
libavutil 57. 0.100 / 57. 0.100
libavcodec 59. 0.100 / 59. 0.100
libavformat 59. 0.100 / 59. 0.100
libavdevice 59. 0.100 / 59. 0.100
libavfilter 8. 0.100 / 8. 0.100
libswscale 6. 0.100 / 6. 0.100
libswresample 4. 0.100 / 4. 0.100
libpostproc 56. 0.100 / 56. 0.100
Input #0, mpeg, from '.\bbb.mp4':
Duration: 21:37:56.56, start: 2243.508000, bitrate: 2 kb/s
Stream #0:0[0x1e0]: Video: hevc (Main), yuvj420p(pc, bt709), 1920x1080, 25 tbr, 90k tbn
Stream #0:1[0x1c0]: Audio: pcm_alaw, 8000 Hz, mono, s16, 64 kb/s

HTTP FLV

你好!我发现个问题,播放h265的mp4是没有问题的,但是播放http-flv h265视频画面比较卡不清楚什么问题,http-flv 264是没问题的,而且http-flv 265的画面有时候会变灰,难道是我配置有问题?正常的话应该改demo中的地址就行了吧?

Only local video?

Hello good, very good work.

With local video it works, but it doesn't work for me with video on an http server or via ftp.
And the second question, can I use this project on a web page? or is it not allowed?

Thank you.And a very good job.

【ISSUE Template】English

Theme (Problem / New Feature)

Scene

Problem:Play HLS failed
Model:LIVE(LIVE/VOD)

Media URL

http://host:port/a.m3u8

Media Info

Size:1080P
Duration:60min
Bitrate:500kb/s
Codec:H265
Format:M3U8

Problem Desc

1)step
2)step
3)step

etc

Always

Y/N

Others info

you can upload your video

如何销毁实例

先打开一个url视频播放然后关闭,再打开其他的url播放,结果弹窗页面还是第一个播放的画面

如何停止解码方法?

decoderMod = new MissileDecoderModule(token, version);

decoderMod .release();
停止方法是否正确?

因为多开画面后关闭,貌似内存没有释放。

有时候视频会加载失败。

视频信息:
h265视频裸流
问题描述:
有时候视频会无法加载,好像是浏览器加载js文件的顺序影响。
是否偶发:
是,知识有时候会出现这个问题,刷新几次就好
打开谷歌浏览器f12
如果wasm main 出现在[HMR] Waiting for update signal from WDS...前面,视频就会无法打开,反之就可以正常打开视频。

请问,同页面下如何创建多个播发器?

目前播放h265裸流,只使用decoder.js,yuvplayer
初始化如下:
`var c2 = document.getElementById("canvas");

    var renderContext = setupCanvas(c2, {
        preserveDrawingBuffer: false
    });

    let ptsIdx = 0;
    let token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";
    let version = '100.1.0';
    let decoderMod = null;
    decoderMod = new MissileDecoderModule(token, version);
    decoderMod.initDecoder();
    decoderMod.initFinish = function () {
        console.log("init Finshed");
        var bind_ret = decoderMod.bindCallback(function (y, u, v, stride_y, stride_u, stride_v, width, height, pts, pix_name) {
                          renderFrame(renderContext, y, u, v, stride_y, height);
        });
        console.log("bind ret ", bind_ret);

    };`

通过websocket传入nalu frame.

在多个canvas情况下,没有成功。

RuntimeError: memory access out of bounds

您好,我在运行一段时间后报这个错误,大概15分钟左右,前15分钟运行都是OK的。

missile.wasm:0x5c79 Uncaught RuntimeError: memory access out of bounds
at ab (http://localhost:63342/h265web.js/dist/missile.wasm:wasm-function[105]:0x5c79)
at Object.o._malloc (http://localhost:63342/h265web.js/dist/play.js:22250:25)
at Object.decodeNalu1Frame (http://localhost:63342/h265web.js/dist/play.js:22470:21)
at http://localhost:63342/h265web.js/dist/play.js:22485:19

Wasm?

Where is wasm coming from? how do you generate that?

【作者精选问题】关于在 uni-app 项目中集成播放器的记录

@numberwolf 指导下,成功在 uni-app 项目中集成了播放器,仅限编译为H5,特此记录一下,供有需要的朋友参考。

  1. 引入 h265web.js
  • 按官方文档所述根据需求将文件放入 static 目录

image

  • 修改项目中 index.html 引入js及css
<link rel="stylesheet" type="text/css" href='/static/player-view/css/index.css'>
<link rel="stylesheet" type="text/css" href='/static/player-view/css/button.css'>
<link rel="stylesheet" type="text/css" href='/static/player-view/css/progress.css'>
<script src="/static/dist/missile-256mb-v20211120.js"></script>
  • 配置 manifest.json ,设置为我们修改后的 index.html,才能正常引入 js

image

  1. 配置及初始化播放器
  • template 中播放器容器必须使用 div 标签,不要使用 view 标签;

  • 必须在页面渲染完成后再创建播放器,故这里在 onReady 周期中初始化播放器;

<template>
        <div id="glplayer" class="glplayer" ref="glplayer"></div>
</template>

<script>
	import H265webjsModule from '../../static/dist/index.js';

	export default {
		onReady() {
			this.initVideoPlayer()
		},
		methods: {
			initVideoPlayer() {
				const token =
"base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";
				let videoURL = "static/hevc_test_moov_set_head_16s.mp4"

				var config = {
					player: "glplayer",
					width: 960,
					height: 540,
					token: token,
					extInfo: {
						moovStartFlag: true
					}
				};

				let player = H265webjsModule.createPlayer(videoURL, config);
				player.do()
                                 // 特殊处理 加载播放器
				setTimeout(() => {
					player._makeMP4Player();
				}, 1000);
                                 // 媒体文件加载完成开始播放
				player.onLoadFinish = () => {
					player.play()
				};
			}
		}
	}
</script>

音频问题

火狐浏览器中,无法播放音频,
音频文件已上传至 925466059 群文件中
09-27-32.MP4.zip

多视频窗口播放时,点击全屏按钮失效

场景
问题:多视频窗口播放,点击全屏按钮,只有第一个视频窗口的全屏按钮有效,其他点击后均会报错
模式:点播

视频信息
窗口1视频使用测试视频
分辨率:1080P
时常:10s
码率:500kb/s
编码:H265
封装格式:MP4

窗口2视频
分辨率:1080P
时常:7min48s
码率:500kb/s
编码:H265
封装格式:MP4

问题描述
1)播放器部署服务器上,访问
2)两个视频都点击播放
3)第一个视频点击全屏,正常
4)第二个视频点击全屏,报错,报错如下

image

yuv420p(tv, bt709/bt709/unknown) 的视频播放不了

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'xxxx.mp4':
  Metadata:
  Duration: 00:00:16.47, start: 0.000000, bitrate: 264 kb/s
    Stream #0:0(und): Video: hevc (Main) (hev1 / 0x31766568), yuv420p(tv, bt709/bt709/unknown), 270x480, 195 kb/s, 29.99 fps, 30 tbr, 1k tbn, 30 tbc (default)
    Metadata:
      creation_time   : 2021-03-15T16:34:27.000000Z
      encoder         : JVT/HEVC Coding
    Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, mono, fltp, 61 kb/s (default)
    Metadata:
      creation_time   : 2021-03-15T16:34:27.000000Z

【作者精选问题 VUE & Uni-APP问题】MP4_H265无法播放

vue项目,MP4-h265播放失败

场景

问题:vue项目,MP4-h265播放失败
模式:点播

视频URL

https://ks3-cn-beijing.ksyun.com/ksplayer/h265/mp4_resource/jinjie_265.mp4

视频信息

分辨率:1080P
时常:60min
码率:500kb/s
编码:H265
封装格式:MP4

问题描述

1)播放器部署服务器上,访问
2)点击播放,出现黑框框,视频无法播放
3)有报错如下 --> 图片
111

222

是否偶发

How to run your demo ?

Hi,

I am running index.html in both folders: example and example_normal but it cannot play anything:
image

【提问 模板】Chinese

主题 (这个地方选一个 问题 或者 需求)

场景

问题:播放HLS失败
模式:直播

视频URL

http://host:port/a.m3u8

视频信息

分辨率:1080P
时常:60min
码率:500kb/s
编码:H265
封装格式:M3U8

问题描述

1)播放器部署服务器上,访问
2)点击播放,发现失败
3)有报错如下 --> 图片

等等

是否偶发

是/否

补充

上传视频

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.