网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)
追梦赤子心_LiMing 2024-07-25 10:33:02 阅读 50
网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)
一、介绍
获取本地设备[摄像头/屏幕/网页等]的画面，或者网络摄像头的推流地址。将这些画面通过webrtc服务器进行访问，将目标设备的视频流播放用html文件体现。后续web开发时，嵌入html文件(可多个)即可。
本地设备和webrtc运行在同一局域网，部署webrtc服务时如果使用内网穿透地址运行，可以使用外网访问。
二、操作步骤
1. 下载部署
下载地址： https://github.com/mpromonet/webrtc-streamer/releases
下载相应系统的Release版本，本教程使用window示例，下载了webrtc-streamer-v0.8.5-dirty-Windows-AMD64-Release.tar.gz
解压后如下图，在当前目录输入命令webrtc-streamer.exe -H IP地址:8000 -o ,然后确认键运行
运行如下图，加-o可以不转码降低cpu负载，可以不加。
2.服务器预览和介绍
在浏览器输入运行时填入的 IP地址:8000 进入该页面，上面标签显示的它当前获取到的硬件，带画面的都有包括浏览器、软件界面、笔记本摄像头等，软件需要打开不能最小化才会被检索到。点击选中标签，变绿被选中的标签会在下方显示。
3.html制作
下面是两个基本示例，使用时把WebRtcStreamer(“video”,“http://192.168.35.21:8000”);里面的换成填入的 IP地址:8000。把webRtcServer.connect(“rtsp://用户名:密码@192.168.35.199:554/media/video1”);括号内换成目标地址。
3.1 网络摄像头(rtsp)
<code><html>
<head>
<script src="adapter.min.js" ></script>code>
<script src="webrtcstreamer.js" ></script>code>
<script>
var webRtcServer= null;
window.onload= function() {
webRtcServer= new WebRtcStreamer("video","http://192.168.35.21:8000");
webRtcServer.connect("rtsp://用户名:密码@192.168.35.199:554/media/video1");
}
window.onbeforeunload = function() {
webRtcServer.disconnect();
}
</script>
</head>
<h2>高清</h2>
<body>
<video id="video" width="500px" height="600px" />code>
</body>
</html>
3.2 画面转显
<html>
<head>
<script src="adapter.min.js" ></script>code>
<script src="webrtcstreamer.js" ></script>code>
<script>
var webRtcServer= null;
window.onload= function() {
webRtcServer= new WebRtcStreamer("video","http://192.168.35.21:8000");
webRtcServer.connect("window://MVS");
}
window.onbeforeunload = function() {
webRtcServer.disconnect();
}
</script>
</head>
<h2>高清</h2>
<body>
<video id="video" width="500px" height="600px" />code>
</body>
</html>
运行显示：
4.整合示例
本次以在html上整合示例，也可以其他任意方式整合嵌入，比如springboot整合webrtc-streamer。
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<title>Title</title>
</head>
<body>
<iframe src="play1.html" style="width:600px;height: 700px;"></iframe>code>
<iframe src="PLAY1 (2).html" style="width:600px;height: 700px;"></iframe>code>
</body>
</html>
其中的"play1.html"和"PLAY1 (2).html"均为画面转显，一个是海康MVS界面，一个是笔记本自带摄像头画面，效果如下：
项目需要引入的js：webrtcstreamer.js、adapter.min.js、jquery-1.7.1.min.js。如下图
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。