JSWebrtc simplemente encapsula el Webrtc del navegador y admite la reproducción de flujos SRS RTC.
código HTML:
El reproductor JSWeb se puede crear a través de HTML, simplemente agregue el estilo CSS jswebrtc al elemento especificado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebRTCPlayer</title>
<style type="text/css">
html, body {
background-color: #111;
text-align: center;
}
</style>
</head>
<body>
<div class="jswebrtc" data-url="webrtc://192.168.15.17/live/livestream"></div>
<script type="text/javascript" src="jswebrtc.min.js"></script>
</body>
</html>
Hay otra forma de escribir:
Llamado en JavaScript, se crea el constructor JSWebrtc.Player():
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webrtc 视频播放</title>
</head>
<body>
<video id="video_webrtc" controls></video>
<script type="text/javascript" src="./jswebrtc.min.js"></script>
<script type="text/javascript">
var video = document.getElementById('video_webrtc');
var url = 'webrtc://----';
var option={
video: video,
autoplay: true
}
var player = new JSWebrtc.Player(url,option);
</script>
</body>
</html>dirección de alojamiento : https://toscode.gitee.com/kernelj/jswebrtc#%E7%94%A8%E6%B3%95
1. Inicio srs
Comando: ./objs/srs -c conf/rtc.conf (para ser ejecutado bajo la ruta srs/trunk)
Entrar en el navegador: http://192.168.15.17:8080/players/rtc_player.html (la IP anterior es tu propia IP)
Normalmente debería verse así:
Aquí está la imagen todavía;
2 Abra la herramienta de transmisión obs
(1) Haga clic en "Configuración" en la esquina inferior derecha
(2) Haga clic en "Push Stream" en la columna de la izquierda
(3) Cambiar servicio a personalizado
Cambia el servidor a rtmp://192.168.15.17/live/ (cambia la ip a la tuya)
Cambiar la clave de transmisión a transmisión en vivo
(4) Haga clic en Aceptar
(5) Haga clic en el signo más en Fuentes en la barra inferior
(6) Haga clic en el dispositivo de captura de video (puede hacer clic en la ventana para capturar sin cámara)
(7) Haga clic en Aceptar (nuevo paso)
(8) Luego puede elegir la cámara, aquí puede ver que estoy usando un equipo Haikang
(9) Vuelva a hacer clic en Aceptar. Si es normal en este momento, debería mostrarse una pantalla, por ejemplo, como esta
(10) Haga clic en "Iniciar transmisión" a la derecha. Si la tasa de uso de la CPU se muestra a continuación, está bien.
Ahora de regreso a nuestra página SRS, ingrese lo siguiente en la barra de direcciones URL:
webrtc://192.168.15.17/live/livestream
Haga clic en "Reproducir video" y aparecerá una pantalla
No hay problema con la prueba, simplemente copie esta dirección URL en html
La pantalla se puede mostrar normalmente, ¡el problema de la madera!
El retraso de la prueba es de aproximadamente 1 segundo y el rendimiento en tiempo real sigue siendo bueno, que es casi lo mismo que rtmp.
Instruido por el Gran Dios: Lo que quiero explicar aquí es que aunque srs proporciona conversión de protocolo webrtc, webrtc se basa en udp, y la pérdida de paquetes udp puede ser demasiado grave, y srs no lo ha manejado bien, así que si hay animación en la pantalla, es básicamente un lugar de animación ¡¡Habrá pantallas de flores!!
Hay un pequeño hoyo aquí. Originalmente quería usar ffmpeg para impulsar la transmisión, pero lo intenté varias veces sin éxito. Hay algunos maestros que han usado ffmpeg con éxito. ¡Bienvenidos a darme consejos, jajaja!