Giter VIP home page Giter VIP logo

numberwolf / h265web.js Goto Github PK

View Code? Open in Web Editor NEW
1.9K 42.0 329.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 Issues

移动端无法全屏

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

视频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报错图片上传不了)

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

目前播放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情况下,没有成功。

flv h265问题

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

【作者精选问题 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

是否偶发

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

How to run your demo ?

Hi,

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

如何停止解码方法?

decoderMod = new MissileDecoderModule(token, version);

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

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

如何销毁实例

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

Wasm?

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

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)

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

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

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

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

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

image

有时候视频会加载失败。

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

HTTP FLV

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

【提问 模板】Chinese

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

场景

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

视频URL

http://host:port/a.m3u8

视频信息

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

问题描述

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

等等

是否偶发

是/否

补充

上传视频

播放视频黑屏

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

【作者精选 - 错误不使用回调 & 浏览器安全限制自动播放】播放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

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);

音频问题

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

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

【作者精选问题】关于在 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>

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.

【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

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.

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.