I'm in need of help with the following problem:
I have camera monitoring and I want to make it available to some users, but I want them to see only one at a time so I do not weigh the link too much, so I started to do the code below, but I can not make another camera take the place of which is being played the moment I click the button.
As the cameras are streaming, the only tag that worked in my tests to play the video was the embed.
Thank you.
Code:
<html>
<head>
<title>TODO</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script type="text/javascript">
function mudacamera(cam) {
if (cam == 1) {
document.getElementById("player").href = "rtsp://192.168.40.20:554/user=admin&password=171912&channel=1&stream=0.sdp";
alert("Camera selecionada: " + cam);
} // if 1
if (cam == 2) {
document.getElementById("player").target = "rtsp://192.168.40.20:554/user=admin&password=171912&channel=2&stream=0.sdp";
alert("Camera selecionada: " + cam);
} //if 2
if (cam == 3) {
document.getElementById("player").target = "rtsp://192.168.40.20:554/user=admin&password=171912&channel=3&stream=0.sdp";
alert("Camera selecionada: " + cam);
} // if 3
if (cam == 4) {
document.getElementById("player").target = "rtsp://192.168.40.20:554/user=admin&password=171912&channel=4&stream=0.sdp";
alert("Camera selecionada: " + cam);
} // if 4
}
</script>
<a href="javascript:void(0);" onclick="mudacamera(1)">Cam1</a>
<a href="javascript:mudacamera(2)">Cam2</a>
<a href="javascript:;" onclick="mudacamera(3)">Cam3</a>
<a href="javascript:;" onclick="mudacamera(4)">Cam4</a><br/>
<h1>Video</h1>
<embed type="application/x-vlc-plugin" id="player" name="video1" autoplay="yes" loop="yes" width="400" height="300"
target="rtsp://192.168.40.20:554/user=admin&password=171912&channel=1&stream=0.sdp" />
</body>
</html>