网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)
网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于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 ,然后确认键运行
![网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图](http://www.xu0.com/wp-content/uploads/2024/06/1718567187-9b738bab6a0a920.png "网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图")
运行如下图，加-o可以不转码降低cpu负载，可以不加。
![网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图(1)](http://www.xu0.com/wp-content/uploads/2024/06/1718567189-2469114e733b013.png "网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图(1)")
2.服务器预览和介绍
![网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图(2)](http://www.xu0.com/wp-content/uploads/2024/06/1718567190-f0b041b39d0884e.png "网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图(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)
<html>
<head>
<script src="adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<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" />
</body>
</html>
3.2 画面转显
<html>
<head>
<script src="adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<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" />
</body>
</html>
运行显示：
![网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图(3)](http://www.xu0.com/wp-content/uploads/2024/06/1718567195-5a2a5db37da2dcc.png "网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图(3)")
4.整合示例
本次以在html上整合示例，也可以其他任意方式整合嵌入，比如springboot整合webrtc-streamer。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="play1.html" style="width:600px;height: 700px;"></iframe>
<iframe src="PLAY1 (2).html" style="width:600px;height: 700px;"></iframe>
</body>
</html>
其中的”play1.html”和”PLAY1 (2).html”均为画面转显，一个是海康MVS界面，一个是笔记本自带摄像头画面，效果如下：
![网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图(4)](http://www.xu0.com/wp-content/uploads/2024/06/1718567197-368bb8839765670.png "网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图(4)")
项目需要引入的js：webrtcstreamer.js、adapter.min.js、jquery-1.7.1.min.js。如下图
![网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图(5)](http://www.xu0.com/wp-content/uploads/2024/06/1718567199-ded923fdefe396a.png "网页嵌入本地设备[摄像头/屏幕/网页等]的实时画面或网络摄像头的实时画面——视频流转码(基于webrtc)插图(5)")
