<html>
<head>
<script>
window.onerror = function(msg,url,line) {
console.log("error msg:" + msg);
console.log("error url:" + url);
console.log("line:" + line);
}
vertoHandler = new Object();
</script>
</head>
<body>
<canvas id="uCanvas" width="200" height="200" style="border: 1px solid red;"></canvas>
<video id="testVideo" width="200" height="200" Webkit-playsinline="true" playsinline="true" autoplay="autoplay" muted="muted"></video> <input type="text" name="" id="textIp">
<button οnclick="start()">播放</button>
<button οnclick="vertoHandler.hangup()">hangup</button>
<script>
let textIp = document.getElementById('textIp');
let testVideo = document.getElementById('testVideo');
function start() {
getUserMedia11({audio:false,video:true},success,error);
} function getUserMedia11(constrains,success,error){
if(navigator.mediaDevices.getUserMedia){
//最新标准API
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
} else if (navigator.webkitGetUserMedia){
//webkit内核浏览器
navigator.webkitGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.mozGetUserMedia){
//Firefox浏览器
navagator.mozGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.getUserMedia){
//旧版API
navigator.getUserMedia(constrains).then(success).catch(error);
}
} //成功的回调函数
async function success(stream){
textIp.value = '001'
console.log(stream)
textIp.value = '获取stream'
// testVideo.srcObject = stream
//testVideo.play()
console.log('success')
textIp.value = 'success' let frame_counter = 0;
const track = stream.getVideoTracks()[0];
textIp.value = 'track'
const media_processor = new MediaStreamTrackProcessor(track);
// videoTrackReader = new VideoTrackReader(track)
textIp.value = 'media_processor'
const reader = media_processor.readable.getReader();
var uc = document.getElementById("uCanvas");
textIp.value = 'success while'
console.log('success while')
while (true) {
const result = await reader.read();
if (result.done) {
alert("break");
break;
}
let frame = result.value;
uc.getContext('2d').drawImage(frame, 0, 0, uc.width, uc.height);
frame.close();
textIp.value = 'success end'
}
}
function error() {
textIp.value = '333' }
</script>
</body>
</html>
借助MediaStreamTrackProcessor使用canvas播放本地摄像头获取的stream视频流
原创wx63db212c2853a ©著作权
©著作权归作者所有:来自51CTO博客作者wx63db212c2853a的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
网络监控摄像头通过OBS取流变身电脑摄像头
OBS 网络摄像头接入腾讯会议
Windows 视频流 用户名 -
html js 页面架构图
SEO有没有未来?, “隐藏的内容”, “图片和内容滑动门”, “动画幻灯片”, “传送带”, “Tab内容选项卡” ,结合各种拖拽、滑动、灯箱等特效,这就是下面将为你呈现的。 1. jQuery pageSlide jQuery pageSlide 是一个jQuery插件,它可
html js 页面架构图 javascript ui ViewUI ide