media tutorialダウンロード - media tutorialソースコードのダウンロード

BAQ

createObjectURL错误Failed to execute 'createObjectURL' on 'URL'

 window . URL . createObjectURL ( data )

var binaryData = [ ] ;
binaryData . push ( data ) ;
window . URL . createObjectURL ( new Blob ( binaryData , { type : "application/zip" } ) ) ;

ナビゲーター

navigator.mediaDevices.getDisplayMedia画面源
navigator.mediaDevices.getUserMedia画像头ソース

 <!DOCTYPE html >
< html lang =" en " >

< head >
    < meta charset =" UTF-8 " >
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " >
    < meta http-equiv =" X-UA-Compatible " content =" ie=edge " >
    < title > Document </ title >
</ head >

< body >
    < style >
        video {
            width: 1000px;
            height: 500px
        }
    </ style >
    < video autoplay id =" video " > Video stream not available. </ video >
    < script >
        let video = document . getElementById ( 'video' ) ;
        navigator . mediaDevices . getDisplayMedia ( {
                video : true ,
                audio : true
            } )
            . then ( stream => {
                // we have a stream, attach it to a feedback video element
                console . log ( stream ) ;
                
                video . srcObject = stream ;
            } , error => {
                console . log ( "Unable to acquire screen capture" , error ) ;
            } ) ;
    </ script >
</ body >

</ html >

メディアレコーダー

MediaRecorder使用したビデオまたは音声の録音

navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {}获取音ビデオのstream
var mediaRecorder = new MediaRecorder(stream)の例化mediaRecorder 、 mediaRecorder会不断受信navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {}提供するstream 、そして它それ自身の複数のメソッド
mediaRecorder.start()点击イベント触発开開始录制
mediaRecorder.onstop = function(e) {}往mediaRecorder监听停止イベントvar blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });chunks = [];この場所のchunks存在せず、音声とともにビデオストリームが监破され、断続的に追加され、停止時にイベントがonstop発生し、最初に開始されずに停止され、都市接触が発生します
mediaRecorder.ondataavailable = function(e) {chunks.push(e.data);}不断监听stream ，并往chunks组追加音声ビデオストリームのデータ
mediaRecorder.stop()点击イベント触発暂停止录制
var audioURL = URL.createObjectURL(blob);audio.src = audioURL;console.log("recorder stopped"); blob使用してurl生成audioまたはvideoに标签上面去播放

 var constraints = { audio : true } ;
var chunks = [ ] ;

navigator . mediaDevices . getUserMedia ( constraints )
. then ( function ( stream ) {

var mediaRecorder = new MediaRecorder ( stream ) ;

record . onclick = function ( ) {
    mediaRecorder . start ( ) ;
    console . log ( mediaRecorder . state ) ;
}

stop . onclick = function ( ) {
    mediaRecorder . stop ( ) ;
    console . log ( mediaRecorder . state ) ;
}

mediaRecorder . onstop = function ( e ) {
    audio . setAttribute ( 'controls' , '' ) ;
    audio . controls = true ;
    var blob = new Blob ( chunks , { 'type' : 'audio/ogg; codecs=opus' } ) ;
    chunks = [ ] ;
    var audioURL = URL . createObjectURL ( blob ) ;
    audio . src = audioURL ;
    console . log ( "recorder stopped" ) ;
}

mediaRecorder . ondataavailable = function ( e ) {
    chunks . push ( e . data ) ;
}
} )
. catch ( function ( err ) {
    console . log ( 'The following error occurred: ' + err ) ;
} )

webkitRTCPeerConnection

 localPeerConnection = new RTCPeerConnection ( null ) ;
localPeerConnection . onicecandidate = function ( event ) {
    if ( event . candidate ) {
        remotePeerConnection . addIceCandidate ( new RTCIceCandidate ( event . candidate ) ) ; //answer方接收ICE
    }
} ;

remotePeerConnection = new RTCPeerConnection ( null ) ;
remotePeerConnection . onicecandidate = function ( event ) {
    if ( event . candidate ) {
        localPeerConnection . addIceCandidate ( new RTCIceCandidate ( event . candidate ) ) ; //offer方接收ICE
    }
} ;

remotePeerConnection . onaddstream = function gotRemoteStream ( event ) {
    recordedVideo . srcObject = event . stream ;
} ;

localPeerConnection . addStream ( recordStream ) ;
localPeerConnection . createOffer ( function ( description ) { //description是offer方的  SD  ==>  传输的内容
    localPeerConnection . setLocalDescription ( description ) ;
    remotePeerConnection . setRemoteDescription ( description ) ; //answer方接收offer的SD
    remotePeerConnection . createAnswer ( function ( description ) {
        remotePeerConnection . setLocalDescription ( description ) ; //answer方设置本身自己的SD
        localPeerConnection . setRemoteDescription ( description ) ; //offer接收answer方的SD
    } , function ( error ) {
        console . log ( error )
    } ) ; //answer方发送自己的SD
} , function ( error ) {
    console . log ( error )
} ) ;

ブロブ

Blob Binary Large Object

 new Blob ( blobParts , [ options ] ) ;

用法

blobParts: 数値グループのタイプ。数値グループ内の各要素が結合されて Blob オブジェクトのデータを構成します。数値グループ内の各要素は ArrayBuffer、ArrayBufferView、Blob、DOMString になります。
オプション：選択可能、字典格式型、次のように指定できますプロパティ：
- タイプ。値は "" で、BLOB に挿入される可能性のある MIME タイプを表します。
- これは、次の 2 つの値のうちの 1 つです。「ネイティブ」は、行終端文字が適切な合宿主に変更される可能性があることを示します。オペレーティングシステム文書システムの実行記号； "transparent" は、BLOB 内に保持される終了符が変化しないことを示します。

 var data1 = "a" ;
var data2 = "b" ;
var data3 = "<div style='color:red;'>This is a blob</div>" ;
var data4 = {
    "name" : "abc"
} ;

var blob1 = new Blob ( [ data1 ] ) ;
var blob2 = new Blob ( [ data1 , data2 ] ) ;
var blob3 = new Blob ( [ data3 ] ) ;
var blob4 = new Blob ( [ JSON . stringify ( data4 ) ] ) ;
var blob5 = new Blob ( [ data4 ] ) ;
var blob6 = new Blob ( [ data3 , data4 ] ) ;

console . log ( blob1 ) ; //输出：Blob {size: 1, type: ""}
console . log ( blob2 ) ; //输出：Blob {size: 2, type: ""}
console . log ( blob3 ) ; //输出：Blob {size: 44, type: ""}
console . log ( blob4 ) ; //输出：Blob {size: 14, type: ""}
console . log ( blob5 ) ; //输出：Blob {size: 15, type: ""}
console . log ( blob6 ) ; //输出：Blob {size: 59, type: ""}

スライス方法

BlobオブジェクトにBlob sliceメソッドがあり、ソースBlobオブジェクト内で指定された範囲内のデータを含む新しい Blob オブジェクトが返されます。

 slice ( [ start ] , [ end ] , [ contentType ] )

start: オプションで、 Blobの下部を表し、新しいBlobによって受信される可能性のある最初の文字の開始位置を示します。最終尾は後から前に計算を開始します。
終わり：場合によっては、 Blobの 1 つが代表され、この下位-1 の対応する文字が新しいBlobコピーされる可能性があります。数値が渡された場合、そのオフセット量はデータの最後から計算されることになる。
contentType: 任意で、新しいBlobに新しいテキストタイプが与えられます。これにより、そのタイププロパティが転送される値としてtype 。

 var data = "abcdef" ;
var blob1 = new Blob ( [ data ] ) ;
var blob2 = blob1 . slice ( 0 , 3 ) ;

console . log ( blob1 ) ; //输出：Blob {size: 6, type: ""}
console . log ( blob2 ) ; //输出：Blob {size: 3, type: ""}
let href = URL . createObjectURL ( blob2 ) ; //浏览器可以直接打开href连接看输出
console . log ( href ) ; //abc

URL.createObjectURL()

URL.createObjectURL document URL.createObjectURL()静的メソッドは、表示パラメータで指定されたオブジェクトの URL を含むDOMStringを作成します。このURLの存続期間と、作成されたドキュメントのドキュメントが含まれます。この新しいURLオブジェクトは、表示されるFile指定します。オブジェクトまたはBlobオブジェクト。

 objectURL = URL . createObjectURL ( blob ) ;

URL.revokeObjectURL()

URL.revokeObjectURL()静的メソッドを使用して 1 つを解放する前URL.createObjectURL()します。あるURLオブジェクトの使用が終了すると、この方法を使用することで、そのファイルURL参照を保持する必要がないことがブラウザに認識されます。

 window . URL . revokeObjectURL ( objectURL ) ;

分割上传

現在、 Blobオブジェクト大多数slice使用中、処理大文件分割上渡し ( Blob中スライスメソッドを利用)、処理画像canvas全域領域(回避增加crossOrigin = "Anonymous" 、当前のドメイン名のurl生成、その後URL.revokeObjectURL()释放、 createjsに役立ちます)、およびビデオソースパスなど。

 function upload ( blobOrFile ) {
    var xhr = new XMLHttpRequest ( ) ;
    xhr . open ( 'POST' , '/server' , true ) ;
    xhr . onload = function ( e ) {
        // ...
    } ;
    xhr . send ( blobOrFile ) ;
}

document . querySelector ( 'input[type="file"]' ) . addEventListener ( 'change' , function ( e ) {
var blob = this . files [ 0 ] ;
const BYTES_PER_CHUNK = 1024 * 1024 ; // 1MB chunk sizes.
const SIZE = blob . size ;
var start = 0 ;
var end = BYTES_PER_CHUNK ;
while ( start < SIZE ) {
    upload ( blob . slice ( start , end ) ) ;
    start = end ;
    end = start + BYTES_PER_CHUNK ;
}
} , false ) ;

ダウンロード

 var xhr = new XMLHttpRequest ( ) ;
xhr . open ( 'GET' , '/path/to/image.png' , true ) ;
xhr . responseType = 'blob' ;
xhr . send ( )

xhr . onload = function ( e ) {
    if ( this . status == 200 ) {
        var blob = this . response ;

        var img = document . createElement ( 'img' ) ;
        var URL = window . URL || window . webkitURL ; //兼容处理
        var objectUrl = URL . createObjectURL ( blob ) ;
        img . onload = function ( e ) {
            window . URL . revokeObjectURL ( img . src ) ; // 释放 url.
        } ;

        img . src = objectUrl ;
        document . body . appendChild ( img ) ;
        // ...
    }
} ;

xhr . send ( ) ;

代	作用	種類
`navigator.mediaDevices.getUserMedia(constraints).then(function(stream){};`	音声によるビデオソース头生成`stream`	メディアストリーム
`mediaRecorder = new MediaRecorder(window.stream, options)`	音声ビデオソースに基づいて`stream`をやり取りする`mediaRecorder`処理	メディアレコーダー
`mediaRecorder.ondataavailable = function (event) {recordedBlobs.push(event.data);}`	`stream`に基づいて各セグメントの`BlobEvent`を取得し、 `recordedBlobs`数グループに保存します	ブロブイベント
`let buffer = new Blob(recordedBlobs, {type: "video/webm"});`	`Blob`格式の音声ビデオストリームを取得	ブロブ
`test.src = window.URL.createObjectURL(buffer);`	`window.URL.createObjectURL`メソッドを使用して Blob を処理し、 `video`または`audio`操作することができます。	送信元
`recordStream = test.captureStream();`	`Blob` `MediaStream`に変換する	メディアストリーム
`new RTCPeerConnection(null).addStream(recordStream);`	`recordStream`を`RTCPeerConnection`処理します	メディアストリーム

 mediaRecorder = new MediaRecorder ( window . stream , options ) ; // 设置音频录入源、格式
mediaRecorder . ondataavailable = function ( event ) {
    // 这个会不断接受BlobEvent
    console . log ( event ) ;
    if ( event . data && event . data . size > 0 ) {
        recordedBlobs . push ( event . data ) ;
    }
} ; // 存放获取的数据
let buffer = new Blob ( recordedBlobs , {
    type : "video/webm"
} ) ;
console . log ( buffer ) ;
test . src = window . URL . createObjectURL ( buffer ) ;
recordStream = test . captureStream ( ) ;