海康威视有插件、无插件播放;webrtc直播;西瓜视频播放器;mpegts.js直播;flvjs直播

Notes 视频播放的几种方式

一、Video

  1. mp4链接直接播放

二、海康威视3.3插件版直播、云台控制,资源下载地址

  1. index.html引入hk文件中的js文件
  2. 双击HCWebSDKPlugin.exe安装插件
  3. 前端参照文件夹hkCamera中的示例代码
    在这里插入图片描述

三、海康威视3.2无插件版直播,资源下载地址

  1. 打开WEB无插件开发包_v3.2文件
  2. 进入目录\WEB无插件开发包_v3.2\nginx-1.10.2\conf
  3. 打开 nginx.conf
  4. 可配服务IP及端口
         listen  9000;server_name  127.0.0.1;
    
  5. 进入目录\WEB无插件开发包_v3.2\nginx-1.10.2,双击start.bat可开启nginx服务
  6. 浏览访问 http://127.0.0.1:9000/cn/demo.html#/
  7. demo.html 页面已根据实际情况做了修改,可嵌入iframe使用
  8. 配合前端使用
     <iframe ref="iframe"class="iframe"src="http://127.0.0.1:9000/cn/demo.html#/"></iframe>const iframe = ref();function openVideoModal() {<!-- 与iframe通信,可做一定的延迟,因为要页面已加载,iframe页面才能监听到通信 -->if (iframe.value)iframe.value.contentWindow.postMessage({ type: 'play', cameraIp: '摄像机或录像机IP,可看demo.js中的配置', }, '*');}function closeVideoModal() {if (iframe.value)iframe.value.contentWindow.postMessage({ type: 'stop', }, '*');}
    

四、webrtc,资源下载地址

  1. index.html引入,webrtc中的两个js文件
  2. 前端
    1. 页面
         <template><div :class="{ webrtcVideo: true, videoLoad: !videoLoadSuccess }"><video class="webrtcVideo":id="'video_' + videoUrl"ref="videoRef"autoplayloopmuted:controls="controls"></video></div></template><script setup>import { onBeforeUnmount, onMounted, ref } from 'vue';import { Webrtc } from "./webrtc.js";defineExpose({ replay });const props = defineProps({<!-- rtsp://admin:wts12345@172.16.100.165:554/Streaming/Channels/101 -->videoUrl: {type: String,default: '',required: true,},controls: {type: Boolean,default: true,required: true,},});const videoRef = ref();const videoLoadSuccess = ref(false);function replay() {videoRef.value.load();}onMounted(() => {Webrtc.getInstance().connect(props.videoUrl);videoRef.value.addEventListener('loadedmetadata', function () {console.log('props.videoUrl----', "视频元数据加载完毕", props.videoUrl);videoLoadSuccess.value = true;}, true);});onBeforeUnmount(() => {Webrtc.getInstance().disconnect(props.videoUrl);});</script><style lang='less' scoped>.webrtcVideo {width: 100%;height: 100%;object-fit: fill;position: relative;// background-color: red;}.videoLoad:before {content: '视频加载中...';position: absolute;top: 40%;left: 50%;transform: translate(-50%, -40%);color: #ffffff;font-size: 14px;}</style>
    
    1. 连接 webrtc.js
     export class Webrtc {constructor() {this.urlMap = new Map();}static instance;static getInstance() {if (!this.instance) {this.instance = new Webrtc();}return this.instance;}connect(rtspUrl, key) {let id = "video_" + rtspUrl; //对应元素idif (!rtspUrl) return;let webRtcServer = new WebRtcStreamer(id,`http://127.0.0.1:28000`);//对应推流服务运行命令中的ip:portconsole.log("webrtc  rtsp地址:" + rtspUrl);webRtcServer.connect(rtspUrl,null,"rtptransport=tcp",null);this.urlMap.set(id, webRtcServer);}disconnect(url) {let id = "video_" + url; //对应元素idlet webrtc = this.urlMap.get(id);if (webrtc) webrtc.disconnect();this.urlMap.delete(id);}}
  3. 推流服务
    1. 文档https://github.com/mpromonet/webrtc-streamer
    2. 打开webrtc-streamer文件夹
    3. 复制运行命令.txt中的命令,IP和端口可根据实际情况修改
    4. 在webrtc-streamer-v0.8.4-dirty-Windows-AMD64-Release 文件目录下,运行上述命令

五、西瓜视频播放器 xgplayer v3.X

  1. 文档 https://h5player.bytedance.com/plugins/extension/xgplayer-flv.html#%E5%AE%89%E8%A3%85
  2. CDN安装(也可npm安装),index.html引入
     <script src="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js" charset="utf-8"></script><script src="https://unpkg.byted-static.com/xgplayer-flv/3.0.10/dist/index.min.js" charset="utf-8"></script>
    
  3. 实现
       <!-- 播放容器 --><div id="player1"></div><!-- 播放 -->let player = ref();function play(){player.value = new window.Player({id: 'player1',isLive: true,playsinline: true,url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",autoplay: true,fluid: true,//流式布局,可使播放器宽度跟随父元素的宽度大小变化plugins: [window.FlvPlayer],});}<!-- 销毁 -->function destroy(){player.value.destroy()player.value = null}

六、mpegts.js

  1. 文档 https://github.com/xqq/mpegts.js/blob/master/README_zh.md
  2. 安装 npm install --save mpegts.js
  3. 实现
       <!-- 播放容器 --><div id="player1"></div><!-- 播放 -->import mpegts from 'mpegts.js';let player = ref();function play(){if (mpegts.isSupported()) {let videoElement = document.getElementById('player1');player.value = mpegts.createPlayer({type: 'flv',isLive: true,url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv"}, {liveBufferLatencyChasing: true,//开启追帧liveBufferLatencyMaxLatency: 0.9,//最大缓存时间liveBufferLatencyMinRemain: 0.2,//最小缓存时间});player.value.attachMediaElement(videoElement);player.value.load();// ------------------播放器的一些异常监听player.value.on(mpegts.Events.ERROR, (e) => {console.log('mpegts.Events.ERROR----发生异常', e);});player.value.on(mpegts.Events.LOADING_COMPLETE, (e) => {console.log('mpegts.Events.LOADING_COMPLETE----直播结束', e);});player.value.on(mpegts.Events.STATISTICS_INFO, (e) => {console.log('mpegts.Events.STATISTICS_INFO----解码帧', e.decodedFrames);});}}<!-- 销毁 -->function destroy(){player.value.destroy()player.value = null}

七、flv.js

  1. 文档 https://github.com/bilibili/flv.js
  2. 安装 npm install --save flv.js
  3. 实现
       <!-- 播放容器 --><div id="player1"></div><!-- 播放 -->import flvjs from 'flvjs.js';let player = ref();function play(){if (flvjs.isSupported()) {let videoElement = document.getElementById('player1');player.value = flvjs.createPlayer({type: 'flv',url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv"});player.value.attachMediaElement(videoElement);player.value.load();player.value.play();}}<!-- 销毁 -->function destroy(){player.value.destroy()player.value = null}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/252113.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图解支付-金融级密钥管理系统:构建支付系统的安全基石

经常在网上看到某某公司几千万的个人敏感信息被泄露&#xff0c;这要是放在持牌的支付公司&#xff0c;可能就是一个非常大的麻烦&#xff0c;不但会失去用户的信任&#xff0c;而且可能会被吊销牌照。而现实情况是很多公司的技术研发人员并没有足够深的安全架构经验来设计一套…

简单的JavaScript去下载转换为Base64的PDF文件

新建一个文件&#xff0c;内容填写如下&#xff0c;然后保存为 .html 类型的文件 再用浏览器打开&#xff0c;就会是下面这样子&#xff1a; 图一红色textarea里面&#xff0c;可以将PDF文件转换成BASE64位后的内容贴进去&#xff0c;点击下载时&#xff0c;就可以直接下载成PD…

windows 谷歌浏览器Chrome 怎么禁止更新

1.首先把任务管理器里的谷歌浏览器程序结束&#xff1a; &#xff08;鼠标在任务栏右击&#xff0c;出现任务管理器&#xff09; 2.windowr&#xff0c;输入services.msc 带有Google Update的服务&#xff0c;选择禁用。 3.windowr&#xff0c;输入taskschd.msc 任务计划程序…

MTK8365安卓核心板_联发科MT8365(Genio 350)核心板规格参数

MTK8365安卓核心板是一款高性能的嵌入式处理器产品&#xff0c;基于联发科领先的SoC架构和先进的12纳米工艺。它集成了四核ARM Cortex-A53处理器&#xff0c;每个核心频率高达2.0 GHz&#xff0c;搭载强大的多标准视频加速器&#xff0c;支持高达1080p 60fps的视频解码。此外&a…

C++_多态

目录 1、什么是虚函数 1.1 什么是虚函数重写 1.2 虚函数的继承 1.3 协变 1.4 析构函数的重写 2、override和final 2.1 final 2.2 override 3、纯虚函数/抽象类 3.1 接口继承和实现继承 4、多态的原理 前言&#xff1a; 在C中&#xff0c;多态指的是调用同一个类的…

Python算法题集_环形链表

Python算法题集_环形链表 题234&#xff1a;环形链表1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【集合检索】2) 改进版一【字典检测】3) 改进版二【双指针】 4. 最优算法 本文为Python算法题集之一的代码示例 题234&#xff1a;环形链表 …

【Elasticsearch】从入门到精通

目前java常见的针对大数据存储的方案并不多&#xff0c;常见的就是mysql的分库分表、es存储 这里偏向es存储方案&#xff0c;es不同的版本之间其实差异还挺大的&#xff0c;本篇博文版本Elasticsearch 7.14.0 Springboot整合Easy-Es Easy-Es官方文档 Elasticsearch的初步认识 …

自学Java的第十九天

一&#xff0c;每日收获 1.排序 2.冒泡排序法 3.查找 4.多维数组-二维数组 二&#xff0c;新名词与小技巧 三&#xff0c;今天学习中所遇到的困难 一&#xff0c;每日收获 1.排序 ① 排序的介绍 排序是将多个数据&#xff0c;依指定的顺序进行排列的过程。 ② 排序的…

【Rust】——rust前言与安装rust

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

使用 PyTorch 构建 NLP 聊天机器人

一、说明 聊天机器人提供自动对话&#xff0c;可以帮助用户完成任务或寻求信息。随着深度学习的最新进展&#xff0c;聊天机器人正变得越来越具有对话性和实用性。这个全面的教程将利用 PyTorch 和 Python 从头开始构建聊天机器人&#xff0c;涵盖模型架构、数据准备、训练循环…

认识Tomcat (一)

认识Tomcat &#xff08;一&#xff09; 一、服务器 1.1 服务器简介 ​ 硬件服务器的构成与一般的PC比较相似&#xff0c;但是服务器在稳定性、安全性、性能等方面都要求更高&#xff0c;因为CPU、芯片组、内存、磁盘系统、网络等硬件和普通PC有所不同。 ​ 软件服务器&…

初始数据库

华子目录 什么是数据库DBMS&#xff08;数据库管理系统&#xff09;数据库系统和文件系统的区别文件系统数据库系统对比区别优缺点总结 常见数据库关系型数据库ACID原则关系型数据库的优缺点优点缺点 非关系型数据库存储方式常见的非关系型数据库非关系型数据库的优缺点优点缺点…

BUU UPLOAD COURSE 1

进去之后是一个上传页面 尝试上传一句话木马的php代码&#xff0c;保存为一个1.php&#xff0c;然后上传 <?php eval($_POST[1]);?>发现后缀名被改为jpg了 访问一下 http://a82bcc09-b809-42c9-b5ad-5406b72e5707.node5.buuoj.cn:81/uploads/65bfa77eab1f6.jpg发现可…

代码生成器(新):mybatis-plus-generator使用指南

代码生成器&#xff08;新&#xff09;官网 后端代码&#xff1a;点击查看 LearnElementUiAndSpringBoot 提醒&#xff1a;LearnElementUiAndSpringBoot下载完后&#xff0c;在运行调试 Main.java里的main方法之前&#xff0c;除了utils包和Main.java文件&#xff0c;其他包需…

异地办公必不可缺的远程控制软件,原理到底是什么?

目录 引言远程桌面连接软件的作用与重要性 基本概念与架构客户端-服务器模型网络通信协议 核心技术组件图形界面捕获与传输输入转发会话管理 性能优化策略带宽优化延迟优化 引言 远程桌面连接软件的作用与重要性 在当今这个高度数字化和网络化的时代&#xff0c;远程桌面连接软…

红队渗透靶机:LORD OF THE ROOT: 1.0.1

目录 信息收集 1、arp 2、nmap 3、knock 4、nikto 目录探测 1、gobuster 2、dirsearch WEB sqlmap 爆库 爆表 爆列 爆字段 hydra爆破 ssh登录 提权 信息收集 内核提权 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, ty…

U形金属卡

方管不锈钢防盗网挂勾&#xff0c;没找到合适的&#xff0c;自己设计一个。 difference(){ cube([43,20,27]);translate([2,-1,2]) cube([42,29,23]);translate([32,10,-1]) cylinder(50,3,3,$fn360); }if(1){ color("gray") translate([2,-20,2]) cube([23,60,23])…

JAVA中的object类

一、equals方法 1.和equals的比较 既可以判断基本类型有可以判断引用类型 如果判断基本类型&#xff0c;判断的值是否相等 int num1 10; double num2 10.0; System.out.println(num1 num2); 如果判断引用类型&#xff0c;判断的地址是否相等&#xff0c;即判断是不是同一…

myql 项目数据库和表的设计

1.表的设计和创建 2.在navicate运行这些代码 create table user(id int not null auto_increment primary key,name varchar(50) not null unique,password varchar(50) not null,state enum(online,offline) default offline ); create table friend(userid int not null,…

HomeAssistant系统添加HACS插件商店与远程控制家中智能家居

文章目录 基本条件一、下载HACS源码二、添加HACS集成三、绑定米家设备 ​ 上文介绍了如何实现群晖Docker部署HomeAssistant&#xff0c;通过内网穿透在户外控制家庭中枢。本文将介绍如何安装HACS插件商店&#xff0c;将米家&#xff0c;果家设备接入 Home Assistant。 基本条件…