를 기반으로 한 WebRTC 음성 및 화상 통화

WebRTC에 (웹 실시간 통신)

• 의 WebRTC (웹 실시간 통신) 비디오 스트리밍을위한 브라우저 사이의 연결 지점을 (피어 투 피어) 설정, 중간의 도움없이, 네트워크 응용 프로그램이나 사이트를 허용하는 실시간 통신 기술이다 및 (또는), 오디오 스트림, 또는 다른 데이터 전송. 이 기준은 WebRTC가이 임시은 (피어 - 투 - 피어) 데이터 공유 및 회의가 가능한 호출을 만들 수있는 플러그인 또는 타사 소프트웨어를 설치하지 않고도 사용자를 할 수 있습니다.

웹 소켓

• 웹 소켓 A는 통신 프로토콜 , 단일 수 있습니다 TCP 연결을위한 전이중 통신을. 바이 2011 년 웹 소켓 프로토콜 IETF는 표준화 된 RFC 6455 후, RFC 7936 추가 사양. 웹 IDL는 바이에서 WebSocket API 인 W3C의 표준화.

  웹 소켓 서버가 적극적으로 클라이언트에 데이터를 밀어 수 있도록 클라이언트와 쉽게 서버 사이의 데이터 교환을 가능하게한다. 웹 소켓 API에서 브라우저와 서버는 악수를 완료하는 데 필요한, 두, 양방향 데이터 전송 사이에 영구 연결을 만들 수 있습니다.

기본 구성

• 웹 소켓 구성 지원은 주입 유의해야 포함 @Autowired

  • 를 초기화는, 봄의 서비스 객체가 null는 아니고,이 시간을 주입 할 프로젝트의 시작 웹 소켓 @Autowired

  • 그러나, 스프링 기본 관리 싱글은 서비스, 새로운 사용자가 채팅을 입력 할 때, 시스템은 새로운 객체가 웹 소켓 서비스를 주입하지 않고, @Autowired가 널 오류가 이번에 새로운 웹 소켓 오브젝트 생성을 주입 할

  • 해결 방법 : stataic || 스프링을 사용하여 수정은 웹 소켓 구현을 제공

  • /**
     * 开启WebSocket支持
     * 
     * @author wangJiaLun
     * @date 2019-06-19
     **/
    @Configuration
    public class WebSocketConfig extends ServerEndpointConfig.Configurator{
    
        @Bean
        public ServerEndpointExporter serverEndpointExporter() {
            return new ServerEndpointExporter();
        }
    
    }
    

• 웹 소켓 접속 경로를 구성하고, 주요 방법을 설명

  • @Component
    @ServerEndpoint(value = "/websocket/chat",configurator = WebSocketConfig.class)
    public class WebsocketServer {
         /**
         *  连接建立成功调用的方法
         *  判断接受人与当前登录人是否已经拥有房间，无则创建
         *  输出历史消息
         * @param session 会话
         */
        @OnOpen
        public void onOpen(Session session) {
        }
         /**
         *  收到客户端消息后调用的方法
         * @param message 客户端发送过来的消息
         * @param session 会话
         */
        @OnMessage
        public void onMessage(String message, Session session) {
        }
         /**
         * 当关闭浏览器后,则删除session记录和对话准备
         */
        @OnClose
        public void onClose(Session session) {
        }
      	/**
         * 当发生异常错误调用的方法
         * @param session 会话
         * @param error 异常信息
         */
        @OnError
        public void onError(Session session, Throwable error) {
        }
    }
    
    

• 연결 웹 소켓 만들기

  • ws = new WebSocket("ws://192.168.3.102:8070/websocket/chat");
    

• 빌드 WebRTC에 시그널링

  • 인스턴스의 PeerConnection 만들기

    • var PeerConnection = (window.PeerConnection || window.webkitPeerConnection00 || window.webkitRTCPeerConnection || window.mozRTCPeerConnection);
      

  ​

이전과 신호의 상호 작용 과정을 전달 후

• 시작 연결

  • 전단 과정에서 생성 후 webcket으로 onOpen 즉시 접속 성공 데이터를 전송할

  • this.ws = new WebSocket("ws://192.168.3.102:8070/websocket/chat");
    let self = this;
    this.ws.onopen = function(ev) {
      self.ws.sendJson({
        messageHistoryVO: {
          senderId: ,
          recipientId: 
        },
        messageTypeEnum: "CONNECTION_SUCCESS"
      });
    };
    

  • 후단의 선단이 단계없이 실시 될 수 데이터를 전송할 필요가없는 경우 @OnMessage 메소드 후단을 발사

  • 그 과정에서 직접 비즈니스 로직을 완료 @OnOpen

  • 모든 분석 데이터의 첫 번째

  • MessageStruct messageStruct = new MessageStruct();
    try {
        messageStruct = JSON.parseObject(message,MessageStruct.class);
    }catch (Exception e){
        e.printStackTrace();
    }
    MessageContent messageContent = new MessageContent();
    

  • 전송 메시지 유형의 프론트 엔드의 다른 단계를 수행

  • switch (messageStruct.getMessageTypeEnum()){
        case CONNECTION_SUCCESS:
            messageContent.setMessageState(new ConnectionSuccessMessageState());
            break;
        case SINGLE_CHAT_TEXT:
            messageContent.setMessageState(new SingleChatMessageState());
            break;
        case INITIATE_SINGLE_CHAT_AUDIO_VIDEO:
            messageContent.setMessageState(new InitiateSingleChatAudioVideoMessageState());
            break;
        case ACCEPT_SINGLE_CHAT_AUDIO_VIDEO:
            messageContent.setMessageState(new AcceptSingleChatAudioVideoMessageState());
            break;
        case SINGLE_SENDER_SIGNALING:
            messageContent.setMessageState(new SingleSenderSignalingState());
            break;
        case CONNECTION_CLOSE:
            messageContent.setMessageState(new ConnetionCloseState());
            break;
        default:
            ;
    }
    messageContent.doOperation(messageStruct.getMessageHistoryVO(), session);
    

• 오디오 및 비디오 상호 작용 과정