diff --git a/lib/page.js b/lib/page.js index 1d3c0ead..2adfab16 100644 --- a/lib/page.js +++ b/lib/page.js @@ -462,7 +462,6 @@ Volcanos("page", {help: "用户界面", ClassList: { }) }) }, - insertBefore: function(can, list, before, parent) { parent = parent||before.parentNode var item = can.base.isArray(list)? can.page.Append(can, parent, list).first: list return before && parent.insertBefore(item, before), item diff --git a/panel/action.js b/panel/action.js index 9dca94ef..cc455eb8 100644 --- a/panel/action.js +++ b/panel/action.js @@ -43,6 +43,10 @@ Volcanos(chat.ONIMPORT, {help: "导入数据", _init: function(can, msg) { _cmd: function(can, item, next) { can.onengine.signal(can, chat.ONACTION_CMD) can.onappend.plugin(can, can.base.Copy(item, {opts: can.misc.Search(can), mode: "cmd"}), function(sub, meta, skip) { + sub.run = function(event, cmds, cb) { + can.request(event, {height: sub.ConfHeight(), width: can.ConfWidth()}) + can.runActionCommand(event, sub._index, cmds, cb) + } sub.ConfHeight(can.ConfHeight()-can.Conf(html.MARGIN_Y)) can.page.style(can, sub._output, html.MAX_WIDTH, can.ConfWidth()) can.user.title(meta.name), skip || next() diff --git a/plugin/local/wiki/feel.js b/plugin/local/wiki/feel.js index 21967351..12e82106 100644 --- a/plugin/local/wiki/feel.js +++ b/plugin/local/wiki/feel.js @@ -53,6 +53,7 @@ Volcanos(chat.ONFIGURE, {help: "组件菜单", mp4: function(can, path) { return can.onfigure.video(can, path) }, m4v: function(can, path) { return can.onfigure.video(can, path) }, mov: function(can, path) { return can.onfigure.video(can, path) }, + webm: function(can, path) { return can.onfigure.video(can, path) }, }) Volcanos(chat.ONACTION, {help: "组件菜单", list: [ [html.HEIGHT, 100, 200, 400, 600, 800, ice.AUTO], @@ -82,6 +83,48 @@ Volcanos(chat.ONACTION, {help: "组件菜单", list: [ can.page.Append(can, can._output, [{img: item, height: 200}]) }) }) }, + record1: function(event, can) { var height = window.innerHeight, width = window.innerWidth + can.user.input(event, can, [{type: "text", name: "file", value: "some"}], function(list) { + navigator.mediaDevices.getDisplayMedia({video: {height: height}}).then(function(stream) { + var video = can.page.Append(can, can._output, [{type: html.VIDEO, height: height}]).first + video.srcObject = stream, video.onloadedmetadata = function(e) { video.play() + can.onmotion.delay(can, function() { + var canvas = can.page.Append(can, can._output, [{type: html.CANVAS, height: height, width: width}]).first + canvas.getContext("2d").drawImage(video, 0, 0, width, height, 0, 0, width, height) + canvas.toBlob((blob) => { + var msg = can.request(event) + msg._upload = new File([blob], (list[0])+".png") + can.runAction(event, html.UPLOAD, [], function() { + can.user.toast(can, "上传成功"), can.Update() + }) + }) + }) + } + }).catch(function(err) { can.user.toast(can, err.name + ": " + err.message) }) + }) + }, + record: function(event, can) { var blobs = [] + can.user.input(event, can, [{type: "text", name: "file", value: "some"}], function(list) { + navigator.mediaDevices.getDisplayMedia({video: {height: can.ConfHeight()*3/4}}).then(function(stream) { + can.core.Next([3, 2, 1], function(item, next) { + can.user.toast(can, item + "s 后开始录屏") + can.onmotion.delay(can, next, 1000) + }, function() { + can.user.toast(can, "现在开始录屏") + var recorder = new MediaRecorder(stream, {mimeType: 'video/webm'}) + recorder.ondataavailable = function(res) { blobs.push(res.data) } + recorder.onstop = function() { + can.user.toast(can, "录屏成功") + var msg = can.request(event) + msg._upload = new File(blobs, (list[0]||"some")+".webm") + can.runAction(event, html.UPLOAD, [], function() { + can.user.toast(can, "上传成功"), can.Update() + }) + }, recorder.start(10) + }) + }).catch(function(err) { can.user.toast(can, err.name + ": " + err.message) }) + }) + }, }) Volcanos(chat.ONDETAIL, {help: "组件菜单", list: ["关闭", "下载", "删除", "上一个", "下一个", "设置头像", "设置背景", "复制链接"], _init: function(can, index) { can.onappend._init(can, {type: "story feel float"}, [], function(sub) { can.sub = sub diff --git a/plugin/story/media.js b/plugin/story/media.js index 2061841e..57c70efd 100644 --- a/plugin/story/media.js +++ b/plugin/story/media.js @@ -1,48 +1,92 @@ Volcanos(chat.ONIMPORT, {help: "导入数据", _init: function(can, msg, cb, target) { - can.base.isFunc(cb) && cb(msg) -}}) -Volcanos(chat.ONACTION, {help: "操作数据", list: ["打开屏幕", "打开摄像", "打开录音"], - _action: function(can, cb) { - var ui = can.page.Append(can, can._output, [{view: html.ACTION}, {view: html.OUTPUT, list: [{type: html.VIDEO, style: {width: can.ConfWidth()}, _init: function(item) { - can.onmotion.delay(can, function() { cb(item, ui) }) - }}]}]) + can.onmotion.clear(can, target), can.base.isFunc(cb) && cb(msg) + can.requireModules(["gifshot/dist/gifshot.js"], function() { - can.onappend._action(can, [], ui.action, { - "关闭": function(event) { - can.core.List(ui.stream.getTracks(), function(track) { track.stop() }) - can.page.Remove(can, ui.action), can.page.Remove(can, ui.output) - }, - "抓拍": function(event) { - var canvas = can.page.Append(can, ui.output, [{type: html.CANVAS}]).first; canvas.getContext("2d").drawImage(ui.video, 0, 0) - can.page.Append(can, ui.output, [{img: canvas.toDataURL('image/png'), style: {width: can.ConfWidth()}}]) - can.page.Remove(can, canvas) - }, - "录制": function(event) { ui.blobs = [] - ui.mediaRecorder = new MediaRecorder(ui.stream, {mimeType: 'video/webm'}) - ui.mediaRecorder.ondataavailable = (e) => { ui.blobs.push(e.data), can.misc.Log(ui.blobs.length) } - ui.mediaRecorder.start(100) - }, - "回放": function(event) { var blobs = ui.blobs; ui.blobs = [] - var video = can.page.Append(can, ui.output, [{type: html.VIDEO, style: {width: can.ConfWidth()}}]).video - video.src = URL.createObjectURL(new Blob(blobs, {type : 'video/webm'})), video.play() - }, - "下载": function(event) { - can.user.download(can, URL.createObjectURL(new Blob(ui.blobs, {type: 'video/webm'})), 'record.webm') - }, + }) + var height = can.ConfHeight() + can.ui = can.page.Append(can, can._output, [{view: html.OUTPUT}, {view: html.DISPLAY, style: {height: height/4}}]) + msg.Table(function(value) { + can.onimport._video(can, "/chat/media/"+value.path) }) }, - "打开屏幕": function(event, can) { - can.onaction._action(can, function(item, ui) { - navigator.mediaDevices.getDisplayMedia({video: {width: can.ConfWidth()}}).then(function(stream) { ui.stream = stream - item.srcObject = stream, item.onloadedmetadata = function(e) { item.play() } - }).catch(function(err) { can.misc.Log(err.name + ": " + err.message) }) - }) + + _action: function(can, list) { + can.onappend._action(can, list||can.onaction.list, can._action, can.onaction) }, - "打开摄像": function(event, can) { - can.onaction._action(can, function(item, ui) { - navigator.mediaDevices.getUserMedia({video: {width: can.ConfWidth()}}).then(function(stream) { ui.stream = stream - item.srcObject = stream, item.onloadedmetadata = function(e) { item.play() } - }).catch(function(err) { can.misc.Log(err.name + ": " + err.message) }) - }) + _layout: function(can, cb) { var height = can.ConfHeight() + can.ui.video = can.page.Appends(can, can.ui.output, [{type: html.VIDEO, data: {controls: "controls"}, style: {height: height*3/4}, _init: function(target) { + can.onmotion.delay(can, function() { cb(target) }) + }}]).first, can.onimport._action(can, ["抓拍", "录制", "取消"]) + }, + _image: function(can, src) { + can.page.insertBefore(can, [{img: src, style: {height: can.ConfHeight()/4}}], can.ui.display.firstChild, can.ui.display) + return src + }, + _video: function(can, src) { + can.page.insertBefore(can, [{type: html.VIDEO, src: src, data: {controls: "controls"}, style: {height: can.ConfHeight()/4}}], can.ui.display.firstChild, can.ui.display) + return src }, }) +Volcanos(chat.ONACTION, {help: "操作数据", list: ["录屏", "摄像"], + "录屏": function(event, can) { + can.onimport._layout(can, function(target) { + navigator.mediaDevices.getDisplayMedia({video: {height: can.ConfHeight()*3/4}}).then(function(stream) { can.stream = stream + target.srcObject = stream, target.onloadedmetadata = function(e) { target.play() } + }).catch(function(err) { can.misc.Log(err.name + ": " + err.message) }) + }) + }, + "摄像": function(event, can) { + can.onimport._layout(can, function(target) { + navigator.mediaDevices.getUserMedia({video: {height: can.ConfHeight()*3/4}}).then(function(stream) { can.stream = stream + target.srcObject = stream, target.onloadedmetadata = function(e) { target.play() } + }).catch(function(err) { can.misc.Log(err.name + ": " + err.message) }) + }) + }, + "抓拍": function(event, can) { var width = can.ui.video.offsetWidth, height = can.ui.video.offsetHeight + var canvas = can.page.Append(can, can.ui.display, [{type: html.CANVAS, height: height, width: width}]).first + canvas.getContext("2d").drawImage(can.ui.video, 0, 0, width, height, 0, 0, width, height) + can.onimport._image(can, canvas.toDataURL('image/png')), can.page.Remove(can, canvas) + }, + "录制": function(event, can) { can.ui.blobs = [] + var recorder = new MediaRecorder(can.stream, {mimeType: 'video/webm'}) + recorder.ondataavailable = function(res) { can.ui.blobs.push(res.data), can.Status("total", can.ui.blobs.length) } + recorder.onstop = function() { + can.onimport._layout(can, function(target) { + target.src = can.onimport._video(can, URL.createObjectURL(new Blob(can.ui.blobs, {type: 'video/webm'}))) + }), can.onimport._action(can, ["上传", "取消"]) + } + recorder.start(10), can.ui.recorder = recorder + can.onimport._action(can, ["结束"]) + }, + "结束": function(event, can) { + can.core.List(can.stream.getTracks(), function(track) { track.stop() }) + }, + "上传": function(event, can) { var msg = can.request(event) + can.user.input(event, can, [{type: "text", name: "file", value: "some"}], function(list) { + msg._upload = new File(can.ui.blobs, (list[0]||"some")+".webm") + can.runAction(event, html.UPLOAD) + }) + }, + "取消": function(event, can) { + can.onmotion.clear(can, can.ui.output), can.onimport._action(can) + }, +}) +Volcanos(chat.ONDETAIL, {help: "操作数据", list: ["关闭", "抓拍", "录制"], + "成图": function(event, can) { + gifshot.createGIF({ + 'video': [URL.createObjectURL(new Blob(can.ui.blobs, {type : 'video/webm'}))], + },function(obj) { + if(!obj.error) { + can.user.download(can, obj.image, "some", "gif") + } + }); + }, + "回放": function(event, can) { + var video = can.page.Append(can, can.ui.output, [{type: html.VIDEO, style: {width: can.ConfWidth()}}]).video + video.src = URL.createObjectURL(new Blob(can.ui.blobs, {type : 'video/webm'})), video.play() + }, + "下载": function(event, can) { + can.user.download(can, URL.createObjectURL(new Blob(can.ui.blobs, {type: "video/webm"})), "record.webm") + }, +}) +Volcanos(chat.ONEXPORT, {help: "导出数据", list: ["total"]})