LiveRTC简单使用--1. 发布一个WebRTC实时流

最新推荐文章于 2024-08-11 17:44:40 发布

【可乐爱加冰】

最新推荐文章于 2024-08-11 17:44:40 发布

阅读量741

点赞数

分类专栏： WebRTC相关

本文链接：https://blog.csdn.net/lei006/article/details/108723977

版权

WebRTC相关专栏收录该内容

4 篇文章 1 订阅

订阅专栏

由于p2p视频通讯不支持定向ip流量，所以，做了一个基于LiveRTC的sfu转发服务器和简单的web客户端

系统：Windows或linux

一. 下载并启动服务器(注册红色部分为端口) (下载地址)

二. 创建 Html页面

<html id="home" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="http://livertc.eyoujs.com/LivePeer.js"></script>
    </head>
    <body>
		<div style="width:400px; height:300px;">
			<video id="localVideo" style="width:100%; height:100%;object-fit: fill" autoplay muted></video>
		</div>
    </body>
</html>

三，加入发布代码

		let test_id = "I-is-test-id"
		async function video_push(){
			// 1.新建peer
			let livePeer = new LivePeerJS(axios,{host_url:"192.168.1.110:8088"})
			// 2.登录Sfu上线
			let ret = await livePeer.login("123456")			
			navigator.mediaDevices.getUserMedia({ video: {width: { ideal: 640 },height: { ideal: 480 },facingMode: "user"}, audio: true }).then(async (stream) => {
			  document.getElementById('localVideo').srcObject = stream
			  // 3.把流推送到Sfu
			  await livePeer.publish_webrtc(test_id,"测试视频",stream )
			})
		}
		video_push();

四，打开html页面，并允许命名用摄像头

这样我们就已经把本地摄像头，推送到了SFU服务器

完整代码:

<!DOCTYPE html>
<html id="home" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="http://livertc.eyoujs.com/LivePeer.js"></script>
    </head>
    <body>
		<div style="width:400px; height:300px;">
			<video id="localVideo" style="width:100%; height:100%;object-fit: fill" autoplay muted></video>
		</div>
    </body>
	<script>
		let test_id = "I-is-test-id"
		async function video_push(){
			// 1.新建peer
			let livePeer = new LivePeerJS(axios,{host_url:"192.168.1.110:8088"})
			// 2.登录Sfu上线
			let ret = await livePeer.login("123456")			
			navigator.mediaDevices.getUserMedia({ video: {width: { ideal: 640 },height: { ideal: 480 },facingMode: "user"}, audio: true }).then(async (stream) => {
			  document.getElementById('localVideo').srcObject = stream
			  // 3.把流推送到Sfu
			  await livePeer.publish_webrtc(test_id,"测试视频",stream )
			})
		}
		video_push();
	</script>
</html>