h265webplayer

news/2025/1/11 11:58:30/

h265webplayer

https://github.com/ksvc/h265webplayer

h265webplayer是金山云的Web端H.265视频播放器,该播放器Web SDK让您可以在支持WebAssembly的浏览器上播放MP4格式的点播视频,FLV http-flv协议的直播视频。

支持的功能

1、mp4格式的点播(音频需是aac格式的,其余音频格式待兼容)。

2、flv格式的直播。

兼容性

目前PC端和移动端都可以使用,使用前请使用播放器提供的isSupportH265接口检查是否支持播放条件。

demo 有两种访问方式

mp4 demo 访问方式

1、ks3直接访问,链接如下:

https://ks3-cn-beijing.ksyun.com/ksplayer/h265/mp4_demo/index.html

flv demo 访问方式

1、ks3直接访问,链接如下:

https://ks3-cn-beijing.ksyun.com/ksplayer/h265/outside_demo/v1.1.3/index.html

2、获取压缩包后本地创建服务访问,步骤如下:

播放器Demo压缩包地址

flv demo zip

https://ks3-cn-beijing.ksyun.com/ai-kie/sdk/h265-pc/h265-pc.zip

播放器Demo运行说明

  1. 安装npm包管理器

参见:Node.js官网

  1. 安装http服务器

npm install http-server -g

  1. 启动服务

cd

npm run start

浏览器访问

http://localhost:8000

说明: 请替换页面中的拉流地址进行测试

集成h265解码器有两种方式

1、直接使用金山自研的h265播放器(推荐) 2、基于H265Decoder开发使用

第一种方式:使用h265播放器

token的意义

用于鉴权,验证用户是否拥有访问的权利以及访问的时长

如何获取token

先与商务沟通达成协议后,产品会根据需求提供一个对应的token

h265播放器初始化参数配置

let player = h265js.createPlayer({

    isLive: false,type: 'mp4'},{enableSkipFrame: false,          token: 'f8ce4d1adb97c46f28161a3685232557',  wasmFilePath: 'http://localhost:8000/libqydecoder.wasm',url: urlInput.value,timeToDecideWaiting: 50000,       bufferTime: 0,isShowStatistics: false     },{audioElement: audioElement,canvas: canvas,videoElement: h264VideoEle});

配置参数说明
在这里插入图片描述
播放器支持的方法
在这里插入图片描述
播放器支持的属性
在这里插入图片描述
播放器支持的事件
在这里插入图片描述
获取视频编码格式方法

player.on(h265js.Events.MEDIAINFO, function(event, data){

codec = data.codec;if (codec === 'avc1') {  

// h.264

    // 处理h.264视频相关逻辑} else if (codec === 'hev1') { // h.265// 处理h.265视频相关逻辑}

});

播放器控制条功能说明

<button class="ks-controls-load" onclick="load()">Load</button><button onclick="start()">Start</button><button onclick="pause()">Pause</button><button class="ks-controls-muted" onclick="muted()" data-type="muted">Muted</button><button onclick="fullscreen()">Fullscreen</button><input type="text" name="ks-seek-to" value="35"/><button onclick="seekto()">SeekTo</button><div class="ks-time"><span class="ks-current">00:00:00</span>/<span class="ks-duration">00:00:00</span></div>
![在这里插入图片描述](https://img-blog.csdnimg.cn/202007131128460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1amlhbmluZ18xMTAxMTc=,size_16,color_FFFFFF,t_70) 控制条功能具体实现逻辑可以参考demo

播放器能力监测
在这里插入图片描述
第二种方式:基于H265Decoder解码器

JS接口说明

初始化

import H265Decoder from ‘/h265decoder.js’;

let config = {

wasmFilePath: 'http://localhost:8000/libqydecoder.wasm',enableSkipFrame: true

};

let decoder;

//加载并编译wasm解码库

H265Decoder.compileWasmInterfaces(config.wasmFilePath, function () {

decoder = new H265Decoder(config);//设置解码回调decoder.set_image_callback(onDecodedFrameCallback);

}

向解码器队列送数据

decoder.toBeDecodeQueue.push({

 nalu: new Uint8Array(naluData),  // naluData 为 ArrayBuffer类型数据pts: 0,  //展示时间戳isDroppable: false });  // 表示是否可以跳帧

decoder的toBeDecodeQueue属性为保存待解码数据的数组,需自行控制待解码队列缓冲区的长度,避免内存溢出
decoder会自动取出toBeDecodeQueue中的数据给底层wasm解码器,并在解码后自动释放传入wasm解码器的待解码数据

设置解码输出图像回调
set_image_callback

decoder.set_image_callback((image) => {let w = image.get_width(); //获取图像宽度let h = image.get_height(); //获取图像高度let pts = image.get_pts();  //获取图像pts时间戳

// let image_data = new Uint8ClampedArray(w * h * 4);

    // for (let i = 0; i < w * h; i++) {//     image_data[i * 4 + 3] = 255;// }// //转换image中的YUV数据到image_data中的RGB数据// image.transcode(image_data);//优化: 直接返回YUV数据let yuvData =  image.getYuvDataNew(); //Uint8Array});说明: 解码回调函数的参数image为Image类型,参见h265decoder.js中的定义

其他接口

暂停解码

decoder.pause();

恢复解码

decoder.resume();

检查是否为暂停状态

if(decoder.isPaused()) {}

启动解码器

decoder.start();

说明: 默认情况初始化解码器时会自动调用启动解码器

销毁解码器

decoder.free();

接收累积跳帧数通知

decoder.on('skip_frame, (skippedframecount) => {

console.log(skippedframecount);

});

wasm解码器接口说明

接口函数返回码说明

const qy265decoder = {

QY_OK : (0x00000000),          // SuccessQY_FAIL : (0x80000001),        //  Unspecified errorQY_OUTOFMEMORY : (0x80000002), //  Ran out of memoryQY_POINTER : (0x80000003),     //  Invalid pointerQY_NOTSUPPORTED : (0x80000004),//  Not support feature encoutneredQY_AUTH_INVALID : (0x80000005), //  authentication invalidQY_SEARCHING_ACCESS_POINT : (0x00000001), // in process of searching first access

point

QY_REF_PIC_NOT_FOUND : (0x80000007), // encode completeQY_NEED_MORE_DATA : (0x00000008),  // need more data QY_BITSTREAM_ERROR : (0x00000009), // detecting bitstream error, can be

ignored

QY_TOKEN_INVALID : (0x0000000A)    //token invalid

错误码分为三大类状态:

等于0: QY_OK,表示完全正常
大于0:虽然当前不能正常解码,但解码器本身并没有出错
小于0:解码器本身发生了一些异常和错误

创建解码器
QY265DecoderCreate

let returnCode = _malloc(4); //为返回码分配空间

setValue(returnCode, 0, “i32”); // 返回码设置为0

let decoder = qy265decoder.QY265DecoderCreate(null, token, returnCode);

if(getValue(returnCode, ‘i32’) === qy265decoder.QY_OK) { /解码器创建成功/ }

销毁编码器
QY265DecoderDestroy

qy265decoder.QY265DecoderDestroy(decoder);

参数
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200713113115468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1amlhbmluZ18xMTAxMTc=,size_16,color_FFFFFF,t_70

判断解码输出帧是否有效
QY265DecoderGetFrameValid

let framevalid = qy265decoder.QY265DecoderGetFrameValid(frame);

参数

frame: QY265DecoderGetDecodedFrameEm接口返回的解码输出帧

返回值: 解码输出帧是否有效, 1为有效

归还解码输出帧
QY265DecoderReturnDecodedFrame

通知解码器释放该帧占用的相关内存

qy265decoder.QY265DecoderReturnDecodedFrame(decoder, frame);

参数

decoder: 通过QY265DecoderCreate接口创建的解码器实例
frame:QY265DecoderGetDecodedFrameEm接口返回的解码输出帧

获取解码输出帧的宽度
QY265GetFrameWidth

let width = qy265decoder.QY265GetFrameWidth(frame, 0);

参数

frame:QY265DecoderGetDecodedFrameEm接口返回的解码输出帧

返回值: 解码输出帧的宽度

获取解码输出帧的高度
QY265GetFrameHeight

let height = qy265decoder.QY265GetFrameHeight(frame, 0);

参数

frame:QY265DecoderGetDecodedFrameEm接口返回的解码输出帧

返回值: 解码输出帧的高度

获取解码输出帧的显示时间戳
QY265GetFramePts

let pts = qy265decoder.QY265GetFramePts(frame, 0);

参数

frame:QY265DecoderGetDecodedFrameEm接口返回的解码输出帧

返回值: 解码输出帧的显示时间戳

获取解码输出帧的YUV某个分量 QY265DecoderGetFramePlane

let stride = _malloc(2);let y = qy265decoder.QY265DecoderGetFramePlane(frame, 0, stride);let u = qy265decoder.QY265DecoderGetFramePlane(frame, 1, stride);let v = qy265decoder.QY265DecoderGetFramePlane(frame, 2, stride);

参数

frame:QY265DecoderGetDecodedFrameEm接口返回的解码输出帧
index: YUV分量索引,0表示Y分量,1表示U分量,2表示v分量

返回值: YUV某个数据分量的数组,格式为Uint8Array

Flush解码器 QY265DecodeFlush

因为解码NAL单元与获取解码输出为异步关系, 所以解码器中可能存在剩余尚未解码完成的若干NAL单元. 调用本函数将使解码器完成所有已经输入的NAL单元的解码. 一般在码流结束或者播放器拖曳时使用.

qy265decoder.QY265DecodeFlush(decoder, bClearCachedPics, returnCode);

参数

decoder: 通过QY265DecoderCreate接口创建的解码器实例bClearCachedPics: 是否清除缓冲的图像. 在码流结束时, 置为false, 不清除, 得到所有输出帧;在播放器拖曳或其他情况下, 置为true, 清除之前的图像帧, 重新开始returnCode: 返回码,returnCode对应地址保存0(QY_OK)表示正常

YUV渲染器文档

初始化YUV渲染器

import WebGLCanvas from ‘yuvrender.min.js’; // yuvrender.min.js在压缩包中的demo目录下

let webGLCanvas = new WebGLCanvas({

                canvas: this.canvas, //传入一个canvaswidth: width,        //视频帧宽度height: height       //视频帧高度});

备注:视频会根据它真实的宽高比自适应视频容器canvas的宽高

渲染一帧YUV数据

// 假设yuvData为解码输出的一帧图像的YUV表示(Uint8Array类型)

let ylen = width * height; //视频宽高

let uvlen = (width / 2) * (height / 2);

webGLCanvas.drawNextOutputPicture({

yData: yuvData.subarray(0, ylen),uData: yuvData.subarray(ylen, ylen + uvlen),vData: yuvData.subarray(ylen + uvlen, ylen + uvlen*2)

});

获取解码输出的图像帧的YUV表示

参见: 设置解码输出图像回调 set_image_callback


http://www.ppmy.cn/news/611801.html

相关文章

java后台的微信小程序支付的解决方案

java的后台主要就写两个controller 一个是 ----------------(1)调用支付统一下单API 生成 prepay_id 二个是 ----------------(2)微信支付完成的回调controller 第一个controller需要传入的参数有如下&#xff0c;如图&#xff1a; 然后&#xff0c;发送到微信端&#xff0c;把…

微信小程序bindtap 与 catchtap 是使用

如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您, 个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡 下面会有一个demo给出解释, 说他们使用的时候先说下微信小程序的事件分类冒泡事件与非冒泡事件 官网上这样规定的 事件分…

OpenGL 抗锯齿

1.简介 你可以看到&#xff0c;我们只是绘制了一个简单的立方体&#xff0c;你就能注意到它存在锯齿边缘。 可能不是非常明显&#xff0c;但如果你离近仔细观察立方体的边缘&#xff0c;你就应该能够看到锯齿状的图案。如果放大的话&#xff0c;你会看到下面的图案&#xff1a…

KNN算法简介

1&#xff0c;基本概念 邻近算法&#xff0c;或者说K最近邻(kNN&#xff0c;k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一。所谓K最近邻&#xff0c;就是k个最近的邻居的意思&#xff0c;说的是每个样本都可以用它最接近的k个邻居来代表。KNN 算法本身简单…

微信小程序scroll-view的使用

这边博客主要是对微信小程序文档的的使用心得 官网地址 demo效果 一些属性 scroll-top 和属性,设置竖向滚动条的位置,就是第一次进来的时候,还没有滑动的时候view的位置 假如不设置默认在第一位置,如果想显示中间的或者其他的位置,就可以使用此属性 scroll-into-view 这个就…

RGB Color Codes Chart

RGB Color Codes Chart RGB颜色空间 RGB颜色空间或RGB颜色系统&#xff0c;从红色、绿色和蓝色的组合中构造所有颜色。 红色、绿色和蓝色各使用8位&#xff0c;它们的整数值从0到255。这使得25625625616777216可能的颜色。 RGB≡红、绿、蓝 LED显示器中的每个像素都是通过…

tomcat与resin的比较

tomcat与resin的比较 - java的涟漪 - CSDN博客https://blog.csdn.net/rogerjava/article/details/7652347 Cauchohttp://caucho.com/ Resin Pro Download | Cauchohttps://caucho.com/products/resin/download转载于:https://www.cnblogs.com/rgqancy/p/10412008.html

线性分类

1&#xff0c;基本概念 在机器学习领域&#xff0c;分类的目标是指将具有相似特征的对象聚集。而一个线性分类器则透过特征的线性组合来做出分类决定&#xff0c;以达到此种目的。对象的特征通常被描述为特征值&#xff0c;而在向量中则描述为特征向量。 2&#xff0c;线性分类…