`

WebRtc+WebSocket做直播

视频直播 
阅读更多

WebRTC是现在新兴的一种视频技术，利用浏览器，所以对浏览器的版本有要求，想学视频的小伙伴可以 观关注一下这个技术，现在这个技术在国外已经相对成熟；在国内的发展也已经逐渐跟上；

编译器Idea，

直接上代码，

首先主播的前端页面代码：

<%--
  Created by IntelliJ IDEA.
  User: Taoyongpan
  Date: 2017/10/12
  Time: 22:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>最强主播</title>
</head>
<body>
<!-- 如何使用浏览器调用设备的摄像头并且能够获取到他的数据展示出来 -->
<video src="" id="vi" autoplay style="width:640px;height:480px;"></video>
<!-- webrtc -->
<canvas id="output" style="display:none"></canvas>
<script type="text/javascript">
    var back = document.getElementById("output");
    var backContext = document.getElementById("output").getContext("2d");
    var video = document.getElementById("vi");
    var socket ;
    var interval;
    setTimeout("init()",100);
    function init(){
        //这个需要浏览器支持 建立websocket的服务
        socket = new WebSocket("ws://127.0.0.1:8080/onlineServer");
        socket.onopen=onOpen;
        socket.onclose = onClose;
    }
    function onOpen(){
        //定时传输数据到服务器
        clearInterval(interval);
        interval = setInterval(function(){draw()},50);
    }
    function onClose(){
        init();
    }
    function draw(){

        backContext.drawImage(video,0,0,back.width,back.height);
        //将视频的图像 50%的像素发送出去
        socket.send(back.toDataURL("image/jpeg",0.2));

    }
    var success = function(stream){
        document.getElementById("vi").src = window.URL.createObjectURL(stream);
    }
    //js bom模型
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    //
    navigator.getUserMedia({video:true,audio:false},success,console.log);
</script>
</body>
</html>

 

 观众的前端页面，代码如下：

 

 

<%--
  Created by IntelliJ IDEA.
  User: Taoyongpan
  Date: 2017/10/13
  Time: 17:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>主播房间</title>
</head>
<body>
<img id="recive" style="width:400px;height:330px;">
<div id="dm" style="width:400px;height:330px;position:absolute;background:rgba(0,0,0,0.3);color:white;top:0px;left:0px;overflow:auto;"></div>
<input type="text" id="msg">
<button onclick="sendMsg()">发送消息</button>
<script type="text/javascript">
    var recive_socket = new WebSocket("ws://127.0.0.1:8080/onlineServer");
    var image = document.getElementById("recive");
    recive_socket.onmessage = function(info){
        image.src = info.data;
    }
    function $(id){
        return document.getElementById(id);
    }
    var msg_socket = new WebSocket("ws://127.0.0.1:8080/chat");
    msg_socket.onmessage = function(data){
        document.getElementById("dm").innerHTML+="&nbsp;"+data.data;
    }
    function sendMsg(){
        var msg = document.getElementById("msg").value;
        msg_socket.send(msg);
    }
</script>
</body>
</html>

 直播的 servlet对应的代码：

package web;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Vector;

/**
 * Created by Taoyongpan on 2017/10/13.
 */
//指定一个URI客户端可以通过这个URI来连接到我们的webSocket 类似servletmapping
@ServerEndpoint("/onlineServer")
public class VideoServlet {
    //当一个客户端访问onlineServer连接的时候，创建一个OnlineServer的实例
    private Session session;//当前的会话对象 通过session 服务器可以向客户端主动发送消息

    //建立一个静态的集合来存储所有客户端的实例
    public static Vector<VideoServlet> clients = new Vector<VideoServlet>();
    /**
     *
     * @Title: onOpen
     * @Description: 当客户端与服务器建立连接的时候触发方法
     * @param session    设定文件
     * @return void    返回类型
     * @throws
     */
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        clients.add(this);//将当前客户端加入客户端列表
        System.out.println("新连接连接！！");
    }
    @OnClose
    public void onClose(){
        clients.remove(this);
        System.out.println("有一个连接！！");
    }
    //当客户端向服务器发送消息的时候触发的事件
    @OnMessage
    public void onMessage(String message,Session session){
        //群发消息 广播消息
        for(VideoServlet client : clients){
            try {
                //这是往客户端发送消息
                client.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                // TODO Auto-generated catch block
                //e.printStackTrace();
            }
        }
    }

}

 观众端弹幕对应的servlet代码：

package web;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Vector;

/**
 * Created by Taoyongpan on 2017/10/13.
 */
@ServerEndpoint("/chat")
public class ChatServlet {
    //当一个客户端访问onlineServer连接的时候，创建一个OnlineServer的实例
    private Session session;//当前的会话对象 通过session 服务器可以向客户端主动发送消息
    //建立一个静态的集合来存储所有客户端的实例
    public static Vector<ChatServlet> clients = new Vector<ChatServlet>();
    /**
     *
     * @Title: onOpen
     * @Description: 当客户端与服务器建立连接的时候触发方法
     * @param session    设定文件
     * @return void    返回类型
     * @throws
     */
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        clients.add(this);//将当前客户端加入客户端列表
        System.out.println("新连接连接！！");
    }
    @OnClose
    public void onClose(){
        clients.remove(this);
        System.out.println("有一个连接！！");
    }
    //当客户端向服务器发送消息的时候触发的事件
    @OnMessage
    public void onMessage(String message,Session session){
        //群发消息 广播消息
        for(ChatServlet client : clients){
            try {
                //这是往客户端发送消息
                client.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                // TODO Auto-generated catch block
                //e.printStackTrace();
            }
        }
    }
}

 

 

分享到：
| Java栈的三种实现（三）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于WebRTC+SpringBoot+Websocket 简单音视频通话

    相关技术：Websocket，Springboot，WebRtc 使用Websocket 作为交互，作为信令服务器，负责信令交换。 视频、麦克风、屏幕共享相关操作，下载即可运行。 包含使用手册及相关说明。

    WebRTC+Uniapp+WebSocket完整实例代码

    WebRTC+Uniapp+WebSocket完整实例代码

    WebRTC+java实现多人视频通讯

    WebRTC（Web Real-Time Communication）是一种开放的网络通信标准，允许在...总的来说，这个项目涵盖了WebRTC实时通信、Java后端开发、WebSocket协议应用等多个技术领域，对于提升全栈开发能力具有很高的实践价值。

    WebRTC-:H5的WebRTC + Websocket 简单实现的直播间

    WebRTC直播间演示链接​WebRTC介绍​原理简单解释：​浏览器提供获取屏幕、音频等媒体数据的接口，​双方的媒体流数据通过Turn服务器传输。​项目构造(非常简单)前端：就一个html文件，js和css直接放里面了，纯手写...

    WebRTC+websocket

    WebRTC（Web Real-Time Communication）和WebSocket是现代Web应用程序中两个关键的技术，它们极大地扩展了浏览器的能力，使得实时通信变得更加便捷。在这个项目中，我们看到一个利用WebRTC进行视频通话的实现，其后...

    webrtc demo(html+js+nodejs)

    WebRTC（Web Real-Time Communication）是一种开放源代码项目，它为网页浏览器提供了实时通信（RTC）的能力，使得用户可以在浏览器之间直接进行音频、视频和数据共享而无需任何插件。这个"webrtc demo...

    java版本使用springboot vue websocket webrtc实现视频通话

    总之，结合Spring Boot、Vue.js、WebSocket和WebRTC，我们可以构建一个高效、可靠的实时视频通话系统，满足现代通信需求。这个过程涉及到多个技术层面的整合，需要深入理解每一个组件的工作原理和交互方式，才能确保...

    基于C#和SuperWebSocket、WebRtc开发的网页视频聊天源码

    SuperWebSocket是一个轻量级且易于使用的.NET库，用于创建自定义的WebSocket服务器，而WebRTC（Web Real-Time Communication）则是一种允许网页浏览器进行实时通信的开放标准，主要用于实现浏览器之间的音频、视频和...

    WebRtc.rar_WEBSOCKET 视频_webRTC服务器_webrtc与websocket_websocket_web

    在"WebRtc.rar_WEBSOCKET 视频_webRTC服务器_webrtc与websocket_websocket_web"这个项目中，开发者使用WebSocket作为WebRTC的信令传输层，实现了基于浏览器的视频通信。WebSocket和WebRTC的结合是现代Web应用程序中...

    HTML5视频聊天Demo（WebRTC+NodeJS）.zip

    WebRTC（Web Real-Time Communication）是一项开源技术，允许网页浏览器进行实时通信，无需任何插件或额外的应用程序，极大地推动了互联网上多媒体交互的发展。Node.js则是一个开放源代码、跨平台的JavaScript运行...

    基于websocket+webrtc实现音视频通话demo，下载即可用

    基于Java WebSocket 做信令服务器，使用webrtc浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。从而实现音视频通话。下载启动 输入http://localhost 就可使用

    WebRtc+SignalR 的demo

    SignalR支持多种传输方式，如WebSocket、Server-Sent Events、Long Polling等，以确保在各种浏览器和服务器环境下都能实现高效通信。 在这个"WebRtc+SignalR"的demo中，WebRTC用于处理视频和音频的捕获、编码、解码...

    HTML5+WebSocket实例

    RTCApp可能结合了WebSocket和WebRTC，构建了一个视频通信实例。WebSocket可以用来传输控制信息，如建立和结束通话、调整音视频质量等，而WebRTC则负责实际的音视频流传输。 这些实例有助于开发者理解WebSocket的...

    WebSocket 与 webrtc结合

    WebSocket 和 WebRTC 结合是现代Web应用程序中实现实时通信的重要技术组合。WebSocket提供双向通信，而WebRTC专注于在浏览器之间直接进行音视频流传输。让我们深入探讨这两种技术以及它们如何协同工作。 WebSocket ...

    基于SpringBoot+Websocket+WebRtc 视频会议

    本文将深入探讨如何利用SpringBoot、WebSocket和WebRTC技术实现这样的系统。这三个技术的结合为开发者提供了强大的工具，可以创建高效的多人视频通话应用。 首先，SpringBoot是Java开发领域的主流框架，它简化了...

    SpringBoot+WebSocket+WebRTC实现视频通话

    本项目利用SpringBoot、WebSocket和WebRTC技术构建了一个基本的视频通话系统。以下是关于这些关键技术点的详细说明。 首先，SpringBoot是Spring框架的一个轻量级封装，它简化了Java应用的开发流程，提供了自动配置...

    基于Vue3 + WebRTC + Node + SRS搭建的直播间.zip

    在构建一个基于Vue3、WebRTC、Node.js和SRS的直播间系统时，涉及的关键技术点涵盖前端开发、实时通信、后端服务以及流媒体处理。以下是对这些技术的详细说明： 1. Vue3：Vue.js是当前非常流行的前端框架之一，而Vue...

    java+webSocket+WebRTC实现在线文字视频聊天

    需要使用端口，域名访问时，必须对tomcat做自签名证书，如果只是在本地使用localhost访问，就不需要做自签名证书了。 项目地址：https://shiping.lipingoomoney.cn:8443/rtcdemo/

    WEBRTC多人视频通话

    WEBRTC多人视频通话，可以支持多人视频通话，目前是三人的，因为视频通话的信令用到的是websocket，所以代码里面也放入了单独websocket通信的demo，解释也比较详细了,原来有一个列子是两人的，后面改成三人的，多人...

    WEBRTC-to-SIP:设置WEBRTC客户端和Kamailio服务器以调用SIP客户端

    WEBRTC到SIP客户端和服务器 如何设置Kamailio + RTPEngine + TURN服务器以启用WebRTC客户端和旧版SIP客户端之间的呼叫。 默认情况下，此配置启用了IPv6。 此设置将桥接SRTP-&gt; RTP和ICE-&gt; nonICE，以使WebRTC客户端...

Magicbox
Global site tag (gtag.js) - Google Analytics