<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video {
background: black;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
</style>
</head>
<body>
<video width="854" height="480" muted></video>
<script>
var video = document.getElementsByTagName('video')[0];
video.oncanplay = () => video.play();
var mediaSource = new MediaSource();
var obj_url = URL.createObjectURL(mediaSource);
video.src = obj_url; // blob:http://127.0.0.1:5500/629075b2-e0e2-4ebb-96a7-37a1d0ebed2c
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
mediaSource.addEventListener('sourceopen', () => {
var sourceBuffer = mediaSource.addSourceBuffer(`video/mp4; codecs="avc1.42E01E, mp4a.40.2"`);
fetch(`https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4`)
.then(async resp => {
var reader = resp.body.getReader();
sourceBuffer.onupdateend = async () => {
console.log(mediaSource.readyState); // open
const { done, value } = await reader.read();
if (done) {
return;
}
sourceBuffer.appendBuffer(value);
}
sourceBuffer.onupdateend();
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video {
background: black;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
</style>
</head>
<body>
<video width="854" height="480"></video>
<script>
var video = document.getElementsByTagName('video')[0];
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(mediaStream => {
video.srcObject = mediaStream;
video.oncanplay = () => {
video.play();
};
})
.catch(err => {
console.log(err);
alert('对不起，无法获取您的摄像头！');
});
</script>
</body>
</html>
END