webrtc录制视频

<!doctype html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>SkyRTC聊天室Demo</title><style type="text/css">html, body {width: 100%;height: 100%;margin: 0;padding: 0;background-color: #f0f0f0;}#videos {position: absolute;left: 30%;top: 0;bottom: 0;right: 0;overflow: auto;}#videos video {display: inline-block;width: 32%;}#chat {position: absolute;left: 0;top: 0;bottom: 0;width: 30%;border: 1px solid #0f0f0f;}#chat .msgIpt, #chat .fileIpt{position: absolute;left: 0;width: 80%;}#chat .sendBtn, #chat .sendFileBtn {position: absolute;left: 80%;width: 20%;}#chat .msgIpt,#chat .sendBtn {bottom: 0;}#chat .fileIpt, #chat .sendFileBtn {bottom: 30px;}#chat .msgs {padding: 5%;}#chat .msgs p{margin: 0.3em 0;}#files {position: absolute;bottom: 0;right: 0;width: 20%;}#files .name {}#files .percent {font-weight: bold;text-decoration: none}</style>
</head>
<body><div id="chat"><button id="start" >start</button><button id="stop" >stop</button><div class="msgs" id="msgs"></div><input type="file" id="fileIpt" class="fileIpt"><button id="sendFileBtn" class="sendFileBtn">发送文件</button><input type="text" id="msgIpt" class="msgIpt"><button id="sendBtn" class="sendBtn">发送</button></div><div id="videos"><video id="previewVideo" autoplay></video><video id="me" autoplay></video><video id="me2" autoplay></video></div><div id="files"></div>
</body><script type="text/javascript" src="js/SkyRTC-client.js"></script>
<script src="js/RecordRTC.js"></script>
<script src="https://www.webrtc-experiment.com/DetectRTC.js"> </script>
<script src="js/moment.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
//index.html index2.html 配合   index.html 页面录制    index2.html不录制
var timelabel=moment( new Date()).format('YYYY-MM-DD HH:mm:ss');
var Streams = [];
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {devices.forEach(function(device) {console.log(device.kind + ": " + device.label +" id = " + device.deviceId);});
})
.catch(function(err) {console.log(err.name + ": " + err.message);
});var videos = document.getElementById("videos");var sendBtn = document.getElementById("sendBtn");var msgs = document.getElementById("msgs");var sendFileBtn = document.getElementById("sendFileBtn");var start = document.getElementById("start");var stop = document.getElementById("stop");var files = document.getElementById("files");var rtc = SkyRTC();var recorder;var video = document.getElementById("previewVideo");start.onclick = function() {recorder = RecordRTC(Streams, {type: 'video',mimeType: 'video/webm',previewStream: function(s) {video.muted = true;video.srcObject = s;}});recorder.startRecording();}; stop.onclick = function(){recorder.stopRecording(function() {var blob = recorder.getBlob();invokeSaveAsDialog(blob);});
}; /**********************************************************/sendBtn.onclick = function(event){var msgIpt = document.getElementById("msgIpt"),msg = msgIpt.value,p = document.createElement("p");p.innerText = "me: " + msg;//广播消息rtc.broadcast(msg);msgIpt.value = "";msgs.appendChild(p);};sendFileBtn.onclick = function(event){//分享文件rtc.shareFile("fileIpt");};/**********************************************************///对方同意接收文件rtc.on("send_file_accepted", function(sendId, socketId, file){var p = document.getElementById("sf-" + sendId);p.innerText = "对方接收" + file.name + "文件，等待发送";});//对方拒绝接收文件rtc.on("send_file_refused", function(sendId, socketId, file){var p = document.getElementById("sf-" + sendId);p.innerText = "对方拒绝接收" + file.name + "文件";});//请求发送文件rtc.on('send_file', function(sendId, socketId, file){var p = document.createElement("p");p.innerText = "请求发送" + file.name + "文件";p.id = "sf-" + sendId;files.appendChild(p);});//文件发送成功rtc.on('sended_file', function(sendId, socketId, file){var p = document.getElementById("sf-" + sendId);p.parentNode.removeChild(p);});//发送文件碎片rtc.on('send_file_chunk', function(sendId, socketId, percent, file){var p = document.getElementById("sf-" + sendId);p.innerText = file.name + "文件正在发送: " + Math.ceil(percent) + "%";});//接受文件碎片rtc.on('receive_file_chunk', function(sendId, socketId, fileName, percent){var p = document.getElementById("rf-" + sendId);p.innerText = "正在接收" + fileName + "文件：" +  Math.ceil(percent) + "%";});//接收到文件rtc.on('receive_file', function(sendId, socketId, name){var p = document.getElementById("rf-" + sendId);p.parentNode.removeChild(p);});//发送文件时出现错误rtc.on('send_file_error', function(error){console.log(error);});//接收文件时出现错误rtc.on('receive_file_error', function(error){console.log(error);});//接受到文件发送请求rtc.on('receive_file_ask', function(sendId, socketId, fileName, fileSize){var p;if (window.confirm(socketId + "用户想要给你传送" + fileName + "文件，大小" + fileSize + "KB,是否接受？")) {rtc.sendFileAccept(sendId);p = document.createElement("p");p.innerText = "准备接收" + fileName + "文件";p.id = "rf-" + sendId;files.appendChild(p);} else {rtc.sendFileRefuse(sendId);}});//成功创建WebSocket连接rtc.on("connected", function(socket) {//创建本地视频流//3227b763f11994c3d333cbe5c0e8ef400af1350cb752bbe4a88a16a63868fc92
//b9ca344ed28ef4a991829b5bb3543c98e6fd7e69112b6eb35183285a6a8f20b6const videocon =  { optional: [{ sourceId: '3227b763f11994c3d333cbe5c0e8ef400af1350cb752bbe4a88a16a63868fc92'}] } ;rtc.createStream({"video": true,"audio": true});});//创建本地视频流成功rtc.on("stream_created", function(stream) {document.getElementById('me').src = URL.createObjectURL(stream);document.getElementById('me').play();Streams.push(stream);alert(1);});//创建本地视频流失败rtc.on("stream_create_error", function() {alert("create stream failed!");});//接收到其他用户的视频流rtc.on('pc_add_stream', function(stream, socketId) {var newVideo = document.createElement("video"),id = "other-" + socketId;newVideo.setAttribute("class", "other");newVideo.setAttribute("autoplay", "autoplay");newVideo.setAttribute("id", id);videos.appendChild(newVideo);rtc.attachStream(stream, id);stream.onRender = function(context, x, y, width, height) {context.font = '20px Georgia';var userName =  timelabel;var measuredTextWidth = parseInt(context.measureText(userName).width);x = x + (parseInt((width - measuredTextWidth)) / 2)+60;y = height - 200;context.strokeStyle = 'rgb(255, 0, 0)';context.fillStyle = 'rgba(255, 255, 0, .5)';roundRect(context, x - 20, y - 25, measuredTextWidth + 40, 35, 20, true);var gradient = context.createLinearGradient(0, 0, width * 2, 0);gradient.addColorStop('0', 'magenta');gradient.addColorStop('0.5', 'blue');gradient.addColorStop('1.0', 'red');context.fillStyle = gradient;context.fillText(userName, x, y);};Streams.push(stream);if(Streams.length==2){recorder = RecordRTC(Streams, {type: 'video',mimeType: 'video/webm',//mimeType:'video/webm\;codecs=h264',disableLogs: true,timeSlice: 3000,ondataavailable: dataAvailabe, onTimeStamp: function(timestamp) { console.log('onTimeStamp:'+timestamp); },previewStream: function(s) {video.muted = false;video.srcObject = s;video.play();}});recorder.startRecording();}});//删除其他用户rtc.on('remove_peer', function(socketId) {var video = document.getElementById('other-' + socketId);if(video){video.parentNode.removeChild(video);}});//接收到文字信息rtc.on('data_channel_message', function(channel, socketId, message){var p = document.createElement("p");p.innerText = socketId + ": " + message;msgs.appendChild(p);});//当前域名或ip（包括ip和端口）var url=window.location.host;//console.log(url);//ws还是wssvar wsProtocol = 'https:' == document.location.protocol ? 'wss' : 'ws';var pathName = window.document.location.pathname;//获取带"/"的项目名，如：/webrtcvar projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);var chatWebSocketUrl=wsProtocol+"://"+url+projectName+"/onlineUserControl";var webrtcWebSocketUrl=wsProtocol+"://"+url+projectName+"/websocket3"; //alert(webrtcWebSocketUrl);rtc.connect(webrtcWebSocketUrl,'');//连接WebSocket服务器//alert(window.location.href.substring(window.location.protocol.length).split('#')[0]);//rtc.connect("wss:" + window.location.href.substring(window.location.protocol.length).split('#')[0], window.location.hash.slice(1));//rtc2.connect("wss:" + window.location.href.substring(window.location.protocol.length).split('#')[0], window.location.hash.slice(1));function dataAvailabe(blob) {console.log('Record stopped. ondataavailable size:'+blob.size);postData(blob);console.log(blob);
}var ix=9, fn = 'tests0.webm';function postData(blob) {var fd = new FormData();var fa = fn.replace('0', ix);fd.append('ix', ix);fd.append('file', fa);fd.append('fileData', blob, fa);var xhr = new XMLHttpRequest();xhr.open('POST', '/upload3', true);xhr.onreadystatechange=function RequestCallBack(){if (xhr.readyState==4 && xhr.status==200){console.log(xhr.responseText);}};xhr.send(fd);}function roundRect(ctx, x, y, width, height, radius, fill, stroke) {if (typeof stroke == 'undefined') {stroke = true;}if (typeof radius === 'undefined') {radius = 5;}if (typeof radius === 'number') {radius = {tl: radius,tr: radius,br: radius,bl: radius};} else {var defaultRadius = {tl: 0,tr: 0,br: 0,bl: 0};for (var side in defaultRadius) {radius[side] = radius[side] || defaultRadius[side];}}ctx.beginPath();ctx.moveTo(x + radius.tl, y);ctx.lineTo(x + width - radius.tr, y);ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);ctx.lineTo(x + width, y + height - radius.br);ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);ctx.lineTo(x + radius.bl, y + height);ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);ctx.lineTo(x, y + radius.tl);ctx.quadraticCurveTo(x, y, x + radius.tl, y);ctx.closePath();if (fill) {ctx.fill();}if (stroke) {ctx.stroke();}}var t=self.setInterval("clock()",1000)function clock(){timelabel=moment( new Date()).format('YYYY-MM-DD HH:mm:ss');}$(window).unload(function(){//响应事件window.clearInterval(t); }); </script>
</html>

webrtc录制视频相关推荐

WebRTC实现一个网页在线录制视频
电脑录制视频几乎不会用到,当有需要的时候就各种找软件找工具,并且都会找免费的.现在市场上肯定有很多符合需求,只是那么偶尔的情况下,而且使用场景不是那么多要求的情况下,一个网页在线直接录屏是不是非常ni ...
webRTC（四）：Webrtc音视频数据采集录制采集屏面数据
WebRTC音视频数据采集 var constraints={video: true,audio: true,}navigator.mediaDevices.getUserMedia(constrai ...
基于webrtc的视频聊天室（一）之千里之行始于足下
在不采用流媒体的情况下,也能够实现视频聊天室:可这需要在客户端建立多个连接,对客户端要求很高(上行带宽以及浏览器编解码速度),所以引入 kurento 流媒体服务器来做中转,或许后续不仅仅只是做中转. ...
HTML5调用摄像头录制视频
HTML5调用摄像头录制视频不支持ie,ie下不支持webrtc,无法使用navigator.getUserMedia调用摄像头 <!DOCTYPE html> <html> ...
Android音视频开发：MediaRecorder录制视频
简介安卓api提供了Camera类控制相机捕获图像,在api21以后,安卓也提供了Camera2,Camera变得过时了,但为了兼容性,这里还是使用Camera. 对于录制视频,可以使用MediaR ...
转：Android IOS WebRTC 音视频开发总结（系列文章集合）
随笔分类 - webrtc Android IOS WebRTC 音视频开发总结(七八)-- 为什么WebRTC端到端监控很关键? 摘要: 本文主要介绍WebRTC端到端监控(我们翻译和整理的,译者: ...
Android IOS WebRTC 音视频开发
转自:http://www.cnblogs.com/lingyunhu/category/626157.html 作者:lingyunhu rtc.blacker@gmail.com 随笔分类 - ...
iOS三种录制视频方式详细对比
先附上参考资料 http://www.jianshu.com/p/16cb14f53933 https://developer.apple.com/library/content/samplecode ...
Android IOS WebRTC 音视频开发总结（三八）-- tx help
Android IOS WebRTC 音视频开发总结(三八)-- tx help 本文主要介绍帮一个程序员解决webrtc疑问的过程,文章来自博客园RTC.Blacker,支持原创,转载请说明出处(w ...

webrtc录制视频

webrtc录制视频相关推荐

最新文章

热门文章