cesium 融合视频

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}
});