uniapp项目中h5端和安卓端显示flv及rtsp格式的视频

uniapp项目中h5端和安卓端显示flv及rtsp格式的视频

uniapp中App端播放视频

App端视频播放，一般都是使用uniapp中的内置媒体组件video，它支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。

如果想显示flv或者rtsp格式的视频直接赋值给video的src，如下：

1. 显示flv格式的视频：

播放地址变量flvUrl格式为：play.cucloud.cn:80/test1.flv?s…

  <video style="width: 100%; height:500" id="myVideo" :src="flvUrl" controls ></video>

2. 显示rtsp格式的视频：

视频地址格式为：rtsp://用户名:密码@ip:port/cam/realmonitor?channel='+通道号+'&subtype=0&proto=Private3'

播放地址变量appVideoUrl最终拼接地址显示为：rtsp://admin:123456@111.199.16.162:80/cam/realmonitor?channel=10&subtype=0&proto=Private3

  <video id="appVideoElement" style="width:100%;height:190px;" controls :src="appVideoUrl">
  </video>

uniap中H5端播放视频

H5平台：支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。

一般h5端flv格式的是使用flv.js库进行处理后播放。

如果uniapp项目下，想在h5端想播放大华视频返回的rtsp视频流，我这里实验是如下实现： Dom中先创建一个容器，添加id:

const getVideo = () => {
  let canvasContainer = document.querySelector(`#canvas-wrapper${props.chanelNum}`)  //这里获取dom中对应的id
  let canvasDom = document.createElement('canvas')
  canvasDom.style.width = '386px';  // 显示尺寸
  canvasDom.style.height = '190px'; // 显示尺寸
  canvasContainer.appendChild(canvasDom)

  const videoDom = document.getElementById('videoElement'+ props.chanelNum);
   let options = {
    wsURL: 'ws://' + ip.value + ':' + port.value + '/rtspoverwebsocket',
    rtspURL:
      'rtsp://' + ip.value + ':' + port.value + `/cam/realmonitor?channel=${props.chanelNum}&subtype=0&proto=Private3`,
    username: username.value,
    password: password.value,
    lessRateCanvas:true,
    isPrivateProtocol: false,
    realm: RPC.realm, //设备登录返回的realm
    h265AccelerationEnabled: true, // 硬解码是否开启，默认不开启
  };
 
 state.player = new PlayerControl(options);
 state.player.on('WorkerReady',  () =>{    state.player.connect();
  })
  state.player.on('DecodeStart', (rs)=>{
   curDecodeMode.value=rs.decodeMode;
  });
  state.player.on('error', (rs)=>{
    console.log(rs,"error")
  });
  state.player.init(canvasDom, videoDom);

};