Web 播放 RTSP(Webrtc方案)

Web 播放 RTSP(Webrtc方案)

需求背景

项目需要在 web 上播放海康摄像头，这个在各种智慧类应用上应该是常见需求，在前几年的时候也有这个需求，当时候通过旧版本谷歌浏览器可以直接播放 rtmp 解决了题目；现在谷歌浏览器已经不再支持，项目上又有这个需求，筹划好好处置惩罚下。大概需求内容项目有多个车，每个车有多个摄像头，web对这些摄像头进行管理呈现。
Web 播放视频流方案

web 播放视频流有多种方案有 HLS、flv、webrtc 等等，我们这里选用 webrtc 方案，webrtc 播放视频是网页原生支持的音视频通信技术，对比其他其他方案有低时延等长处
Webrtc 实践

• 海康摄像头推送 rtsp 流，web 播放 webrtc，搜索 rtsp 转 webrtc 发现开源项目 https://github.com/deepch/RTSPtoWebRTC，golang 编写，参照项目说明，项目跑起来很简单，代码仓库拉下来运行就行了，RTSPtoWebRTC 项目自带 http 署理了简单 web 页面
  
• 按照项目说明将 config 修改为本地海康摄像头地址，重新运行验证，摄像头就播放出来了
  
  
  
  
  
  
  
• 自身项目为前后端分离，开始迁移该项目标 webrtc 代码到自己的项目中，编写一个 Webrtc 组件
  

1. export function WebRtcPlayer(props: { suuid: string, url: string }) {
2.     let ref = useRef<HTMLVideoElement>();
3.     useEffect(() => {
4.         let { suuid, url } = props;
6.         let stream = new MediaStream();
7.         const pc = new RTCPeerConnection();
8.         pc.onnegotiationneeded = async () => {
9.             let offer = await pc.createOffer();
10.             await pc.setLocalDescription(offer);
11.             let formData = new FormData();
12.             formData.append('suuid', suuid);
13.             formData.append('data', btoa(pc.localDescription.sdp));
15.             fetch(`${APP_CONFIG.rtc}/stream/receiver/` + suuid, {
16.                 method: "POST",
17.                 body: formData
18.             }).then(resp => {
19.                 return resp.text()
20.             }).then(data => {
21.                 try {
22.                     pc.setRemoteDescription(new RTCSessionDescription({
23.                         type: 'answer',
24.                         sdp: atob(data)
25.                     }))
26.                 } catch (e) {
27.                     console.warn(e);
28.                 }
29.             })
30.         };
32.         pc.ontrack = function (event) {
33.             stream.addTrack(event.track);
34.             ref.current.srcObject = stream;
35.             log(event.streams.length + ' track is delivered')
36.         }
38.         pc.oniceconnectionstatechange = e => log(pc.iceConnectionState)
40.         let log = msg => {
41.             // document.getElementById('div').innerHTML += msg + '<br>'
42.         }
44.         //新增加的http接口
45.         let formData = new FormData();
46.         formData.append('suuid', suuid);
47.         formData.append('url', url);
48.         fetch(`${APP_CONFIG.rtc}/codec`, {
49.             method: "POST",
50.             body: formData
51.         })
52.             .then(resp => resp.json())
53.             .then(data => {
54.                 (data as any[]).forEach(el => {
55.                     pc.addTransceiver(el.Type, {
56.                         'direction': 'sendrecv'
57.                     })
58.                 })
59.                 pc.setRemoteDescription(new RTCSessionDescription({
60.                     type: 'answer',
61.                     sdp: atob(data)
62.                 }))
63.             }).catch(e => {
64.                 console.warn(e);
65.             })
67.         //demo中使用的接口
68.         // fetch("http://127.0.0.1:8083/stream/codec/" + suuid)
69.         //     .then(resp => resp.json())
70.         //     .then(data => {
71.         //         (data as any[]).forEach(el => {
72.         //             pc.addTransceiver(el.Type, {
73.         //                 'direction': 'sendrecv'
74.         //             })
75.         //         })
76.         //         pc.setRemoteDescription(new RTCSessionDescription({
77.         //             type: 'answer',
78.         //             sdp: atob(data)
79.         //         }))
80.         //     }).catch(e => {
81.         //         console.warn(e);
82.         //     })
83.     }, [])
84.     return <video ref={ref} style={{ width: "600px" }} autoPlay muted controls />
85. }

复制代码

其中 fetch(${APP_CONFIG.rtc}/stream/receiver/ + suuid 和 fetch(http://127.0.0.1:8083/stream/codec/ + suuid) 是项目 demo 中利用到的接口，项目跑起，可以在项目里看到摄像头，开端完成。

• 观察项目代码，发现：
  
  
  
  • config 配置了 rtsp 流地址信息，on_demand 便是否是未哀求也处置惩罚 rtsp
    
  • http 接口用于信令互换（/stream/codec/ 用于查询配置返回 codec 信息，/stream/receiver/ 用于发起一个协程  go RTSPWorkerLoop）
    
  
  
• 我的项目是内网情况且 rtsp 需要预先设置好改动就要重启有点麻烦，于是做出修改：
  
  
  
  • config 修改配置 on_demand 为 false，网页未哀求则不处置惩罚 rtsp，满足大量 rtsp 配置选播放
    
  • 去掉 ice 配置，ice 配置是一个公网情况用的，内网没有
    
  • 新增 http 接口动态传入设备的摄像头配置，传递参数 key 和 rtsp 地址，假如 key 在配置里不存在则写入 config，其他和 /stream/codec/ 代码一致
    
  
  

完成修改后运行项目播放 ok，断网播放 ok，本地服务器 docker 摆设再次测试发现没法播放，毗连断了 WritePacket WebRTC Client Offline，

• 搜索题目，发现项目 issue：https://github.com/deepch/RTSPtoWebRTC/issues/183，修改 docker 配置 network:"host"解决题目，再次测试播放 ok
  

• 项目摆设 RTSPtoWebRTC 能播通信链路 ok，基本可以在项目上利用，固然项目 RTSPtoWebRTC 自己是 demo 型，一些细节未处置惩罚，比如 /stream/codec/ 接口内部在 coGe(suuid string) []av.CodecData 方法里直接 100 次循环，但是并未完成视频的期待，导致在后续流程 sps()会报错 index out of range，这个可以修改期待代码解决
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。