JSWebrtc encapsule simplement le Webrtc du navigateur et prend en charge la lecture des flux SRS RTC.
Code HTML:
Le lecteur JSWeb peut être créé via HTML, ajoutez simplement le style CSS jswebrtc à l'élément spécifié :
<!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>
Il existe une autre manière d'écrire :
Appelé en JavaScript, le constructeur JSWebrtc.Player() est créé :
<!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>Adresse du gîte : https://toscode.gitee.com/kernelj/jswebrtc#%E7%94%A8%E6%B3%95
1. Démarrez SRS
Commande : ./objs/srs -c conf/rtc.conf (à exécuter sous le chemin srs/trunk)
Entrez dans le navigateur : http://192.168.15.17:8080/players/rtc_player.html (l'IP précédente est votre propre IP)
Normalement ça devrait ressembler à ça :
Voici encore l'image;
2 Ouvrez l'outil de streaming obs
(1) Cliquez sur "Paramètres" dans le coin inférieur droit
(2) Cliquez sur "Push Stream" dans la colonne de gauche
(3) Changer le service en personnalisé
Changez le serveur en rtmp://192.168.15.17/live/ (changez l'adresse IP par la vôtre)
Changer la clé de diffusion en diffusion en direct
(4) Cliquez sur OK
(5) Cliquez sur le signe plus dans Sources dans la barre inférieure
(6) Cliquez sur le périphérique de capture vidéo (vous pouvez cliquer sur la fenêtre pour capturer sans caméra)
(7) Cliquez sur OK (nouvelle étape)
(8) Ensuite, vous pouvez choisir la caméra, ici vous pouvez voir que j'utilise l'équipement Haikang
(9) Cliquez à nouveau sur OK. Si c'est normal à ce moment, un écran devrait s'afficher dessus, par exemple comme celui-ci
(10) Cliquez sur "Démarrer le streaming" à droite. Si le taux d'utilisation du processeur s'affiche en dessous, c'est bon.
Revenons maintenant à notre page SRS, entrez ce qui suit dans la barre d'adresse URL :
webrtc://192.168.15.17/live/livestream
Cliquez sur "Lire la vidéo" et un écran apparaîtra
Il n'y a pas de problème avec le test, copiez simplement cette adresse URL en html
L'écran peut s'afficher normalement, problème de bois !
Le délai de test est d'environ 1 seconde et les performances en temps réel sont toujours bonnes, ce qui est presque identique à rtmp.
Instruit par le Grand Dieu: Ce que je veux expliquer ici, c'est que bien que srs fournisse la conversion du protocole webrtc, webrtc est basé sur udp, et la perte de paquets udp peut être trop grave, et srs ne l'a pas bien géré, donc s'il y a une animation sur l'écran, c'est essentiellement un lieu d'animation Il y aura des écrans fleuris !!
Il y a un petit trou ici. Je voulais à l'origine utiliser ffmpeg pour pousser le flux, mais j'ai essayé plusieurs fois sans succès. Il y a des maîtres qui ont utilisé avec succès ffmpeg. Bienvenue pour me donner des conseils, hahaha !