我正在尝试使用 RTSPtoWeb 应用程序 (https://github.com/deepch/RTSPtoWeb) 使用 WebRTC 在我的家庭服务器上托管的网站上查看我的安全摄像头的 RTSP 流。除了观看视频之外，我还希望能够听到安全摄像头录制的音频。
我首先改编了 https://github.com/deepch/RTSPtoWeb/blob/master/docs/examples/webrtc 中的代码。我现在已经可以成功查看相机的视频，但视频上的音量按钮呈灰色，这意味着未通过 WebRTC 接收音轨。
这是我的index.html 文件的内容：
<!doctype html>
<html>
<head>
<title>Camera Monitor</title>
</head>
<body>
<script>
// Create video
const video = document.createElement('video')
video.id = 'camera_video'
video.style = 'max-width:100%; max-height:100%'
video.muted = true
video.controls = true
// Add video to grid
document.body.appendChild(video)
// WebRTC script adapted from docs/examples/webrtc/main.js in RTSPtoWeb Github repository
// https://github.com/deepch/RTSPtoWeb/blob/master/docs/examples/webrtc/main.js
document.addEventListener('DOMContentLoaded', () => {
function startPlay (video, url) {
// Create a new WebRTC peer connection, add a transceiver, and create a data channel
const connection = new RTCPeerConnection({ sdpSemantics: 'unified-plan' })
connection.addTransceiver('video', { direction: 'recvonly' })
const channel = connection.createDataChannel('RTSPtoWeb')
// When a track is received
connection.ontrack = e => {
console.log('Received ' + e.streams.length + ' track(s)')
video.srcObject = e.streams[0]
video.play()
}
// When the session negotiation process is to be started
connection.onnegotiationneeded = async () => {
const offer = await connection.createOffer()
await connection.setLocalDescription(offer)
fetch(url, {
method: 'POST',
body: new URLSearchParams({ data: btoa(connection.localDescription.sdp) })
})
.then(response => response.text())
.then(data => {
try {
connection.setRemoteDescription(
new RTCSessionDescription({ type: 'answer', sdp: atob(data) })
)
} catch (e) {
console.warn(e)
}
})
}
// When the data channel is opened, log a message
channel.onopen = () => {
console.log(`${channel.label} data channel opened`)
}
// When the data channel is closed, log a message and recursively call startPlay() again
channel.onclose = () => {
console.log(`${channel.label} data channel closed`)
startPlay(video, url)
}
// When the data channel receives a message, log it
channel.onmessage = e => console.log(e.data)
}
const video = document.querySelector('#camera_video')
const url = 'http://<ip_address>:8083/stream/camera/channel/0/webrtc'
startPlay(video, url)
})
</script>
</body>
</html>
我尝试解决问题的方法之一是将
'video''audio'connection.addTransceiver('video', { direction: 'recvonly' })当我向代码中添加两行（一行用于音频，另一行用于视频）时，如下所示，仅播放音频。如果我颠倒两行的顺序，则仅播放视频。
connection.addTransceiver('video', { direction: 'recvonly' })
connection.addTransceiver('audio', { direction: 'recvonly' })
论坛上似乎还有另一个相关问题，但仍未得到解答：Webrtc 未同时接收视频和音频
任何帮助将不胜感激。抱歉，如果这听起来像是一个愚蠢的问题，但我对 WebRTC 非常陌生，并且在过去几天里只是在网上阅读以尝试找到此问题的解决方案。