当前位置： 首页 > news >正文

JavaScript实现视频共享

news 文章来源：https://blog.csdn.net/guo__hang/article/details/135201201 2025/1/18 15:35:48

1.视频共享webrtc-master

index.html

<!DOCTYPE html>
<html>
<head><script type='text/javascript' src='https://cdn.scaledrone.com/scaledrone.min.js'></script><meta charset="utf-8"><meta name="viewport" content="width=device-width"><style>body {display: flex;height: 100vh;margin: 0;align-items: center;justify-content: center;padding: 0 50px;font-family: -apple-system, BlinkMacSystemFont, sans-serif;}video {max-width: calc(50% - 100px);margin: 0 50px;box-sizing: border-box;border-radius: 2px;padding: 0;box-shadow: rgba(156, 172, 172, 0.2) 0px 2px 2px, rgba(156, 172, 172, 0.2) 0px 4px 4px, rgba(156, 172, 172, 0.2) 0px 8px 8px, rgba(156, 172, 172, 0.2) 0px 16px 16px, rgba(156, 172, 172, 0.2) 0px 32px 32px, rgba(156, 172, 172, 0.2) 0px 64px 64px;}.copy {position: fixed;top: 10px;left: 50%;transform: translateX(-50%);font-size: 16px;color: rgba(0, 0, 0, 0.5);}</style>
</head>
<body><div class="copy">Send your URL to a friend to start a video call</div><video id="localVideo" autoplay muted></video><video id="remoteVideo" autoplay></video><script src="script.js"></script>
</body>
</html>

script.js

// Generate random room name if needed
if (!location.hash) {location.hash = Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
const roomHash = location.hash.substring(1);// TODO: Replace with your own channel ID
const drone = new ScaleDrone('yiS12Ts5RdNhebyM');
// Room name needs to be prefixed with 'observable-'
const roomName = 'observable-' + roomHash;
const configuration = {iceServers: [{urls: 'stun:stun.l.google.com:19302'}]
};
let room;
let pc;function onSuccess() {};
function onError(error) {console.error(error);
};drone.on('open', error => {if (error) {return console.error(error);}room = drone.subscribe(roomName);room.on('open', error => {if (error) {onError(error);}});// We're connected to the room and received an array of 'members'// connected to the room (including us). Signaling server is ready.room.on('members', members => {console.log('MEMBERS', members);// If we are the second user to connect to the room we will be creating the offerconst isOfferer = members.length === 2;startWebRTC(isOfferer);});
});// Send signaling data via Scaledrone
function sendMessage(message) {drone.publish({room: roomName,message});
}function startWebRTC(isOfferer) {pc = new RTCPeerConnection(configuration);// 'onicecandidate' notifies us whenever an ICE agent needs to deliver a// message to the other peer through the signaling serverpc.onicecandidate = event => {if (event.candidate) {sendMessage({'candidate': event.candidate});}};// If user is offerer let the 'negotiationneeded' event create the offerif (isOfferer) {pc.onnegotiationneeded = () => {pc.createOffer().then(localDescCreated).catch(onError);}}// When a remote stream arrives display it in the #remoteVideo elementpc.ontrack = event => {const stream = event.streams[0];if (!remoteVideo.srcObject || remoteVideo.srcObject.id !== stream.id) {remoteVideo.srcObject = stream;}};navigator.mediaDevices.getUserMedia({audio: true,video: true,}).then(stream => {// Display your local video in #localVideo elementlocalVideo.srcObject = stream;// Add your stream to be sent to the conneting peerstream.getTracks().forEach(track => pc.addTrack(track, stream));}, onError);// Listen to signaling data from Scaledroneroom.on('data', (message, client) => {// Message was sent by usif (client.id === drone.clientId) {return;}if (message.sdp) {// This is called after receiving an offer or answer from another peerpc.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {// When receiving an offer lets answer itif (pc.remoteDescription.type === 'offer') {pc.createAnswer().then(localDescCreated).catch(onError);}}, onError);} else if (message.candidate) {// Add the new ICE candidate to our connections remote descriptionpc.addIceCandidate(new RTCIceCandidate(message.candidate), onSuccess, onError);}});
}function localDescCreated(desc) {pc.setLocalDescription(desc,() => sendMessage({'sdp': pc.localDescription}),onError);
}

See more:

  • Live demo

  • Tutorial

其他可以参考屏幕共享 

相关文章：

JavaScript实现视频共享

1.视频共享webrtc-master index.html <!DOCTYPE html> <html> <head><script typetext/javascript srchttps://cdn.scaledrone.com/scaledrone.min.js></script><meta charset"utf-8"><meta name"viewport" cont…...

编程日记 2023/12/29 22:49:41

uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)

文章目录 ⭐前言&#x1f496; 小程序系列文章 ⭐uni-file-picker 组件&#x1f496; 绑定事件&#x1f496; uploadFile api&#x1f496; 自定义上传 ⭐后端fastapi定义上传接口⭐uniapp开启本地请求代理devServer⭐前后端联调⭐总结⭐结束 ⭐前言 大家好&#xff0c;我是ym…...

编程日记 2023/12/29 22:44:36

一篇文章带你入门PHP魔术方法

PHP魔术方法 PHP 中的"魔术方法"是一组特殊的方法&#xff0c;它们在特定情况下自动被调用。这些方法的名称都是以两个下划线&#xff08;__&#xff09;开头。魔术方法提供了一种方式来执行各种高级编程技巧&#xff0c;使得对象的行为可以更加灵活和强大。以下是一…...

编程日记 2023/12/29 22:41:34

【数据库系统概论】第6章-关系数据库理论

真别看吧&#xff0c;抄ppt而已啊 文章目录 6.1 引言6.2 规范化6.2.1 函数依赖6.2.2 码6.2.3 范式&#xff08;Normal Form&#xff09;6.2.4 BC范式6.2.5 规范化小结 6.1 引言 我们有这样一张表&#xff1a; but 为啥这样设计呢&#xff1f;由此引出怎样设计一个关系数据库…...

编程日记 2023/12/29 22:37:30

算法设计与分析实验报告-贪心算法

校课程的简单实验报告。 算法设计与分析实验报告-递归与分治策略 算法设计与分析实验报告-动态规划算法 算法设计与分析实验报告-贪心算法 dijkstra迪杰斯特拉算法&#xff08;邻接表法&#xff09; 算法设计与分析实验报告-回溯法 算法设计与分析实验报告-分支限界法 …...

编程日记 2023/12/29 22:35:28

Unity读取服务器声音文件

Unity读取服务器声音文件 功能1.在网站的根目录放置一个声音文件Alarm01.wav&#xff08;这个是window系统自带的找不到这个格式的可以直接在C盘搜索&#xff09;2.在WebManager.cs脚本中添加clipPath、audio、m_downloadClip属性和DownloadSound&#xff08;&#xff09;函数&…...

编程日记 2023/12/29 22:28:19

掌握ElasticSearch（一）：Elasticsearch安装与配置、Kibana安装

文章目录 〇、简介1.Elasticsearch简介2.典型业务场景3.数据采集工具4.名词解释 一、安装1.使用docker(1)创建虚拟网络(2)Elasticsearch安装步骤 2.使用压缩包 二、配置1.目录介绍2.配置文件介绍3.elasticsearch.yml节点配置4.jvm.options堆配置 二、可视化工具Kibana1.介绍2.安…...

编程日记 2023/12/29 22:25:16

《剑指offer》Java版--13.机器人的运动范围（BFS）

剑指offer原题13:机器人的运动范围 地上有一个m行n列的方格。一个机器人从坐标(0,0)的格子开始移动&#xff0c;它每次可以向左、右、上、下移动一格&#xff0c;但不能进入行坐标和列坐标的数位之和大于k的格子。例如&#xff0c;当k为18时,机器人能够进入方格(35,37),因为353…...

编程日记 2023/12/29 22:22:14

基于流程挖掘的保险理赔优化策略实践

引言 在当今日益竞争的商业环境中，保险公司面临着日益增长的业务量和客户期望的挑战。特别是在理赔领域，理赔是保险行业的重要环节，也是保险公司和客户之间最直接的联系点。然而，长周期和繁琐的理赔流程常常给保险公司和投保人带来困扰。因此，如何提供准确且高效的理赔处…...

编程日记 2023/12/29 22:20:11

Docker五 | DockerFile

目录 DockerFile 常用保留字 FROM MAINTAINER RUN EXPOSE WORKDIR USER ENV VOLUME ADD COPY CMD ENTRYPOINT DockerFile案例 前期准备 编写DockerFile文件 运行DockerFile 运行镜像 DockerFile是用来构建Docker镜像的文本文件&#xff0c;是由一条条构建…...

编程日记 2023/12/29 22:18:10

2023年度总结：技术旅程的杨帆远航⛵

文章目录 职业规划与心灵成长 ❤️‍&#x1f525;我的最大收获与成长 &#x1f4aa;新年Flag &#x1f6a9;我的技术发展规划 ⌛对技术行业的深度思考 &#x1f914;祝愿 &#x1f307; 2023 年对我来说是一个充实而令人难以忘怀的一年。这一年&#xff0c;我在CSDN上发表了 1…...

编程日记 2023/12/29 22:13:06

SpringBoot+AOP+Redis 防止重复请求提交

本文项目基于以下教程的代码版本&#xff1a; https://javaxbfs.blog.csdn.net/article/details/135224261 代码仓库: springboot一些案例的整合_1: springboot一些案例的整合 1、实现步骤 2.引入依赖 我们需要redis、aop的依赖。 <dependency><groupId>org.spr…...

编程日记 2023/12/29 22:12:05

偷流量、端口占用、网络负载高、socket创建释放异常等Android高阶TCP/IP网络问题定位思路

一&#xff0c;背景 通常一些偷流量、端口占用、网络负载高、socket创建释放异常等Android网络相关问题&#xff0c;可以通过使用tcpdump抓tcp/ip报文&#xff0c;来定位。但是tcpdump无进程信息&#xff0c;也没有APK包名信息&#xff0c;无法确认异常的报文来自哪些Apk或者n…...

编程日记 2023/12/29 22:09:02

《人人都能用英语》学习笔记

https://github.com/xiaolai/everyone-can-use-english 核心&#xff1a; 用 What──它究竟是什么&#xff1f;Why──为什么它是那个样子&#xff1f;How──要掌握它、应用它&#xff0c;必须得遵循什么样的步骤&#xff1f; 在运行程序之前&#xff0c;要反复浏览代码&a…...

编程日记 2023/12/29 22:08:02

NFC与ZigBee技术在智慧农业物联网监测系统中的应用

近年来&#xff0c;我国农业物联网技术飞速发展&#xff0c;基于物联网技术的智能农业监测系统有望得到较大规模的推广应用。但传统的物联网农业监测系统其网络结构层次单一&#xff0c;多采用基于有线或无线结构的节点-上位机数据采集模式&#xff0c;节点数据访问模式缺乏灵活…...

编程日记 2023/12/29 22:03:58

k8s-cni网络 10

Flannel vxlan模式跨主机通信原理 在同一个节点上的pod 流量通过cni网桥可以直接进行转发&#xff1b; 在需要跨主机访问时&#xff0c;数据包通过flannel(隧道) 知道另一边的mac地址&#xff0c;就可以拿到另一边的ip地址&#xff0c;然后构建常规的以太网数据包&#xff0c;…...

编程日记 2023/12/29 22:01:56

听GPT 讲Rust源代码--src/tools(27)

File: rust/src/tools/clippy/clippy_lints/src/methods/suspicious_to_owned.rs 文件rust/src/tools/clippy/clippy_lints/src/methods/suspicious_to_owned.rs的作用是实施Clippy lint规则&#xff0c;检测产生潜在性能问题的字符转换代码&#xff0c;并给出相关建议。 在Rus…...

编程日记 2023/12/29 22:00:55

经济危机下，我们普通人如何翻身？2024创业新风口，适合普通人的创业项目

明年的商业环境会比今年更残酷&#xff0c;不是贩卖危机。旅游行业还在刺激性消费&#xff0c;再过几个月大家就没钱了&#xff0c;估计慢慢也消停。中小微企业资金链断裂&#xff0c;大部分公司倒闭&#xff0c;大批人失业&#xff0c;所以经济恢复需要一个周期。 30年河东&am…...

编程日记 2023/12/29 21:58:53

深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第五节 引用类型复制问题及用克隆接口ICloneable修复

深入浅出图解C#堆与栈 C# Heaping VS Stacking 第五节 引用类型复制问题及用克隆接口ICloneable修复 [深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第一节 理解堆与栈](https://mp.csdn.net/mdeditor/101021023)[深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第二节…...

编程日记 2023/12/29 21:56:51

python中基本元素的pop函数

python中基本元素的pop函数 一、列表List二、元组Tuple三、字典dict四、集合set 一、列表List pop() 根据索引删除并返回被删除的元素&#xff0c;索引默认为-1 a [1, 2, 3, 2, 5] b a.pop() # b5&#xff0c;默认返回最后一个值 print(b) b a.pop(2) # b3,返回a[2] pri…...

编程日记 2023/12/29 21:55:50

MPLS动态协议LDP配置示例

一、预习&#xff1a; MPLS是一种根据报文中携带的标签来转发数据的技术&#xff0c;两台LSR必须在它们之间转的数据 的标签使用上“达成共识”。LSR之间可以运行LDP来告知其他LSR本设备上的标签绑定信息&#xff0c;从而实现标签报文的正确转发。 LSR&#xff1a;Label Switch…...

编程日记 2023/12/29 21:48:44

JS调用栈：为何会栈溢出

JS调用栈&#xff1a;为何会栈溢出 JS调用栈什么是函数调用什么是栈在开发中利用调用栈栈溢出 JS调用栈 JavaScript 经常会出现一个函数中调用另外一个函数的情况&#xff0c;调用栈就是用来管理函数调用关系的一种数据结构&#xff0c;首先你要先弄明白函数调用和栈结构 什么…...

编程日记 2023/12/29 21:47:43

代码随想Day52 | 300.最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组

300.最长递增子序列 这道题目的重点在于动态数组的定义 dp[i]&#xff1a;以nums[i]为结尾的最长递增子序列&#xff0c;因为这样定义可以进行递推&#xff1b; 递推&#xff1a;j从0-i进行对比&#xff0c;如果nums[i]大于nums[j]&#xff0c;dp[i]dp[j]1&#xff1b; 初始化…...

编程日记 2023/12/29 21:45:41

使用 pytest 相关特性重构 appium_helloworld

一、前置说明 在 pytest 基础讲解 章节，介绍了 pytest 的特性和基本用法，现在我们可以使用 pytest 的一些机制，来重构 appium_helloworld 。 appium_helloworld 链接: 编写第一个APP自动化脚本 appium_helloworld ，将脚本跑起来 代码目录结构： pytest.ini 设置： [pyt…...

编程日记 2023/12/29 21:43:40

猪目标检测数据集VOC格式600张

猪是一种常见的哺乳动物&#xff0c;通常被人们认为是肉食动物&#xff0c;但实际上猪是杂食性动物&#xff0c;以植物性食物为主&#xff0c;也有偶尔食肉的习性。猪的体型较大&#xff0c;圆胖的体型和圆润的脸庞使其显得憨态可掬。它们主要通过嗅觉来感知周围环境&#xff0…...

编程日记 2023/12/29 21:42:39

Pandas中concat的用法

Pandas中concat的用法 ​ pd.concat 是 pandas 库中的一个函数&#xff0c;用于将多个 pandas 对象&#xff08;如 Series、DataFrame&#xff09;沿指定轴进行合并连接。 pd.concat(objs, axis0, joinouter, ignore_indexFalse, keysNone, levelsNone, namesNone, verify_in…...

编程日记 2023/12/29 21:40:36

【C++】引用详解

前言 在学习C语言时&#xff0c;我们通常会遇到两个数交换的问题&#xff0c;为了实现这一功能&#xff0c;我们会编写一个经典的Swap函数&#xff0c;如下所示&#xff1a; void Swap(int *a, int *b) {int tmp *a;*a *b;*b tmp; } 然而&#xff0c;这个Swap函数看起来可…...

编程日记 2023/12/29 21:39:35

平时的一些思考内容

文章目录 阶乘位运算求概率 阶乘 阶乘是一很迷人的&#xff0c;刚开始的的变化还不是很大&#xff0c;到后面变化类似于直线上升的&#xff0c;不知道现实中哪些实例来表示阶乘。19的阶乘就已经超过了long了&#xff0c;在竞赛或者其他中要求2023或者很大数字的阶乘就需要考虑…...

编程日记 2023/12/29 21:38:34

AIGC时代下，结合ChatGPT谈谈儿童教育

引言 都2024年了&#xff0c;谈到儿童教育&#xff0c;各位有什么新奇的想法嘛 我觉得第一要务&#xff0c;要注重习惯养成&#xff0c;我觉得聊习惯养成这件事情范围有点太大了&#xff0c;我想把习惯归纳于底层逻辑&#xff0c;我们大家都知道&#xff0c;在中国式教育下&a…...

编程日记 2023/12/29 21:36:33

Java中的锁（一）

一、前言 在Java中&#xff0c;锁是用于多线程同步的重要概念。它可以保护共享资源&#xff0c;确保多个线程在访问共享资源时的数据一致性。 共享资源指的是多个线程同时对同一份资源进行访问 (读写操作)&#xff0c;被多个线程访问的资源就称为共享资源。 如何保证多个线程访…...

编程日记 2023/12/29 21:34:31

百度seo整站优化公司/武汉网站推广公司排名

原文地址:http://blog.sina.com.cn/s/blog_6bc811e401011a17.html java.sql.SQLException: 无效的列索引 “无效的列索引”其实是个低级的错误&#xff0c;原因无非几个&#xff1a; 1、sql串的?号数目和提供的变量数目不一致&#xff1a; 例如&#xff1a;jdbcTemplate.updat…...

编程日记 2025/1/18 15:11:08

中交路桥建设网站/腾讯朋友圈广告怎么投放

分支预测 在stackoverflow上有一个非常有名的问题&#xff1a; 为什么处理有序数组要比非有序数组快&#xff0c;可见分支预测对代码运行效率有非常大的影响。 现代CPU都支持分支预测(branch prediction)和指令流水线(instruction pipeline)&#xff0c;这两个结合可以极大提高…...

编程日记 2025/1/18 10:53:11

php如何自学做网站/新手怎么入行sem

01先来谈谈企业搭建大数据分析平台的背景1、搭建大数据平台离不开BI。在大数据之前&#xff0c;BI就已经存在很久了&#xff0c;简单把大数据等同于BI&#xff0c;明显是不恰当的。但两者又是紧密关联的&#xff0c;相辅相成的。BI是达成业务管理的应用工具&#xff0c;没有BI&…...

编程日记 2025/1/18 10:17:51

网站栏目标签如何调用/营销策划公司 品牌策划公司

来源&#xff1a;AI科技评论我们什么时候才能拥有在各方面能够模仿人脑的人工智能&#xff1f;专家们对这个问题意见不一。但大家都同意的是&#xff0c;目前的人工智能系统与人类的智力相去甚远。直接表现是&#xff1a;AI只在特定任务中表现优异&#xff0c;无法将其能力扩展…...

编程日记 2025/1/18 7:48:22

网线水晶头排线图片/谷歌优化的最佳方案

最近使用开发的过程中出现了一个小问题&#xff0c;顺便记录一下原因和方法--串字符串 Description“回文串”是一个正读和读反都一样的字符串&#xff0c;比如“level”或者“noon”等等就是回文串。请写一个程序判断读入的字符串否是是“回文”。 Input输入包括多个试测实例&…...

编程日记 2025/1/18 5:17:28

邢台视频优化/重庆网站优化

http://semantic-ui.com/introduction/getting-started.html...

编程日记 2025/1/18 3:12:24