Вывести webRTC видео в HTML5

Question

Хочу вывести поток с камер на веб страничку. Поток с камер по протоколу rtsp. Запустил сервер RTSPtoWEB (https://github.com/deepch/RTSPtoWeb). Он преобразует rtsp в http (webRTC в частности). Если зайти на сервер RTSPtoWEB (http://localhost:8083/) то можно посмотреть, что видео отображается корректно.

Вопрос: как мне с помощью HTML и JS взять webRTC поток и вывести его на страницу? Если существует какой-то готовый плеер будет отлично. Если нет, то какой вообще принцип работы? Что читать? В какую сторону смотреть?

Answer 1

Если кто столкнётся с таким же вопросом, я решил так:

HTML

<div class="container-fluid">
  <div class="row mt-5">
    <div class="col-6">
      <input
        type="hidden"
        name="webrtc-url"
        id="webrtc-url"
        value="http://127.0.0.1:8083/stream/camera_1/channel/0/webrtc"
      />
      <video class="w-100" id="webrtc-video" autoplay muted playsinline></video>
    </div>
  </div>
</div>

JavaScript

created() {
let webrtc;
let webrtcSendChannel;
function startPlay() {
  let videoEl = document.getElementById("webrtc-video");

  webrtc = new RTCPeerConnection();
  webrtc.onnegotiationneeded = handleNegotiationNeeded;
  webrtc.ontrack = function (event) {
    console.log(event.streams.length + " track is delivered");
    videoEl.srcObject = event.streams[0];
    videoEl.play();
  };
  webrtc.addTransceiver("video", {
    direction: "sendrecv",
  });
  webrtcSendChannel = webrtc.createDataChannel("sendchannel");
  // webrtc.addTransceiver('video', {
  //   'direction': 'sendrecv'
  // });
  webrtcSendChannel.onclose = () => {
    startPlay();
    console.log("sendChannel has closed");
  };
  webrtcSendChannel.onopen = () => {
    console.log("sendChannel has opened");
    webrtcSendChannel.send("ping");
    setInterval(() => {
      webrtcSendChannel.send("ping");
    }, 1000);
  };

  webrtcSendChannel.onmessage = (e) => console.log(e.data);
}

async function handleNegotiationNeeded() {
  let url = document.querySelector("#webrtc-url").value;
  let offer = await webrtc.createOffer();

  await webrtc.setLocalDescription(offer);

  fetch(url, {
    method: "POST",
    body: new URLSearchParams({
      data: btoa(webrtc.localDescription.sdp),
    }),
  })
    .then((response) => response.text())
    .then((data) => {
      try {
        // console.log(data);
        webrtc.setRemoteDescription(
          new RTCSessionDescription({
            type: "answer",
            sdp: atob(data),
          })
        );
      } catch (e) {
        console.warn(e);
      }
    });
}

document.addEventListener("DOMContentLoaded", function () {
  let videoEl = document.getElementById("webrtc-video");

  videoEl.addEventListener("loadeddata", () => {
    console.log("loadData");
    videoEl.play();
  });

  videoEl.addEventListener("error", (e) => {
    console.log("video_error", e);
  });
  startPlay();
});
}

Answer 2

для вывода rtsp можно использовать hls-js и ffmpeg + хабр

<!DOCTYPE html>
<html>
<head>
<title>rtsp</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video" width="400" height="300" title="ABC" controls autoplay muted></video>
<script>
  var video = document.getElementById('video');
  var videoSrc = './index.m3u8';
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
  }
</script>
</body>
</html>

.sh для создания m3u8:

ffmpeg -rtsp_transport tcp -i rtsp://LOGIN:PASS@IP:554 -ar 44100 -acodec aac -ac 1 -strict -2 -crf 18 -c:v copy -preset ultrafast -flags -global_header -fflags flush_packets -tune zerolatency -hls_time 5 -hls_list_size 2 -hls_wrap 2 -hls_delete_threshold 2 -hls_flags delete_segments -start_number 0 /var/www/html/rtsp/index.m3u8 > /dev/null 2>&1 < /dev/null

БЛОГ НА HUSL

Вывести webRTC видео в HTML5

Ответы (2 шт):