【无标题】

最新推荐文章于 2024-10-11 16:26:01 发布
最新推荐文章于 2024-10-11 16:26:01 发布
阅读量44 收藏
点赞数
文章标签： html
原文链接：https://blog.csdn.net/qq_52072601/article/details/139160041
版权

简单说下，前端实现共享屏幕主要用到 websocket 、 RTCPeerConnection、navigator.mediaDevices.getDisplayMedia({ video: true })这三个API

先看最终效果

在这里插入图片描述

websocket

这个必须实现，因为共享屏幕需要交换协议，通过websocket发送协议到服务器，然后转发给远程，交换双发协议，才能实现共享屏幕。其他方式发送也可以，不过考虑到共享屏幕伴随着聊天室，所以还是用websocket吧，学就完事儿了。

RTCPeerConnection

这个是实现共享屏幕的重点，就是用于前端点对点网络传输的，想要实时传输视频流，这个是重点。因为我试过用canvas获取视频帧，然后toImageDate，然后上传图片信息。确实可以实现，但是非常卡！巨卡！因为图片信息太大了！！！

还有就是要注意，这个是一对一的，就是一个发送者只能服务一个接受者，但是这难不住前端人！我直接把发送者装进数组，连接成功一个，就新建一个空闲的发送者，这样就可以一对多了。

navigator.mediaDevices.getDisplayMedia({ video: true })

这个是前端共享屏幕的API，它会返回一个视频流，通过RTCPeerConnection交换视频流，实现共享屏幕。

第一步 后端

首先要连接websocket ，后端的话各有不同，就只能麻烦各位自行百度了，我这里是用的django（上班用的）框架，就是python后端

这三个得安装一下

pip install channels 
pip install daphne 
pip install dwebsocket

settings.py

INSTALLED_APPS = [
    'daphne',
    'django.contrib.staticfiles',
    'channels',
]

顺序不能错 有依赖关系

这个最好放在后面

ASGI_APPLICATION = 'wiseHorse.asgi.application'
注意啊注意，这个 wiseHorse 是我的项目根目录，因人而异，切记，不然后面找不到路径。

添加文件
在这里插入图片描述

在根目录下添加 asgi.py 和 routing.py 这两个文件.

asgi.py

import os
from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_application
from wiseHorse import routing
 
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'bug_Project2.settings')
# application = get_asgi_application()
application = ProtocolTypeRouter({
	"http": get_asgi_application(),
	"websocket": URLRouter(routing.websoctet_urlpatterns)
})

routing.py

from django.urls import re_path
 
 
# 这个是我的 infomation 目录下的 chat.py 文件，因人而异哈
from information import chat
 
 
websoctet_urlpatterns = [
    # chat.ChatConsumer.as_asgi() 这个同理哈 .as_asgi()不能变
	re_path('ws/room/', chat.ChatConsumer.as_asgi()),
]

chat.py

这里我的处理比较多，因人而异哈

import json
 
from channels.generic.websocket import WebsocketConsumer
 
 
# 记录连接人数
count = 0
# 存储连接websocket的用户
# 格式 { room_name :[user_1,user_2,...] }
meeting_info = {}
# 保存用户的room_name 和 self 连接断开时从 meeting_info 中移除 并通知其他用户
user_info_list = {}
# 储存会议的 offer 格式{ room_name : [offer, self] }
meeting_offer = {}
# 储存会议的 ice 格式{ room_name : [ice, self] }
meeting_ice = {}
 
 
class ChatConsumer(WebsocketConsumer):
 
	# 当用户连接时
	def websocket_connect(self, message):
		self.accept()
 
	# 当用户发送消息时
	def websocket_receive(self, message):
		# 浏览器基于websocket向后端发送数据,自动触发接受消息
		data = json.loads(message['text'])
 
		# 加入房间
		if data.get('type') == 'join':
			# 如果房间存在
			if data.get('room_name') in meeting_info:
				meeting_info[data.get('room_name')].append(self)
				# 将用户的 self_name self room_name 保存到 user_list 中
				user_info_list[self] = data.get('room_name')
				self.send('{"type":"success","msg":"joined the room"}')
			# 房间不存在
			else:
				self.send('{"type":"error","msg":"room is not exits"}')
		# 创建房间
		elif data.get('type') == 'create':
			# 如果房间已存在 则创建失败
			if data.get('room_name') in meeting_info:
				self.send('{"type":"error","msg":"room is exits"}')
			# 房间不存在 创建成功
			else:
				# 创建房间
				meeting_info[data.get('room_name')] = []
				meeting_info[data.get('room_name')].append(self)
				# 将用户的 self_name self room_name 保存到 user_list 中
				user_info_list[self] = data.get('room_name')
				self.send('{"type":"success","msg":"room created"}')
		# 离开房间
		elif data.get('type') == 'leave':
			meeting_info[data.get('room_name')].remove(self)
			self.send('{"type":"success","msg":"leaved the room"}')
		# 发送消息
		elif data.get('type') == 'chat':
			# 先检查是否加入了房间
			if self not in meeting_info[data.get('room_name')]:
				msg = 'not joined room ' + data.get('room_name')
				self.send(json.dumps({"type": "chat_error", "msg": msg}))
			else:
				for room in meeting_info[data.get('room_name')]:
					room.send(json.dumps({"type": "chat_success", "msg": data.get('content')}))
		# 关闭房间
		elif data.get('type') == "close":
			# 通知所有人 房间已经解散
			for room in meeting_info[data.get('room_name')]:
				room.send('{"type":"success","msg":"The room has been disbanded"}')
				room.close()
			# 删除房间信息
			meeting_info.pop(data.get('room_name'))
		# ice
		elif data.get('type') == 'ice':
			# 发起者的ice
			if data.get('is_sender'):
				for index, room in enumerate(meeting_info[data.get('room_name')]):
					if index != 0:
						room.send(json.dumps({"type": "ice_success", "msg": data.get('ice')}))
			# 接收者的ice
			elif data.get('is_receiver'):
				meeting_info[data.get('room_name')][0].send(json.dumps({"type": "ice_success", "msg": data.get('ice')}))
		# offer
		elif data.get('type') == 'offer':
			# 如果 offer已经存在 就删除 因为是旧的 offer
			if data.get('room_name') in meeting_offer:
				meeting_offer.pop(data.get('room_name'))
			# 设置 offer
			meeting_offer[data.get('room_name')] = []
			meeting_offer[data.get('room_name')].append(data.get('offer'))
			meeting_offer[data.get('room_name')].append(self)
			self.send(json.dumps({"type": "offer_success", "msg": "the room has added an offer"}))
		# 获取 offer
		elif data.get('type') == 'getoffer':
			offer = meeting_offer[data.get('room_name')][0]
			self.send(json.dumps({"type": "getoffer_success", "msg": offer}))
		# answer
		elif data.get('type') == 'answer':
			# 房间存在 向房主发送answer
			if data.get('room_name') in meeting_info:
				meeting_offer[data.get('room_name')][1].send(json.dumps({"type": "answer_success", "msg": data.get('answer')}))
			else:
				self.send('{"type":"answer_error","msg":"room is not exits"}')
 
	# 当用户断开连接时
	def websocket_disconnect(self, message):
		# 客户端与服务端断开连接,从meeting_info / user_info_list / meeting_ice / meeting_offer找到该用户
		# 从会议中查找
		try:
			meeting_info[user_info_list[self]].remove(self)
		except KeyError:
			print('meeting_info not found')
		# 从用户列表中查找
		try:
			user_info_list.pop(self)
		except KeyError:
			print('user_info_list not found')
		# 对于发起共享屏幕者 移除offer 和 ice
		try:
			# 移除 offer
			for item in meeting_offer:
				if item[1] == self:
					meeting_offer.pop(item)
					break
			# 移除ice
			for item in meeting_ice:
				if item[1] == self:
					meeting_ice.pop(item)
					break
		except KeyError:
			print('meeting_offer and meeting_ice not found')

第二步 前端

连接websocket 一定要打开控制台看看有没有连接成功！！！

let socket = new WebSocket('ws://localhost:8888/ws/room/');
 
// 连接 websocket 成功
socket.onopen = function () {
    console.log('连接成功');
}

代码太多了，直接全上吧，注释也挺全的，各位慢慢消化

发送者 html文件

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            position: relative;
        }
 
        #localVideo {
            position: absolute;
            top: 100px;
            left: 0;
            background-color: #fff;
            padding: 0;
        }
    </style>
</head>
 
<body>
    <h1>发送者</h1>
    <video id="localVideo" width="600" height="400"></video>
</body>
<script>
    // 连接 websocket 
    // let socket = new WebSocket(`ws://${window.location.host}/ws/room`)
    let socket = new WebSocket('ws://localhost:8888/ws/room/');
    // 获取本地video 也就是共享屏幕的视频数据容器
    let localVideo = document.getElementById('localVideo');
    // 视频流
    let stream = null;
    // 本地 peer
    let pc = new RTCPeerConnection();
    // peer数组 实现一对多
    let pcArr = [];
    // 当前已连接人数 默认1个人 
    let connectNum = 1;
    let count = 0;
    // 将 pc 添加到数组
    pcArr.push(pc);
    // 我是发起者(sender) 还是 接收者(recipients)
    // 默认接收者
    let my_indefent = 'recipients';
    // 连接 websocket 成功
    socket.onopen = function () {
        console.log('连接成功');
    }
 
    // 创建房间
    const createRoom = () => {
        socket.send(JSON.stringify({
            'type': 'create',
            'room_name': '123',
        }));
 
        // 开始共享屏幕
        startScreenSharing();
    }
 
    // 聊天
    const chat = (str) => {
        socket.send(JSON.stringify({
            'type': 'chat',
            'room_name': '123',
            'content': str
        }));
    }
 
    // 服务器发来消息
    socket.onmessage = function (e) {
        try {
            data = JSON.parse(e.data);
            if (data.type == 'success') {
                console.log('success', data.msg);
            }
            if (data.type == 'error') {
                console.log('error', data.msg);
            }
            if (data.type == 'chat_success') {
                console.log('chat_success', data.msg);
            }
            if (data.type == 'chat_error') {
                console.log('chat_error', data.msg);
            }
            if (data.type == 'ice_success') {
                console.log('我是发起者,收到了ice');
                count += 1;
                if (count == 3) {
                    // 连接数 +1
                    connectNum += 1;
                    // 新建一个pc 对象 添加到数组
                    let pc = new RTCPeerConnection();
                    pcArr.push(pc);
                    // 重置
                    count = 0;
                    // 初始化
                    RTCInit();
                }
                pcArr[connectNum - 1].addIceCandidate(data.msg);
                // pc.addIceCandidate(data.msg);
            }
            if (data.type == 'ice_error') {
                console.log('ice_error', data.msg);
            }
            if (data.type == 'offer_success') {
                console.log('offer_success', data.msg);
            }
            if (data.type == 'offer_error') {
                console.log('offer_error', data.msg);
            }
            if (data.type == 'answer_success') {
                // 设置远程描述
                pcArr[connectNum - 1].setRemoteDescription(data.msg);
                // ice
                pcArr[connectNum - 1].onicecandidate = function (e) {
                    // 发送 ice 给对方
                    socket.send(JSON.stringify({
                        'type': 'ice',
                        'is_sender': true,
                        'room_name': '123',
                        'ice': e.candidate
                    }))
                }
                console.log('我是发起者,收到了answer');
            }
            if (data.type == 'answer_error') {
                console.log('answer_error', data.msg);
            }
        }
        catch (err) {
            console.log(err);
        }
    }
 
    // 获取屏幕共享流
    async function startScreenSharing() {
        // 共享屏幕 身份改为发起者 sender
        my_indefent = 'sender';
        try {
            stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
            localVideo.srcObject = stream;
            localVideo.play();
            // 设置 pc
            RTCInit();
        } catch (error) {
            console.error('Error accessing screen stream:', error);
        }
    }
 
    // 初始化 RTC
    async function RTCInit() {
        // 将屏幕流传送出去
        stream.getTracks().forEach(track => pcArr[connectNum - 1].addTrack(track, stream));
        // offer
        const offer = await pcArr[connectNum - 1].createOffer();
        await pcArr[connectNum - 1].setLocalDescription(offer);
        // 发送 offer
        socket.send(JSON.stringify({
            'type': 'offer',
            'room_name': '123',
            'offer': offer
        }))
 
        // 发起者不用设置track
        // track
        pcArr[connectNum - 1].ontrack = function (e) {
 
        }
    }
</script>
 
</html>

接收者 html文件

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <h1>接收者</h1>
    <video src="" id="ramoteVideo" width="600" height="600" autoplay muted></video>
    <!-- <script src="./screen_2.js"></script> -->
</body>
 
<script>
    // 连接 websocket 
    // let socket = new WebSocket(`ws://${window.location.host}/ws/room`)
    let socket = new WebSocket('ws://localhost:8888/ws/room/');
    // 获取本地video 也就是共享屏幕的视频数据容器
    let ramoteVideo = document.getElementById('ramoteVideo');
    // 本地 peer
    let pc = new RTCPeerConnection();
    // 我是发起者(sender) 还是 接收者(recipients)
    // 默认接收者
    let my_indefent = 'recipients';
    // 连接 websocket 成功
    socket.onopen = function () {
        console.log('连接成功');
    }
 
    // 加入房间
    const joinRoom = () => {
        socket.send(JSON.stringify({
            'type': 'join',
            'room_name': '123',
        }));
 
        // 获取offer
        socket.send(JSON.stringify({
            'type': 'getoffer',
            'room_name': '123',
        }))
    }
 
    // 聊天
    const chat = (str) => {
        socket.send(JSON.stringify({
            'type': 'chat',
            'room_name': '123',
            'content': str
        }));
    }
 
    // 服务器发来消息
    socket.onmessage = function (e) {
        try {
            data = JSON.parse(e.data);
            if (data.type == 'success') {
                console.log('success', data.msg);
            }
            if (data.type == 'error') {
                console.log('error', data.msg);
            }
            if (data.type == 'chat_success') {
                console.log('chat_success', data.msg);
            }
            if (data.type == 'chat_error') {
                console.log('chat_error', data.msg);
            }
            if (data.type == 'ice_success') {
                console.log('我是接收者,收到了 ice');
                pc.addIceCandidate(data.msg);
            }
            if (data.type == 'ice_error') {
                console.log('ice_error', data.msg);
            }
            if (data.type == 'offer_success') {
                console.log('offer_success', data.msg);
            }
            if (data.type == 'offer_error') {
                console.log('offer_error', data.msg);
            }
            if (data.type == 'answer_success') {
                console.log('answer_success', data.msg);
            }
            if (data.type == 'answer_error') {
                console.log('answer_error', data.msg);
            }
            if (data.type == 'getoffer_success') {
                // 接收到 offer 设置远程描述
                pc.setRemoteDescription(data.msg);
                // 创建应答 answer
                pc.createAnswer().then(answer => {
                    // 设置本地描述
                    pc.setLocalDescription(answer);
 
                    // 将answer发送给 发起者
                    socket.send(JSON.stringify({
                        'type': 'answer',
                        'room_name': '123',
                        "answer": answer
                    }))
                })
                // 接收到视频流 开始播放
                pc.ontrack = event => {
                    if (ramoteVideo.srcObject !== event.streams[0]) {
                        ramoteVideo.srcObject = event.streams[0];
                        console.log('我是远端,收到了视频流 = >', event.streams[0]);
                    }
                };
 
                pc.onicecandidate = function (e) {
                    // 发送 ice 给发起者
                    socket.send(JSON.stringify({
                        'type': 'ice',
                        'is_receiver': true,
                        'room_name': '123',
                        'ice': e.candidate
                    }))
                }
            }
        }
        catch (err) {
            console.log(err);
        }
    }
</script>
 
</html>

第三步

先打开 发送者 html 文件
初始化链接传成功

控制台输入
createRoom()

创建共享房间
选择要共享屏幕
发送者开始共享

ok 到这里发送者已经就绪 等待接收者连接配对

接收者 html打开

接收者创建连接

随后应该就可以看到共享屏幕成功啦，可以多开哈
接收者查看共享

好了，完结撒花
谢谢包子们的观看
————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq_52072601/article/details/139160041

佛天华
关注
C# winform中无标题栏窗口如何实现鼠标拖动？
汽车电子软件领域知识分享
08-23 1349
在C# winform中，可以通过重写窗体的鼠标事件来实现无标题栏窗体的拖动。
Qt-无标题窗口
学而思
05-21 7670
        今天学习了下无标题窗口，于是来记录下我的学习过程首先建立一个Qt Widgets Application继承QWidget类创建完后直接运行就得到了如下效果那么，既然是无标题窗口就要去掉窗口栏啊，于是加上setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);去掉标题栏，但是这样整个窗口就不能移动...
谷歌浏览器打开无标题
mp2020xuexi的博客
01-16 1020
谷歌浏览器
C#中实现无标题栏窗体拖动的代码
热门推荐
百锦再的博客
01-18 1万+
事件来实现拖动功能。当鼠标按下时，我们标记鼠标正在拖动，并保存当前坐标。在鼠标移动时，如果鼠标正在拖动，我们更新窗体的位置，使其跟随鼠标移动。当鼠标释放时，我们取消拖动标记。请注意，在窗体上添加了对应事件处理程序的窗体控件属性应该设置为对应的事件处理程序方法。在窗体设计视图，选择属性窗格，在事件选项卡中为。在C#中实现无标题栏窗体拖动的代码可以通过处理鼠标事件来实现。这样，当你在运行窗体时，你就可以通过鼠标拖动窗体来改变其位置。事件分别选择对应的处理程序方法。在这个示例代码中，我们通过处理。
C# 移动无标题栏无边框窗体的3种方法
SabreWulf
03-13 2284
目录 第一种：手工移动 第二种：调用系统API 1.引入下面代码 前提需要引入命名空间using System.Runtime.InteropServices 2.增加鼠标按下事件发送消息，让系统误以为按下是标题栏 第三种，重写 WndProc 第一种：手工移动 直接通过修改窗体位置从而达到移动窗体的效果 //定义一个位置信息Point用于存储鼠标位置 private Point mPoint; /// <summary>
Qt实现改变无标题栏窗体大小及移动窗体
danshiming的博客
11-10 3603
Qt实现鼠标左键拖动无标题栏窗体右下角改变窗体大小及移动窗体
Chrome显示无标题错误代码STATUS_INVALID_IMAGE_HASH
precy_wm的博客
01-03 1794
Chrome显示无标题错误代码STATUS_INVALID_IMAGE_HASH
WIN32无标题栏窗口移动方法种种
ZDT_zdh的博客
11-02 2222
WIN32无标题栏窗口移动方法种种 转载来源：http://blog.csdn.net/fuyun_cloud/article/details/8008197     首先，看看在正常情况下系统是怎样来移动程序窗口的。当使用者在程序窗口标题栏区域（非工作区）内，按下鼠标左键时将会发生下列事情：  ◆ 系统向该窗口过程函数发送WM_NCLBUTTONDOWN消息。  ◆ WM_NC...
Chrome 无标题 哭脸 已崩溃
wkj52719的博客
05-24 4777
谷歌浏览器chrome突然打开后任何页面均显示为无标题，哭脸。鼠标选中sheet页面时，提示已崩溃。 无法打开设置、开发工具箱 经过检查，是chrome的Userdata数据出错，导致页面加载无法正常展示页面。 修复办法： 打开文件夹C:\Users\{privateUserId}\AppData\Local\Google\Chrome，删除User data文件夹，如果需要备份UserData,请备份User Data到其他地方。 ...
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
C#创建无标题栏窗体
03-16
摘要:C#源码,菜单窗体,无标题栏窗体　C#创建无标题栏窗体源码，实际上是动态显示或隐藏窗体的标题栏，当隐藏的时候就类似窗体没有了标题栏，当显示标题栏的时候，鼠标按住标题栏即可拖动窗体，以前记得网友需要此...
Delphi实现拖动按钮移动无标题栏窗口
05-11
摘要:Delphi源码,界面编程,窗体拖动,无标题栏 无标题栏的窗体的拖动功能实现，Delphi添加一个可拖动窗体的按钮，通过对此按钮的控制可移动窗体，实现按住标题栏移动窗口的功能，无标题栏也就不能显示最大化、最小化...
VC去掉'无标题'字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1256
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
Chromium html＜input＞对应c++接口定义
最新发布
杰克东的专栏
10-11 237
定义和用法标签定义输入字段，用户可以在其中输入数据。元素是最重要的表单元素。元素可以以多种方式显示，具体取决于。参阅，以查看每种输入类型的实例！
Chromium HTML Tags与c++接口对应关系分析
杰克东的专栏
10-11 625
head>对应"head",},其中 == "a" 接口定义 interfaceName: "HTMLAnchorElement", 其他的也类似。查找html_tag定义只需在third_party\blink\renderer\core\html\html_tag_names.json5文件中输入对对应标签，即可找到interfaceName定义。又可以根据interfaceName定义的文件名找到blink和v8定义。
QD1-P17 HTML 下拉框标签（select、option）
qq_38641599的博客
10-11 218
本节学习：HTML 下拉框标签（select、option）
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值