网页编解码

网页已经可以编解码h264，h265 等等常规编码，我们可以使用网页来进行gb28181的录像和解码以及形成文件，当然以前也可以，不过现在更为简便。需求来自于客户端不再进行更新，而使用网页版本来制作gb28181的本地录像（非服务器录像），同时创建链接可以下载，格式位webm。
以下将使用两种方式来存储录像，1 是重新编码，可以叠加数据，2 是不重新编码，我们的格式是flv ，将flv demux后直接存储

方式1 使用VideoTrackReader 和MediaStreamTrackProcessor

VideoTrackReader 根据文档已经deprecated，现在比较新的chrome版本应该使用MediaStreamTrackProcessor，并且有些函数已经过时，已经变成全局函数，比如createImageBitmap，不再属于videoFrame的内部函数，取而代之请使用全局createImageBitmap。不过还是给出一段VideoTrackReader的代码

// VideoTrackReader is deprecated; use MediaStreamTrackProcessor instead.function startReader(stream) {if (videoTrackReader) {console.warn('VideoTrackReader ALREADY exist');return;}const track = stream.getVideoTracks()[0];videoTrackReader = new VideoTrackReader(track);videoTrackReader.start(async (videoFrame) => {if (keepAnimation) {// 注意videoFrame的createImageBitmap也已经过时const imageBitmap = await videoFrame.createImageBitmap();drawCanvasBitmap(imageBitmap);imageBitmap.close();}videoFrame.destroy();});}

使用

function startProcessor(stream) {if (processor) {console.warn('MediaStreamTrackProcessor ALREADY exist');return;}const track = stream.getVideoTracks()[0];processor = new MediaStreamTrackProcessor(track);writable = new WritableStream({start() {console.log('Writable start');},async write(videoFrame) {const imageBitmap =await createImageBitmap(videoFrame);drawCanvasBitmap(imageBitmap);imageBitmap.close();if (videoFrame.close) {videoFrame.close();}else {videoFrame.destroy();}},// stop() {//   console.log('Writable stop');// },close() {console.log('Writable close');},abort(reason) {console.log('Writable abort:', reason);},})processor.readable.pipeTo(writable);}

测试

可以使用getUserMedia 来做测试，假定视频已经在网页上播放，制作一个界面

  async function startVideo() {const constraints = { video: true, audio: false };const stream = await navigator.mediaDevices.getUserMedia(constraints).catch(err => {console.error('Media ERROR:', err);return;});video.srcObject = stream;await video.play().catch(err => console.error('media ERROR:', err));}async function stopVideo() {if (video.srcObject) {video.pause();stopMediaStream(video.srcObject);video.srcObject = null;}}

点击开始录像以后，允许摄像头进行采集，如果没有摄像头，可以使用canvas，随手画上一段动画就行，下面给出一个示例

async function startDrawing() {const cnv = document.getElementById("src");const ctx = cnv.getContext("2d", { alpha: false });ctx.fillStyle = "white";const { width } = cnv;const { height } = cnv;const cx = width / 2;const cy = height / 2;const r = Math.min(width, height) / 5;var drawtime = 0;const drawOneFrame = function drawOneFrame(time) {//const angle = Math.PI * 2 * (time / 5000);//const scale = 1 + 0.3 * Math.sin(Math.PI * 2 * (time / 7000));ctx.save();ctx.fillRect(0, 0, width, height);ctx.translate(cx, cy);//ctx.rotate(angle);//ctx.scale(scale, scale);ctx.font = "30px Verdana";ctx.fillStyle = "black";const text = "this is " +drawtime++;const size = ctx.measureText(text).width;ctx.fillText(text, -size / 2, 0);ctx.restore();window.requestAnimationFrame(drawOneFrame);};

以上使用不断变化的数字来代替gb28181 的播放，如上图所示。下面为播放中的界面。

录像呈现，默认为h264

方式2

使用接收的videoFrame去存储，比如我们是flv方式，那就是demux flv以后，装载成videoFrame，然后解码展现，可以将数据直接存储，这样可以省却编码，那么方式1的优势是什么呢？在里面可以直接叠加数据，比如AI 目标框和文字。原理和方式1 无大的差别，读者自己可以实践。demax后，可以使用EncodedVideoChunk来包装接收到的flv数据，变成了videoFrame, 然后进行pipe，如下面代码所示：

function inputChunk(data, pts, iskey) {console.log(data, pts, iskey)const chunk = new EncodedVideoChunk({timestamp: pts,type: iskey ? 'key' : 'delta',data: data});decoder.decode(chunk);
}

网页录制gb28181录像相关推荐

浏览器怎么录制网页视频？3种网页视频录制方法
我们每天都会在浏览器上观看大量的视频,尤其是在爱奇艺.腾讯.哔哩哔哩等网页上.有时候就会观看到一些精彩的视频画面,就想要将这些画面给下载. 那怎么把网页视频录制下来?今天本文就给大家分享3种有效的网页 ...
php如何保存录像文件怎么打开,lol回放系统怎么用回放系统录制的保存在哪里...
LOL新客户端中的回放系统已正式上线,现在更方便保存你的高光时刻了,炫耀装X必备!现在你只需打开英雄联盟客户端,通过简单的操作就能下载自己的对局录像并进行剪辑,相信还有小部分的伙伴还不知道这个回放系统 ...
如何在Linux上制作一个屏幕录像视频教程
一图胜千言,一个精心设计的指导视频更是能给你带来良好体验.Linux上有你需要的制作有用且高质量教学视频的所有工具.我们将用强大的kdenlive视频编辑器和Audacity音频录制器和编辑器制作一个 ...
原创+转载四大软件-军港速达直播厅，屏幕录像专家，电脑安全工具箱，红客专用电脑安全工具箱...
1. 软件大小: 45.1MB 软件语言: 简体中文软件类别: 国产软件 / 网络电视运行环境: XP/2003/Win7/Vista 软件更新:2012-08-16 [软件作者] huang ...
PHP使用声网的页面录制、合流录制、单流录制
为了写着三个录制,发了N多个工单,坑有点大直接上正文公共部分页面录制合流录制单流录制结束录制结语直接上正文公共部分 /*** 获取声网ResourceId* @param $stud ...
几种优秀的屏幕录像软件用法介绍(图)
豪杰屏幕录像机V2.0共享版这是大名鼎鼎的豪杰公司出品的屏幕录像软件,功能强大而且操作简单. 要用它录制屏幕录像的话,首先需要设定一些参数.按一下界面右边的半月形按钮就会伸出"选项菜单&q ...
屏幕录像专家 V7.5 Build 20080112 简体中文绿色特别版
屏幕录像专家 V7.5 Build 20080112 简体中文绿色特别版 http://www.yinghuochong.com/disk/down-344251.htm 屏幕录像专家是一款专业的屏幕 ...
录像：在VS Orcas和ASP.NET中使用LINQ (第一部分)
录像:在VS Orcas和ASP.NET中使用LINQ (第一部分) [原文地址] Video: Using LINQ with ASP.NET in VS "Orcas" (Pa ...
录制回放模式创建测试用例 - Katalon Studio
对于自动化测试菜鸟来说,开始学习自动化最简单的方法是测试录制.识别应用系统上的对象是一件费时且痛苦的事情.Web Recorder Utility(网页录制功能) 捕获你在应用系统上的操作行为并且在后 ...

网页录制gb28181录像

网页编解码

方式1 使用VideoTrackReader 和MediaStreamTrackProcessor

使用

测试

录像呈现，默认为h264

方式2

网页录制gb28181录像相关推荐

最新文章

热门文章