opt media

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

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()

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

plugin/story/media.js

@@ -1,48 +1,92 @@
 Volcanos(chat.ONIMPORT, {help: "导入数据", _init: function(can, msg, cb, target) {
-	can.base.isFunc(cb) && cb(msg)
+		can.onmotion.clear(can, target), can.base.isFunc(cb) && cb(msg)
-}})
+		can.requireModules(["gifshot/dist/gifshot.js"], function() {
-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.onappend._action(can, [], ui.action, {
+		})
-			"关闭": function(event) {
+		var height = can.ConfHeight()
-				can.core.List(ui.stream.getTracks(), function(track) { track.stop() })
+		can.ui = can.page.Append(can, can._output, [{view: html.OUTPUT}, {view: html.DISPLAY, style: {height: height/4}}])
-				can.page.Remove(can, ui.action), can.page.Remove(can, ui.output)
+		msg.Table(function(value) {
-			},
+			can.onimport._video(can, "/chat/media/"+value.path)
-			"抓拍": 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')
-			},
 		})
 	},
-	"打开屏幕": function(event, can) {
+
-		can.onaction._action(can, function(item, ui) {
+	_action: function(can, list) {
-			navigator.mediaDevices.getDisplayMedia({video: {width: can.ConfWidth()}}).then(function(stream) { ui.stream = stream
+		can.onappend._action(can, list||can.onaction.list, can._action, can.onaction)
-				item.srcObject = stream, item.onloadedmetadata = function(e) { item.play() }
+	},
+	_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) {
+	"摄像": function(event, can) {
-		can.onaction._action(can, function(item, ui) {
+		can.onimport._layout(can, function(target) {
-			navigator.mediaDevices.getUserMedia({video: {width: can.ConfWidth()}}).then(function(stream) { ui.stream = stream
+			navigator.mediaDevices.getUserMedia({video: {height: can.ConfHeight()*3/4}}).then(function(stream) { can.stream = stream
-				item.srcObject = stream, item.onloadedmetadata = function(e) { item.play() }
+				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"]})