首页 > 其他分享 >WebRTC demo

WebRTC demo

时间:2023-11-25 15:33:26浏览次数:30  
标签:capture canvas demo video getUserMedia var WebRTC

HTML版WebRTC,可本地运行。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>WebRTC</title>
    </head>
    <body>
        <video autoplay playsinline></video>
        <div>
            <button id="capture">capture</button>
        </div>
        <div>
            <canvas id="canvas"></canvas>
        </div>
		<div id="errorMessage"></div>
    </body>
    <script type="text/javascript">
        var video = document.querySelector('video');   
        
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            console.log("your browser doesn't support getUserMedia");
			alert("your browser doesn't support getUserMedia");
        } else {
            var constraints = {                
                audio: true,
                video: true
            }
            navigator.mediaDevices.getUserMedia(constraints)
            .then(function(stream){
                video.srcObject = stream;
            })
            .catch(function(err) {
				console.log(err);
				alert(err);
            });    
        }
        var capture = document.getElementById('capture');
        var canvas = document.getElementById('canvas');
        capture.onclick = function() {
		    canvas.width = video.videoWidth;
			canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        }
	</script>
</html>

标签:capture,canvas,demo,video,getUserMedia,var,WebRTC
From: https://www.cnblogs.com/xzs603/p/17855581.html

相关文章

  • Vue项目demo
    企业级项目目录api接口模块:发送ajax请求的接口模块utils工具模块:自己封装的一些工具方法模块Vant组件库第三方组件库:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/引入组件方式一.自动按需引入组件(推荐)babel-plugin-import是一款babel插件,它会在编译过程中将......
  • Android widget简介及demo
    文章目录1、简介2、文件结构3、res->xml->appwidget_info.xml4、main_activity.xml5、AndroidManifest.xml6、MyWidget.java7、WidgetService.java8、MainActivity.java1、简介实现桌面小部件2、文件结构1)appwidget_info.xml定义了widget一些属性2)AndroidManifest.xml定义w......
  • Extjs应用tab页的最简单Demo
    <html><head><title>Extjs应用tab页的最简单Demo</title><linkrel="stylesheet"type="text/css"href="theme-gray-all.css"/><scripttype="text/javascript"src="ext-all.js"><......
  • 火狐浏览器无法播放webrtc
    新安装了火狐浏览器,然后发现无法播放WebRTC。我的解决本来找了n个方法,然后发现无效,还改了建立WebRtc连接的方法,还是不行,后来发现等火狐自己把插件安装完就行了火狐安装之后,会慢慢自己安装这2个插件,自动更新,等他自动更新好之后就可以播放了。我还找过自己安装的方法,点击更新......
  • WebRTC ,P2P, UDP,NAT,信令,socket
    为什么WebRTC使用UDP?NAT穿透需要UDP。没有NAT穿透,就无法建立P2P连接。UDP不像TCP那样"保证送达“,因此WebRTC在用户级别提供这一特性。你提到的是正确的,NAT(网络地址转换)穿透通常需要使用UDP协议。NAT是一种网络技术,用于将私有IP地址转换为公共IP地址,以便在互联......
  • 最新demo版 | 如何0-1开发支付宝小程序之小程序页面功能介绍(三)
    前两期讲了小程序开发的准备工作以及前期需要如何调试,今天我们就来介绍下开发一个支付宝小程序页面需要了解哪些信息。一个小程序页面的整体功能的构成离不开页面展示(AXML)、页面样式(ACSS)以及页面逻辑(JS)这三方面,下面本文将从这三方面具体展开。一、AXML(组件)AXML页面一般用来......
  • 【干货】Ehome demo工具的详细使用方法
    关注小编的都知道,除了日常方案与各类技术难题,小编也会经常分享一些技术干货。今天小编就给大家介绍一下Ehomedemo工具的详细使用方法。利用该工具可以测试和调试海康监控设备。具体步骤如下:1、选择所需IP;2、如果是测试本地设备,即配置本地ip;3、若是测试公网设备,配置公网......
  • 【干货】Ehome demo工具的详细使用方法
    关注小编的都知道,除了日常方案与各类技术难题,小编也会经常分享一些技术干货。今天小编就给大家介绍一下Ehomedemo工具的详细使用方法。利用该工具可以测试和调试海康监控设备。具体步骤如下:1、选择所需IP;2、如果是测试本地设备,即配置本地ip;3、若是测试公网设备,配置公网ip即可。目......
  • three demo
    import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";import{CSS2DRenderer,CSS2DObject,}from"three/examples/jsm/renderers/CSS2DRenderer.js";import*asd3from'd3';constscene=newTHREE.S......
  • 设计器demo示例数据库连接不上
    设计器demo示例数据库连接不上首先看下示例的 demo数据库是否启动。启动后可以看下左侧的控制台是否有错误,如果启动后链接还有问题,那么将设计器关闭,然后看下系统进程是否有重新连接。......