前端使用jswebrtc实现视频流播放

JSWebrtc对浏览器的Webrtc做了简单的封装,支持SRS的RTC流的播放.

html代码:

JSWeb播放器可以通过HTML创建,只需给指定元素添加CSS样式 jswebrtc即可:

<!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>

还有另一种写法:

在JavaScript中调用,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>

gitee地址:https://toscode.gitee.com/kernelj/jswebrtc#%E7%94%A8%E6%B3%95

1.启动srs

命令: ./objs/srs -c conf/rtc.conf (要在srs/trunk路径下执行)

在浏览器输入:http://192.168.15.17:8080/players/rtc_player.html(前面的IP是你自己的ip)

正常的话应该是这样的: