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

inprivacy2024-02-02 19:07

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"
              autoplay
              loop
              muted
              :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>

    2. 连接 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; //对应元素id

      if (!rtspUrl) return;

      let webRtcServer = new WebRtcStreamer(id,`http://127.0.0.1:28000`);//对应推流服务运行命令中的ip:port
      console.log("webrtc  rtsp地址：" + rtspUrl);
      webRtcServer.connect(rtspUrl,null,"rtptransport=tcp",null);
      this.urlMap.set(id, webRtcServer);
  }

  disconnect(url) {
      let id = "video_" + url; //对应元素id
      let 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
   }
相关推荐
恬静的小魔龙2 小时前
【SKFramework框架核心模块】3-2、音频管理模块
3d·unity·编辑器·游戏引擎·音视频
魔珐科技12 小时前
当产业经济插上“数字羽翼”，魔珐有言AIGC“3D视频创作大赛”成功举办
3d·aigc·音视频
SEVEN-YEARS14 小时前
使用OpenCV实现视频背景减除与目标检测
opencv·目标检测·音视频
萧大侠jdeps16 小时前
视频 wmv 转MP4
音视频
gomogomono16 小时前
HDR视频技术之三：色度学与颜色空间
音视频·hdr
萧大侠jdeps16 小时前
图片生成视频-右进
前端·javascript·音视频
gomogomono16 小时前
HDR视频技术之四：HDR 主要标准
音视频·hdr
LNTON羚通17 小时前
算法定制LiteAIServer视频智能分析平台工业排污检测算法智控环保监管
算法·目标检测·音视频·监控·视频监控
EasyNTS18 小时前
无插件直播流媒体音视频播放器EasyPlayer.js播放器的g711系列的音频，听起来为什么都是杂音
音视频·g711
weixin_452600691 天前
【青牛科技】电流模式PWM控制器系列--D4870
科技·单片机·嵌入式硬件·音视频·智能电表·白色家电电源·机顶盒电源
热门推荐
01抖音的互联网架构02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04国内外大模型汇总：Open AI大模型、Google大模型、Microsoft大模型、文心一言大模型、通义千问大模型、字节豆包大模型、智普清言大模型05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07单片机与数电模电：探索电子世界的核心领域08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10非小米电脑下载小米电脑管家