Si desea reproducir una transmisión de video rtsp en tiempo real en la web: será necesario utilizar la transcodificación de fondo para impulsar la transmisión.
lograr
Usando nodo.js
Implementé la función de transcodificación y transmisión, la empaqueté en rtsp2web y la publiqué en npm.
rtsp2web es una dependencia de ffmpeg
, una herramienta inteligente que puede transcodificar la transmisión de video rtsp entrante en datos de imagen en tiempo real y enviarla al front-end a través de ws.
La página de inicio puede implementar fácilmente la reproducción con la ayuda de jsmpeg.js ~
Y rtsp2web también tiene las siguientes características:
Simultaneidad, admite la reproducción de varios vídeos al mismo tiempo.
Al fusionar la misma fuente y reproducir varias fuentes del mismo vídeo rtsp al mismo tiempo, solo se creará un proceso de transcodificación y transmisión.
, no se crearán varios.
Libere recursos de manera inteligente, detecte de manera inteligente procesos de transcodificación y transmisión que no están en uso actualmente, ciérrelos y libere recursos de la computadora.
cómo utilizar
Usar rtsp2web es simple, sólo necesitas:
preparar ffmpeg
Primero, debes asegurarte de que ffmpeg esté instalado en tu computadora. He subido el ffmpeg usado en mi computadora con Windows de 64 bits a la biblioteca de recursos. Si no está en su computadora, puede hacer clic para descargarlo y descomprimirlo para instalarlo. (Puedes encontrarme si no lo sabes)
Después de que la instalación sea exitosa, vuelva a abrir una terminal de línea de comando e ingrese: ffmpeg -h
, si puede generar información relacionada con ffmpeg, demuestra que su computadora ha instalado ffmpeg correctamente.
Ejecute rtsp2web
Cree un directorio vacío (el nombre del directorio no puede ser rtsp2web) Después de ingresar al directorio, ejecute los siguientes comandos en secuencia:
npm init --yes
npm i rtsp2webCreado index.jscon el siguiente contenido:
// index.js
const RTSP2web = require('rtsp2web')
// 服务端长连接占据的端口号；端口号可以自定义
const port = 9999
new RTSP2web({
port
})
Ejecute el comando: node index.jseso es todo.
En este punto, su servicio de transcodificación de video ya se está ejecutando.
código de interfaz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
<script src="https://jsmpeg.com/jsmpeg.min.js
Ya sea que lo use de forma nativa htmlo en un marco, es muy sencillo de operar.
1. Primero debes htmlpresentar jsmpeg.jso jsmpeg.min.js;
2. Cree un canvascontenedor para reproducir videos;
3. Cree una instancia de reproducción de fuente de video:
var rtsp = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
// 将rtsp视频流地址进行btoa处理一下
new JSMpeg.Player("ws://localhost:9999/rtsp?url="+btoa(rtsp), {
canvas: document.getElementById("canvas")
})
El primer parámetro de JSMpeg.Player es el enlace de transcodificación empalmado 'ws://localhost:9999/rtsp?url=' + btoa(rtsp); el segundo parámetro es un objeto y el atributo del objeto contiene lienzo.