这里记录下灵感：原本是打算做一个本地时钟，想给淘汰的iPhoneSE手机来个全屏时钟放在桌子上当摆件玩。现有的都需要额外装APP来实现，想着能不能用自带浏览器直接网页实现。
于是就有了如下代码，但是效果不好，不同浏览器的兼用性目前有点问题（安卓是可以的）。权当留个记录和念想吧，有能力的网友可以参考下。
使用canvas全屏绘制文字或图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动全屏对画布的视频重放处理</title>
</head>
<body>
<!--html code-->
<div className="container">
<div>
<p>画板区</p>
<canvas id="theCanvas"></canvas>
</div>
<div>
<p>视频区</p>
<!-- <video id="theVideo" controls="controls" autoplay="autoplay" muted></video> -->
<video id="theVideo" autoplay="autoplay" muted></video>
</div>
<button onClick="startCaptureCanvas()">开始全屏捕获并播放(startCaptureCanvas)</button>
</div>
<script>
//js code
// 对画布的变化
var canvas, context, painting = false;
function initCanvas() {
canvas = document.getElementById('theCanvas');
canvas.height = 200;
canvas.width = 320;
context = canvas.getContext("2d");
context.fillStyle = "#ccc";
context.fillRect(0, 0, canvas.width, canvas.height);
context.lineWidth = 1;
context.storkeStyle = "#000";
}
window.onload = initCanvas()
function fullScreen(el) {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.webkitEnterFullScreen || el.msRequestFullScreen,
wscript;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript) {
wscript.SendKeys("{F11}");
}
}
}
// 对画布的视频重放处理
var stream, video, pauseCapture = false;
function startCaptureCanvas() {
stream = canvas.captureStream();
video = document.getElementById('theVideo');
video.srcObject = stream;
video.addEventListener('loadedmetadata', function () {
if (video.readyState >= video.HAVE_CURRENT_DATA) {
// 视频流已经载入，可以开始播放
video.play();
fullScreen(video);
} else {
// 视频流尚未载入，需要等待一段时间后再次检查
}
})
// 自动画
context.beginPath();
context.moveTo(0, 0);
context.stroke();
context.lineTo(100, 100);
context.stroke();
setInterval(function (context) {
context.lineTo(Math.random() * 120, Math.random() * 100);
context.stroke();
}, 2000, context);
}
</script>
</body>
</html>