和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,
}))
方案主要可基于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);
}
}
这一部分在我的其他文章里可以看到
<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
}
});
使用媒体服务器,可以提供上百路的监控视频融合,使用c++ 语言进行编写,使用矫正,投影变换等算法进行视频的拼接融合,同时也提供unity 和 UE 的视频融合插件,以及融合以后进行视频算法分析。