当前位置：首页 > article >正文

cesium 融合视频

article 2024/11/13 12:56:55

0 如果是文件，那相当的简单

和untiy 一样，可以添加材质后，将image 直接给材质赋值上，其中abcd 是四个点，这四个点要经过计算

<video id="video" style="display:none" controls loop autoplay>
	<source src="/static/video/zm.mp4" type="video/mp4">
</video>
//这个和unity 添加材质一样相当的简单
// 添加监控画面
    var videoEl = document.getElementById('video')
    var pArr = [a,b,c,d];
    var instance =new Cesium.GeometryInstance({
                  geometry:new Cesium.WallGeometry({
                    positions:Cesium.Cartesian3.fromDegreesArrayHeights(pArr),
                    minimumHeights:[100,100],
                  })
                });
                var material = Cesium.Material.fromType("Image");
                material.uniforms.image = videoEl;
                
                var tileset = viewer.scene.primitives.add(new Cesium.Primitive({
                  id:'video',
                  geometryInstances:instance,
                  appearance: new Cesium.MaterialAppearance({
                    closed:false,
                    material:material,
                  }),
                  show:false,
                }))

1 使用ffmepg nodejs 来转码

方案主要可基于ffmpeg的转码，使用 flv.js的 RTSP 播放方案（flv.js 是 Bilibili 开源的一款 HTML5 浏览器。依赖于 Media Source Extension 进行视频播放，视频通过 HTTP-FLV 或 WebSocket-FLV 协议传输，视频格式需要为 FLV 格式）。在视频融合的案例里面，一定要选择多路的websocket方案，因为http协议最多提供6路链接。

服务器端可以采用 express + express-ws 来进行编写， HTTP 请求发送到指定的地址时，启动 ffmpeg 串流程序，将 RTSP 流封装成 FLV 格式的视频流，推送到指定的 WebSocket 响应流中。

let app = express();
app.use(express.static(__dirname));
expressWebSocket(app, null, {
    perMessageDeflate: true
});
app.ws("/rtsp", rtspRequestHandle)
app.listen(8888);

// 处理方法
function rtspRequestHandle(ws, req) {
    const stream = webSocketStream(ws, {
        binary: true,
        browserBufferTimeout: 1000000
    }, {
        browserBufferTimeout: 1000000
    });
    let url = req.query.url;

    try {
        ffmpeg(url)
            .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400")
            .on("start", function () {
                console.log(url, "Stream started.");
            })
            .on("codecData", function () {
                console.log(url, "Stream codecData.")
            })
            .on("error", function (err) {
                console.log(url, "An error occured: ", err.message);
            })
            .on("end", function () {
                console.log(url, "Stream end!");
            })
            .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
    } catch (error) {
        console.log(error);
    }
}

2 浏览器端采用flv.js进行播放：

这一部分在我的其他文章里可以看到

<video id="player" width="480" controls autoplay></video>
if (flvjs.isSupported()) {
    let video = document.getElementById("player");
    if (video) {
      this.player = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        url: `ws://localhost:8888/rtsp?url=rtsp://127.0.0.1:8555/demo`
      });
      this.player.attachMediaElement(video);
      this.player.load();
      this.player.play();
    }
}

方法改进

使用ffmpeg 来转码的方案并不专业，路数也有限，我公司提供真正专业的流媒体转码服务器

viewer.entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([......])),
    classificationType: Cesium.ClassificationType.BOTH,
    material: video
  }
});