HTMLVideoElement.srcObject MediaStream MediaSource Blob File

MediaSource

<!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>

srcObject = MediaStream 播放摄像头

<!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

posted @ 2021-09-01 10:43  develon  阅读(720)  评论(0)  编辑  收藏  举报