播放webRTC直播流

一、信令服务器

 

 二、webrtc创建会话的三种方法

1.通过本地网络直接连接

2.通过公共IP地址internet直接连接 

3、通过webrtc turn服务器路由连接媒体

 三、连接的三种方案

 

 

 四、流程

五、具体实现

express搭建服务器，socket.io来生成socketid，nodemon来实现热更新 cors实现跨域

首先实现客户端到服务器之间的socket连接

 创建存储的状态

获取本地视频流

通过ref将获得的视频流进行绑定，绑定到容器上，srcObject添加视频原

mediadevices.getUserMedia

//引入simple-peer
import Peer from 'simple-peer';
//引入socket.io连接器
import io from 'socket.io-client'

//客户端的socket连接
const socket = io.connect('http://localhost:5001')
function App(){
    //创建存储的状态
   const myVideo = useRef()
   //获取数据流
   navigator.mediaDevices.getUserMedia({video:true,audio:true}).then(stream=>{
    console.log(stream)
    myVideo.current.srcObject = stream
   })
    return(
    //视频容器
    <div className='video'>
        <video ref={myVideo}></video>
    </div>)
}

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling